/*
 * Motion definitions controlling page transitions, hover tilt effects and
 * decorative animations such as light sweeps and breathing pulses. These
 * animations rely exclusively on transform and opacity to maintain 60
 * frames per second performance. Reduced motion preferences are honoured.
 */
/* Page enter/leave animations */
.page-enter {
  opacity: 0;
  transform: translateZ(-220px) rotateY(6deg);
}
.page-enter-active {
  opacity: 1;
  transform: translateZ(0) rotateY(0);
  transition: transform var(--duration-slow) var(--easing),
    opacity var(--duration-medium) var(--easing);
}
.page-leave {
  opacity: 1;
  transform: translateZ(0) rotateY(0);
}
.page-leave-active {
  opacity: 0;
  transform: translateZ(60px) rotateY(-6deg);
  transition: transform var(--duration-slow) var(--easing),
    opacity var(--duration-medium) var(--easing);
}

/* Hover tilt effect: triggered via JS by setting custom properties */
[data-tilt] {
  will-change: transform;
  transition: transform var(--duration-fast) var(--easing);
  transform-style: preserve-3d;
}
[data-tilt]:hover {
  transform:
    translate3d(0, var(--reveal-y, 0px), 0)
    scale(var(--reveal-s, 1))
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg));
}

/* Light sweep overlay */
.light-sweep {
  position: relative;
  overflow: hidden;
}
.light-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 200%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  transform: translateZ(1px);
  animation: sweep 8s linear infinite;
  pointer-events: none;
}
@keyframes sweep {
  0% { transform: translateX(-150%) translateZ(1px); }
  100% { transform: translateX(150%) translateZ(1px); }
}

/* Breathing pulse */
.pulse {
  animation: pulse 10s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  .page-enter,
  .page-enter-active,
  .page-leave,
  .page-leave-active {
    transition: opacity var(--duration-fast) var(--easing) !important;
    transform: none !important;
  }
  .light-sweep::after,
  .pulse {
    animation: none !important;
  }
  [data-tilt]:hover {
    transform: none !important;
  }
}


.reveal-item {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.985);
  transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

.reveal-item[data-reveal='left'] {
  transform: translate3d(-22px, 0, 0) scale(0.99);
}

.reveal-item[data-reveal='right'] {
  transform: translate3d(22px, 0, 0) scale(0.99);
}

.reveal-item[data-reveal='down'] {
  transform: translate3d(0, -18px, 0) scale(0.99);
}

.reveal-item[data-reveal='zoom'] {
  transform: translate3d(0, 8px, 0) scale(0.965);
}

.reveal-item.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}