/* ===== One Love design-7b: "life" layer (page-wide motion + hover + cursor), works on every variant =====
   Uses transform-family individual properties (translate/scale/rotate) + opacity so it stacks with the variants'
   own transforms. js/life.js adds the classes. Every effect is gated by its Effects switch (js/effects.js puts
   "fx-no-<key>" on <html> when it's off). :where() keeps the gate at zero specificity so variant styles still win
   where they define their own hover. Reduced motion: life.js adds nothing, effects.js forces every switch off. */
html{--vw:1vw}

/* ---- [progress] scroll progress bar ---- */
.lf-progress{position:fixed;left:0;top:0;right:0;height:4px;z-index:130;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--red) 0 33.3%,var(--gold) 0 66.6%,var(--green) 0);box-shadow:0 1px 6px rgba(0,0,0,.25)}
.is-solo .lf-progress,.fx-no-progress .lf-progress{display:none}

/* ---- [reveal] reveal as sections enter ---- */
.lv{opacity:0;transition:opacity .75s var(--ease),translate .85s var(--ease),scale .85s var(--ease),rotate .85s var(--ease)!important}
.lv[data-lv=up]{translate:0 38px}
.lv[data-lv=left]{translate:-46px 0}
.lv[data-lv=right]{translate:46px 0}
.lv[data-lv=scale]{scale:.9}
.lv[data-lv=pop]{scale:.82;rotate:-3deg}
.lv.lv-in,.fx-no-reveal .lv{opacity:1;translate:none;scale:none;rotate:none}
.fx-no-reveal .lv{transition:none!important}

/* ---- [parallax] hero pin: the hero holds while the next section slides over it ---- */
html:not(.is-solo):not(.fx-no-parallax) [data-slot=hero]{position:sticky;top:var(--hero-top,0px);z-index:0;transform-origin:50% 0}
html:not(.is-solo) [data-slot=hero]::after{content:"";position:absolute;inset:0;z-index:60;pointer-events:none;background:#140a04;opacity:var(--hero-dim,0)}
html:not(.is-solo) main>.slot:not([data-slot=hero]),html:not(.is-solo) [data-slot=footer]{position:relative;z-index:1;background:var(--cream)}
html:not(.is-solo):not(.fx-no-parallax) [data-slot=city]{box-shadow:0 -24px 50px rgba(0,0,0,.18);border-radius:26px 26px 0 0;overflow:hidden}

/* ---- [hover] buttons: lift + hard shadow + press ---- */
.btn{transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .2s,translate .35s cubic-bezier(.2,1.4,.4,1)}
:where(html:not(.fx-no-hover)) .btn:hover{transform:translate(-2px,-4px);box-shadow:4px 7px 0 #000}
:where(html:not(.fx-no-hover)) .btn.btn-chunky:hover{transform:translate(-3px,-5px);box-shadow:8px 9px 0 #000}
:where(html:not(.fx-no-hover)) .btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 #000;transition-duration:.08s}
:where(html:not(.fx-no-hover)) .btn-ghost:hover{box-shadow:inset 0 0 0 3px #fff,4px 7px 0 rgba(0,0,0,.45)}
/* nav + socials (header and footer) */
.hdr-links a,.socials a svg,[data-slot=footer] a,[data-slot=footer] a svg{transition:translate .25s var(--ease),rotate .35s cubic-bezier(.2,1.8,.4,1),scale .35s cubic-bezier(.2,1.8,.4,1),color .2s,text-decoration-color .25s}
:where(html:not(.fx-no-hover)) .hdr-links a:hover{translate:0 -2px}
:where(html:not(.fx-no-hover)) .socials a:hover svg,:where(html:not(.fx-no-hover)) [data-slot=footer] a:hover svg{rotate:-12deg;scale:1.2}
:where(html:not(.fx-no-hover)) [data-slot=footer] a:not(:has(svg)):hover{translate:0 -2px;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--gold);text-underline-offset:5px}
/* FAQ rows, chips and tabs */
.slot details>summary{transition:background .2s,translate .25s var(--ease)}
:where(html:not(.fx-no-hover)) .slot details>summary:hover{translate:4px 0;background:rgba(249,188,13,.18)}
:where(html:not(.fx-no-hover)) .slot details[open]>summary{background:rgba(249,188,13,.12)}
.qc-chip,.qb-q,.qb-tabs button{transition:translate .25s var(--ease),box-shadow .25s,background .2s}
:where(html:not(.fx-no-hover)) .qc-chip:hover,:where(html:not(.fx-no-hover)) .qb-q:hover,:where(html:not(.fx-no-hover)) .qb-tabs button:hover{translate:0 -3px;box-shadow:3px 4px 0 #000}
/* lineup names */
.lf-name,.ub-a,.uc-names span{display:inline-block;transition:translate .3s cubic-bezier(.2,1.6,.4,1),scale .3s cubic-bezier(.2,1.6,.4,1),color .2s;cursor:default}
:where(html:not(.fx-no-hover)) :is(.lf-name,.ub-a,.uc-names span):hover{translate:0 -4px;scale:1.12;color:var(--gold)}
:where(html:not(.fx-no-hover)) .lf-name:nth-child(3n+1):hover{color:#ff5a5f}
:where(html:not(.fx-no-hover)) .lf-name:nth-child(3n+2):hover{color:#3ddc84}
/* register forms: inputs glow on hover + focus, labels nudge */
.slot input:not([type=checkbox]):not([type=radio]),.slot textarea,.slot select{transition:box-shadow .25s,translate .25s var(--ease),border-color .2s}
:where(html:not(.fx-no-hover)) .slot :is(input:not([type=checkbox]):not([type=radio]),textarea,select):hover{box-shadow:0 0 0 3px rgba(249,188,13,.35)}
:where(html:not(.fx-no-hover)) .slot :is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{box-shadow:0 0 0 4px rgba(249,188,13,.6),0 8px 20px rgba(0,0,0,.12);translate:0 -2px}
/* countdown units lift, digits glow */
.slot [role=timer]>*{transition:translate .3s cubic-bezier(.2,1.6,.4,1)}
:where(html:not(.fx-no-hover)) .slot [role=timer]>*:hover{translate:0 -5px}
:where(html:not(.fx-no-hover)) .slot [role=timer]>*:hover [data-cd]{text-shadow:0 0 18px rgba(249,188,13,.75)}
/* design-13: the heading underline-on-hover was removed: its transparent underline picked up the heading text-shadow and drew black strike bars through big headlines */
/* photos zoom a touch inside their frames; ticket zones + cards get a deeper shadow */
.slot img{transition:scale .5s var(--ease)}
:where(html:not(.fx-no-hover)) .slot :is(figure,[class*="frame"]):hover>img{scale:1.04}
:where(html:not(.fx-no-hover)) .slot :is([class*="zone"],[class*="card"]):not(:has([class*="zone"],[class*="card"])):hover{filter:drop-shadow(0 14px 18px rgba(0,0,0,.18))}

/* ---- [tilt] (rotate/scale set by JS) ---- */
.lf-tilting{z-index:2}

/* ---- [idle] floating + swaying (life.js classes, and the mega heroes' own idle loops) ---- */
.lf-float{animation:lf-float 6.5s ease-in-out infinite}
.lf-sway{transform-origin:50% 100%;animation:lf-sway 7s ease-in-out infinite}
@keyframes lf-float{50%{translate:0 -10px}}
@keyframes lf-sway{50%{rotate:2.2deg}}
.fx-no-idle .lf-float,.fx-no-idle .lf-sway{animation:none}
.fx-no-idle .v-hero-e .he-float{animation:he-rise-in 1.1s cubic-bezier(.2,.9,.25,1.15) both}
.fx-no-idle .v-hero-f .hf-float{animation:hf-in 1.3s cubic-bezier(.2,.9,.25,1.1) both}
.fx-no-idle .v-hero-g .hg-float{animation:hg-in 1.2s cubic-bezier(.2,1.1,.3,1.1) both}
.fx-no-idle :is(.he-palm,.hg-fr svg,.hg-hib,.hf-halo,.hf-lion){animation:none}
[data-cd]{display:inline-block}

/* ---- [logo] wiggle (JS) + glow ---- */
.lf-logo-glow{filter:drop-shadow(0 0 14px rgba(249,188,13,.85)) drop-shadow(0 0 34px rgba(255,140,30,.45))!important;transition:filter .3s}
.fx-no-logo .lf-logo-glow{filter:none!important}

/* ---- [cursor] glow + ring (desktop mouse only) ---- */
.lf-glow,.lf-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:110;opacity:0;transition:opacity .3s}
.lf-glow{width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,90,.22),rgba(255,214,90,0));mix-blend-mode:screen}
.lf-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid rgba(249,188,13,.9);box-shadow:0 0 0 1px rgba(0,0,0,.25);transition:opacity .3s,scale .25s cubic-bezier(.2,1.6,.4,1),background .2s}
.lf-cursor-on .lf-glow,.lf-cursor-on .lf-ring{opacity:1}
.lf-ring.is-hot{scale:1.7;background:rgba(249,188,13,.14)}
.lf-ring.is-down{scale:.8}
.pk-modal-open .lf-glow,.pk-modal-open .lf-ring,.fx-no-cursor .lf-glow,.fx-no-cursor .lf-ring{opacity:0}

/* ---- [sparks] click burst ---- */
.lf-spark{position:fixed;z-index:305;width:18px;height:4px;box-shadow:0 0 0 1px rgba(0,0,0,.35);border-radius:2px;pointer-events:none}

/* ---- [grain] film grain overlay ---- */
.lf-grain{position:fixed;inset:-80px;z-index:108;pointer-events:none;opacity:.13;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:lf-grain .9s steps(4) infinite}
.fx-no-grain .lf-grain,.is-solo .lf-grain{display:none}
@keyframes lf-grain{0%{transform:translate(0,0)}25%{transform:translate(-40px,26px)}50%{transform:translate(30px,-36px)}75%{transform:translate(-18px,-14px)}100%{transform:translate(0,0)}}

/* ---- section-swap stripe wipe (app.js, part of the picker) ---- */
.sw-wipe{position:absolute;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.sw-wipe i{position:absolute;top:-10%;bottom:-10%;width:46%;transform:translateX(-160%) skewX(-14deg)}
.sw-wipe i:nth-child(1){left:-6%;background:var(--red)}
.sw-wipe i:nth-child(2){left:30%;background:var(--gold)}
.sw-wipe i:nth-child(3){left:66%;background:var(--green)}
.sw-wipe b{position:absolute;left:50%;top:min(50%,45vh);translate:-50% -50%;font-family:var(--fb);font-weight:400;text-transform:uppercase;font-size:clamp(1.4rem,4vw,3rem);color:#fff;
  text-shadow:4px 4px 0 #000;-webkit-text-stroke:2px #000;paint-order:stroke fill;opacity:0;white-space:nowrap}

@media(prefers-reduced-motion:reduce){
  .lv{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important}
  .lf-glow,.lf-ring,.sw-wipe,.lf-grain,.lf-spark{display:none!important}
  html:not(.is-solo) [data-slot=hero]{position:relative;top:auto}
}