/* === ANIMATION FOUNDATION === */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal],
  .hero__word {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Utility keyframes */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes clipWipe {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes heroKenBurns {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.anim-fade-up {
  animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both paused;
}

.anim-fade-in {
  animation: fadeIn 0.6s ease both paused;
}

.anim-clip-wipe {
  animation: clipWipe 0.8s cubic-bezier(0.22, 1, 0.36, 1) both paused;
}

.anim-scale-in {
  animation: scaleIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both paused;
}

.anim-slide-left {
  animation: slideLeft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both paused;
}

.anim-slide-right {
  animation: slideRight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both paused;
}

/* Stagger helpers */
.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-500 {
  animation-delay: 0.5s;
}

.delay-600 {
  animation-delay: 0.6s;
}

/* Scroll-reveal base — elements start hidden until JS adds .is-visible */
[data-reveal] {
  opacity: 0;
}

[data-reveal].is-visible {
  animation-play-state: running;
  animation-fill-mode: both;
}

/* Hero cinematic entrance */
.hero__word {
  display: inline-block;
  opacity: 0;
}

.hero__visual img.hero-bg {
  animation: heroKenBurns 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* Portfolio / carousel hover lift */
.carousel__slide img {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}

.carousel__slide:hover img {
  transform: scale(1.03);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* FAQ accordion panel fade */
.faq__item[open] .faq__panel p {
  animation: fadeIn 0.35s ease both;
}

/* Micro-interactions */
.btn,
button,
[class*='btn'] {
  transition: transform 0.2s, box-shadow 0.2s, background-color var(--transition-base, 0.25s ease),
    color var(--transition-base, 0.25s ease);
}

.btn:hover,
button:hover,
[class*='btn']:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

a:not(.btn):not([class*='btn']) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.3s;
}

a:not(.btn):not([class*='btn']):hover {
  background-size: 100% 1px;
}

.card,
[class*='card'] {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}

.card:hover,
[class*='card']:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* Day journey ambient motion */
@keyframes dayMeshDrift {
  from {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  to {
    transform: translate(3%, -2%) rotate(3deg) scale(1.04);
  }
}

@keyframes dayRingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .day-journey__mesh,
  .day-journey__stage-ring {
    animation: none;
  }

  .day-journey__orb {
    transform: none !important;
  }
}

/* Scroll-driven parallax for hero background */
@supports (animation-timeline: scroll()) {
  .hero-bg,
  .hero__visual img.hero-bg {
    animation: heroParallax linear both, heroKenBurns 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
    animation-timeline: scroll(root), auto;
    animation-range: 0 50vh, normal;
  }

  @keyframes heroParallax {
    from {
      transform: translateY(0) scale(1);
    }
    to {
      transform: translateY(30px) scale(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__visual img.hero-bg {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .carousel__slide:hover img {
    transform: none;
    box-shadow: none;
  }

  .card:hover,
  [class*='card']:hover,
  .day-moment__card:hover,
  .btn:hover,
  button:hover,
  [class*='btn']:hover {
    transform: none;
    box-shadow: none;
  }
}