/* =========================================
   SCROLL ANIMATIONS — LH TOKYO
   ========================================= */

/* Base state — hidden before reveal */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   1.0s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Triggered state */
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Portrait images — opacity-only fade (no position movement) */
.fade-image {
  opacity: 0;
  min-height: 1px; /* ensures IntersectionObserver detects the element even before image loads */
  transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-image.is-visible {
  opacity: 1;
}

/* Staggered delays */
.fd1 { transition-delay: 0.10s; }
.fd2 { transition-delay: 0.20s; }
.fd3 { transition-delay: 0.30s; }
.fd4 { transition-delay: 0.40s; }
.fd5 { transition-delay: 0.50s; }


/* =========================================
   HERO — CSS keyframe animations
   (triggered immediately on page load,
    not via IntersectionObserver)
   ========================================= */

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .reveal {
  opacity: 0;
  animation: revealUp 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero .reveal--d1 { animation-delay: 0.25s; }
.hero .reveal--d2 { animation-delay: 0.5s;  }
.hero .reveal--d3 { animation-delay: 0.8s;  }


/* =========================================
   MOBILE — lighter & earlier animation
   ========================================= */
@media (max-width: 767px) {
  /* Shorter duration + smaller lift on narrow screens */
  .fade-up {
    transform: translateY(14px);
    transition:
      opacity   0.75s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Compressed stagger — avoids "batchy" cascade on short screens */
  .fd1 { transition-delay: 0.04s; }
  .fd2 { transition-delay: 0.08s; }
  .fd3 { transition-delay: 0.12s; }
  .fd4 { transition-delay: 0.16s; }
  .fd5 { transition-delay: 0.20s; }

  /* Hero keyframe also slightly shorter on mobile */
  .hero .reveal {
    animation-duration: 0.85s;
  }
}


/* =========================================
   REDUCE MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-image,
  .hero .reveal {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}