/* =============================================================================
   STUDIO SEVEN — MOTION HERO ("the reel")                       homepage only
   Code-driven motion graphics that replace the hero MP4.
   Paired with assets/motion-hero.js. Loaded after site.css + motion.css.
   ========================================================================== */

/* Until the reel script takes over, keep the hero copy hidden so it doesn't
   flash before scene 1. Failsafe: if the script never runs, it fades in. */
html.s7m-pending .hero-v5-overlay > * {
  opacity: 0;
  animation: s7mFailsafe .6s ease 2.4s forwards;
}
@keyframes s7mFailsafe { to { opacity: 1; } }

.hero-v5-card {
  --s7m-fg: #ffffff;
  --s7m-ink: #0c0d12;
  --s7m-violet: #5b40f2;
  --s7m-lav: #c9c2f5;
  isolation: isolate;
}
/* the old video layer is gone; keep these inert if they ever come back */
.hero-v5-card .hero-v5-video,
.hero-v5-card .hero-v5-tint { display: none; }

/* ---------------------------------------------------------------- stage -- */
.s7m {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--s7m-ink);
  color: var(--s7m-fg);
  container-type: size;           /* every size below is relative to the card */
}
/* static fallback (no JS): a soft violet bloom where the 7 would be */
.s7m::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(42% 58% at 74% 44%, rgba(91, 64, 242, .30), transparent 72%);
  pointer-events: none;
}
.s7m.is-live::before { display: none; }

/* 03's ground — deep violet that sinks to black in the bottom-left corner,
   with a soft white light breaking in from the top-right. The full stop
   opens into it (clip-path circle, set by the script). */
.s7m-bg3 {
  position: absolute;
  inset: 0;
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 62% at 100% 0%, rgba(255, 255, 255, .86) 0%, rgba(240, 236, 255, .56) 12%, rgba(190, 172, 255, .26) 32%, rgba(140, 110, 255, .08) 52%, rgba(120, 90, 255, 0) 68%),
    radial-gradient(60% 72% at 56% 46%, rgba(84, 44, 208, .42) 0%, rgba(60, 28, 160, .24) 44%, rgba(40, 18, 120, 0) 78%),
    linear-gradient(to bottom left, #2a1488 0%, #1e0e68 22%, #140948 44%, #0b0529 66%, #040213 84%, #010105 100%);
}

.s7m-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.s7m-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.s7m-scene > * { will-change: transform; }

/* legibility scrim for the resolved state — sits under the copy, over the 7 */
.s7m-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(12, 13, 18, .72) 0%, rgba(12, 13, 18, .38) 38%, rgba(12, 13, 18, 0) 62%);
}
@container (orientation: portrait) {
  .s7m-scrim {
    background: linear-gradient(180deg, rgba(12, 13, 18, 0) 18%, rgba(12, 13, 18, .55) 46%, rgba(12, 13, 18, .88) 72%);
  }
}

/* ---------------------------------------------------------- kinetic type -- */
.s7m-type {
  font-family: 'Geist', -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: -.058em;
  line-height: .86;
  color: var(--s7m-fg);
}
.s7m-line {
  position: relative;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  /* room for descenders + side bearings inside the mask */
  padding: .05em .09em .15em;
  margin: -.05em -.09em -.15em;
}
.s7m-ch { display: inline-block; will-change: transform; }

/* 01 — "Seven disciplines." */
.s7m-s1 .s7m-type { font-size: min(14.4cqw, 29cqh); }
.s7m-s1 .s7m-line:first-child { font-weight: 300; letter-spacing: -.045em; }
.s7m-bar {
  position: absolute;
  left: .09em;
  right: .38em;
  bottom: .13em;
  height: .075em;
  background: var(--s7m-lav);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* 02 — "One studio." bottom-left; the full stop opens into the wheel */
/* same spot and size as "Seven disciplines." */
.s7m-s2 .s7m-type { font-size: min(14.4cqw, 29cqh); }
.s7m-s2 .s7m-line:first-child { font-weight: 300; letter-spacing: -.045em; }
.s7m-dot {
  display: inline-block;
  width: .2em;
  height: .2em;
  margin-left: .035em;
  border-radius: 50%;
  background: #8f80ff;
  transform-origin: 50% 50%;
}

/* 03 — the wheel of seven: ring of names, an animation in the middle, a caption */
.s7m-s3 { display: block; }
.s7m-wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88cqmin;
  height: 88cqmin;
  margin: -44cqmin 0 0 -44cqmin;
}
@container (orientation: portrait) {
  .s7m-wheel { top: 40%; }
}
.s7m-ring {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #fff;
}
.s7m-ring text {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 5.3px;
  letter-spacing: .06em;
  fill: currentColor;
}
.s7m-ring-sep { fill: currentColor; opacity: .5; }
@container (orientation: portrait) {
  .s7m-ring text { font-size: 6px; letter-spacing: .03em; }
}
/* the per-discipline animation sits inside the ring, lifted to leave room for the caption */
.s7m-mini {
  position: absolute;
  left: 21%;
  top: 22.5%;
  width: 58%;
  height: 38.667%;
  overflow: visible;
}
@container (orientation: portrait) {
  .s7m-mini { left: 22%; width: 56%; height: 37.333%; top: 31.333%; }
}
.s7m-mini text { font-kerning: normal; }
.s7m-caps {
  position: absolute;
  left: 50%;
  top: calc(50% + 13.5cqmin);
  width: 64cqmin;
  margin-left: -32cqmin;
  color: #fff;
  text-align: center;
}
.s7m-cap-i { position: absolute; left: 0; right: 0; top: 0; }
.s7m-cap-n {
  font: 500 max(9px, 1.2cqmin)/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .32em;
  padding-left: .32em;
  margin-bottom: 1.5cqmin;
}
.s7m-cap-t {
  font: 600 4.8cqmin/1 'Geist', -apple-system, sans-serif;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.s7m-cap-t .s7m-line { display: inline-block; }
@container (orientation: portrait) {
  .s7m-caps { top: calc(40% + 47cqmin); width: 94cqw; margin-left: -47cqw; }
  .s7m-cap-n { font-size: 2.5cqw; margin-bottom: 2.4cqw; }
  .s7m-cap-t { font-size: 8.4cqw; }
}

/* 04 — the wordmark draws itself */
.s7m-s4 { background: #ffffff; }
.s7m-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.6cqmin;
}
.s7m-wm {
  display: block;
  width: min(66cqw, 104cqh);
  height: auto;
  overflow: visible;
}
@container (orientation: portrait) {
  .s7m-wm { width: 82cqw; }
}
.s7m-wm-fill  { fill: var(--s7m-ink); fill-opacity: 0; }
.s7m-wm-seven { fill: var(--s7m-violet); fill-opacity: 0; }
.s7m-wm-line {
  fill: none;
  stroke: var(--s7m-ink);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.s7m-kicker {
  font: 500 max(9px, 1.18cqw)/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .52em;
  padding-left: .52em;              /* optically recentre the tracked caps */
  text-transform: uppercase;
  color: var(--s7m-ink);
  white-space: nowrap;
}
@container (orientation: portrait) {
  .s7m-kicker { font-size: 2.6cqw; letter-spacing: .44em; }
}

/* 05 — growth: the numbers count up over a trend line drawing itself */
.s7m-trend {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.s7m-trend-line {
  fill: none;
  stroke: var(--s7m-ink);
  stroke-opacity: .2;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.s7m-trend-area { fill: var(--s7m-ink); fill-opacity: .05; }
.s7m-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.4cqw;
  width: 84cqw;
}
.s7m-stat { display: flex; flex-direction: column; }
.s7m-rule {
  display: block;
  height: 2px;
  background: var(--s7m-fg);
  transform-origin: 0 50%;
}
.s7m-num {
  margin-top: 2.2cqmin;
  font: 600 min(10.6cqw, 25cqh)/.88 'Geist', sans-serif;
  letter-spacing: -.058em;
  color: var(--s7m-fg);
  white-space: nowrap;
}
.s7m-num small {
  font-size: .5em;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-left: .05em;
}
.s7m-lbl {
  margin-top: 1.8cqmin;
  font: 500 max(9px, 1.02cqw)/1.35 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--s7m-fg);
  opacity: .72;
}
@container (orientation: portrait) {
  .s7m-stats { grid-template-columns: 1fr; gap: 5.6cqh; width: 78cqw; }
  .s7m-num { font-size: 16cqw; margin-top: 1.6cqh; }
  .s7m-lbl { font-size: 2.7cqw; margin-top: 1.1cqh; }
}

/* ---------------------------------------------------------------- chrome -- */
/* no script → no timecode/scene labels over the static fallback */
.s7m:not(.is-live) .s7m-chrome { display: none; }
/* the grain shows from first paint (it is the largest element, so the page's LCP lands early) */
.s7m-chrome {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  color: var(--s7m-fg);
  font: 500 max(9px, .74cqw)/1 'Geist Mono', ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.s7m-meta {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .9em;
  white-space: nowrap;
  opacity: .82;
  text-shadow: var(--s7m-cs, none);
}
.s7m-meta.tl { top: 26px; left: 30px; }
.s7m-meta.tr { top: 26px; right: 30px; font-variant-numeric: tabular-nums; }
.s7m-meta.bl { bottom: 26px; left: 30px; }
.s7m-idx { opacity: .55; }
.s7m-rec {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4a3d;
  animation: s7mRec 1.2s steps(1) infinite;
}
@keyframes s7mRec { 50% { opacity: .2; } }
.s7m-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid currentColor;
  opacity: .5;
}
.s7m-corner.tl { top: 14px; left: 14px; border-width: 1px 0 0 1px; }
.s7m-corner.tr { top: 14px; right: 14px; border-width: 1px 1px 0 0; }
.s7m-corner.bl { bottom: 14px; left: 14px; border-width: 0 0 1px 1px; }
.s7m-corner.br { bottom: 14px; right: 14px; border-width: 0 1px 1px 0; }
@container (max-width: 640px) {
  .s7m-chrome { font-size: 8.5px; letter-spacing: .13em; }
  .s7m-meta.tl { top: 17px; left: 18px; }
  .s7m-meta.tr { top: 17px; right: 18px; }
  .s7m-meta.bl { bottom: 17px; left: 18px; }
  .s7m-corner.tl { top: 9px; left: 9px; }
  .s7m-corner.tr { top: 9px; right: 9px; }
  .s7m-corner.bl { bottom: 9px; left: 9px; }
  .s7m-corner.br { bottom: 9px; right: 9px; }
  .s7m-wordy { display: none; }
}

/* camera flash (On-Site Filming stop) */
.s7m-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ----------------------------------------------------- the ending ring -- */
/* The seven orbit the 7 once the reel lands. Desktop: beside the copy, and
   each name links to its page (hover stops the spin). Phone / tight widths:
   a faint rotating ring behind the copy, decorative only. */
.s7m-end {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}
.s7m-end svg { display: block; width: 100%; height: 100%; overflow: visible; }
.s7m-end text {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 5.1px;
  letter-spacing: .1em;
  fill: rgba(255, 255, 255, .64);
  transition: fill .25s ease;
}
.s7m-end-a { pointer-events: auto; cursor: pointer; outline: none; }
.s7m-end-a:hover text,
.s7m-end-a.is-on text { fill: #fff; }
.s7m-end-line {
  fill: none;
  stroke: rgba(255, 255, 255, .16);
  stroke-width: .35;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.s7m-end .s7m-ring-sep { fill: rgba(255, 255, 255, .45); }
.s7m-end.is-behind { z-index: 1; }
.s7m-end.is-behind .s7m-end-a { pointer-events: none; cursor: default; }
.s7m-end.is-behind text { fill: rgba(255, 255, 255, .3); font-size: 5.6px; }
.s7m-end.is-behind .s7m-end-line { stroke: rgba(255, 255, 255, .1); }

/* ----------------------------------------------------------------- grain -- */
.s7m-grain {
  position: absolute;
  inset: -60%;
  z-index: 4;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.2 0 0 0 -.6  2.2 0 0 0 -.6  2.2 0 0 0 -.6  0 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: s7mGrain .8s steps(5) infinite;
}
@keyframes s7mGrain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* --------------------------------------------------------------- buttons -- */
.s7m-btn {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font: 500 12px/1 'Geist', sans-serif;
  letter-spacing: .01em;
  color: var(--s7m-fg);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--s7m-fg) 36%, transparent);
  border-radius: 999px;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background .2s ease, border-color .2s ease;
}
.s7m-btn:hover { background: color-mix(in srgb, var(--s7m-fg) 12%, transparent); }
.s7m-btn:focus-visible { outline: 2px solid var(--s7m-lav); outline-offset: 2px; }
.s7m-skip   { right: 24px; bottom: 20px; }
.s7m-replay { right: 24px; top: 20px; }
@media (max-width: 600px) {
  .s7m-btn    { padding: 8px 12px; font-size: 11.5px; }
  .s7m-skip   { right: 14px; bottom: 12px; }
  .s7m-replay { right: auto; left: 14px; top: 12px; }
}

/* ---------------------------------------------- hero copy over the reel -- */
.hero-v5-card .hero-v5-overlay { z-index: 5; }
.hero-v5-headline > span { display: inline-block; }
section.hero-v5.s7m-reel .hero-v5-overlay { pointer-events: none; }

/* Brand strip.
   Desktop: it overlays the card's bottom edge — transparent, white logos on the
   card's own dark fade. (An earlier global `html.light .hero-v5-brands` white
   background had turned it into a grey band.) It waits for the reel; the
   timeline fades it in.
   Phone: its own black band directly under the card, white logos. */
@media (min-width: 601px) {
  html.light section.hero-v5 .hero-v5-brands { background: transparent; }
  section.hero-v5 .hero-v5-brands-row { gap: 22px; }
  html.s7m-pending section.hero-v5 .hero-v5-brands { opacity: 0; visibility: hidden; }
}
@media (max-width: 600px) {
  html.light section.hero-v5 .hero-v5-brands { background: #06070a; padding-top: 30px; padding-bottom: 34px; }
  section.hero-v5 .hero-v5-brands { opacity: 1 !important; visibility: visible !important; }
  /* the track's 32px bottom pad is for the desktop in-card strip; on the phone band it
     made the space under the logos double the space above the label */
  section.hero-v5 .hero-v5-brands-track { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .s7m-grain, .s7m-rec { animation: none; }
}