/* "fun" variant: motion + energy only. Palette: spruce, hi-vis, paper, member colours. Orange stays reserved for I'M HERE + meet time (not used here). */
html,body{overflow-x:hidden}
main{overflow-x:clip}
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:-30px 0 auto auto;width:62%;height:115%;z-index:-1;
  background:repeating-linear-gradient(-28deg,rgba(30,77,58,.07) 0 14px,transparent 14px 34px);clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}
h1.kin{display:block;overflow:visible}
h1.kin span{display:inline-block;will-change:transform}
h1.kin .l1{animation:splitL .35s ease-out both}
h1.kin .l2{animation:splitR .35s ease-out both;color:var(--ink);background:linear-gradient(transparent 62%,var(--hv) 62% 90%,transparent 90%);padding:0 .06em}
@keyframes splitL{0%{transform:translateX(-6px) rotate(-1.5deg)}100%{transform:none}}
@keyframes splitR{0%{transform:translateX(6px) rotate(1.5deg)}100%{transform:none}}
.btn{position:relative;box-shadow:0 5px 0 #0F2A20}
.hero .btn{transition:transform .12s ease-out,box-shadow .12s ease-out}
.hero .btn:hover{animation:boing .45s cubic-bezier(.3,1.6,.5,1)}
.hero .btn:active{transform:translateY(4px) scale(.97);box-shadow:0 1px 0 #0F2A20;animation:none}
@keyframes boing{0%{transform:scale(1)}35%{transform:scale(1.07,.94)}65%{transform:scale(.97,1.04)}100%{transform:scale(1)}}
.hero-shot{position:relative}
.phone{transform:rotate(-4deg);transform-origin:50% 60%}
.sticker{position:absolute;z-index:3;font:800 18px/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.02em;padding:10px 14px;border-radius:12px;
  box-shadow:3px 4px 0 rgba(30,77,58,.25)}
.sticker.s1{background:var(--hv);color:#1A2408;top:-3%;right:-6%;transform:rotate(-12deg)}
.sticker.s2{background:var(--ink);color:var(--surf);bottom:6%;left:-12%;transform:rotate(9deg)}
.punch{position:absolute;z-index:3;width:46px;height:46px;border-radius:50%;background:var(--bg);box-shadow:inset 0 3px 0 rgba(20,32,28,.18);top:44%;left:-12%}
.slope{height:46px;margin:8px -48px 26px;background:repeating-linear-gradient(-45deg,var(--ink) 0 12px,var(--hv) 12px 24px);clip-path:polygon(0 60%,100% 0,100% 40%,0 100%);opacity:.9}
.slope-r{clip-path:polygon(0 0,100% 60%,100% 100%,0 40%)}
.squad-scene{margin:0 0 30px}
.squad-scene svg{display:block;width:100%;max-width:640px;margin:0 auto;height:auto;filter:drop-shadow(4px 6px 0 rgba(30,77,58,.12))}
.trail{fill:none;stroke:#1E4D3A;stroke-width:2.5;stroke-dasharray:0 9;stroke-linecap:round;stroke-width:3.5;opacity:.35}
.tag text{font:800 15px "Barlow Condensed",sans-serif;fill:#FBF6EA;text-anchor:middle}
.tag{offset-rotate:0deg;offset-distance:0%}
.t1{offset-path:path("M40 40 C140 70 220 90 300 130")}
.t2{offset-path:path("M560 50 C480 80 380 100 300 130")}
.t3{offset-path:path("M60 230 C150 200 230 160 300 130")}
.t4{offset-path:path("M550 220 C470 190 380 160 300 130")}
.t5{offset-path:path("M300 250 C300 210 300 170 300 130")}
.squad-scene.go .tag{animation:walk 1.6s cubic-bezier(.45,0,.2,1) forwards}
@keyframes walk{0%{offset-distance:0%}100%{offset-distance:68%}}
.ticket{transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.ticket:nth-child(1){transform:rotate(-1.2deg)}.ticket:nth-child(2){transform:rotate(.8deg)}.ticket:nth-child(3){transform:rotate(-.6deg)}
.ticket:hover{transform:rotate(0) translateY(-6px)}
.ticket::after{content:"";position:absolute;top:14px;right:16px;width:18px;height:18px;border-radius:50%;background:var(--bg);box-shadow:inset 0 2px 0 rgba(20,32,28,.15)}
.stub{position:relative;background-image:radial-gradient(circle at 0 0,transparent 0)}
.stub::before{content:"";position:absolute;top:-16px;right:28px;width:64px;height:30px;background:var(--hv);border-radius:6px;transform:rotate(6deg);box-shadow:2px 3px 0 rgba(30,77,58,.2)}
#burst{position:fixed;inset:0;pointer-events:none;z-index:50}
@media (max-width:899px){
  .sticker{font-size:15px;padding:8px 11px}.sticker.s1{right:-2%}.sticker.s2{left:-2%}.punch{display:none}
  .slope{margin:8px -20px 22px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tag{offset-distance:68%}
}