/* Extra layer over site.css / stats.css: the floating header capsule, the sound toggle,
   the new sections (coincidences, farewell) and layout fixes for pinned scenes and phones. */

/* ---------- header: a floating glass capsule ---------- */
.bar{top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;max-width:1264px;margin-inline:auto;height:58px;padding:0;
  border:1px solid rgba(255,255,255,.09);border-radius:var(--pill);background:rgba(22,22,22,.72);
  -webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden;z-index:30}
.bar-in{max-width:none;height:100%;padding:0 8px 0 12px;gap:10px}
.bar .bar-nav{margin-inline:auto}
.bar .bar-nav a.is-active{background:rgba(0,199,139,.14);color:var(--gold)}
.bar .progress{left:28px;right:28px;bottom:0;height:2px}
.page-stats .bar{position:sticky;top:10px;width:calc(100% - 24px);margin:10px auto 0}
@media (max-width:1100px){.bar .bar-nav{display:none}.snd{margin-left:auto}.bar .bar-cta{margin-left:0}}
@media (max-width:420px){.bar .mark span:last-child{display:none}}

/* sound toggle (created by sfx.js) */
.snd{position:relative;display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.snd:hover{background:var(--pitch-2);color:var(--ink)}
.snd svg{width:22px;height:22px}
.snd::after{content:"";position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #161616;transform:scale(0);transition:transform .2s}
.snd[aria-pressed="true"]::after{transform:scale(1)}

/* footer */
.foot-up{margin-left:auto;padding:8px 16px;border:1px solid var(--line-2);border-radius:var(--pill);color:var(--ink-2);font-weight:600;font-size:14px;text-decoration:none;transition:border-color .2s,color .2s}
.foot-up:hover{border-color:var(--gold);color:var(--ink)}
.foot-top .foot-up + .bar-cta{margin-left:0}

/* ---------- coincidences ---------- */
#coincidences{border-top:1px solid var(--line);padding-block:clamp(80px,14vh,160px)}
.co-head h2{font-family:var(--display);font-style:normal;font-weight:700;font-size:clamp(1.7rem,3.2vw,2.8rem);letter-spacing:-.025em;line-height:1.08;margin:12px 0 0;max-width:22ch}
.co-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:36px}
.co-card{display:flex;flex-direction:column;gap:10px;min-height:230px;padding:22px;border-radius:20px;background:rgba(34,34,34,.92);border:1px solid var(--line);transition:border-color .25s,transform .25s}
.co-card:hover{border-color:rgba(0,199,139,.45);transform:translateY(-3px)}
.co-num{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;letter-spacing:-.03em;color:var(--gold)}
.co-card h3{margin:4px 0 0;font-family:var(--body);font-weight:700;font-size:17px;line-height:1.25;color:var(--ink)}
.co-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:1100px){.co-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.co-grid{grid-template-columns:1fr}.co-card{min-height:0}}

/* ---------- farewell: the last match at the Monumental ---------- */
#farewell{position:relative;border-top:1px solid var(--line);padding-block:clamp(96px,14vh,160px) clamp(72px,12vh,140px)}
#farewell .epi{max-width:720px}
.fw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:40px}
.fw-cell{padding:20px 22px;border-radius:var(--r);background:rgba(34,34,34,.92);border:1px solid var(--line)}
.fw-cell b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1;letter-spacing:-.04em;color:var(--sky);font-variant-numeric:tabular-nums}
.fw-cell span{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.fw-text{margin-top:40px}
.fw-quote{margin:28px 0 0;padding:18px 22px;border-left:3px solid var(--sky);border-radius:0 var(--r) var(--r) 0;background:rgba(116,172,223,.08);
  font-family:var(--body);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.fw-stats{margin-top:36px}
.fw-stats span{line-height:1.35}
@media (max-width:900px){.fw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.fw-grid{grid-template-columns:1fr}}

/* ---------- pinned chronicle: cards take the height left under the head, never cut at the bottom ---------- */
.reel.is-pinned{padding:84px 0 20px;justify-content:flex-start}
.reel.is-pinned .reel-viewport{flex:1 1 auto;min-height:0;display:flex;padding-block:14px 16px}
.reel.is-pinned .reel-track{height:100%;align-items:stretch}
.reel.is-pinned .card{height:100%;min-height:0;max-height:560px;overflow:hidden}
.reel.is-pinned .card-img{flex:0 1 auto;min-height:72px}
.reel.is-pinned .card p{flex:1 1 auto;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
.reel.is-pinned .card h3,.reel.is-pinned .card-top,.reel.is-pinned .score,.reel.is-pinned .watch{flex:none}
@media (max-height:760px){.reel.is-pinned .reel-head{gap:8px 40px}.reel.is-pinned .filters{margin-top:10px}.reel.is-pinned .reel-viewport{margin-top:10px}}
#frames.is-tunnel .frames-head{top:92px}
.chapter,#numbers,#coincidences,#chronicle,#epilogue,#farewell,#frames{scroll-margin-top:80px}

/* keep transformed and oversized pieces from widening the page on phones */
main{overflow-x:clip}
@media (max-width:899px){.reel-viewport{padding-inline:var(--gutter)}}

/* ---------- Leo is clickable: keepy-uppy ---------- */
.runner-flip{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.runner-tag{transition:background .2s,color .2s,border-color .2s}
.runner.is-juggling .runner-tag{background:var(--gold);border-color:var(--gold);color:#0b2a1f}
.runner.is-juggling .runner-tag::before{background:#0b2a1f}
.cursor.is-kick{width:46px;height:46px;margin:-23px 0 0 -23px;background:transparent;border:2px solid var(--gold)}
.cursor.is-kick .cursor-label{opacity:0}
.runner{transition:opacity .35s ease}
.runner.is-off{opacity:0}
.runner.is-off .runner-flip{pointer-events:none}

/* ---------- video buttons and the in-page player ---------- */
.vrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.vbtn{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border:1px solid var(--line-2);border-radius:var(--pill);background:rgba(22,22,22,.7);color:var(--ink);font-weight:600;font-size:14.5px;text-decoration:none;transition:border-color .2s,background .2s}
.vbtn::before{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%230b2a1f'/%3E%3C/svg%3E") center/18px no-repeat}
.vbtn:hover{border-color:var(--gold);background:rgba(0,199,139,.1)}
#farewell .vbtn::before,#epilogue .vbtn::before{background-color:var(--sky)}
.vmodal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(12px,4vw,48px);background:rgba(5,6,8,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .25s}
.vmodal.is-open{opacity:1}
.vmodal-box{width:min(1100px,100%);transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.vmodal.is-open .vmodal-box{transform:none}
.vmodal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.vmodal-title{margin:0;font-weight:700;font-size:clamp(15px,1.6vw,18px);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vmodal-x{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:rgba(34,34,34,.9);color:var(--ink);cursor:pointer}
.vmodal-x svg{width:20px;height:20px}
.vmodal-x:hover{border-color:var(--gold)}
.vmodal-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.vmodal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmodal-foot{margin:12px 0 0;font-size:13.5px;color:var(--mute)}
.vmodal-foot a{color:var(--ink-2)}
html.has-modal{overflow:hidden}
html.has-modal .runner,html.has-modal .scene-layer{visibility:hidden}

/* ---------- scenes: teammates, family, the crowd ---------- */
.scene-layer{position:fixed;inset:0;z-index:17;pointer-events:none;overflow:hidden;visibility:hidden}
.scene-layer.is-live{visibility:visible}
.sc-fig{position:absolute;left:0;top:0;width:112px;height:152px;transform-origin:0 0;will-change:transform;opacity:0;transition:opacity .4s}
.sc-fig.on{opacity:1}
.sc-flip{width:112px;height:152px;transform-origin:48px 50%}
.sc-svg{display:block;overflow:visible}
.sc-num{font-family:var(--display);font-weight:900;font-size:13px}
.sc-fig.is-sil .sc-svg{filter:drop-shadow(0 0 1.2px rgba(255,214,170,.95)) drop-shadow(0 0 9px rgba(255,190,130,.35))}
.sc-fig.is-ghost .sc-svg{filter:drop-shadow(0 0 1.2px rgba(170,214,255,.95)) drop-shadow(0 0 10px rgba(116,172,223,.45));opacity:.92}
.sc-tag{position:absolute;left:48px;bottom:100%;transform:translate(-50%,-4px) scale(.9);white-space:nowrap;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--ink);background:rgba(7,8,12,.82);border:1px solid var(--line-2);padding:3px 9px;border-radius:999px;opacity:0;transition:opacity .35s}
.sc-tag.on{opacity:1}
.is-dog .sc-tag{bottom:42%}
.sc-story{position:absolute;left:0;top:0;max-width:min(320px,86vw);padding:10px 14px;border-radius:14px;background:rgba(10,12,16,.9);border:1px solid rgba(0,199,139,.45);color:var(--ink);font-size:13.5px;line-height:1.4;font-weight:600;opacity:0;transition:opacity .35s;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.sc-story.on{opacity:1}
.sc-story::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;margin-left:-5px;background:inherit;border:inherit;border-top:0;border-left:0;transform:rotate(45deg)}
.sc-ball{position:absolute;left:0;top:0;width:16px;height:16px;transform-origin:0 0;z-index:40;opacity:0;transition:opacity .2s}
.sc-ball.on{opacity:1}
.sc-ball svg{display:block}
.sc-spark{position:absolute;z-index:50;font-style:normal;font-size:16px;line-height:1;color:var(--gold);animation:scspark var(--d,1.2s) ease-out both}
.sc-spark.heart{color:#ff7a90;width:16px;height:16px}
.sc-spark.heart svg{width:100%;height:100%;display:block}
@keyframes scspark{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx,0),-70px) scale(1.1);opacity:0}}

/* farewell crowd: stands rising behind the text */
#farewell{--crowd-h:clamp(170px,32vh,320px);padding-bottom:calc(var(--crowd-h) + 40px)}
#farewell > .wrap{position:relative;z-index:1}
.fw-crowd-wrap{position:absolute;inset:0;z-index:0;pointer-events:none}
.fw-crowd{position:sticky;top:calc(100vh - var(--crowd-h));top:calc(100svh - var(--crowd-h));display:block;width:100%;height:var(--crowd-h);
  -webkit-mask-image:linear-gradient(transparent,#000 36%);mask-image:linear-gradient(transparent,#000 36%)}
.thanks{position:relative;z-index:1}

/* wide shots in the final and the farewell */
.epi-shot,.fw-shot{margin-top:40px}
.fw-shot .shot-mask{aspect-ratio:3.2/1}
@media (max-width:700px){.fw-shot .shot-mask{aspect-ratio:2/1}}
.epi-sub{margin-top:18px}

/* ---------- records ---------- */
#records{border-top:1px solid var(--line);padding-block:clamp(80px,14vh,160px)}
.rec-head h2{font-family:var(--display);font-style:normal;font-weight:700;font-size:clamp(1.7rem,3.2vw,2.8rem);letter-spacing:-.025em;line-height:1.08;margin:12px 0 0;max-width:24ch}
.rec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:36px}
.rec-card{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:20px;background:rgba(34,34,34,.92);border:1px solid var(--line)}
.rec-card b{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:.95;letter-spacing:-.04em;color:var(--gold-2);font-variant-numeric:tabular-nums}
.rec-card h3{margin:2px 0 0;font-size:16px;font-weight:700;line-height:1.3;color:var(--ink)}
.rec-card p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.rec-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.rec-panel{padding:26px;border-radius:20px;background:rgba(34,34,34,.92);border:1px solid var(--line)}
.rec-panel h3{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em}
.rec-panel .sub{margin:6px 0 0;font-size:14px;color:var(--mute)}
.hbars{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.hbar{display:grid;grid-template-columns:minmax(92px,128px) 1fr auto;align-items:center;gap:12px;font-size:14.5px;color:var(--ink-2)}
.hbar-track{position:relative;height:10px;border-radius:5px;background:rgba(255,255,255,.06)}
.hbar-fill{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:5px;background:var(--gold);transform-origin:0 50%}
.hbar b{min-width:3ch;text-align:right;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.hbar small{display:block;font-size:12px;color:var(--mute);font-weight:400}
.hbar:hover .hbar-fill{background:var(--gold-2)}
.rec-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.rec-tile{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.rec-tile b{display:block;font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.rec-tile span{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.rec-note{margin:18px 0 0;font-size:13.5px;color:var(--mute)}
@media (max-width:1100px){.rec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rec-split{grid-template-columns:1fr}}
@media (max-width:560px){.rec-grid{grid-template-columns:1fr}.rec-panel{padding:20px}.hbar{grid-template-columns:86px 1fr auto;gap:10px;font-size:13.5px}}

/* coincidences grow to three rows; farewell grid to nine cells */
.chapter,#numbers,#records,#coincidences,#chronicle,#epilogue,#farewell,#frames{scroll-margin-top:80px}
#farewell .shot figcaption{position:relative;padding:6px 10px;border-radius:10px;background:rgba(12,13,17,.86)}
#farewell .fw-text p,#farewell .fw-text .fw-quote{text-shadow:0 1px 14px rgba(0,0,0,.85)}
#farewell .thanks{text-shadow:none}

/* ---------- performance ---------- */
/* film grain: moved with a transform (handled by the compositor) instead of background-position, which repainted the whole screen */
.grain{inset:-90px;animation:grain-move 1.2s steps(6) infinite;will-change:transform}
@keyframes grain-move{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-50px,37px,0)}40%{transform:translate3d(41px,-60px,0)}60%{transform:translate3d(-33px,-17px,0)}80%{transform:translate3d(57px,49px,0)}100%{transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}
/* the gold chalk line: a static copy seen through a window that moves with Leo (see site.js) */
.trail-win{position:absolute;left:0;top:0;width:100%;z-index:2;pointer-events:none;overflow:hidden;will-change:transform}
.trail-win-in{will-change:transform}
.trail-win svg{display:block;overflow:visible}
.trail-glow{fill:none;stroke:var(--gold);stroke-width:9;stroke-opacity:.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.trail-win{display:none}}
/* phones and tablets: no live blur behind glass panels (it is recomputed on every frame over the moving
   background or the 3D view), no full-screen grain layer to blend; solid backgrounds look the same there */
/* (html in front: the page stylesheets loaded after this one set the same properties) */
@media (hover:none),(pointer:coarse),(max-width:759px){
  html .bar{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(19,20,23,.95)}
  html .sndm,html .autot,html .gm-hud-l,html .gm-meter,html .gm-ico,html .gm-hint,html .gp-cap,html .vmodal,html .mnav{-webkit-backdrop-filter:none;backdrop-filter:none}
  html .gm-hud-l,html .gm-meter,html .gm-ico,html .gm-hint{background-color:rgba(10,12,16,.82)}
  html .grain{display:none}
}