/* ============================================================
   TRANOVA — MOTION
   Rules (approved): ease-out only, 400–800ms transitions,
   200–300ms hovers, 100–150ms stagger, GPU transforms only.
   ============================================================ */

/* ---------- keyframes ---------- */

@keyframes blob-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vmax, 7vmax, 0) scale(1.18); }
}

@keyframes blob-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-8vmax, -6vmax, 0) scale(0.92); }
}

@keyframes blob-drift-c {
  from { transform: translate3d(0, 0, 0) scale(0.95); }
  to   { transform: translate3d(-6vmax, -9vmax, 0) scale(1.15); }
}

@keyframes o-morph {
  0%   { border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%; }
  50%  { border-radius: 54% 46% 42% 58% / 48% 54% 46% 52%; }
  100% { border-radius: 42% 58% 56% 44% / 56% 44% 50% 50%; }
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

@keyframes scroll-dash {
  0%   { transform: translateY(-110%); }
  55%  { transform: translateY(160%); }
  100% { transform: translateY(160%); }
}

/* ---------- hero load sequence ---------- */
/* elements start hidden; body.is-loaded plays the cascade */

.hero [data-load] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

.hero .line > span {
  transform: translateY(112%);
  transition: transform var(--dur-slow) var(--ease-out);
}

body.is-loaded .hero [data-load] {
  opacity: 1;
  transform: translateY(0);
}

body.is-loaded .hero .line > span {
  transform: translateY(0);
}

/* cascade timing */
body.is-loaded .hero [data-load="1"] { transition-delay: 60ms; }
body.is-loaded .hero .line--1 > span { transition-delay: 180ms; }
body.is-loaded .hero .line--2 > span { transition-delay: 300ms; }
body.is-loaded .hero .line--3 > span { transition-delay: 420ms; }
body.is-loaded .hero [data-load="2"] { transition-delay: 600ms; }
body.is-loaded .hero [data-load="3"] { transition-delay: 720ms; }
body.is-loaded .hero [data-load="4"] { transition-delay: 860ms; }
body.is-loaded .hero [data-load="5"] { transition-delay: 980ms; }

/* ---------- scroll-triggered reveals (IntersectionObserver) ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * var(--stagger));
}

[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- filter karya: fade-out → toggle → fade-in ---------- */

[data-reveal].card-fade,
.card-fade {
  opacity: 0;
  transition-duration: var(--dur-fast);
  transition-delay: 0ms;
}

.card-off {
  display: none;
}

/* ---------- reduced motion: everything lands instantly ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .hero [data-load],
  .hero .line > span,
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}