/* ---------------------------------- reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
button, a { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* ---------------------------------- theme --------------------------------- */
:root {
  --black:      #000;
  --white:      #fff;
  --red:        #e50914;   /* Netflix red */
  --red-glow:   rgba(229, 9, 20, .55);
  --green:      #21d07a;   /* the chart green from the video */
  --muted:      rgba(255, 255, 255, .66);
  --muted-dim:  rgba(255, 255, 255, .42);
  --hairline:   rgba(255, 255, 255, .14);
  --glass:      rgba(255, 255, 255, .07);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* The video runs clean; readability comes from the panel instead. Dial the
     tint up if a future clip is brighter behind the copy. */
  --panel-bg:   rgba(6, 6, 7, .58);
  --panel-blur: 26px;

  --pad: clamp(1.25rem, 5vw, 3.5rem);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* bottom edge of the fixed sound button + a gap — the panel starts here, high
     enough to cover the clip's own headline before it reaches the copy */
  --top-bar: calc(var(--safe-t) + clamp(.875rem, 2.5vw, 1.5rem) + 2.5rem + .75rem);
}

/* ---------------------------------- page ---------------------------------- */
html, body { height: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.nowrap { white-space: nowrap; }

/* -------------------------------- background ------------------------------ */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--black);
  overflow: hidden;
}

.bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* portrait clip fills a portrait screen edge to edge */
  object-position: 50% 50%;
  transform: scale(1.02); /* hides any 1px edge from scaling */
}


/* --------------------------------- layout --------------------------------- */
.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* headline card pinned to the top over the clip's own titles, numbers card
     pushed down into the bottom quarter — the chart stays open between them */
  justify-content: space-between;
  gap: var(--pad);
  padding: var(--top-bar) var(--pad) var(--pad);
}

/* The readable surfaces: everything the visitor has to read lives in one. */
.panel {
  width: 100%;
  max-width: 54rem;
  padding: clamp(1.5rem, 4.5vw, 3.25rem) clamp(1.25rem, 4vw, 3.25rem);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: clamp(20px, 2.5vw, 32px);
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(var(--panel-blur)) saturate(1.15);
  backdrop-filter: blur(var(--panel-blur)) saturate(1.15);
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, .9);
  container-type: inline-size; /* lets the title size itself to the panel */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* No backdrop-filter (older Firefox/Safari) — lean on opacity instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel { background: rgba(6, 6, 7, .88); }
}

/* Staggered entrance: the clip gets three clean seconds to play on its own,
   then the pitch, then the numbers. `both` keeps them hidden until their turn. */
.panel--intro { animation: reveal 1.2s cubic-bezier(.16, 1, .3, 1) 3s both; }
.panel--data  {
  animation: reveal 1.2s cubic-bezier(.16, 1, .3, 1) 5s both;
  padding-block: clamp(1.25rem, 3.5vw, 2rem);
}

/* --------------------------------- title ---------------------------------- */
/* cqw, not vw: the panel is capped at 54rem, so the title has to track the
   panel's width or it overflows on wide screens. Keeps one line from 320px up;
   the nbsp in the markup keeps the ampersand glued to $NFLX if it ever wraps. */
.title {
  font-weight: 900;
  font-size: clamp(1.95rem, 13.5cqw, 6rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.title__nflx {
  color: var(--red);
  text-shadow: 0 0 .5em var(--red-glow);
}
.title__amp {
  display: inline-block;
  color: var(--muted-dim);
  font-weight: 500;
  font-size: .46em;
  letter-spacing: 0;
  transform: translateY(-.16em);
}
.title__chill { color: var(--white); }

/* -------------------------------- subtitle -------------------------------- */
.subtitle {
  margin-top: clamp(1rem, 2.4vw, 1.5rem);
  max-width: 34ch;
  font-size: clamp(1rem, 1.1rem + .25vw, 1.3125rem);
  color: var(--muted);
  letter-spacing: -.011em;
  text-wrap: balance;
}

.subtitle em {
  font-style: normal;
  font-weight: 600;
  color: var(--white);
  white-space: nowrap; /* never split the hook across two lines */
}

/* ---------------------------------- stats --------------------------------- */
.stats {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* bottom-align the two figures so a label that wraps to two lines doesn't
   knock its number out of line with the other one */
.stat {
  padding: 0 clamp(.5rem, 2vw, 1.25rem);
  display: flex;
  flex-direction: column;
}
.stat + .stat { border-left: 1px solid var(--hairline); }
.stat__value { margin-top: auto; }

.stat__label {
  font-size: clamp(.6875rem, .72rem, .8125rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-dim);
  text-wrap: balance;
}

.stat__value {
  padding-top: .4em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.stat__cur {
  color: var(--muted-dim);
  font-weight: 600;
  font-size: .62em;
  margin-right: .06em;
  transform: translateY(-.06em);
}

.stat__num { color: var(--white); }

/* --------------------------------- live tag ------------------------------- */
/* the dot is inline, not a flex item, so a wrapped line keeps it on line one */
.live {
  margin-top: clamp(1rem, 2.5vw, 1.375rem);
  font-size: .75rem;
  letter-spacing: .01em;
  color: var(--muted-dim);
}

.dot {
  display: inline-block;
  width: .45em;
  height: .45em;
  margin-right: .6em;
  vertical-align: .04em;
  border-radius: 50%;
  background: var(--green);
  animation: ping 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}

.live.is-stale .dot {
  background: var(--muted-dim);
  animation: none;
}

/* --------------------------------- actions -------------------------------- */
.actions {
  margin-top: clamp(1.125rem, 2.75vw, 1.625rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  height: 3.125rem;
  padding: 0 1.375rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 6px 30px -8px var(--red-glow);
}
.btn--ghost {
  border: 1px solid var(--hairline);
  background: var(--glass);
  color: var(--muted);
}
.btn--ghost.is-copied { color: var(--green); border-color: rgba(33, 208, 122, .45); }

.btn__ca { font-variant-numeric: tabular-nums; }
.btn__arrow, .btn__copy { width: 1.05em; height: 1.05em; }
.btn__arrow { transition: transform .18s ease; }

/* ------------------------------ sound toggle ------------------------------ */
.sound-btn {
  position: fixed;
  z-index: 3;
  top: calc(var(--safe-t) + clamp(.875rem, 2.5vw, 1.5rem));
  right: clamp(.875rem, 2.5vw, 1.5rem);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  height: 2.5rem;
  padding: 0 .9375rem 0 .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--muted);
  font-size: .8125rem;
  font-weight: 600;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
  animation: fade .8s ease .9s both;
}

.sound-btn__icon { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; }
.sound-btn .ico { grid-area: 1 / 1; width: 100%; height: 100%; }
.sound-btn.is-muted  .ico--on  { display: none; }
.sound-btn:not(.is-muted) .ico--off { display: none; }
.sound-btn:not(.is-muted) { color: var(--white); border-color: rgba(255, 255, 255, .32); }

/* gentle nudge that there's audio waiting */
.sound-btn.is-muted::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .5);
  animation: halo 3s ease-out infinite;
  pointer-events: none;
}

/* ---------------------------------- footer -------------------------------- */
.foot {
  position: relative;
  z-index: 2;
  flex: none;
  padding: 0 var(--pad) calc(var(--safe-b) + clamp(.875rem, 2.5vw, 1.375rem));
  text-align: center;
  font-size: .75rem;
  pointer-events: none;
  animation: fade .8s ease 5.4s both; /* arrives with the numbers card */
}

/* the clip runs bright behind this, so the disclaimer gets its own surface */
.foot span {
  display: inline-block;
  padding: .45em .9em;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, .5);
}

/* --------------------------------- motion --------------------------------- */
/* no `filter: blur` here — it would fight the panel's own backdrop-filter */
@keyframes reveal {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ping {
  0%        { box-shadow: 0 0 0 0    rgba(33, 208, 122, .6); }
  70%, 100% { box-shadow: 0 0 0 .6em rgba(33, 208, 122, 0); }
}
@keyframes halo {
  0%        { opacity: .55; transform: scale(1); }
  60%, 100% { opacity: 0;   transform: scale(1.14); }
}

/* ---------------------------- hover (pointer only) ------------------------ */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #f6121d; transform: translateY(-2px); }
  .btn--primary:hover .btn__arrow { transform: translate(2px, -2px); }
  .btn--ghost:hover   { color: var(--white); border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .12); }
  .sound-btn:hover    { color: var(--white); border-color: rgba(255, 255, 255, .34); background: rgba(0, 0, 0, .7); }
}

:where(a, button):focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 999px;
}

/* -------------------------------- responsive ------------------------------ */

/* Landscape / desktop — anything wider than the clip's own 9:16.
   `cover` would blow the portrait clip up and crop the chart away, so fit it to
   the full height instead: top and bottom meet the screen edges exactly and the
   sides go black (the clip's own background is black, so the seam is invisible).
   The copy then has to live inside that column, otherwise the cards are wider
   than the video and bury the very thing we stopped cropping.
   Excluded below 620px tall: on a landscape phone the column would collapse to
   a ~220px sliver, and `cover` reads better there. */
@media (min-aspect-ratio: 9 / 16) and (min-height: 620px) {
  .bg video {
    object-fit: contain;
    transform: none; /* any scale here would re-crop the top and bottom */
  }
  /* cards flush with the column, so no sliver of chart peeks past their edges */
  .hero { padding-inline: 0; }
  .panel { max-width: min(54rem, calc(100svh * 9 / 16)); }
}

/* phones: keep the panel short so the chart underneath stays on screen */
@media (max-width: 560px) {
  .subtitle { max-width: 30ch; }
  .stat { padding: 0 .375rem; }
  .actions { width: 100%; flex-direction: column; align-items: stretch; gap: .625rem; }
  .btn { justify-content: center; width: 100%; height: 2.875rem; }
  .sound-btn__label { display: none; }
  .sound-btn { padding: 0 .7rem; }
}

/* small phones: squeeze the stack so the panel still clears the fold */
@media (max-width: 400px) {
  .panel { padding: 1.25rem; }
  .panel--data { padding-block: 1.125rem; }
  .subtitle { font-size: .9375rem; }
  .stat { padding: 0 .25rem; }
  .stat__value { font-size: 1.375rem; }
  .actions { margin-top: 1.25rem; }
  .btn { height: 2.75rem; }
}

/* 320px-class phones: two cards plus a disclaimer is a lot for 568px of height,
   so everything gets one more notch tighter rather than stacking the numbers —
   stacking would cost a whole extra row and push the page into scrolling */
@media (max-width: 344px) {
  :root { --pad: .875rem; }
  .hero { gap: .625rem; }
  .foot { padding-bottom: calc(var(--safe-b) + .625rem); }
  .panel { padding: 1rem; }
  .panel--data { padding-block: 1rem; }
  .title { font-size: 1.75rem; }
  .subtitle { margin-top: .75rem; font-size: .875rem; }
  .stat { padding: 0; }
  .stat__label { letter-spacing: .08em; }
  .stat__value { font-size: 1.25rem; }
  .live { margin-top: .75rem; }
  .actions { margin-top: 1rem; gap: .5rem; }
  .btn { height: 2.5rem; }
}

/* short/landscape phones: no vertical room to waste */
@media (max-height: 620px) and (orientation: landscape) {
  .hero { padding-top: calc(var(--safe-t) + 3.25rem); gap: .5rem; }
  .panel { padding: .875rem 2rem; max-width: 46rem; }
  .panel--data { padding-block: .75rem; }
  .title { font-size: clamp(2rem, 7vh, 3.25rem); }
  .subtitle { margin-top: .5rem; font-size: .9375rem; max-width: 52ch; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 0 1rem; }
  .stat + .stat { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--hairline); }
  .stat__value { font-size: 1.5rem; }
  .live { margin-top: .625rem; }
  .actions { margin-top: .875rem; flex-direction: row; width: auto; }
  .btn { width: auto; height: 2.75rem; }
  .foot { display: none; }
}

/* very large screens: a touch more presence under the hero */
@media (min-width: 1600px) {
  .subtitle { font-size: 1.4375rem; max-width: 38ch; }
  .stat__value { font-size: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}