/* =========================================================================
   STEADY STATE · funnel page layer (register / thank-you / replay)
   Extends ../assets/brand.css (system B). An identical copy of this file sits
   in each funnel folder so every page stays self-contained.
   Every font-size carries var(--bump) (+2px, Diego's brief).
   ========================================================================= */

/* ------------------------------------------------------------- hero shell */
.hero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(84px, 12vh, 124px) 0 clamp(56px, 8vh, 84px);
}
.hero__inner { position: relative; z-index: 1; }
.hero .eyebrow { margin-bottom: 22px; }
.hero .lead { max-width: 56ch; }

/* One gentle settle for the hero copy. Pure CSS so it never depends on a
   script; final state immediately in reduced / static / thumb mode. */
.rise { animation: ssRise 0.9s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
@keyframes ssRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html.reduced .rise { animation: none; }

/* -------------------------------------------- CGM trace line-art (hero) */
/* Thin cyan traces in the hero periphery only: wild at the outer edge, then
   settling flat inside the range band (two hairlines) as they near the copy.
   They fade out before the text column, so nothing sits behind copy.
   Drawing them in is the page's one signature moment. */
.flank {
  position: absolute; top: 50%; z-index: 0; pointer-events: none;
  width: calc(50% - var(--flank-gap, 380px)); height: 240px; overflow: visible;
  color: var(--accent);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 96%);
          mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 96%);
}
.flank--l { left: 0; transform: translateY(-50%); }
.flank--r { right: 0; transform: translateY(-50%) scaleX(-1); }
.flank .rb { stroke: rgba(238, 243, 246, 0.14); stroke-width: 1; stroke-dasharray: 2 7; }
.flank .tr {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: ssDraw 2.8s var(--ease) 0.25s forwards;
}
.flank .tr--1 { opacity: 0.34; }
.flank .tr--2 { opacity: 0.22; animation-delay: 0.42s; }
.flank .tr--3 { opacity: 0.14; animation-delay: 0.6s; }
@keyframes ssDraw { to { stroke-dashoffset: 0; } }
html.reduced .flank .tr { animation: none; stroke-dashoffset: 0; }

/* ---------------------------------------------------------- section head */
.sec-head { text-align: center; max-width: 780px; margin: 0 auto clamp(52px, 7vh, 76px); }
.sec-head .eyebrow { margin-bottom: 16px; }
.sec-head .band { margin-top: 26px; }
.sec-head + .vgrid { margin-top: 0; }

/* ------------------------------------------------- 2-up video section */
.vcard__frame { background: linear-gradient(160deg, var(--surface-2), var(--surface)); }
.vcard__frame::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(238, 243, 246, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%239aa8b0'/%3E%3C/svg%3E") center/26px no-repeat;
  border: 1px solid var(--hair);
}
.vcard__name { margin-top: 6px; }

/* ------------------------------------------------------------- helpers */
.nw { white-space: nowrap; }
.vgrid { row-gap: clamp(44px, 6vh, 64px); }

/* --------------------------------------------- viewer comments (8, 4x2) */
.cgrid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px;
}
.ycomment { transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); }
.ycomment:hover { border-color: rgba(12, 191, 240, 0.28); }
.ycomment__body { min-width: 0; display: flex; flex-direction: column; height: 100%; }
.ycomment { grid-template-columns: 36px 1fr; padding: 18px 18px 16px; }
.ycomment__av { width: 36px; height: 36px; font-size: calc(14px + var(--bump)); }
.ycomment__who { display: block; margin: 0; min-width: 0; }
.ycomment__who b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: calc(0.8rem + var(--bump)); }
.ycomment__text { flex: 1; }
.ycomment__meta { margin: 12px 0 0; }
.ycomment__meta span { font-weight: 600; }
.ycomment__meta .gap { width: 6px; }

/* ----------------------------------------------------- faux video player */
.player {
  position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, var(--surface-3), var(--surface));
  border: 1px solid var(--hair-2);
  box-shadow: 0 40px 90px -46px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(12, 191, 240, 0.05);
}
.player__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.player__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(6, 8, 10, 0.05), rgba(6, 8, 10, 0.42)),
    linear-gradient(180deg, transparent 62%, rgba(6, 8, 10, 0.78));
}
.player__play {
  position: absolute; top: 50%; left: 50%; z-index: 2; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink);
  box-shadow: 0 0 0 10px rgba(12, 191, 240, 0.14), 0 22px 50px -14px var(--accent-glow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.player__play svg { width: 32px; height: 32px; margin-left: 5px; }
.player:hover .player__play { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 0 14px rgba(12, 191, 240, 0.12), 0 26px 60px -14px var(--accent-glow); }
.player__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 16px;
  padding: 14px 20px 16px; color: rgba(238, 243, 246, 0.86);
}
.player__bar svg { width: 20px; height: 20px; flex: none; }
.player__track { flex: 1; height: 4px; border-radius: 4px; background: rgba(238, 243, 246, 0.22); overflow: hidden; }
.player__track i { display: block; width: 0%; height: 100%; background: var(--accent); }
.player__tag {
  position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; background: rgba(6, 8, 10, 0.62); border: 1px solid var(--hair-2);
  font-family: var(--display); font-weight: 500; font-size: calc(11px + var(--bump)); letter-spacing: 0.2em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.player__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(12, 191, 240, 0.18); }

/* -------------------------------------------------- round photo crop */
/* Puts the face point (--fx, --fy of the source frame) at the circle centre. */
.facecrop { position: relative; overflow: hidden; border-radius: 50%; background: var(--surface-3); flex: none; }
.facecrop img {
  position: absolute; left: 50%; top: 50%; height: var(--fz, 270%); width: auto; max-width: none;
  transform: translate(calc(var(--fx, 50%) * -1), calc(var(--fy, 30%) * -1));
}

/* ------------------------------------------------------------- footer */
.brandfoot .brand__mark { overflow: visible; }

/* -------------------------------------------------------------- mobile */
@media (max-width: 1080px) {
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* traces move to the top periphery, above the eyebrow */
  .flank { top: 10px; height: 64px; width: 50%; }
  .flank--l { transform: none; }
  .flank--r { transform: scaleX(-1); }
  .flank .tr { stroke-width: 3.6; }
  .flank .rb { stroke-width: 2.2; }
}
@media (max-width: 480px) {
  .eyebrow::before, .eyebrow::after { display: none; }
}
@media (max-width: 760px) {
  .hero { padding: 92px 0 56px; }
  .hero .eyebrow { font-size: calc(11.5px + var(--bump)); letter-spacing: 0.18em; }
  .hero .eyebrow::before, .hero .eyebrow::after { width: 14px; }
  .eyebrow { text-wrap: balance; }
  .sec-head { margin-bottom: 40px; }
  .cgrid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .player { border-radius: 16px; }
  .player__play { width: 68px; height: 68px; }
  .player__play svg { width: 26px; height: 26px; }
  .player__bar { gap: 12px; padding: 10px 14px 12px; }
  .player__bar svg { width: 18px; height: 18px; }
  .player__bar .hide-sm { display: none; }
  .player__tag { top: 12px; left: 12px; }
}
@media (max-width: 560px) {
  .player__tag { display: none; }
}

/* ---- mobile hardening (references/mobile.md) ---- */
img, svg, video, canvas, iframe { max-width: 100%; }
p, li, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .flank .tr { animation: none; stroke-dashoffset: 0; }
  .player__play, .ycomment { transition: none; }
}