/* hero banners */
.hero{position:relative;overflow:hidden;background:linear-gradient(115deg,#55ccff 0%,#22a2ff 50%,#1e6cff 100%) center/cover fixed}
/* rotated logo pattern: only this layer is tilted, hero content stays upright. Tile = logo (130px wide) + 20-unit padding on every side (see Boop_30_padded.svg) */
.hero::before{content:"";opacity:0.8;position:absolute;inset:-300px;z-index:0;background:url("../uploads/logo/Boop_30_padded.svg") center/142.4px 65.9px repeat;transform:rotate(-18deg);pointer-events:none}
.hero .container{position:relative;z-index:1}
.hero .container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.hero.home{min-height:100vh;min-height:100svh}
.hero.home .container{min-height:100vh;min-height:100svh;padding-top:134px;padding-bottom:40px}
.hero.page .container{padding-top:40px;padding-bottom:40px}
.hero.page img{width:min(843px,100%)}
/* "Our Games" sticker button: white sticker, tilted, 3px black dashed border */
.btn-games{margin-top:44px;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:.6em 1.5em;color:#fff;-webkit-text-stroke:.14em #000;paint-order:stroke fill;text-shadow:.05em .07em 0 #000;background:#ffd21e;border:3px dashed #000;border-radius:22px;font-family:Comicy,Helvetica,Arial,sans-serif;font-size:clamp(22px,4vw,32px);line-height:1;text-decoration:none;text-transform:uppercase;letter-spacing:.02em;transform:rotate(-3deg);box-shadow:0 0 0 5px #fff,0 0 0 9px #101a2b,6px 12px 0 9px rgba(0,0,0,.25);cursor:pointer;-webkit-tap-highlight-color:transparent;will-change:transform;backface-visibility:hidden;transition:rotate .12s ease,scale .12s ease,box-shadow .12s ease}
/* hover/press use the separate rotate/scale properties (they stack on top of transform), so the idle transform animation below never fights them */
.btn-games:hover{rotate:5deg;scale:1.07}
.btn-games:active{rotate:3deg;scale:.96;box-shadow:0 0 0 5px #fff,0 0 0 9px #101a2b,2px 4px 0 9px rgba(0,0,0,.25)}
.btn-games:focus-visible{outline:4px solid #fff;outline-offset:14px}
/* home hero lettering (Comicy, replaces the old title images)
   Each letter is 3 layers: .ch text (invisible, sets size), ::before = black stroke + shadow (behind), ::after = fill (on top) */
.hero-title{margin:0;display:flex;flex-direction:column;align-items:center;gap:.1em;font-family:Comicy,Helvetica,Arial,sans-serif;font-weight:400;text-transform:uppercase;line-height:1;font-size:clamp(34px,7.5vw,92px);--stroke:.13em}
.hero-word{display:flex;justify-content:center;white-space:pre}
.ch{position:relative;display:inline-block;color:transparent}
.ch::before,.ch::after{content:attr(data-ch);position:absolute;left:0;top:0}
.ch::before{z-index:0;color:#000;-webkit-text-stroke:var(--stroke) #000;text-shadow:.05em .07em 0 #000}
.ch::after{z-index:1;color:#fff}
.w-making{font-size:1em}
.w-for{font-size:1.05em}
.w-everyone{font-size:1.45em;letter-spacing:-.01em}
/* Words drop in one at a time (see drop below). translate is a separate property so it stacks with the drop animation (transform); --tx/--ty are optional per-word offsets, unused now so all three lines sit on the flex gap. */
.hero:not(.still) .hero-word{translate:var(--tx,0) var(--ty,0);animation:drop .55s var(--d,0s) both,shove .45s cubic-bezier(.3,1.4,.5,1) .94s both}
@keyframes shove{from{translate:0 0}to{translate:var(--tx,0) var(--ty,0)}}
.w-yellow .ch::before{-webkit-text-stroke:.1em #000}
.w-yellow .ch::after{color:#ffcf1d}
.hero-line{display:flex;justify-content:center;align-items:center;gap:.3em}
/* glints: the yellow words (.w-yellow) get a flying glint; EVERYONE also gets the permanent bands. Two separate whole-word overlays that repeat the word text and clip a gradient to it.
   ::after  = permanent glint: static slanted cream bands (3 on EVERYONE: 2nd E, Y, O; 2 on TEAM and REACH), no animation.
   ::before = flying glint: one bright band that sweeps left to right across the whole word in ~0.5s every 4.5s (4s rest). */
.hero-word{position:relative;font-kerning:none;font-variant-ligatures:none}
.w-yellow::before,.w-everyone::after{content:attr(data-text);position:absolute;left:0;top:0;white-space:pre;pointer-events:none;color:transparent;-webkit-text-fill-color:transparent}
/* permanent bands are sized in em (not % of the word) so every gold word gets bands of the SAME size as EVERYONE, however short the word is.
   Per word: --w = word width in em, --b1..--b3 = band centre as a fraction of the word width (letter centre + a little for the 115deg slant).
   --s1.. = where that centre sits along the gradient line; --hw = half band width (0.071em, same as the old EVERYONE bands). */
.w-everyone{--hw:.071em;--c:#fff2c9;
 --s1:calc(var(--w) * (1 + var(--b1)) * .9063em + .2113em);--s2:calc(var(--w) * (1 + var(--b2)) * .9063em + .2113em);--s3:calc(var(--w) * (1 + var(--b3, 0)) * .9063em + .2113em)}
.w-everyone::after{z-index:2;background:linear-gradient(115deg,transparent 0 calc(var(--s1) - var(--hw)),var(--c) calc(var(--s1) - var(--hw)) calc(var(--s1) + var(--hw)),transparent calc(var(--s1) + var(--hw)) calc(var(--s2) - var(--hw)),var(--c) calc(var(--s2) - var(--hw)) calc(var(--s2) + var(--hw)),transparent calc(var(--s2) + var(--hw)) calc(var(--s3) - var(--hw)),var(--c) calc(var(--s3) - var(--hw)) calc(var(--s3) + var(--hw)),transparent calc(var(--s3) + var(--hw))) calc(50% - var(--mx,0) * 0.7%) 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text}
/* 3 bands: EVERYONE (2nd E, Y, O) */
.w-everyone[data-text="Everyone"]{--w:5.64;--b1:.337;--b2:.583;--b3:.706}
/* 2 bands each: TEAM (e, m) and REACH (a, h) */
.w-everyone[data-text="Team"],.w-everyone[data-text="Reach"]{--b3:0}
.w-everyone[data-text="Team"]::after,.w-everyone[data-text="Reach"]::after{background:linear-gradient(115deg,transparent 0 calc(var(--s1) - var(--hw)),var(--c) calc(var(--s1) - var(--hw)) calc(var(--s1) + var(--hw)),transparent calc(var(--s1) + var(--hw)) calc(var(--s2) - var(--hw)),var(--c) calc(var(--s2) - var(--hw)) calc(var(--s2) + var(--hw)),transparent calc(var(--s2) + var(--hw))) 50% 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text}
.w-everyone[data-text="Team"]{--w:3.15;--b1:.343;--b2:.854}
.w-everyone[data-text="Reach"]{--w:3.51;--b1:.496;--b2:.908}
.w-yellow::before{z-index:3;--shine-cycle:4.5s;background:linear-gradient(115deg,transparent 0 48.2%,#fffbe6 48.2% 51.8%,transparent 51.8%) 100% 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;animation:shine var(--shine-cycle) linear infinite}
@keyframes shine{0%{background-position:100% 0}11.1%{background-position:0% 0}100%{background-position:0% 0}}
/* intro: each WORD drops as one heavy piece, bottom line first: EVERYWHERE, then EVERYONE lands on it, then GAMES FOR on top.
   Gravity ease-in on the way down, a hard squash on impact, one tiny rebound, then still. The whole title thuds a little harder per landing.
   Landing happens at 62% of .55s, so word delays of .1 / .35 / .6s give impacts at ~.44 / .69 / .94s (matched by the thud keyframes). */
.hero-word{transform-origin:50% 100%;animation:drop .55s both;animation-delay:var(--d,0s)}
@keyframes drop{
 0%{transform:translateY(-110vh) rotate(var(--r,0deg));animation-timing-function:cubic-bezier(.62,0,1,.6)}
 62%{transform:translateY(0) rotate(0) scale(1,1);animation-timing-function:ease-out}
 67%{transform:translateY(0) scale(1.07,.84);animation-timing-function:ease-out}
 78%{transform:translateY(-1.5%) scale(.985,1.03);animation-timing-function:ease-in-out}
 90%{transform:translateY(0) scale(1.01,.995)}
 100%{transform:translateY(0) scale(1,1)}
}
.hero-title{animation:thud 1.1s both}
@keyframes thud{
 0%,38%{transform:translateY(0)}
 39.5%{transform:translateY(4px)}43%{transform:translateY(-1px)}46%,59%{transform:translateY(0)}
 62.5%{transform:translateY(5px)}66%{transform:translateY(-1.5px)}69%,81%{transform:translateY(0)}
 84.5%{transform:translateY(7px)}88%{transform:translateY(-2px)}91%,100%{transform:translateY(0)}
}
.btn-games{animation:reveal .5s 1.1s both,wobble 3.6s ease-in-out 1.6s infinite}
/* idle: gentle grow/shrink + tilt via transform (scale), paused while hovered/pressed */
.btn-games:hover,.btn-games:active{animation-play-state:running,paused}
@keyframes wobble{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(-1.5deg) scale(1.02)}}
@keyframes reveal{from{opacity:0}to{opacity:1}}
/* EVERYONE's flying glint starts once the last word has landed */
.hero:not(.still) .w-everyone::before{animation-delay:1.4s}
@media(prefers-reduced-motion:reduce){.w-yellow::before{animation:none;background:none}.hero:not(.still) .hero-word,.hero-word,.hero-title,.btn-games{animation:none}.btn-games{transition:none}}
.hero .container{overflow:hidden}
.hero-title{max-width:100%}
@media(max-width:767px){
 .hero-title{font-size:clamp(30px,11vw,70px)}
}
/* compact static title banner (About / Contact): no animation, not fullscreen */
.hero.page.still .container{padding-top:134px;padding-bottom:40px}
.hero.still .hero-title{font-size:clamp(30px,5vw,60px);animation:none}
.hero.still .hero-word,.hero.still .w-yellow::before{animation:none}
.hero.still .w-yellow::before{background:none}
@media(max-width:767px){.hero.still .hero-title{font-size:clamp(26px,8vw,44px)}}
/* slow drift of the logo pattern: shifts exactly one tile so the loop is seamless */
.hero::before{animation:drift 10s linear infinite}
@keyframes drift{from{background-position:0 0}to{background-position:142.4px 131.8px}}
@media(prefers-reduced-motion:reduce){.hero::before{animation:none}}