/* motion-app: the brand's motion applied (client tokens only). Every piece runs an 8s cycle:
   in, hold, out. Elements are visible by default, so reduced motion shows the finished frame. */
.ma{ position:absolute; inset:0; overflow:clip; font-family:var(--c-body); --cycle:8s; --e:cubic-bezier(0.23, 1, 0.32, 1); }
.ma.is-playing *{ animation-duration:var(--cycle); animation-iteration-count:infinite; animation-fill-mode:both; }
@media (prefers-reduced-motion: reduce){ .ma.is-playing *{ animation:none !important; } }

/* ---------- brand sting (16:9, full bleed) ---------- */
.ma-sting{ position:absolute; inset:0; background:var(--c-brand-1); color:var(--c-on-brand-1); }
.ma-atmos{ position:absolute; inset:-20%; filter:blur(70px); opacity:.85;
  background:radial-gradient(ellipse at 30% 70%, color-mix(in srgb, var(--c-accent) 45%, transparent), transparent 45%),
             radial-gradient(ellipse at 72% 28%, color-mix(in srgb, var(--c-brand-3) 55%, transparent), transparent 50%),
             radial-gradient(ellipse at 50% 50%, var(--c-brand-2), transparent 60%); }
/* the reveal (once): black, with one low accent glow behind the name */
.ma--once .ma-atmos{ inset:0; filter:none; opacity:1; background:radial-gradient(ellipse 42% 34% at calc(var(--vx) + var(--vw) / 2) 50%, color-mix(in srgb, var(--c-reveal, var(--c-accent)) 16%, transparent), transparent 70%); }
.ma--once.is-playing .ma-atmos{ animation:none !important; }
.ma--once .ma-lockup--int .wm-end{ color:var(--c-reveal, var(--c-accent)); }      /* the 8 lands in the accent */
.ma--once .ma-lockup--int svg{ height:132px; }
/* the reveal on a photograph: the image dimmed and pushing in, the name small and low, the 8 the only colour */
.ma-bg{ position:absolute; inset:0; }
.ma-bg .ph{ position:absolute; inset:0; }
.ma-bg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.52) contrast(1.1); }
.ma.is-playing .ma-bg{ animation:ma-push 14s cubic-bezier(.2, 0, .1, 1) both !important; animation-iteration-count:1 !important; }
@keyframes ma-push{ from{ scale:1.08; } to{ scale:1; } }
.ma-sting--photo .ma-atmos{ display:none; }
.ma-sting--photo::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 45% at 50% 50%, rgba(0,0,0,.35), transparent 75%); pointer-events:none; }
.ma-sting--photo .ma-view{ z-index:1; }
.ma--once .ma-sting--photo .ma-lockup--int svg{ height:150px; filter:drop-shadow(0 6px 30px rgba(0,0,0,.45)); }
.ma.is-playing .ma-atmos{ animation:ma-drift 16s ease-in-out infinite alternate !important; }
.ma-view{ position:absolute; left:var(--vx); width:var(--vw); top:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:left .7s var(--ease), width .7s var(--ease); }
.ma-lockup{ display:flex; align-items:center; gap:24px; }
.ma-sym{ width:112px; height:112px; display:block; }
.ma-sym svg{ width:100%; height:100%; display:block; fill:currentColor; } .ma-sym svg path{ fill:currentColor; }
.ma-name{ font:800 96px/.9 var(--c-display); letter-spacing:-.045em; }
.ma-line{ margin:0; font:500 20px/1.3 var(--c-body); opacity:.8; }
.ma.is-playing .ma-sym{ animation-name:ma-fill; }
.ma.is-playing .ma-name{ animation-name:ma-rise-1; }
.ma.is-playing .ma-line{ animation-name:ma-rise-2; }
/* an integrated wordmark (logo.integrated): the letters rise one after another, then the symbol (its last letter) fills up */
.ma-lockup--int svg{ height:104px; width:auto; display:block; fill:currentColor; overflow:visible; }
.ma-lockup--int .wm-part{ transform-box:fill-box; transform-origin:50% 100%; }
.ma.is-playing .ma-lockup--int .wm-part{ animation-name:ma-rise-1; animation-delay:calc(var(--i) * 70ms - 600ms); }
.ma.is-playing .ma-lockup--int .wm-end{ animation-name:ma-eight; animation-delay:0s; }

/* ---------- story (9:16) ---------- */
.ma-storystage{ position:absolute; left:var(--vx); width:var(--vw); top:33px; bottom:calc(33px + 40px * var(--ui, 1) + 24px); display:grid; place-items:center;
  transition:left .7s var(--ease), width .7s var(--ease); }
.ma-story{ position:relative; height:100%; aspect-ratio:9 / 16; border-radius:18px; overflow:hidden; background:#000; color:#fff; container-type:size;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55); font-family:-apple-system, "Helvetica Neue", Arial, sans-serif; }
.ma-photo{ position:absolute; inset:0; } .ma-photo .ph{ position:absolute; inset:0; }
.ma-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), transparent 20%, transparent 45%, rgba(0,0,0,.6)); }
.ma-bar{ position:absolute; left:10px; right:10px; top:10px; height:2px; border-radius:2px; background:rgba(255,255,255,.35); overflow:hidden; }
.ma-bar i{ position:absolute; inset:0; background:#fff; transform-origin:0 50%; }
.ma-head{ position:absolute; left:12px; right:12px; top:22px; display:flex; align-items:center; gap:8px; font-size:12px; }
.ma-head b{ font-weight:600; } .ma-head small{ opacity:.8; font-size:11px; }
.ma-av{ width:28px; height:28px; border-radius:50%; background:var(--c-brand-1); color:var(--c-on-brand-1); display:grid; place-items:center; box-shadow:0 0 0 2px #fff; }
.ma-av svg{ width:58%; height:58%; fill:currentColor; } .ma-av svg path{ fill:currentColor; }
.ma-copy{ position:absolute; left:8cqw; right:8cqw; bottom:22cqh; display:flex; flex-direction:column; gap:3cqw; font-family:var(--c-body); }
.ma-h{ margin:0; display:flex; flex-direction:column; font:300 11cqw/.96 var(--c-display); letter-spacing:-.05em; }
.ma-s{ margin:0; font:400 4cqw/1.35 var(--c-body); opacity:.88; }
.ma-cta{ position:absolute; left:50%; bottom:7cqh; transform:translateX(-50%); padding:3cqw 6cqw; border-radius:999px; background:#fff; color:#0c0c0c;
  font-weight:600; font-size:4cqw; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.ma.is-playing .ma-photo{ animation-name:ma-kenburns; animation-timing-function:linear; }
.ma.is-playing .ma-bar i{ animation-name:ma-progress; animation-timing-function:linear; }
.ma.is-playing .ma-head{ animation-name:ma-fade; }
.ma.is-playing .ma-l1{ animation-name:ma-rise-1; }
.ma.is-playing .ma-l2{ animation-name:ma-rise-2; }
.ma.is-playing .ma-s{ animation-name:ma-rise-3; }
.ma.is-playing .ma-cta{ animation-name:ma-land; }

/* ---------- replay: chrome on the bottom margin (NOIZE font, stage colours) ---------- */
.ma-replay{ position:absolute; right:33px; bottom:33px; height:40px; padding:0 16px 0 13px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
  background:color-mix(in srgb, var(--stage-fg) 12%, transparent); color:var(--stage-fg); font:var(--t-control); font-family:var(--shell);
  scale:var(--ui, 1); transform-origin:100% 100%; transition:background-color .2s; }
.ma-replay:hover{ background:color-mix(in srgb, var(--stage-fg) 20%, transparent); }
.ma-replay svg{ width:14px; height:14px; }

/* ---------- the moves: rise, fill, drift (percentages of the 8s cycle) ---------- */
@keyframes ma-drift{ from{ transform:translate(-3%, 1%) scale(1.06); } to{ transform:translate(3%, -1%) scale(1); } }
@keyframes ma-fill{
  0%, 6%{ clip-path:inset(100% 0 0 0); opacity:1; animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1); }
  24%, 84%{ clip-path:inset(0 0 0 0); opacity:1; }
  92%, 100%{ clip-path:inset(0 0 0 0); opacity:0; } }
@keyframes ma-rise-1{
  0%, 18%{ opacity:0; transform:translateY(14px); animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1); }
  32%, 84%{ opacity:1; transform:none; }
  92%, 100%{ opacity:0; transform:none; } }
@keyframes ma-rise-2{
  0%, 26%{ opacity:0; transform:translateY(14px); animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1); }
  40%, 84%{ opacity:1; transform:none; }
  92%, 100%{ opacity:0; transform:none; } }
@keyframes ma-rise-3{
  0%, 34%{ opacity:0; transform:translateY(14px); animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1); }
  48%, 84%{ opacity:1; transform:none; }
  92%, 100%{ opacity:0; transform:none; } }
@keyframes ma-land{
  0%, 44%{ opacity:0; transform:translateX(-50%) translateY(10px) scale(.94); animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1); }
  56%, 84%{ opacity:1; transform:translateX(-50%); }
  92%, 100%{ opacity:0; transform:translateX(-50%); } }
@keyframes ma-eight{
  0%, 30%{ opacity:0; transform:translateY(10px) scale(.9); animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1); }
  44%, 84%{ opacity:1; transform:none; }
  92%, 100%{ opacity:0; transform:none; } }
@keyframes ma-fade{ 0%, 4%{ opacity:0; } 12%, 84%{ opacity:1; } 92%, 100%{ opacity:0; } }
@keyframes ma-kenburns{ 0%{ transform:scale(1.14); opacity:1; } 88%{ transform:scale(1); opacity:1; } 96%, 100%{ transform:scale(1); opacity:0; } }
@keyframes ma-progress{ 0%{ transform:scaleX(0); } 92%, 100%{ transform:scaleX(1); } }

/* ---------- once: the brand reveal plays in and holds (Replay runs it again) ---------- */
.ma--once.is-playing *{ animation-iteration-count:1; }
.ma--once.is-playing .ma-sym{ animation-name:ma-fill-in; }
.ma--once.is-playing .ma-name{ animation-name:ma-rise-1-in; }
.ma--once.is-playing .ma-line{ animation-name:ma-rise-2-in; }
.ma--once.is-playing .ma-lockup--int .wm-part{ animation-name:ma-rise-1-in; }
.ma--once.is-playing .ma-lockup--int .wm-end{ animation-name:ma-eight-in; }
@keyframes ma-eight-in{ 0%, 30%{ opacity:0; transform:translateY(10px) scale(.9); animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1); } 44%, 100%{ opacity:1; transform:none; } }
@keyframes ma-fill-in{ 0%, 6%{ clip-path:inset(100% 0 0 0); animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1); } 24%, 100%{ clip-path:inset(0 0 0 0); } }
@keyframes ma-rise-1-in{ 0%, 18%{ opacity:0; transform:translateY(14px); animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1); } 32%, 100%{ opacity:1; transform:none; } }
@keyframes ma-rise-2-in{ 0%, 26%{ opacity:0; transform:translateY(14px); animation-timing-function:cubic-bezier(0.23, 1, 0.32, 1); } 40%, 100%{ opacity:1; transform:none; } }
/* the reveal on a photograph: the logo simply there, no letter animation, and nothing to replay;
   only the photograph moves (the slow push-in) */
.ma--once .ma-sting--photo .wm-part{ animation:none !important; }
.ma--once:has(.ma-sting--photo) .ma-replay{ display:none; }

/* the reveal as a montage: coaching moments cut on the beat, the last holds, then the name */
.ma-sting--montage{ background:#000; }
.ma-cut{ position:absolute; inset:0; opacity:0; }
.ma-cut .ph{ position:absolute; inset:0; }
.ma-cut img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.78) contrast(1.15); }
.ma-cut.is-last img{ filter:grayscale(1) brightness(.5) contrast(1.1); }
.ma.is-playing .ma-cut{ animation:ma-cut .42s linear calc(.15s + var(--k) * .42s) forwards; }
.ma.is-playing .ma-cut.is-last{ animation:ma-hold 12s cubic-bezier(.2, 0, .1, 1) calc(.15s + var(--k) * .42s) forwards; }
@keyframes ma-cut{ 0%{ opacity:1; scale:1.06; } 99%{ opacity:1; scale:1; } 100%{ opacity:0; } }
@keyframes ma-hold{ 0%{ opacity:1; scale:1.14; } 100%{ opacity:1; scale:1; } }
.ma--once .ma-sting--montage .ma-lockup--int svg{ height:150px; filter:drop-shadow(0 6px 30px rgba(0,0,0,.45)); }
.ma--once.is-playing .ma-sting--montage .ma-lockup{ animation:ma-name-in 1s cubic-bezier(0.23, 1, 0.32, 1) 2.2s both; }
.ma--once.is-playing .ma-sting--montage .wm-part{ animation:none; }
.ma--once.is-playing .ma-sting--montage .wm-end{ animation:ma-eight-late .7s cubic-bezier(0.23, 1, 0.32, 1) 2.75s both; }
@keyframes ma-name-in{ from{ opacity:0; translate:0 18px; } }
@keyframes ma-eight-late{ from{ opacity:0; scale:.85; translate:0 10px; } }
@media (prefers-reduced-motion: reduce){ .ma-cut.is-last{ opacity:1; } .ma-sting--montage .ma-lockup, .ma-sting--montage .wm-end{ animation:none !important; } }
.ma-cut{ z-index:1; } .ma-cut.is-last{ z-index:0; opacity:1; }
.ma-sting--montage .ma-view{ z-index:2; }