/* ============================================================
   IGNOTUSLABS — motion.css
   Motion language: fade, translate, mask reveal.
   Only calm easings. No bounce / elastic / spin / zoom.
   ============================================================ */

/* ------------------------------------------------------------
   Reveal primitives
   ------------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-quiet),
    transform var(--dur-slow) var(--ease-quiet);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="fade"] {
  transform: translateY(0);
}

[data-reveal="rise"] {
  transform: translateY(1.5rem);
}

[data-reveal="sink"] {
  transform: translateY(-1.5rem);
}

[data-reveal="mask"] {
  clip-path: inset(0 0 100% 0);
  transition: opacity var(--dur-slow) var(--ease-quiet),
    clip-path var(--dur-slow) var(--ease-emphasis);
  transition-delay: var(--reveal-delay, 0ms);
}

.is-revealed[data-reveal] {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
}

/* Stagger helper */
[data-reveal-delay="1"] { --reveal-delay: 80ms; }
[data-reveal-delay="2"] { --reveal-delay: 160ms; }
[data-reveal-delay="3"] { --reveal-delay: 240ms; }
[data-reveal-delay="4"] { --reveal-delay: 320ms; }
[data-reveal-delay="5"] { --reveal-delay: 400ms; }
[data-reveal-delay="6"] { --reveal-delay: 480ms; }

/* ------------------------------------------------------------
   Hero entrance
   ------------------------------------------------------------ */

.hero [data-hero] {
  opacity: 0;
  transform: translateY(0.75rem);
  animation: heroIn var(--dur-glacial) var(--ease-quiet) forwards;
}

.hero [data-hero="1"] { animation-delay: 200ms; }
.hero [data-hero="2"] { animation-delay: 700ms; }
.hero [data-hero="3"] { animation-delay: 1200ms; }
.hero [data-hero="4"] { animation-delay: 1700ms; }

@keyframes heroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------
   Glyph stage breathing — imperceptible, never pulsing
   ------------------------------------------------------------ */

.glyph__stage-breath {
  animation: stageBreath 14s var(--ease-quiet) infinite alternate;
}

@keyframes stageBreath {
  from { transform: translateY(-0.4%); }
  to   { transform: translateY(0.4%); }
}

/* ------------------------------------------------------------
   Explore indicator — slow descent cue
   ------------------------------------------------------------ */

.explore__line {
  animation: lineFall 3.6s var(--ease-quiet) infinite;
  transform-origin: top;
}

@keyframes lineFall {
  0%   { transform: scaleY(0.2); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ------------------------------------------------------------
   Page load overlay — quiet curtain
   ------------------------------------------------------------ */

.veil {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--color-bg);
  pointer-events: none;
  animation: veilLift var(--dur-glacial) var(--ease-quiet) forwards;
}

@keyframes veilLift {
  to { opacity: 0; visibility: hidden; }
}

/* ------------------------------------------------------------
   Companion glyph — drifts in as hero is left
   ------------------------------------------------------------ */

.companion svg {
  animation: stageBreath 18s var(--ease-quiet) infinite alternate;
}

/* ------------------------------------------------------------
   Active nav link indicator
   ------------------------------------------------------------ */

.nav__link::after {
  transition: transform var(--dur-base) var(--ease-quiet);
}