/* Sticky header, phone menu, and the split-court hero. Loaded after styles.css. */

/* ---------- Header ---------- */
.nav-wrap{position:fixed;padding-top:env(safe-area-inset-top);transition:background .25s,backdrop-filter .25s}
.nav{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);transition:height .25s}
.nav-wrap.scrolled,.nav-wrap.menu-open{background:#111110e6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav-wrap.scrolled .nav{height:72px}
.nav-wrap.scrolled .nav,.nav-wrap.menu-open .nav{border-bottom-color:var(--line)}
.nav-links a,.nav-cta{touch-action:manipulation;white-space:nowrap}
.nav-toggle{display:none;position:relative;width:44px;height:44px;flex:none;margin-right:-8px;background:transparent;border:0;color:var(--white);cursor:pointer;touch-action:manipulation}
.nav-toggle span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,top .25s}
.nav-toggle span:first-child{top:16px}
.nav-toggle span:last-child{top:26px}
.menu-open .nav-toggle span:first-child{top:21px;transform:rotate(45deg)}
.menu-open .nav-toggle span:last-child{top:21px;transform:rotate(-45deg)}

@media(max-width:900px){
  .nav{position:relative;height:72px;gap:10px}
  .nav .wordmark{margin-right:auto}
  .nav-cta{min-height:44px;font-size:12px;padding:0 14px;gap:14px}
  .nav-wrap.has-menu .nav-toggle{display:block}
  .nav-wrap.has-menu .nav-links{display:none;position:absolute;top:100%;left:-20px;right:-20px;flex-direction:column;gap:0;padding:6px 20px calc(14px + env(safe-area-inset-bottom));background:#111110fa;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 24px 40px #0008}
  .nav-wrap.has-menu.menu-open .nav-links{display:flex}
  .nav-wrap.has-menu .nav-links a{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:20px;font-weight:600;border-bottom:1px solid var(--line)}
  .nav-wrap.has-menu .nav-links a:last-child{border-bottom:0}
  .nav-wrap.has-menu .nav-links a::after{content:'→';color:var(--orange)}
  /* No-JS fallback: keep the links reachable as a scrolling row under the bar. */
  .nav-wrap:not(.has-menu) .nav{height:auto;flex-wrap:wrap;padding-bottom:6px}
  .nav-wrap:not(.has-menu) .nav-links{display:flex;order:3;width:100%;gap:22px;overflow-x:auto;font-size:14px}
  .nav-wrap:not(.has-menu) .nav-links a{min-height:44px;display:flex;align-items:center;white-space:nowrap}
}
@media(max-width:380px){.nav-cta .arrow,.nav-cta span{display:none}}

/* ---------- Hero ---------- */
.hero{background:var(--bg)}
.hero-stage{position:absolute;bottom:0;right:0;width:min(58vw,880px);aspect-ratio:800/920;z-index:-1;pointer-events:none}
.hero-art{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.hero-art svg{display:block;width:100%;height:100%}
.hero-cards{position:absolute;inset:0}
.hero-card{position:absolute;background:#111110d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff2e;box-shadow:0 18px 40px #0007;padding:14px 16px;animation:hero-float 7s ease-in-out infinite}
.hc-label{display:block;font-size:10px;font-weight:650;letter-spacing:.1em;color:#c9c8c0}
.elo-card{width:196px}
.elo-card strong{display:block;font:56px/1 var(--display);color:var(--white);margin-top:6px}
.elo-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.hc-delta{font-size:13px;font-weight:700;color:var(--orange);padding-bottom:4px;white-space:nowrap}
.spark{display:block;width:100%;height:36px;margin-top:10px;overflow:visible}
.spark polyline{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.spark circle{fill:var(--orange)}
.elo-bb{left:6%;top:56%}
.elo-pb{right:5%;top:24%;animation-delay:-3s}
.elo-pb .hc-label{color:#a9dfe3}
.hero-badges{position:absolute;left:35%;top:60%;display:flex;flex-direction:column;gap:8px;animation:hero-float 8s ease-in-out -1.5s infinite}
.hero-badge{--badge-color:#FFD60A;display:flex;align-items:center;gap:12px;background:#111110e0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--badge-color) 55%,transparent);padding:8px 14px 8px 8px;box-shadow:0 14px 30px #0006}
.hero-badge i{font-style:normal;width:38px;height:38px;border:1px solid var(--badge-color);border-radius:50%;display:grid;place-items:center;font:22px/1 var(--body);color:var(--badge-color);background:color-mix(in srgb,var(--badge-color) 12%,#111110)}
.hero-badge b{display:block;font:22px/1 var(--display);letter-spacing:.02em;color:var(--white)}
.hero-badge em{display:block;font-style:normal;font-size:10px;font-weight:650;letter-spacing:.1em;color:var(--badge-color);margin-top:3px}
.hero-example{position:absolute;right:5%;bottom:9%;font-size:10px;font-weight:650;letter-spacing:.1em;color:#c9c8c0;background:#111110cc;border:1px solid #ffffff2e;padding:4px 8px}
@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.hero-card,.hero-badges{animation:none}.nav,.nav-wrap,.nav-toggle span{transition:none}}

@media(max-width:1200px){.elo-card{width:176px}.elo-card strong{font-size:48px}.hero-badge b{font-size:19px}}

/* Stacked hero: copy first, then the split-court picture with its cards. */
@media(max-width:900px){
  .hero,.hero-content{height:auto;min-height:0;max-height:none}
  .hero{display:flex;flex-direction:column;padding-bottom:0}
  .hero-stage{order:2;position:relative;top:auto;bottom:auto;right:auto;width:100%;max-width:520px;margin:28px auto 0;z-index:0}
  .hero-art{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%);mask-image:linear-gradient(180deg,transparent 0,#000 14%)}
  .hero-foot{display:none}
  .hero-content{padding-bottom:0}
  .elo-card{width:45%;padding:11px 12px}
  .elo-card strong{font-size:40px}
  .spark{height:28px;margin-top:8px}
  .elo-bb{left:3%;top:9%}
  .elo-pb{right:3%;top:9%}
  .hero-badges{left:50%;top:auto;bottom:6%;transform:translateX(-50%);flex-direction:row;gap:6px;width:94%;justify-content:center;animation:none}
  .hero-badge{flex:1 1 0;min-width:0;flex-direction:column;gap:6px;padding:9px 4px;text-align:center}
  .hero-badge i{width:34px;height:34px;font-size:20px}
  .hero-badge b{font-size:16px;letter-spacing:.01em}
  .hero-badge em{font-size:9px;margin-top:2px}
  .hero-example{right:50%;transform:translateX(50%);bottom:-2px;white-space:nowrap}
}
@media(max-width:380px){.hero-badge b{font-size:14px}.elo-card strong{font-size:34px}.hc-label{font-size:9px}}
@media(max-width:650px){
  .hero-content{padding-top:98px}
  .hero h1{margin:16px 0 16px}
  .hero-actions{margin-top:20px;gap:18px}
  .beta-note{margin-top:16px}
  .hero-stage{margin-top:18px}
}