/* ==========================================================================
   Phixr — motion layer
   css/motion.css

   Adds movement only. Every rule here is scoped to html.motion (set by
   js/motion-init.js, never set for prefers-reduced-motion), and every
   animation ends on the element's own designed state — at rest the page is
   identical to the static design.

   Movement uses the individual `translate` / `scale` properties so it never
   overrides an element's existing `transform` (e.g. centred labels, hover).
   ========================================================================== */

@property --vp   { syntax: "<number>";     inherits: true;  initial-value: 1; }
@property --ring { syntax: "<percentage>"; inherits: false; initial-value: 100%; }

:root {
  --m-ease: cubic-bezier(.2, .7, .2, 1);
  --m-dur: 2.3s;   /* ≈ .9s × 2.6 (see SLOW in js/motion.js) */
}

@keyframes m-up    { from { opacity: 0; translate: 0 var(--m-y, 24px); } }
@keyframes m-fade  { from { opacity: 0; } }
@keyframes m-left  { from { opacity: 0; translate: -24px 0; } }
@keyframes m-right { from { opacity: 0; translate: 24px 0; } }
@keyframes m-scale { from { opacity: 0; scale: .94; } }
@keyframes m-wipe  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes m-dot   { from { opacity: 0; scale: .4; } }


/* ---------- 1. Hero — page-load sequence (pure CSS, ~4.5s) ---------- */
.motion .site-bar          { animation: m-fade 1.74s var(--m-ease) both; }
.motion .hero .kicker      { animation: m-up var(--m-dur) var(--m-ease) 0.26s both; }
.motion .hero h1           { --m-y: 25px; animation: m-up 2.61s var(--m-ease) 0.52s both; }
.motion .hero h1 span      { animation: m-fade 2.61s var(--m-ease) 1.04s both; }
.motion .hero-copy > p     { animation: m-up var(--m-dur) var(--m-ease) 1.30s both; }
.motion .hero-copy > p + p { animation-delay: 1.45s; }
.motion .hero .actions     { animation: m-up var(--m-dur) var(--m-ease) 1.74s both; }
.motion .hero-photo        { animation: m-fade 2.90s var(--m-ease) 0.87s both; }
.motion .hero .dotfield    { animation: m-fade 3.19s var(--m-ease) 2.17s both; }


/* ---------- Scroll reveals (classes assigned by js/motion.js) ----------
   .rv sits paused on its first frame (hidden) until .in is added.        */
.motion .rv {
  animation: var(--m-name, m-up) var(--m-t, var(--m-dur)) var(--m-ease) var(--d, 0s) both;
  animation-play-state: paused;
}
.motion .rv.in { animation-play-state: running; }

/* Owner paths: coral dot first, then its title + copy */
.motion .owner-path.rv-path::before,
.motion .owner-path.rv-path > * {
  animation: m-up 2s var(--m-ease) calc(var(--d, 0s) + .32s) both;
  animation-play-state: paused;
}
.motion .owner-path.rv-path::before { animation-name: m-dot; animation-delay: var(--d, 0s); }
.motion .owner-path.rv-path.in::before,
.motion .owner-path.rv-path.in > * { animation-play-state: running; }


/* ---------- 7. How Phixr creates value — line draws, capabilities light up ---------- */
.motion .v-inner:not(.in) { --vp: 0; }
.motion .v-inner { transition: --vp 6.5s cubic-bezier(.45, 0, .2, 1) .5s; }
.motion .v-art {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--vp) * 110% - 10%), rgba(0,0,0,.18) calc(var(--vp) * 110%));
          mask-image: linear-gradient(90deg, #000 calc(var(--vp) * 110% - 10%), rgba(0,0,0,.18) calc(var(--vp) * 110%));
}
.motion .v-inner .v-col { opacity: .3; transition: opacity 1.7s var(--m-ease) var(--d, 0s); }
.motion .v-inner.in .v-col { opacity: 1; }


/* ---------- 9. Acquisition process — plays once in view (desktop/tablet art) ----------
   The line draws left → right over ~7s; each stage brightens as the line
   reaches it (delays match the column grid); "The next chapter" arrives last. */
@property --pp { syntax: "<number>"; inherits: true; initial-value: 1; }
@media (min-width: 761px) {
  .motion .p-timeline:not(.in) { --pp: 0; }
  .motion .p-timeline { transition: --pp 7s linear .4s; }
  .motion .p-art {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--pp) * 112% - 12%), rgba(0,0,0,.16) calc(var(--pp) * 112%));
            mask-image: linear-gradient(90deg, #000 calc(var(--pp) * 112% - 12%), rgba(0,0,0,.16) calc(var(--pp) * 112%));
  }
  .motion .p-timeline .p-step { opacity: .3; transition: opacity 1.6s var(--m-ease) var(--d, 0s); }
  .motion .p-timeline.in .p-step { opacity: 1; }
  .motion .p-step:nth-child(1) { --d: .96s; }
  .motion .p-step:nth-child(2) { --d: 2.3s; }
  .motion .p-step:nth-child(3) { --d: 3.55s; }
  .motion .p-step:nth-child(4) { --d: 4.9s; }
  .motion .p-step:nth-child(5) { --d: 6.15s; }
  .motion .p-timeline .p-label { opacity: 0; transition: opacity 1.8s var(--m-ease) 7.1s; }
  .motion .p-timeline.in .p-label { opacity: 1; }
}


/* ---------- 10. Final CTA — existing coral ring is drawn once ---------- */
.motion .cta-box::after {
  -webkit-mask-image: conic-gradient(from 200deg, #000 var(--ring), transparent 0);
          mask-image: conic-gradient(from 200deg, #000 var(--ring), transparent 0);
  transition: --ring 4.5s cubic-bezier(.45, 0, .2, 1) 1.7s;
}
.motion .cta-box:not(.in)::after { --ring: 0%; }


/* ---------- Parallax targets: GPU hint only while motion is on ---------- */
.motion .hero-photo,
.motion .build-graphic,
.motion .founder-grid .photo,
.motion .owner-band,
.motion .p-halftone,
.motion .phil-curve { will-change: translate; }


/* ---------- Generic [data-reveal] (other pages) — hidden until js/motion.js tags it ---------- */
.motion [data-reveal]:not(.rv) { opacity: 0; }