/* ==========================================================================
   Mission Me — motion
   Slow and breath-paced. Nothing moves to get attention.
   - The sky breathes: the colour column rises and settles over 14 s.
   - Type comes into focus, like the blurred type on the moodboard (Trell):
     blur and open tracking settle to sharp. Weight never jumps.
   - Accent words and changing numbers shift along the MONO axis.
   Entrances wait for `.is-live` on the screen (effects.js adds it when the
   screen scrolls into view), so they can be replayed. Reduced motion stops all of it.
   ========================================================================== */

/* ---- The sky breathes ----------------------------------------------------- */
.sky::before { animation: mm-sky var(--dur-sky) var(--ease-in-out) infinite alternate; transform-origin: 50% 100%; }
.sky--sunrise::before { transform-origin: 50% 0%; }
@keyframes mm-sky { from { transform: scaleY(1) scaleX(1); } to { transform: scaleY(1.05) scaleX(.97); } }

/* ---- Scenes drift ---------------------------------------------------------- */
.scene__img { animation: mm-drift var(--dur-drift) var(--ease-in-out) infinite alternate; }
.scene--haze .scene__img { animation-name: mm-drift-haze; }
@keyframes mm-drift      { from { transform: scale(1.02); } to { transform: scale(1.08) translate(-1%, -1%); } }
@keyframes mm-drift-haze { from { transform: scale(1.25); } to { transform: scale(1.35) translate(2%, -2%); } }

/* ---- Type comes into focus -------------------------------------------------- */
.t-in { opacity: 0; }
.is-live .t-in { animation: mm-focus var(--dur-scene) var(--ease-out) var(--delay, 0ms) both; }
@keyframes mm-focus {
  from { opacity: 0; filter: blur(12px); letter-spacing: .08em; }
  50%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0); }
}

/* ---- Morph: an accent word ("your filters") slides from sans to mono and back, very slowly */
.t-morph { animation: mm-morph 10s var(--ease-in-out) infinite; }
@keyframes mm-morph { 0%, 35%, 100% { --mono: 100; } 50%, 85% { --mono: 0; } }

/* ---- "Breathe" follows the circle: tracking opens and closes --------------- */
.t-breathe { animation: mm-type-breath calc(var(--dur-breath) * 2) var(--ease-in-out) infinite; }
/* In step with the circle: the word opens and fills as you breathe in */
@keyframes mm-type-breath { 0%, 100% { letter-spacing: 0; opacity: .6; font-weight: 400; } 50% { letter-spacing: .32em; opacity: 1; font-weight: 700; } }

/* ---- A changing number shifts through mono --------------------------------- */
.is-tick { animation: mm-tick 900ms var(--ease-out); }
@keyframes mm-tick { from { --mono: 100; opacity: .4; } to { --mono: 0; opacity: 1; } }

/* ---- Flip card: the back line comes into focus as it turns ---------------- */
.flip.is-flipped .flip__face--back > :last-child { animation: mm-focus var(--dur-slow) var(--ease-out) 200ms both; }

/* ---- Staggered entrances --------------------------------------------------- */
.t-stagger > * { opacity: 0; }
.is-live .t-stagger > * { animation: mm-focus var(--dur-slow) var(--ease-out) calc(var(--delay, 0ms) + var(--i, 0) * 90ms) both; }
.t-stagger > :nth-child(2) { --i: 1; } .t-stagger > :nth-child(3) { --i: 2; } .t-stagger > :nth-child(4) { --i: 3; }
.t-stagger > :nth-child(5) { --i: 4; } .t-stagger > :nth-child(6) { --i: 5; } .t-stagger > :nth-child(7) { --i: 6; }
.t-stagger > :nth-child(8) { --i: 7; } .t-stagger > :nth-child(9) { --i: 8; }

/* ---- Mosaic reveal over a scene (effects.js) --------------------------------- */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; image-rendering: pixelated; }
.screen > .fx, .panel > .fx { z-index: -1; }

/* ?still in the URL shows every screen in its settled state (reviews, screenshots) */
.is-still *, .is-still *::before { animation: none !important; transition: none !important; }
.is-still .t-in, .is-still .t-stagger > * { opacity: 1; }
.is-still .fx { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sky::before, .scene__img, .t-morph, .t-breathe, .breath::before { animation: none; }
  .t-in, .t-stagger > * { opacity: 1; animation: none !important; }
}