/* ============================================================
   TC Coaching : the home page, built to unfold as you scroll.
   ------------------------------------------------------------
   Loaded by index.html only, so none of this reaches the other
   pages until it is chosen for them. Tokens come from styles.css.

   Every hidden starting state hangs off html.m, which home.js's
   head snippet sets only when motion is allowed. With no script,
   or with reduced motion on, this page is simply finished: still,
   complete and readable.
   ============================================================ */

/* ---------- The hand ----------
   Caveat, the same note hand the carousels use. Sentence case, a little
   crooked, and never more than one short line. It is Tom talking in the
   margin, so it stays rare enough to feel like an aside. */
.hand-gap{margin-top:14px}
/* Written on with a moving mask. clip-path would read better here, but a clipped
   element counts as off screen to the arrival check and would never start. */
.m .hand{-webkit-mask:linear-gradient(90deg,#000 44%,transparent 56%) no-repeat 100% 0/230% 100%;
        mask:linear-gradient(90deg,#000 44%,transparent 56%) no-repeat 100% 0/230% 100%}
.m .hand.is-in{-webkit-mask-position:0 0;mask-position:0 0;
  transition:-webkit-mask-position 1.15s cubic-bezier(.45,.05,.55,.95),mask-position 1.15s cubic-bezier(.45,.05,.55,.95)}

/* The pen: any path inside .draw writes itself once the element arrives. */
.draw{display:inline-block;overflow:visible;fill:none;stroke:var(--blue);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.draw path{stroke-dasharray:1;stroke-dashoffset:0}
.m .draw:not(.is-in) path{stroke-dashoffset:1}
.m .draw.is-in path{transition:stroke-dashoffset .75s cubic-bezier(.45,.05,.55,.95) .5s}
.m .draw.is-in path+path{transition-delay:1.2s;transition-duration:.25s}
.note{display:inline-flex;align-items:flex-start;gap:8px}
.note .draw{width:64px;height:44px;flex:none;margin-top:6px}

/* ---------- The highlight ----------
   The blue block from the carousels, so the site and the feed read as one
   brand. One phrase in a heading, never split across lines. It sweeps in
   like a pen rather than arriving already there. */
.m .hl:not(.is-in){color:inherit;background-size:0 100%}
.m .hl.is-in{transition:background-size .6s cubic-bezier(.22,.61,.36,1) .25s,color .25s linear .4s}
.h2,.hero__title{line-height:1.14}


/* ---------- The bar along the nav ---------- */
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--blue);
  transform:scaleX(var(--p,0));transform-origin:left;box-shadow:0 0 10px var(--blue-glow);pointer-events:none}

/* ---------- Hero ---------- */
.hero2{display:grid;gap:40px;align-items:center}
.hero2 .hero__title{font-size:clamp(2.7rem,5.2vw,4.3rem);text-wrap:balance}
.hero2 .hand--hero{margin-top:14px;font-size:clamp(1.8rem,3.2vw,2.7rem)}
.hero2 .hero__sub{font-size:clamp(1.02rem,1.6vw,1.16rem);margin-top:16px}
.hero2 .hero__cta{margin-top:26px}
.hero2 .hero__chips{margin-top:28px}
/* The title builds a word at a time. */
.w{display:inline-block}
.nb{white-space:nowrap}
.m .w{opacity:0;transform:translateY(.55em);transition:opacity .5s ease,transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i)*55ms + 120ms)}
.m .is-built .w{opacity:1;transform:none}
/* Held back from the very first paint, so nothing shows before its turn. */
.m [data-build]:not(.is-built){opacity:0}
.m [data-build]:not(.is-built) .hl{opacity:0;transform:translateY(.55em);transition:none}
.m .hero__title .hl.w.is-in{transition:opacity .5s ease calc(var(--i)*55ms + 120ms),
  transform .6s cubic-bezier(.22,.61,.36,1) calc(var(--i)*55ms + 120ms),
  background-size .6s cubic-bezier(.22,.61,.36,1) 1.05s,color .25s linear 1.15s}
.m .hand--hero.is-in{transition-delay:1.5s}
/* The hexagons wake up around the cursor. */
.hero__spot{position:absolute;inset:0;z-index:1;pointer-events:none;background:url("../assets/img/hex-tile-strong.png");
  opacity:0;transition:opacity .4s ease;
  -webkit-mask-image:radial-gradient(240px 240px at var(--mx,50%) var(--my,40%),#000,transparent 72%);
          mask-image:radial-gradient(240px 240px at var(--mx,50%) var(--my,40%),#000,transparent 72%);
  filter:brightness(2.4) saturate(1.3)}
.hero:hover .hero__spot{opacity:1}

/* ---------- Polaroids ----------
   A moment of the real person. Each one tilts differently, and only this page
   has them, so they keep their charm. */
.hero2__photo{max-width:340px;margin:0 auto;--tilt:3deg}
.m .hero2__photo:not(.is-in){opacity:0;transform:rotate(9deg) translateY(36px) scale(.94)}
.m .hero2__photo.is-in{transition:opacity .6s ease .35s,transform .9s cubic-bezier(.22,.61,.36,1) .35s}

/* ---------- The marquee, on a slant ---------- */
.marquee{position:relative;z-index:3;width:104%;margin:-16px -2%;transform:rotate(-1.2deg)}

/* ---------- The numbers ---------- */
.stats{padding:clamp(60px,9vh,100px) 0 clamp(24px,4vh,40px);position:relative}
.stats__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;transition:transform .25s,border-color .25s}
.stat:hover{transform:translateY(-4px);border-color:rgba(0,164,255,.45)}
.stat__pre{font-family:'Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:1px;font-weight:600;
  color:var(--muted);font-size:.95rem;line-height:1}
.stat__n{font-family:'Saira Condensed',sans-serif;font-weight:800;color:var(--white);
  font-size:clamp(3rem,6vw,4.6rem);line-height:1;font-variant-numeric:tabular-nums}
.stat__n i{font-style:normal;color:var(--blue)}
.stat__l{color:var(--muted);font-size:.92rem;line-height:1.35;margin-top:8px}
.slots{display:flex;gap:5px;margin-bottom:12px}
.slots i{height:9px;flex:1;border-radius:3px;background:var(--blue);box-shadow:0 0 12px -2px var(--blue-glow)}
.m .slots:not(.is-in) i{transform:scaleX(0)}
.m .slots.is-in i{transition:transform .4s cubic-bezier(.22,.61,.36,1);transform-origin:left;transition-delay:calc(var(--i)*140ms + .2s)}
.stats__note{margin-top:16px;text-align:right}

/* ---------- The week: the argument, drawn ----------
   The words scroll normally on one side, because reading should never depend
   on a trick. The week holds still beside them and comes apart, then comes
   back as a system, in step with the scroll. */
.wkscroll{display:grid;gap:0 56px;align-items:start;position:relative}
.wkscroll__copy{display:grid}
.wkblock{display:flex;flex-direction:column;justify-content:center;min-height:82vh;min-height:82svh;padding:32px 0}
.wkblock .h2{font-size:clamp(1.95rem,3.6vw,3rem)}
.wkblock .lead{text-align:left;margin:18px 0 0;max-width:none}
.wkscroll__stage{position:sticky;top:72px;z-index:4;align-self:start;background:var(--black)}
.wk{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 28px 70px -36px rgba(0,164,255,.5)}
.wk__head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.wk__title{font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:1.1rem}
.wk__pill{font:700 .66rem/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.07);color:var(--muted);transition:background .35s,color .35s}
.wk.is-system .wk__pill{background:var(--blue);color:#001018}
.wk__row{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;padding:0 16px;height:38px;
  border-bottom:1px solid rgba(255,255,255,.05);position:relative;font-size:.86rem}
.wk__day{font-family:'Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;color:var(--muted-2);letter-spacing:1px}
.wk__txt{position:relative;min-width:0;height:100%}
.wk__plan,.wk__sys{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;overflow:hidden;
  color:var(--white);font-weight:500;transition:opacity .4s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.wk__plan b,.wk__sys b{font-weight:400;color:var(--muted-2);margin-left:7px}
.wk__sys{opacity:0;transform:translateY(10px)}
/* the strike is a pen stroke across the session */
.wk__strike{position:absolute;left:-4px;top:50%;width:min(100%,190px);height:9px;margin-top:-5px;overflow:visible;fill:none;stroke:var(--red);
  stroke-width:2.4;stroke-linecap:round;pointer-events:none;opacity:0;transition:opacity .1s}
.wk__strike path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s ease}
.wk__row.is-hit .wk__strike{opacity:1}
.wk__row.is-hit .wk__strike path{stroke-dashoffset:0}
.wk__row.is-hit .wk__plan{color:var(--muted-2)}
.wk__tag{font:700 .63rem/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.05em;padding:4px 8px;border-radius:999px;
  white-space:nowrap;justify-self:end;opacity:0;transform:translateX(10px) scale(.9);transition:opacity .25s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.wk__life{background:rgba(255,90,90,.14);border:1px solid rgba(255,90,90,.42);color:#ff8f8f;grid-area:1/3}
.wk__move{background:rgba(0,164,255,.12);border:1px solid rgba(0,164,255,.42);color:#5fc4ff;grid-area:1/3}
.wk__row.is-hit .wk__life{opacity:1;transform:none}
.wk.is-system .wk__life{opacity:0;transform:translateX(10px) scale(.9)}
.wk.is-system .wk__plan,.wk.is-system .wk__strike{opacity:0;transform:translateY(-10px)}
.wk.is-system .wk__sys{opacity:1;transform:none}
.wk.is-system .wk__move{opacity:1;transform:none}
.wk__foot{display:flex;align-items:center;gap:12px;padding:12px 16px}
.wk__foot span{font-size:.8rem;color:var(--muted);white-space:nowrap}
.wk__foot strong{font-family:'Saira Condensed',sans-serif;font-size:1.5rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.wk__bar{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.wk__bar i{display:block;height:100%;width:100%;background:var(--blue);transform-origin:left;transform:scaleX(var(--done,.857));
  transition:transform .4s cubic-bezier(.22,.61,.36,1),background .3s}
.wk.is-low .wk__bar i{background:var(--red)}
.wk__notes{position:relative;height:50px;margin-top:10px}
.wk__notes .hand{position:absolute;left:4px;top:4px;opacity:0;-webkit-mask:none!important;mask:none!important;transition:opacity .35s ease;white-space:nowrap}
.wk__notes .hand.is-on{opacity:1}

/* ---------- The people ---------- */
.wall{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px;margin:36px 0 44px}
.wall .polaroid{will-change:transform}
.crew{display:grid;gap:16px}
.crewcard{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;gap:16px;align-items:flex-start;
  transition:transform .25s,border-color .25s}
.crewcard:hover{transform:translateY(-4px);border-color:rgba(0,164,255,.45)}
.crewcard img{width:76px;height:auto;flex:none}
.crewcard h3{font-size:1.5rem;text-transform:uppercase}
.crewcard small{display:block;color:var(--blue);font:600 .85rem/1.3 'Saira Condensed',sans-serif;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.crewcard p{color:var(--muted);font-size:.95rem;line-height:1.5}

/* ---------- The stories, on a blue belt ---------- */
#stories .tmar{background:var(--blue);padding:22px 0;-webkit-mask-image:none;mask-image:none;width:104%;margin:40px -2% 10px;
  transform:rotate(-1.4deg);box-shadow:0 30px 70px -36px var(--blue-glow)}
#stories{overflow:clip}

/* ---------- The film grows into place as you reach it ---------- */
.videos--featured{position:relative}
.reelnote{position:absolute;right:2%;top:-52px;z-index:3}

/* ---------- Things said out loud ---------- */
.saidit{display:block;margin-top:20px}
.invest__close.hand{font-size:clamp(1.55rem,2.2vw,1.9rem);color:var(--white);display:block;transform:rotate(-1deg);margin-top:16px}
.applynote{margin:6px 0 22px}
.section--final .hand{margin-top:6px;font-size:clamp(2rem,4vw,3.2rem)}

/* ---------- Wider screens ---------- */
@media (min-width:720px){
  .stats__grid{grid-template-columns:repeat(4,1fr)}
  .wall{grid-template-columns:repeat(5,1fr)}
  .wall .polaroid:nth-child(even){margin-top:46px}
  .crew{grid-template-columns:repeat(3,1fr)}
  .crewcard{flex-direction:column}
  .crewcard img{width:92px}
}
@media (min-width:960px){
  .hero2{grid-template-columns:minmax(0,1fr) 330px;gap:56px}
  .hero2__photo{margin:0}
  .wkscroll{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
  .wkscroll__stage{order:2;top:calc(50vh - 240px);background:transparent}
  .wk__row{height:44px;font-size:.95rem}
  .wk__notes{height:58px;margin-top:14px}
}
@media (max-width:959px){
  /* Long words beside a held card: give the reader room to read below it. */
  .wkscroll__stage{margin:0 -10px;padding:0 10px 2px}
  .wkblock{min-height:56vh;min-height:56svh;padding:28px 0}
  .wkblock:first-child{min-height:0;padding-top:0;order:-1}
  .wk__row{height:33px;font-size:.8rem;padding:0 12px;grid-template-columns:34px 1fr auto}
  .wk__head{padding:9px 12px}
  .wk__foot{padding:8px 12px}
  .wk__notes{height:36px;margin-top:4px}
  .wk__notes .hand{font-size:1.4rem}
  .wk__plan b,.wk__sys b{display:none}
  .reelnote{top:-44px}
}

@media (prefers-reduced-motion:reduce){
  .polaroid{transform:rotate(var(--tilt,2deg))!important}
  .hero__spot{display:none}
}

.section--final .lead{margin-bottom:26px}