/* =================================================================
   animations.css — keyframes, triggered entrance animations
   ================================================================= */

/* ---------------------------------------------------------------
   Section 1 — ORIGIN
   --------------------------------------------------------------- */

@keyframes origin-letter-draw {
  0%   { stroke-dashoffset: 1400; fill: transparent; }
  70%  { stroke-dashoffset: 0;    fill: transparent; }
  100% { stroke-dashoffset: 0;    fill: url(#gold-gradient); }
}

.page--origin.is-revealed .origin__letter-path {
  animation: origin-letter-draw 2400ms var(--ease-out-smooth) forwards;
}

@keyframes origin-title-rise {
  0%   { opacity: 0; transform: translateY(10px); letter-spacing: 0.3em; }
  100% { opacity: 1; transform: translateY(0);    letter-spacing: 0.02em; }
}

.page--origin .origin__title {
  opacity: 0;
  transform: translateY(10px);
}
.page--origin.is-revealed .origin__title {
  animation: origin-title-rise 1400ms var(--ease-out-smooth) 400ms forwards;
}

@keyframes origin-chevron-float {
  0%, 100% { transform: translateY(0);    opacity: 0.7; }
  50%      { transform: translateY(6px);  opacity: 1;   }
}

.page--origin.is-revealed .origin__chevron {
  animation: origin-chevron-float 2200ms var(--ease-elegant) 2200ms infinite;
}

/* ---------------------------------------------------------------
   Section 2 — ANATOMY
   --------------------------------------------------------------- */

@keyframes anatomy-line-draw {
  0%   { stroke-dashoffset: 240; }
  100% { stroke-dashoffset: 0;   }
}

@keyframes anatomy-label-fade {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0);   }
}

.page--anatomy.is-active .anatomy__line {
  animation: anatomy-line-draw 1100ms var(--ease-out-smooth) forwards;
}
.page--anatomy.is-active .anatomy__line[data-delay="0"]   { animation-delay: 0ms;   }
.page--anatomy.is-active .anatomy__line[data-delay="180"] { animation-delay: 180ms; }
.page--anatomy.is-active .anatomy__line[data-delay="360"] { animation-delay: 360ms; }
.page--anatomy.is-active .anatomy__line[data-delay="540"] { animation-delay: 540ms; }

.page--anatomy.is-active .anatomy__label {
  animation: anatomy-label-fade 700ms var(--ease-elegant) forwards;
}
.page--anatomy.is-active .anatomy__label:nth-child(1) { animation-delay: 800ms;  }
.page--anatomy.is-active .anatomy__label:nth-child(2) { animation-delay: 980ms;  }
.page--anatomy.is-active .anatomy__label:nth-child(3) { animation-delay: 1160ms; }
.page--anatomy.is-active .anatomy__label:nth-child(4) { animation-delay: 1340ms; }

@keyframes anatomy-glyph-fade {
  0%   { opacity: 0; transform: translateY(10px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

.page--anatomy .anatomy__glyph {
  opacity: 0;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.page--anatomy.is-active .anatomy__glyph {
  animation: anatomy-glyph-fade 1200ms var(--ease-out-smooth) forwards;
}

@keyframes anatomy-title-rise {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0);    }
}

.page--anatomy .anatomy__title,
.page--anatomy .anatomy__eyebrow,
.page--anatomy .anatomy__columns {
  opacity: 0;
  transform: translateY(12px);
}

.page--anatomy.is-active .anatomy__eyebrow { animation: anatomy-title-rise 900ms var(--ease-out-smooth) 200ms forwards; }
.page--anatomy.is-active .anatomy__title   { animation: anatomy-title-rise 900ms var(--ease-out-smooth) 380ms forwards; }
.page--anatomy.is-active .anatomy__columns { animation: anatomy-title-rise 900ms var(--ease-out-smooth) 560ms forwards; }

/* ---------------------------------------------------------------
   Section 3 — RHYTHM
   --------------------------------------------------------------- */

@keyframes rhythm-glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1);    }
  50%      { opacity: 0.9; transform: scale(1.05); }
}

.page--rhythm.is-active .rhythm__glow {
  animation: rhythm-glow-pulse 6s var(--ease-elegant) infinite;
}

/* entrance for title */
@keyframes rhythm-header-fade {
  0%   { opacity: 0; transform: translate(-50%, -8px); }
  100% { opacity: 1; transform: translate(-50%, 0);    }
}

.page--rhythm .rhythm__header {
  opacity: 0;
  transform: translate(-50%, -8px);
}
.page--rhythm.is-active .rhythm__header {
  animation: rhythm-header-fade 900ms var(--ease-out-smooth) forwards;
}

/* ---------------------------------------------------------------
   Section 4 — FUTURE
   --------------------------------------------------------------- */

@keyframes mesh-drift {
  0%   { background-position: 0% 0%,   100% 100%, 50% 50%, 0% 0%; }
  100% { background-position: 100% 50%, 0% 30%,   55% 60%, 100% 100%; }
}

@keyframes future-header-rise {
  0%   { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

.page--future .future__header,
.page--future .future__breathing,
.page--future .future__stats {
  opacity: 0;
  transform: translateY(12px);
}

.page--future.is-active .future__header    { animation: future-header-rise 1000ms var(--ease-out-smooth) 100ms forwards; }
.page--future.is-active .future__breathing { animation: future-header-rise 1200ms var(--ease-out-smooth) 320ms forwards; }
.page--future.is-active .future__stats     { animation: future-header-rise 1000ms var(--ease-out-smooth) 560ms forwards; }

@keyframes future-border-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(0, 245, 212, 0.14), inset 0 0 0 1px rgba(181, 55, 242, 0.16); }
  50%      { box-shadow: 0 0 48px rgba(0, 245, 212, 0.25), inset 0 0 0 1px rgba(181, 55, 242, 0.30); }
}

.page--future.is-active .future__breathing {
  animation:
    future-header-rise 1200ms var(--ease-out-smooth) 320ms forwards,
    future-border-glow 4.5s    var(--ease-elegant)   1600ms infinite;
}

/* ---------------------------------------------------------------
   Section 5 — EPILOGUE
   --------------------------------------------------------------- */

@keyframes epilogue-inner-fade {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0);    }
}

.page--epilogue .epilogue__eyebrow,
.page--epilogue .epilogue__cite,
.page--epilogue .epilogue__credits {
  opacity: 0;
  transform: translateY(12px);
}

.page--epilogue.is-active .epilogue__eyebrow { animation: epilogue-inner-fade 900ms var(--ease-out-smooth) 200ms forwards; }
.page--epilogue.is-active .epilogue__cite    { animation: epilogue-inner-fade 900ms var(--ease-out-smooth) 1200ms forwards; }
.page--epilogue.is-active .epilogue__credits { animation: epilogue-inner-fade 900ms var(--ease-out-smooth) 1500ms forwards; }

/* ---------------------------------------------------------------
   Dot nav — active pulse
   --------------------------------------------------------------- */

@keyframes dot-pulse {
  0%, 100% { transform: scale(1.6); }
  50%      { transform: scale(1.8); }
}

.dot-nav__dot.is-active {
  animation: dot-pulse 2.4s var(--ease-elegant) infinite;
}