/* ============================================================
   TRANSFORM CO — Concept 1 · v4 additions
   Real client before/after system: draggable sliders,
   auto-crossfade cards, results wall, coach reel.
   Imports tco.css (which imports gc.css) so all gold tokens,
   glass, type + components are inherited. Only NEW components
   live here. Rounded gold glass containers throughout.
   ============================================================ */
@import url('/assets/tco.css');

/* ---------- mobile: lock horizontal scroll, only allow up/down ----------
   Decorative bg/ticker layers extend past the edges by design; without a hard
   clamp iOS lets the whole page rubber-band / pan sideways. Lock it on both
   html AND body (body alone isn't enough on iOS Safari) and kill horizontal
   overscroll so the site can only ever scroll vertically. */
html, body{
  overflow-x:hidden;
  max-width:100%;
  overscroll-behavior-x:none;
}
html{ -webkit-text-size-adjust:100%; }

/* ---------- subtle animated gold background, behind glass ---------- */
.bg-gold-layer{
  position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
}
.bg-gold-layer video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.16; mix-blend-mode:screen;
  /* gold-tint the (already gold) clip a touch warmer + scale so the silhouette drifts */
  filter:saturate(1.15) brightness(1.05);
  transform:scale(1.08);
}
/* frosted glass over the video so it reads as ambient depth, never sharp/distracting */
.bg-gold-glass{
  position:absolute; inset:0;
  -webkit-backdrop-filter:blur(34px) saturate(120%); backdrop-filter:blur(34px) saturate(120%);
  background:radial-gradient(120% 90% at 50% 0%, rgba(199,161,90,.05), rgba(6,7,8,.55) 70%);
}
@media(prefers-reduced-motion:reduce){ .bg-gold-layer video{ display:none; } }

/* ---------- stat labels: uppercase, more letter-spacing, more breathing room ---------- */
.stat span{ text-transform:uppercase; letter-spacing:.22em !important; line-height:1.5 !important; }
.stat b{ letter-spacing:.02em; }
@media(max-width:760px){ .stat span{ letter-spacing:.16em !important; } }

/* ---------- shared rounded gold container ---------- */
.ba-card{
  position:relative; border-radius:22px; overflow:hidden;
  border:1px solid var(--line-gold);
  background:linear-gradient(180deg,rgba(199,161,90,.05),rgba(8,9,11,.4));
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(199,161,90,.06);
  isolation:isolate;
}
.ba-card::after{ /* subtle inner gold ring */
  content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(235,207,147,.10);
}

/* ============================================================
   1 · FEATURED DRAGGABLE BEFORE/AFTER SLIDER (one big hero)
   ============================================================ */
/* hero stack: widescreen VSL on top, before/after slider underneath */
.hero-duo{
  display:flex; flex-direction:column; align-items:center; gap:clamp(20px,3vw,34px);
  max-width:760px; margin:clamp(26px,4vw,42px) auto 0;
}
.hero-duo .ba-hero{ max-width:470px; width:100%; margin:0; }
/* widescreen VSL frame on top */
.hero-vsl{
  position:relative; width:100%; border-radius:22px; overflow:hidden; aspect-ratio:16/9;
  border:1px solid var(--line-gold); background:#000;
  box-shadow:var(--shadow),0 0 80px -30px rgba(199,161,90,.45);
}
.hero-vsl video{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-vsl .reel-badge{ top:14px; left:14px; }
.vsl-mute{ right:14px; bottom:14px; left:auto; transform:none; }
.vsl-mute:hover{ transform:translateY(-2px); }

/* Nick's info card underneath the slider + video */
.coach-copy{
  max-width:760px; margin:clamp(22px,3vw,34px) auto 0; text-align:center;
  padding:clamp(24px,3.4vw,38px); border-radius:24px;
}
.coach-copy .eyebrow{ display:inline-block; }
.coach-copy h2{ margin-top:10px; }
.coach-copy .lead{ max-width:640px; margin-left:auto; margin-right:auto; }
.coach-copy p:not(.lead){ max-width:660px; margin-left:auto; margin-right:auto; }

.ba-hero{ max-width:470px; margin:clamp(26px,4vw,42px) auto 0; }
.ba-slider{
  position:relative; aspect-ratio:1/1.34; user-select:none; cursor:ew-resize;
  border-radius:22px; overflow:hidden; touch-action:pan-y; background:#0a0b0d;
}
.ba-slider img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 22%;
  -webkit-user-drag:none; pointer-events:none;
}
.ba-slider:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(235,207,147,.65), 0 0 0 6px rgba(199,161,90,.25); }
.ba-slider .ba-after{ clip-path:inset(0 0 0 var(--x,50%)); }
.ba-slider .ba-divider{
  position:absolute; top:0; bottom:0; left:var(--x,50%); width:2px; z-index:3;
  background:linear-gradient(180deg,transparent,var(--gold-hi) 14%,var(--gold-hi) 86%,transparent);
  box-shadow:0 0 18px rgba(235,207,147,.7); transform:translateX(-1px);
}
.ba-slider .ba-knob{
  position:absolute; top:50%; left:var(--x,50%); z-index:4;
  width:46px; height:46px; border-radius:999px; transform:translate(-50%,-50%);
  display:grid; place-items:center; color:#15100a;
  background:var(--grad-gold); border:2px solid rgba(255,255,255,.55);
  box-shadow:0 10px 30px -6px rgba(199,161,90,.8), inset 0 1px 0 rgba(255,255,255,.6);
}
.ba-slider .ba-knob svg{ width:22px; height:22px; }
.ba-slider .ba-tag{
  position:absolute; top:14px; z-index:3; font:800 .64rem/1 'Barlow',sans-serif;
  letter-spacing:.2em; text-transform:uppercase; padding:.5em .8em; border-radius:999px;
  color:#fff; background:rgba(10,10,12,.6); backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.16);
}
.ba-slider .ba-tag.l{ left:14px; }
.ba-slider .ba-tag.r{ right:14px; color:var(--gold-hi); border-color:var(--line-gold); }
.ba-hero .ba-cap{
  text-align:center; color:var(--ink-soft); font-size:.95rem; line-height:1.55;
  margin:22px auto 0; max-width:440px; min-height:3em;
  display:flex; align-items:center; justify-content:center;
}
.ba-hero .ba-hint{
  display:block; text-align:center; color:var(--ink-mute); font-size:.76rem;
  letter-spacing:.04em; margin-top:14px;
}
/* dots — each in a fixed 20px slot so the active dot grows WITHIN its slot
   and the spacing between dots stays perfectly even (no scale-shift). */
.ba-hero .ba-dots{ display:flex; gap:4px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.ba-hero .ba-dots button{
  width:20px; height:20px; padding:0; margin:0; border:0; background:transparent;
  cursor:pointer; display:inline-grid; place-items:center; -webkit-appearance:none; appearance:none;
}
.ba-hero .ba-dots button::before{
  content:""; width:8px; height:8px; border-radius:999px;
  border:1px solid var(--line-gold); background:transparent; transition:all .25s;
}
.ba-hero .ba-dots button:hover::before{ border-color:var(--gold); }
.ba-hero .ba-dots button.on::before{
  width:10px; height:10px; background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 10px var(--gold);
}
.ba-hero .ba-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px; }
.ba-hero .ba-arrow{
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center; cursor:pointer;
  border:1.5px solid var(--line-gold); color:var(--gold-hi); background:rgba(10,10,12,.5);
  transition:all .2s;
}
.ba-hero .ba-arrow:hover{ background:rgba(199,161,90,.16); transform:translateY(-1px); }
.ba-hero .ba-arrow svg{ width:18px; height:18px; }
.ba-hero .ba-count{ font:600 .8rem/1 'Barlow'; color:var(--ink-mute); letter-spacing:.1em; min-width:58px; text-align:center; }

/* ============================================================
   2 · AUTO-CROSSFADE CARDS (fade between before↔after)
   ============================================================ */
.fade-grid{
  display:grid; grid-template-columns:repeat(4,1fr); /* 8 cards = 2 clean rows of 4 */
  gap:16px; margin-top:clamp(26px,4vw,42px);
}
.fade-card{
  position:relative; aspect-ratio:1/1.42; border-radius:20px; overflow:hidden; /* taller for portrait shots */
  border:1px solid var(--line-gold);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.85);
  background:#0a0b0d;
}
.fade-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%;
}
/* the three synced animations all run on the SAME 8s cycle + per-card stagger,
   so the photo, the glow and the BEFORE/AFTER label flip together. */
.fade-card .fc-after{ opacity:0; animation:fcFade 8s ease-in-out infinite; }
/* glow ring: cool white while BEFORE, gold while AFTER */
.fade-card .fc-glow{
  position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:20px;
  animation:fcGlow 8s ease-in-out infinite;
}
/* two labels centered at the BOTTOM; they cross-fade so you always know the state.
   Clearer + bigger, gold pill with black text, and a quick pop when they switch. */
.fade-card .fc-lbl{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:4;
  font:800 .8rem/1 'Barlow'; letter-spacing:.2em; text-transform:uppercase;
  padding:.6em 1.1em; border-radius:999px;
}
/* BEFORE = black pill, white text · AFTER = gold pill, black text */
.fade-card .fc-lbl.before{
  color:#fff; background:rgba(8,9,11,.82); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.8);
  animation:fcLblBefore 8s ease-in-out infinite;
}
.fade-card .fc-lbl.after{
  color:#15100a; background:var(--grad-gold); border:1px solid transparent;
  box-shadow:0 8px 22px -8px rgba(199,161,90,.7), inset 0 1px 0 rgba(255,255,255,.4);
  animation:fcLblAfter 8s ease-in-out infinite;
}
/* every card flips before→after in unison (no per-card stagger / delay) */
.fade-card .fc-after,.fade-card .fc-glow,.fade-card .fc-lbl{ animation-delay:0s; }
/* hold BEFORE ~1s longer (was 10% → 25% on the 8s loop) before crossfading to AFTER */
@keyframes fcFade{ 0%,25%{opacity:0} 46%,72%{opacity:1} 92%,100%{opacity:0} }
@keyframes fcGlow{
  /* BEFORE phase: soft white inner glow — held ~1s longer to match the photo */
  0%,25%{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), inset 0 0 26px rgba(255,255,255,.28), 0 0 26px -6px rgba(255,255,255,.35); }
  /* transition */
  38%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
  /* AFTER phase: gold glow */
  46%,72%{ box-shadow:inset 0 0 0 2px rgba(235,207,147,.8), inset 0 0 30px rgba(199,161,90,.4), 0 0 34px -4px rgba(199,161,90,.6); }
  84%{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
  92%,100%{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.55), inset 0 0 26px rgba(255,255,255,.28), 0 0 26px -6px rgba(255,255,255,.35); }
}
/* labels flip fast and POP, synced to the image: BEFORE holds to 25%, AFTER pops in at 46% */
@keyframes fcLblBefore{
  0%{opacity:0;transform:translateX(-50%) scale(.8)}
  6%,25%{opacity:1;transform:translateX(-50%) scale(1)}
  38%,90%{opacity:0;transform:translateX(-50%) scale(.8)}
  98%,100%{opacity:0;transform:translateX(-50%) scale(.8)}
}
@keyframes fcLblAfter{
  0%,38%{opacity:0;transform:translateX(-50%) scale(.8)}
  46%{opacity:1;transform:translateX(-50%) scale(1.12)}
  52%,86%{opacity:1;transform:translateX(-50%) scale(1)}
  94%,100%{opacity:0;transform:translateX(-50%) scale(.8)}
}
.fade-card .fc-grad{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.5));
}
@media(prefers-reduced-motion:reduce){
  .fade-card .fc-after,.fade-card .fc-glow,.fade-card .fc-lbl{ animation:none; }
  .fade-card .fc-after{ opacity:0; }
  .fade-card .fc-lbl{ transform:translateX(-50%) scale(1); }
  .fade-card .fc-lbl.after{ opacity:0; }
  .fade-card:hover .fc-after{ opacity:1; transition:opacity .4s; }
  .fade-card:hover .fc-lbl.before{ opacity:0; }
  .fade-card:hover .fc-lbl.after{ opacity:1; }
}

/* ============================================================
   2b · AI TRANSFORMATION VIDEOS — 3 vertical morph clips
   ============================================================ */
.vidmorph-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px);
  max-width:880px; margin:clamp(26px,4vw,42px) auto 0;
}
.vidmorph{
  position:relative; border-radius:22px; overflow:hidden; aspect-ratio:9/16;
  border:1px solid var(--line-gold); background:#0a0b0d;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8), 0 0 70px -34px rgba(199,161,90,.4);
}
.vidmorph video{ width:100%; height:100%; object-fit:cover; display:block; }
/* timed BEFORE / AFTER overlays — big, centered at the BOTTOM, gold pill with black
   text, and a quick pop as they swap while the morph plays */
.vidmorph .vm-tag{
  position:absolute; bottom:16px; left:50%; z-index:3;
  font:800 1.05rem/1 'Anton','Barlow',sans-serif; letter-spacing:.24em; text-transform:uppercase;
  padding:.55em 1.15em; border-radius:999px;
  color:#15100a; background:var(--grad-gold); border:1px solid transparent;
  box-shadow:0 10px 28px -8px rgba(199,161,90,.75), inset 0 1px 0 rgba(255,255,255,.4);
  opacity:0; transform:translateX(-50%) scale(.8); transition:opacity .35s ease, transform .35s cubic-bezier(.2,1.3,.4,1);
}
.vidmorph.show-before .vm-before{ opacity:1; transform:translateX(-50%) scale(1); }
.vidmorph.show-after .vm-after{ opacity:1; transform:translateX(-50%) scale(1); }
@media(max-width:680px){
  .vidmorph-grid{ grid-template-columns:1fr 1fr; max-width:440px; }
}

/* ============================================================
   3 · RESULTS WALL — masonry of static before/after pairs
   ============================================================ */
.wall-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wall-filter{ display:flex; gap:8px; }
.wall-filter button{
  font:700 .74rem/1 'Barlow'; letter-spacing:.08em; text-transform:uppercase;
  padding:.6em 1em; border-radius:999px; cursor:pointer; transition:all .2s;
  color:var(--ink-soft); background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.wall-filter button.on{ color:#15100a; background:var(--grad-gold); border-color:transparent;
  box-shadow:0 8px 22px -8px rgba(199,161,90,.55); }
.ba-wall{
  margin-top:clamp(24px,3.5vw,38px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  align-items:start;
}
@media(max-width:680px){ .ba-wall{ grid-template-columns:repeat(2,1fr); gap:12px; } }
.wall-item{
  position:relative; display:flex; flex-direction:column;
  border-radius:18px; overflow:hidden; border:1px solid var(--line-gold);
  box-shadow:0 16px 40px -26px rgba(0,0,0,.85); background:#0a0b0d;
  opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease,ease), transform .6s var(--ease,ease);
}
.wall-item.in{ opacity:1; transform:none; }
.wall-item.hide{ display:none; }
/* uniform tile: fixed aspect, each half fills its column (crops out any baked-in black bars) */
.wall-pair{ display:flex; aspect-ratio:1/1.16; }
.wall-pair img{ width:50%; height:100%; display:block; object-fit:cover; object-position:center top; }
.wall-pair img:first-child{ border-right:1px solid rgba(235,207,147,.22); }
.wall-item .wi-tags{
  position:absolute; top:10px; left:10px; right:10px; z-index:2;
  display:flex; justify-content:space-between; pointer-events:none;
}
.wall-item .wi-tags span{
  font:800 .56rem/1 'Barlow'; letter-spacing:.16em; text-transform:uppercase;
  padding:.4em .6em; border-radius:999px; color:#fff;
  background:rgba(10,10,12,.6); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.14);
}
.wall-item .wi-tags span.aft{ color:var(--gold-hi); border-color:var(--line-gold); }
.wall-item .wi-cap{
  padding:11px 13px 13px; font-size:.78rem; line-height:1.45; color:var(--ink-soft);
  border-top:1px solid var(--line); flex:1 0 auto;
}
.wall-more{ text-align:center; margin-top:26px; }
.wall-count{
  display:inline-flex; align-items:center; gap:.6em; margin-top:14px;
  font:600 .8rem/1 'Barlow'; letter-spacing:.04em; color:var(--ink-mute);
}
.wall-count b{ color:var(--gold-hi); font-weight:800; }

/* ============================================================
   4 · COACH REEL (vertical clip in a rounded gold frame)
   ============================================================ */
.reel-wrap{
  max-width:560px; margin:0 auto; position:relative;
  border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
  background:#000; aspect-ratio:1/1; /* square */
}
.reel-wrap video{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-badge{
  position:absolute; left:14px; top:14px; z-index:3; display:inline-flex; align-items:center; gap:7px;
  font:700 .68rem/1 'Barlow'; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  padding:.5em .8em; border-radius:999px; background:rgba(10,10,12,.5);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
}
.reel-badge .dot{ width:7px; height:7px; border-radius:999px; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.8); animation:pulse 1.8s infinite; }
/* big clear-glass unmute button, centered along the bottom */
.reel-mute{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:3; min-height:52px; padding:0 22px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:11px; cursor:pointer;
  color:#fff; font:800 .82rem/1 'Barlow'; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 14px 40px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.reel-mute:hover{ background:rgba(255,255,255,.22); transform:translateX(-50%) translateY(-2px);
  box-shadow:0 20px 50px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.45); }
.reel-mute svg{ width:24px; height:24px; flex:none; }
/* when sound is on, collapse to a compact icon-only pill (no label) */
.reel-mute.is-on{ padding:0; width:48px; min-height:48px; gap:0; }

/* Nick's coach section (below the funnel): vertical reel + copy side by side */
.coach-reel-row{
  display:grid; grid-template-columns:330px 1fr; gap:clamp(28px,4vw,52px); align-items:center;
}
.coach-reel-row .reel-wrap{ max-width:330px; aspect-ratio:9/16; margin:0; }
@media(max-width:860px){
  .coach-reel-row{ grid-template-columns:1fr; }
  .coach-reel-row .reel-wrap{ max-width:300px; margin:0 auto; }
}

/* ---------- responsive ---------- */
@media(max-width:680px){
  .fade-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:430px){
  .fade-grid{ grid-template-columns:1fr; }
  .wall-item .wi-cap{ font-size:.82rem; }
}

/* ============================================================
   FEATURE: cinematic training film band (full-bleed video,
   copy overlaid on the left, dark gold scrim for legibility)
   ============================================================ */
.film{
  position:relative; border-radius:26px; overflow:hidden; isolation:isolate;
  min-height:clamp(420px,52vw,620px); display:flex; align-items:center;
  border:1px solid var(--line-gold);
  box-shadow:0 30px 80px -34px rgba(0,0,0,.9), 0 0 90px -40px rgba(199,161,90,.4);
}
.film .film-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.film .film-scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,7,8,.92) 0%, rgba(6,7,8,.72) 38%, rgba(6,7,8,.32) 70%, rgba(6,7,8,.5) 100%),
    radial-gradient(120% 90% at 0% 50%, rgba(199,161,90,.10), transparent 60%);
}
.film .film-copy{
  position:relative; max-width:560px; padding:clamp(28px,4vw,54px);
}
.film .film-copy h2{ margin-top:10px; }
.film .film-copy p{ color:var(--ink-soft); line-height:1.65; margin-top:14px; max-width:460px; }
.film .film-copy .btn{ margin-top:24px; }
@media(max-width:640px){
  .film{ min-height:0; }
  .film .film-scrim{ background:
    linear-gradient(180deg, rgba(6,7,8,.5) 0%, rgba(6,7,8,.82) 60%, rgba(6,7,8,.95) 100%); }
  .film .film-copy{ text-align:center; max-width:none; padding:clamp(220px,52vw,300px) 22px 32px; }
  .film .film-copy p{ margin-left:auto; margin-right:auto; }
}

/* ---------- final CTA with the training film as a full-bleed background ---------- */
.apply-film{ position:relative; isolation:isolate; overflow:hidden; }
.apply-film .apply-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.apply-film .apply-bg-scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(6,7,8,.72), rgba(6,7,8,.92) 75%),
    linear-gradient(180deg, rgba(6,7,8,.9) 0%, rgba(6,7,8,.6) 50%, rgba(6,7,8,.92) 100%);
}
@media(prefers-reduced-motion:reduce){
  .film .film-video, .apply-film .apply-bg{ display:none; }
}