/* =========================================================
   Studio Procrast — v2 motion layer
   Pairs with theme-dark.css and js/motion.js.
   Everything hidden is scoped to html.motion; no JS, nothing hides.
   ========================================================= */

/* ---------- hero: masked letter / line reveal ---------- */
.hero__title .ch,
.hero__title .word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  vertical-align: bottom;
}
.hero__title .ch__i,
.hero__title .word__i { display: inline-block; will-change: transform; }
.hero__title .ch--space { white-space: pre; }

html.motion .hero__title .ch__i,
html.motion .hero__title .word__i { transform: translateY(110%); }
html.motion .hero__sub,
html.motion .hero__actions { opacity: 0; transform: translateY(16px); }

html.motion .hero__l1 .ch__i {
  transition: transform 0.66s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0s);
}
html.motion .hero__l2 .word__i {
  transition: transform 0.36s cubic-bezier(0.34, 1.4, 0.64, 1);
  transition-delay: var(--d, 0s);
}
html.motion .hero__l3 .word__i {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
html.motion .hero__sub,
html.motion .hero__actions {
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
html.motion .hero.is-revealed .ch__i,
html.motion .hero.is-revealed .word__i { transform: translateY(0); }
html.motion .hero.is-revealed .hero__sub,
html.motion .hero.is-revealed .hero__actions { opacity: 1; transform: none; }

/* The bloom swells in behind the type as the page opens. */
html.motion .hero__bloom {
  opacity: 0;
  transform: translate3d(0, 5%, 0) scale(0.88);
}
html.motion .hero__bloom {
  transition: opacity 1.9s ease, transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}
html.motion .hero.is-revealed .hero__bloom {
  opacity: 1;
  transform: translate3d(calc(var(--mx, 0) * 26px), calc(var(--my, 0) * 18px), 0) scale(1.02);
}

html.motion .hero__cue { opacity: 0; transition: opacity 0.9s ease 1.9s; }
html.motion .hero.is-revealed .hero__cue { opacity: 1; }

/* slow drift once settled, so the bloom never sits perfectly still */
.hero.is-revealed .hero__bloom { animation: bloom-drift 24s ease-in-out 2.6s infinite alternate; }
@keyframes bloom-drift {
  0%   { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 2% -1%, -2% 1%, 1% 1%; }
}

/* ---------- stats ---------- */
html.motion .stats__eyebrow,
html.motion .stats__visual {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
html.motion .stats__visual { transform: scale(0.965); }
html.motion .stats.is-in .stats__eyebrow,
html.motion .stats.is-in .stats__visual { opacity: 1; transform: none; }

.odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: bottom; }
.odo__col { display: block; transform: translateY(var(--land, 0em)); }
html.motion .stats.is-in .odo__col {
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.odo__d { display: block; height: 1em; line-height: 1; }

html.motion .stat__rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
html.motion .stat__rule::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--d, 0s) + 0.38s);
}
html.motion .stat__label {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--d, 0s) + 0.24s);
}
html.motion .stats.is-in .stat__rule,
html.motion .stats.is-in .stat__rule::before { transform: scaleX(1); }
html.motion .stats.is-in .stat__label { opacity: 1; transform: none; }

/* ---------- prototype-only review control ---------- */
.replay {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 200;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--base);
  background: var(--warm);
  border: 0;
  border-radius: 8px;
  padding: 12px 18px;
  cursor: pointer;
}
.replay:hover { background: #fff; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.motion .hero__title .ch__i,
  html.motion .hero__title .word__i { transform: none !important; }
  html.motion .hero__sub,
  html.motion .hero__actions,
  html.motion .hero__bloom,
  html.motion .hero__cue,
  html.motion .stats__eyebrow,
  html.motion .stats__visual,
  html.motion .stat__label { opacity: 1 !important; transform: none !important; }
  html.motion .stat__rule,
  html.motion .stat__rule::before { transform: scaleX(1) !important; }

  .hero.is-revealed .hero__bloom { animation: none !important; }
  .hero__cue::after { animation: none !important; }

  html.motion .ch__i, html.motion .word__i, html.motion .odo__col,
  html.motion .stat__rule, html.motion .stat__label,
  html.motion .hero__bloom { transition: none !important; }
}