/* Fonts: self-hosted (latin + latin-ext subsets, variable woff2) */
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800; font-display:swap; src:url('../fonts/bricolage-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600 800; font-display:swap; src:url('../fonts/bricolage-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

html { scroll-padding-top: 5rem; }
body { background:#fff6ec; color:#14110f; }
/* blobs, rotated placeholders and not-yet-revealed .from-right blocks stick out a few px: no sideways scrolling on phones */
html, body { overflow-x:hidden; }
@supports (overflow:clip) { html, body { overflow-x:clip; } }

/* keyframes */
@keyframes rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes floaty { 0%,100% { transform:translateY(0) rotate(var(--r,0deg)); } 50% { transform:translateY(-14px) rotate(var(--r,0deg)); } }
@keyframes bounceball { 0%,100% { transform:translateY(0) scaleY(1); } 45% { transform:translateY(-70px) scaleY(1.04); } 50% { transform:translateY(-70px); } 92% { transform:translateY(0) scaleY(1); } 96% { transform:translateY(0) scaleY(.9) scaleX(1.06); } }
@keyframes shadowpulse { 0%,100% { transform:scale(1); opacity:.28; } 48% { transform:scale(.55); opacity:.12; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes blob { 0%,100% { rotate:0deg; scale:1 1; } 33% { rotate:14deg; scale:1.07 .93; } 66% { rotate:-10deg; scale:.94 1.06; } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes wiggle { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-8deg); } 75% { transform:rotate(8deg); } }
@keyframes shine { from { transform:translateX(-120%) skewX(-20deg); } to { transform:translateX(220%) skewX(-20deg); } }
@keyframes ping2 { 0% { transform:scale(1); opacity:.7; } 100% { transform:scale(2.4); opacity:0; } }
@keyframes pop { 0%,100% { transform:rotate(-6deg) scale(1); } 50% { transform:rotate(-6deg) scale(1.08); } }
@keyframes sheen { to { background-position:-200% 0; } }

/* entrance on load (CSS only) */
.rise { opacity:0; animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:var(--d,0s); }

/* reveal on scroll */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.from-left { transform:translateX(-36px); }
.reveal.from-right { transform:translateX(36px); }
.reveal.in { opacity:1; transform:none; }
.no-js .reveal { opacity:1; transform:none; }

.floaty { animation:floaty 6s ease-in-out infinite; }
.blob { border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; animation:blob 14s ease-in-out infinite; will-change:rotate, scale; }
.ball-bounce { animation:bounceball 1.9s cubic-bezier(.3,0,.6,1) infinite; transform-origin:bottom center; }
.ball-shadow { animation:shadowpulse 1.9s cubic-bezier(.3,0,.6,1) infinite; }
.ball-spin { animation:spin 9s linear infinite; }
.marquee-track { animation:marquee 40s linear infinite; width:max-content; }
.marquee-track:hover { animation-play-state:paused; }
.ping2 { animation:ping2 1.8s cubic-bezier(0,0,.2,1) infinite; }
.sticker { animation:pop 3.2s ease-in-out infinite; }

/* court lines as background pattern */
.court { background-image:url('../images/court_lines.svg'); background-size:cover; background-position:center; }
.dots { background-image:radial-gradient(rgba(20,17,15,.12) 1.4px, transparent 1.4px); background-size:24px 24px; }
.dots-light { background-image:radial-gradient(rgba(255,255,255,.14) 1.4px, transparent 1.4px); background-size:24px 24px; }

/* diagonal section edges */
.slant-top { clip-path:polygon(0 36px, 100% 0, 100% 100%, 0 100%); padding-top:calc(4rem + 36px); }
.slant-both { clip-path:polygon(0 36px, 100% 0, 100% calc(100% - 36px), 0 100%); padding-top:calc(4rem + 36px); padding-bottom:calc(4rem + 36px); }

/* placeholder graphics (to be replaced by real photos) */
.ph { position:relative; display:flex; align-items:center; justify-content:center; text-align:center; color:#5c534c; font-weight:600; font-size:.9rem;
  background:repeating-linear-gradient(135deg, #f3e4d3 0 14px, #ecd7bf 14px 28px); border:3px dashed #c62a23; }

/* cards */
.card { transition:transform .25s ease, box-shadow .25s ease; }
.card:hover { transform:translateY(-6px) rotate(-.6deg); box-shadow:0 18px 30px -12px rgba(20,17,15,.35); }
.card:hover .ico { animation:wiggle .6s ease; }
.btn { position:relative; overflow:hidden; transition:transform .2s ease, background-color .2s ease; }
.btn:hover { transform:translateY(-2px); }
.btn::after { content:''; position:absolute; top:0; bottom:0; width:40%; left:0; background:rgba(255,255,255,.35); transform:translateX(-120%) skewX(-20deg); }
.btn:hover::after { animation:shine .7s ease; }

/* headline sheen */
.sheen { background:linear-gradient(100deg, #c62a23 20%, #ff8a1f 50%, #c62a23 80%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:sheen 6s linear infinite; }

/* accordion */
details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
details[open] .chev { transform:rotate(180deg); }
.chev { transition:transform .25s ease; }

/* header + progress */
header { transition:background-color .3s ease, box-shadow .3s ease; }
header.scrolled { background:rgba(255,246,236,.94); box-shadow:0 2px 14px rgba(20,17,15,.14); backdrop-filter:blur(6px); }
#progress { pointer-events:none; transform:scaleX(0); transform-origin:left; }
.nav-link.active { color:#c62a23; }
.lang-btn[aria-selected="true"] { background:#14110f; color:#fff; }
.lang-btn[aria-selected="true"]:hover { background:#14110f; }

/* first-team cards on the home page: click flips between next matches (front) and standings (back) */
.flip { perspective:1400px; cursor:pointer; border-radius:1.5rem; min-width:0; }
.flip-inner { display:grid; grid-template-columns:minmax(0,1fr); height:100%; transition:transform .7s cubic-bezier(.3,.7,.2,1); transform-style:preserve-3d; }
.flip.flipped .flip-inner { transform:rotateY(180deg); }
.face { min-width:0; overflow-wrap:anywhere; grid-area:1 / 1; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.face-back { transform:rotateY(180deg); }
.flip:hover .face { box-shadow:0 18px 30px -12px rgba(20,17,15,.35); }

/* camps */
.camp.done { opacity:.55; }
.camp.done .camp-name { text-decoration:line-through; }

input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid #ff8a1f; outline-offset:2px; }

/* hero parallax: shapes follow the pointer a little */
.parallax { translate:calc(var(--mx,0) * var(--px,14px)) calc(var(--my,0) * var(--px,14px)); transition:translate .25s ease-out; }

/* shop: the basket is a hoop, a ball is shot into it (shop.js, throwBall) */
@keyframes sway { 0%,100% { transform:none; } 20% { transform:scale(.82,1.14) skewX(-7deg); } 45% { transform:scale(1.12,.94) skewX(6deg); } 70% { transform:scale(.94,1.05) skewX(-3deg); } }
@keyframes rimshake { 0%,100% { transform:translateY(0); } 25% { transform:translateY(2.5px); } 55% { transform:translateY(-1px); } }
@keyframes bumpcount { 0%,100% { transform:scale(1); } 40% { transform:scale(1.7); } }
.net { transform-box:view-box; transform-origin:36px 40px; }
.net.swish { animation:sway .75s ease-out; }
#hoopRim { transform-box:fill-box; }
#hoopRim.swish { animation:rimshake .5s ease-out; }
#cartCount.bump { animation:bumpcount .4s ease; }
.flying-ball { position:fixed; left:0; top:0; z-index:200; width:30px; height:30px; margin:-15px 0 0 -15px; pointer-events:none; will-change:transform; }

.flip-hint { position:absolute; top:1rem; right:1rem; display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:9999px; background:rgba(255,255,255,.2); transition:background-color .2s ease, transform .5s ease; }
.flip:hover .flip-hint { background:rgba(255,255,255,.35); transform:rotate(180deg); }

/* header drop-down menus (generated in scripts/sync-fallback.js) */
.nav-menu { display:none; position:absolute; left:-.5rem; top:100%; min-width:12rem; margin-top:.35rem; padding:.4rem; border-radius:1rem; background:#fff; box-shadow:0 14px 30px -10px rgba(20,17,15,.35); z-index:60; }
.nav-menu::before { content:''; position:absolute; left:0; right:0; top:-.5rem; height:.5rem; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.open .nav-menu { display:block; }
.nav-group:hover > .nav-link svg, .nav-group.open > .nav-link svg { transform:rotate(180deg); }
.nav-link svg { transition:transform .2s ease; }
.nav-sub.active { color:#c62a23; background:#fff6ec; }