/* Home page only. Tokens and shared components live in base.css; everything here is prefixed home-. */

/* ---------- hero ---------- */
.home-hero{position:relative;padding:clamp(2rem,1.5rem + 3vw,4.5rem) 0 clamp(2.5rem,2rem + 3vw,4rem);overflow:hidden}
.home-hero-grid{position:relative;display:grid;gap:clamp(2rem,1rem + 4vw,4rem);align-items:center}
@media(min-width:960px){.home-hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,6fr)}}
.home-hero-copy{min-width:0}
.home-hero h1{font-size:var(--fs-2xl);line-height:1.1;letter-spacing:-.04em;max-width:24ch;margin-bottom:var(--s5);color:var(--text-dim)}
.home-h1-strong{color:var(--text-strong)}
.home-schedule{max-width:34rem}
.home-hero-sub{font-size:var(--fs-sm);color:var(--text-dim);margin:0 0 var(--s5)}
.home-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s4)}
.home-fineprint{font-size:var(--fs-sm);color:var(--text-dim);margin:0}
.home-today-more{margin:var(--s5) 0 0}

/* level map: a framed terminal card, fixed aspect ratio so nothing shifts when data or Lottie arrives */
.home-map{margin:0;min-width:0}
.home-map-frame{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);overflow:hidden}
.home-map-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:32px;padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--hairline);font:500 var(--fs-xs)/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.home-map-title{color:var(--text-strong)}
.home-map-status{color:var(--text-dim);display:inline-flex;align-items:center;gap:.6em;text-align:right}
.home-map-status::before{content:"";flex:none;width:6px;height:6px;background:var(--gray-500)}
.home-map-status.is-live::before{background:var(--green)}
.home-map-stage{position:relative;aspect-ratio:14/9;background:var(--bg)}
.home-map-stage > svg,.home-map-stage > lottie-player{position:absolute;inset:0;width:100%;height:100%}
.home-map-caption{margin-top:var(--s3);font-size:var(--fs-xs);color:var(--text-dim);max-width:none}

/* level map drawing (SVG built by home.js) */
.home-levels text{font-family:var(--font-mono);font-weight:400}
.home-lv-grid line{stroke:var(--hairline);stroke-width:1}
.home-levels .home-lv-axis{fill:var(--text-dim);font-size:14px}
.home-lv-fill{opacity:0;transition:opacity var(--dur-slow) var(--ease) var(--d,0ms)}
.home-lv-edge{stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur-slow) var(--ease) var(--d,0ms)}
.home-levels .home-lv-label{font-size:16px;opacity:0;transition:opacity var(--dur) var(--ease) calc(var(--d,0ms) + 450ms)}
.home-lv-band.is-res .home-lv-fill{fill:rgba(255,69,58,.12)} .home-lv-band.is-res .home-lv-edge{stroke:var(--red)} .home-lv-band.is-res .home-lv-label{fill:var(--red)}
.home-lv-band.is-sup .home-lv-fill{fill:rgba(48,209,88,.1)} .home-lv-band.is-sup .home-lv-edge{stroke:var(--green)} .home-lv-band.is-sup .home-lv-label{fill:var(--green)}
.home-lv-strike line{stroke:var(--amber);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur-slow) var(--ease) var(--d,0ms)}
.home-levels .home-lv-note{fill:var(--amber);font-size:14px;opacity:0;transition:opacity var(--dur) var(--ease) calc(var(--d,0ms) + 300ms)}
.home-lv-stamp{opacity:0;transition:opacity var(--dur) var(--ease) var(--d,0ms)}
.home-lv-stamp rect{fill:var(--bg);stroke:currentColor;stroke-width:1}
.home-levels .home-lv-stamp text{fill:currentColor;font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.04em}
.home-lv-stamp.stamp-held{color:var(--green)} .home-lv-stamp.stamp-broke{color:var(--red)} .home-lv-stamp.stamp-untested{color:var(--text-dim)}
/* dashed OI lines need a real dash pattern once drawn */
.home-levels.is-drawn .home-lv-strike line,.home-levels.is-static .home-lv-strike line{stroke-dasharray:6 6;stroke-dashoffset:0}
.home-levels.is-drawn .home-lv-edge,.home-levels.is-static .home-lv-edge{stroke-dashoffset:0}
.home-levels.is-drawn .home-lv-fill,.home-levels.is-drawn .home-lv-label,.home-levels.is-drawn .home-lv-note,.home-levels.is-drawn .home-lv-stamp,
.home-levels.is-static .home-lv-fill,.home-levels.is-static .home-lv-label,.home-levels.is-static .home-lv-note,.home-levels.is-static .home-lv-stamp{opacity:1}
.home-levels.is-static *{transition:none!important}

/* ---------- shared section head ---------- */
.home-section-head{max-width:62ch;margin-bottom:var(--s6)}
.home-section-head h2{margin-bottom:var(--s3)}
.home-section-head .lede{margin:0}

/* ---------- today ---------- */
.home-today-grid{display:grid;gap:var(--s5)}
@media(min-width:860px){.home-today-grid{grid-template-columns:1fr 1fr}}
.home-card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s2) var(--s4);margin-bottom:var(--s4)}
.home-card-head h3{margin:0}
.home-card-meta{margin:0;font:400 var(--fs-xs)/1.3 var(--font-mono);color:var(--text-dim);display:inline-flex;align-items:center;gap:var(--s2)}
.home-zones{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.home-zone{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s3) var(--s4);
  border:1px solid var(--hairline);border-radius:var(--radius-ctl);background:var(--surface-2)}
.home-zone span{font:500 var(--fs-sm)/1.3 var(--font-sans)}
.home-zone strong{font:500 clamp(1.05rem,.95rem + .5vw,1.25rem)/1 var(--font-mono);color:var(--text-strong);font-variant-numeric:tabular-nums}
.home-zone.is-res span{color:var(--red)} .home-zone.is-sup span{color:var(--green)}
.home-zone.is-res{border-color:rgba(255,69,58,.4)} .home-zone.is-sup{border-color:rgba(48,209,88,.35)}
.home-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s5);margin:0}
.home-facts div{display:flex;flex-direction:column;gap:2px}
.home-facts dt{font:500 var(--fs-xs)/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}
.home-facts dd{margin:0;font:400 var(--fs-sm)/1.4 var(--font-mono);color:var(--text-strong);font-variant-numeric:tabular-nums}
.home-watch{margin:var(--s5) 0 0;font-size:var(--fs-sm);color:var(--text-dim)}
.home-results{display:grid;gap:var(--s3)}
.home-result{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border:1px solid var(--hairline);border-radius:var(--radius-ctl);background:var(--surface-2)}
.home-result-name{font-weight:600;color:var(--text-strong);display:flex;flex-direction:column}
.home-result-name small{font:400 var(--fs-sm)/1.4 var(--font-mono);color:var(--text-dim);font-variant-numeric:tabular-nums}
.home-result-mark{display:flex;align-items:center;gap:var(--s2)}
.home-stamp-anim{width:44px;height:44px}
.home-close{margin:var(--s4) 0 0;font:400 var(--fs-sm)/1.4 var(--font-mono);color:var(--text-dim);font-variant-numeric:tabular-nums}

/* ---------- one day, five videos: a real time axis (9:00 AM to 9:30 PM) ---------- */
.home-timeline{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5);position:relative}
.home-slot{position:relative;padding-left:var(--s6);margin:0}
.home-slot::before{content:"";position:absolute;left:5px;top:5px;width:7px;height:7px;background:var(--gray-500);box-shadow:0 0 0 4px var(--bg)}
.home-timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:1px;background:var(--hairline-strong)}
.home-slot time{display:block;font:500 var(--fs-sm)/1.2 var(--font-mono);color:var(--text-strong);margin-bottom:var(--s2);font-variant-numeric:tabular-nums}
.home-glyph{width:24px;height:24px;color:var(--text-dim);margin-bottom:var(--s2)}
.home-slot h3{font-size:var(--fs-md);margin:0 0 var(--s1);letter-spacing:-.01em}
.home-slot p{font-size:var(--fs-sm);color:var(--text-dim);margin:0;max-width:34ch}
.home-slot:nth-child(2){transition-delay:80ms} .home-slot:nth-child(3){transition-delay:160ms}
.home-slot:nth-child(4){transition-delay:240ms} .home-slot:nth-child(5){transition-delay:320ms}
@media(min-width:1024px){
  /* horizontal axis, five equal columns in time order */
  .home-timeline{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s5)}
  .home-timeline::before{left:0;right:0;top:4px;bottom:auto;width:auto;height:1px}
  .home-slot{padding:var(--s6) 0 0}
  .home-slot::before{left:0;top:1px}
  .home-slot p{max-width:none}
}

/* ---------- honesty rules ---------- */
.home-rules-grid{display:grid;gap:var(--s6)}
@media(min-width:960px){.home-rules-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .home-rules-link{grid-column:2}}
.home-rules-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--hairline)}
.home-rules-list li{display:grid;grid-template-columns:3rem 1fr;gap:var(--s4);padding:var(--s5) 0;margin:0;border-bottom:1px solid var(--hairline)}
.home-rule-no{font:500 var(--fs-sm)/1.6 var(--font-mono);color:var(--text-dim);font-variant-numeric:tabular-nums}
.home-rules-list h3{font-size:var(--fs-lg);margin:0 0 var(--s2)}
.home-rules-list p{margin:0;color:var(--text-dim)}
.home-rules-list li:nth-child(2){transition-delay:100ms} .home-rules-list li:nth-child(3){transition-delay:200ms}
.home-rules-link{margin:0}

/* ---------- follow ---------- */
.home-channels{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--hairline)}
@media(min-width:760px){.home-channels{grid-template-columns:1fr 1fr;column-gap:var(--s6)}}
.home-channel{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:var(--s4);padding:var(--s4) 0;margin:0;border-bottom:1px solid var(--hairline)}
.home-channel > .icon{width:20px;height:20px;color:var(--text-dim)}
.home-channel-text{display:flex;flex-direction:column;min-width:0}
.home-channel-text strong{color:var(--text-strong);font-weight:600}
.home-channel-text span{color:var(--text-dim);font:400 var(--fs-xs)/1.5 var(--font-mono)}
.home-channel-text small{color:var(--text-dim);font-size:var(--fs-sm)}
.home-channel-link{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s3);border:1px solid var(--hairline-strong);
  border-radius:var(--radius-ctl);color:var(--text);text-decoration:none;font:500 var(--fs-sm)/1 var(--font-sans)}
.home-channel-link:hover{border-color:var(--text-dim);background:var(--surface-2);color:var(--text-strong)}
.home-channel-link.is-pending{color:var(--text-dim);border-style:dashed;font-family:var(--font-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
/* Telegram: the whole first row, in the primary-button treatment */
.home-channel-primary{grid-column:1/-1;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);
  padding:var(--s5);margin:var(--s5) 0 var(--s3)}
.home-channel-primary > .icon{color:var(--text-strong);width:24px;height:24px}
.home-channel-primary .home-channel-text strong{font-size:var(--fs-lg)}
@media(max-width:560px){.home-channel-primary{grid-template-columns:24px 1fr}.home-channel-primary .btn{grid-column:1/-1;justify-content:center}}

/* ---------- FAQ teaser ---------- */
.home-faq-grid{display:grid;gap:var(--s6)}
@media(min-width:960px){.home-faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.home-faq-list{border-top:1px solid var(--hairline)}
.home-faq-list details{border-bottom:1px solid var(--hairline)}
.home-faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  min-height:56px;padding:var(--s4) 0;font:500 var(--fs-md)/1.35 var(--font-sans);color:var(--text-strong)}
.home-faq-list summary::-webkit-details-marker{display:none}
.home-faq-list summary::after{content:"";flex:none;width:16px;height:16px;background:var(--text-dim);
  -webkit-mask:url(../icons/chevron-down.svg) center/16px no-repeat;mask:url(../icons/chevron-down.svg) center/16px no-repeat;transition:transform var(--dur-fast) var(--ease)}
.home-faq-list details[open] summary::after{transform:rotate(180deg)}
.home-faq-list details p{margin:0 0 var(--s5);color:var(--text-dim)}

/* ---------- Daksh Media ---------- */
.home-sub-h{font-size:var(--fs-lg);margin:var(--s8) 0 var(--s3)}
.home-media .home-section-head h2{max-width:24ch}

/* ---------- features: six outputs, each with a one-shot motion graphic ---------- */
.home-feature-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4)}
@media(min-width:640px){.home-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.home-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.home-feature{position:relative;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-card);
  padding:var(--s5);margin:0;display:flex;flex-direction:column}
.home-feature:nth-child(3n+2){transition-delay:90ms} .home-feature:nth-child(3n){transition-delay:180ms}
.home-fx{display:block;width:100%;height:auto;aspect-ratio:320/150;background:var(--bg);border:1px solid var(--hairline);
  border-radius:var(--radius-ctl);margin-bottom:var(--s5)}
.home-feature-no{font:500 var(--fs-xs)/1 var(--font-mono);letter-spacing:.04em;color:var(--text-dim);margin:0 0 var(--s2)}
.home-feature h3{font-size:1.25rem;margin:0 0 var(--s2)}
.home-feature p{margin:0 0 var(--s4);color:var(--text-dim);font-size:var(--fs-sm);line-height:1.6}
.home-feature .home-feature-where{margin:auto 0 0;padding-top:var(--s3);border-top:1px solid var(--hairline);
  font:500 var(--fs-xs)/1.3 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}

/* shared drawing styles */
.home-fx .fx-grid{stroke:var(--hairline);stroke-width:1}
.home-fx .fx-axis{stroke:var(--hairline-strong);stroke-width:1}
.home-fx .fx-small{fill:var(--text-dim);font:400 10px/1 var(--font-mono)}
.home-fx .fx-hand{fill:var(--text-dim);font:400 11px/1 var(--font-mono)}
.fx-res{fill:rgba(255,69,58,.12)} .fx-sup{fill:rgba(48,209,88,.1)}
.fx-res-edge{stroke:var(--red);stroke-width:1} .fx-sup-edge{stroke:var(--green);stroke-width:1}
.fx-now{stroke:var(--amber);stroke-width:1;stroke-dasharray:4 4}
/* default = final state (no JS, reduced motion, print) */
.fx-edge{stroke-dasharray:1;stroke-dashoffset:0}

@keyframes fx-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fx-needle{0%{transform:rotate(-80deg)}60%{transform:rotate(12deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
@keyframes fx-stamp{0%{opacity:0;transform:scale(1.3)}70%{opacity:1;transform:scale(.97)}100%{opacity:1;transform:scale(1)}}
@keyframes fx-slide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fx-wallmove{0%,35%{fill:#E0A93B}65%,100%{fill:#454545}}
@keyframes fx-wallmove-b{0%,35%{fill:#454545}65%,100%{fill:#E0A93B}}

/* 2 OI */
.home-fx-oi rect{fill:var(--gray-500)}
.home-fx-oi .fx-calls rect,.home-fx-oi .fx-puts rect{transform-origin:0 75px;transform-box:view-box}
.home-fx-oi .fx-wall-b{fill:var(--amber)}
.home-fx-oi .fx-wall-put{fill:var(--green)}
/* 3 regime */
.home-fx-regime .fx-arc{fill:none;stroke:var(--hairline-strong);stroke-width:2;stroke-linecap:butt}
.home-fx-regime .fx-tick{stroke:var(--text-dim);stroke-width:1}
.home-fx-regime .fx-needle{transform-origin:160px 128px;transform-box:view-box}
.home-fx-regime .fx-needle line{stroke:var(--amber);stroke-width:2;stroke-linecap:butt}
.home-fx-regime .fx-needle circle{fill:var(--amber)}
.home-fx-regime .fx-pips rect{fill:none;stroke:var(--amber);stroke-width:1}
.home-fx-regime .fx-pips rect.on{fill:var(--amber)}
/* 4 context: a 2x2 mono readout */
.home-fx-context{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;overflow:hidden}
.home-fx-context .fx-tile{padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:4px;background:var(--surface);
  border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.home-fx-context .fx-tile:nth-child(2n){border-right:0}
.home-fx-context .fx-tile:nth-child(n+3){border-bottom:0}
.home-fx-context span{font:500 10px/1.2 var(--font-mono);color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em}
.home-fx-context strong{font:400 12px/1.2 var(--font-mono);color:var(--text-strong)}
/* 5 check */
.home-fx-check .fx-res-line{stroke:var(--red);stroke-width:1}
.home-fx-check .fx-price{fill:none;stroke:var(--text-strong);stroke-width:1.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.home-fx-check .fx-stamp{color:var(--green);transform-origin:243px 107px;transform-box:view-box}
.home-fx-check .fx-stamp rect{fill:var(--bg);stroke:currentColor;stroke-width:1}
.home-fx-check .fx-stamp text{fill:currentColor;font:500 13px/1 var(--font-mono);letter-spacing:.04em}
/* 6 board */
.home-fx-board .fx-rows rect{fill:none;stroke:var(--hairline-strong);stroke-width:1}
.home-fx-board .held{fill:var(--green)} .home-fx-board .broke{fill:var(--red)} .home-fx-board .untested{fill:none;stroke:var(--text-dim);stroke-width:1}

/* Play once when the card is revealed. site.js adds .is-in a single time; nothing is tied to scroll position. */
@media (prefers-reduced-motion: no-preference){
  html.js .home-feature:not(.is-in) .home-fx *{animation-play-state:paused}
  html.js .home-feature .fx-edge{animation:fx-draw .9s var(--ease) both}
  html.js .home-feature .fx-sup-edge{animation-delay:.25s}
  html.js .home-feature .home-fx-zones .fx-band{animation:fx-fade .7s var(--ease) .35s both}
  html.js .home-feature .home-fx-zones .fx-hand,html.js .home-feature .home-fx-zones .fx-now,html.js .home-feature .home-fx-zones .fx-small{animation:fx-fade .5s var(--ease) .8s both}
  html.js .home-feature .home-fx-oi .fx-calls rect,html.js .home-feature .home-fx-oi .fx-puts rect{animation:fx-grow .7s var(--ease) both}
  html.js .home-feature .home-fx-oi .fx-wall-a{animation:fx-grow .7s var(--ease) both,fx-wallmove 2.4s var(--ease) .8s both}
  html.js .home-feature .home-fx-oi .fx-wall-b{animation:fx-grow .7s var(--ease) both,fx-wallmove-b 2.4s var(--ease) .8s both}
  html.js .home-feature .home-fx-regime .fx-arc{stroke-dasharray:1;animation:fx-draw .8s var(--ease) both}
  html.js .home-feature .home-fx-regime .fx-needle{animation:fx-needle 1.4s var(--ease) .4s both}
  html.js .home-feature .home-fx-regime .fx-pips rect{animation:fx-fade .3s var(--ease) both}
  html.js .home-feature .home-fx-regime .fx-pips rect:nth-child(1){animation-delay:1.3s}
  html.js .home-feature .home-fx-regime .fx-pips rect:nth-child(2){animation-delay:1.45s}
  html.js .home-feature .home-fx-regime .fx-pips rect:nth-child(3){animation-delay:1.6s}
  html.js .home-feature .home-fx-context .fx-tile{animation:fx-slide .5s var(--ease) both}
  html.js .home-feature .home-fx-context .fx-tile:nth-child(2){animation-delay:.1s}
  html.js .home-feature .home-fx-context .fx-tile:nth-child(3){animation-delay:.2s}
  html.js .home-feature .home-fx-context .fx-tile:nth-child(4){animation-delay:.3s}
  html.js .home-feature .home-fx-check .fx-price{animation:fx-draw 1.6s var(--ease) .2s both}
  html.js .home-feature .home-fx-check .fx-stamp{animation:fx-stamp .55s var(--ease) 1.8s both}
  html.js .home-feature .home-fx-board .fx-rows rect{animation:fx-slide .45s var(--ease) both}
  html.js .home-feature .home-fx-board .fx-rows rect:nth-child(2){animation-delay:.12s}
  html.js .home-feature .home-fx-board .fx-rows rect:nth-child(3){animation-delay:.24s}
  html.js .home-feature .home-fx-board .fx-rows rect:nth-child(4){animation-delay:.36s}
  html.js .home-feature .home-fx-board .fx-legend{animation:fx-fade .5s var(--ease) .6s both}
}