/* Bounce Padel — shared brand + demo chrome */
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-latin-800-italic.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-latin-800-normal.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url(/fonts/manrope-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#0b0c10; --ink-2:#14161d; --ink-3:#1d2029; --line-d:#2a2d38;
  --cream:#f3f2ea; --yellow:#ebea64; --yellow-d:#d9d846; --blue:#3041cb; --blue-l:#5c6cf0;
  --t-light:#f4f4ef; --t-muted:#c2c3cc;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --sans:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Plex Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.76,0,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--t-light);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.stage{position:fixed;inset:0;background:var(--ink)}
.header-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.03);transition:transform 1s var(--ease)}
body.is-revealing .header-still,body.is-revealed .header-still{transform:scale(1)}

.loader{position:fixed;inset:0;z-index:20;overflow:hidden}
.loader.is-done{opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}

.demo-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--pad) calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(11,12,16,.88) 45%);opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
body.is-revealed .demo-bar{opacity:1;pointer-events:auto;transform:none}
.demo-bar a,.demo-bar .name{text-decoration:none;color:var(--t-light)}
.demo-bar .all{font-weight:700;font-size:15px;border-bottom:2px solid var(--yellow);padding:4px 0}
.demo-bar .name{font:800 italic clamp(18px,2vw,26px)/1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--yellow)}
.btn{appearance:none;border:0;cursor:pointer;background:var(--yellow);color:var(--ink);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;padding:12px 22px;border-radius:999px;transition:transform .25s var(--ease),background .2s}
.btn:hover{background:var(--yellow-d);transform:translateY(-1px)}
.btn:active{transform:none}

@media (max-width:600px){
  .demo-bar{flex-wrap:wrap;gap:10px 16px}
  .demo-bar .name{order:-1;width:100%}
}
@media (orientation:landscape) and (max-height:480px){
  .demo-bar{padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))}
  .btn{padding:8px 16px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.4s!important}
  .header-still,.loader{transform:none!important}
}