/* ==========================================================================
   TALEA — Motion
   Opacity. A 2px lift. Nothing louder.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

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

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}

[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 450ms; }

/* Hero load sequence: a single, deterministic timeline rather than several
   independent reveals. html.is-loaded is added on the next animation frame
   after paint; every element below just waits its turn.

     0.0s   dark
     0.8s   architecture   (corner marks)
     1.5s   logo           (the mark)
     2.2s   headline       (TALEA + tagline)
     3.0s   descriptor                                                */

.corner-mark,
.hero-mark,
.hero-wordmark,
.hero-tagline,
.hero-descriptor {
  opacity: 0;
  transition: opacity 1100ms var(--ease), transform 1100ms var(--ease);
}

.hero-mark,
.hero-wordmark,
.hero-tagline,
.hero-descriptor {
  transform: translateY(10px);
}

html.is-loaded .corner-mark {
  opacity: 0.55;
  transition-delay: 0.8s;
}

html.is-loaded .hero-mark {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.5s;
}

html.is-loaded .hero-wordmark,
html.is-loaded .hero-tagline {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2.2s;
}

html.is-loaded .hero-tagline { opacity: 0.82; }

html.is-loaded .hero-descriptor {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 3.0s;
}

@keyframes scrollDrip {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > *,
  .corner-mark, .hero-mark, .hero-wordmark, .hero-tagline, .hero-descriptor {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-tagline { opacity: 0.82 !important; }
  .scroll-cue .line::after { animation: none !important; display: none; }
}