/* Rangtaali booking page. The shell is always the full viewport, so layout is sized in
   viewport units (--vh resolves to dvh where supported so mobile browser chrome is handled). */

:root{
  --vh:1vh; --foot:54px;
  --night:#1B0A10; --cream:#F8EFDD; --paper:#F3E6CF; --ink:#2C2E35;
  --orange:#FF7D24; --red:#C8180E; --hot:#FF2E17; --gold:#E9B949; --glow:#FFE6A3;
  --serif:'Cinzel',serif; --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@supports (height:1dvh){:root{--vh:1dvh}}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--night);color:var(--paper);-webkit-text-size-adjust:100%;overflow:hidden}
body{font-family:var(--sans);overscroll-behavior:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--orange);text-decoration:none}a:hover{color:#FFB27A}
button,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default}
img{-webkit-user-drag:none;user-select:none}
h1{margin:0;font-size:0;line-height:0}
[hidden]{display:none!important}
.noscript{position:fixed;left:0;right:0;bottom:0;z-index:99;padding:14px;text-align:center;background:var(--red);color:#fff;font-weight:600}

#shell{position:relative;overflow:hidden;width:100%;height:100vh;height:100dvh;background:var(--night)}

/* ───────── Entry animation ───────── */
#intro{position:absolute;inset:0;z-index:50;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:radial-gradient(ellipse 80% 60% at 50% 45%,#3a1418 0%,var(--night) 70%)}
#intro.play{animation:iris .65s cubic-bezier(.75,0,.25,1) 1.95s both}
.intro-loading{display:flex;gap:10px;align-items:center}
.intro-loading span{width:10px;height:10px;border-radius:50%;background:var(--orange);animation:pulse 1s ease-in-out infinite}
.intro-loading span:nth-child(2){background:var(--gold);animation-delay:.15s}
.intro-loading span:nth-child(3){background:var(--hot);animation-delay:.3s}
#intro.play .intro-loading{display:none}
.intro-play{position:absolute;inset:0;display:none}
#intro.play .intro-play{display:block}
.intro-duo{position:absolute;left:0;right:0;bottom:calc(var(--vh)*16);display:flex;align-items:flex-end;justify-content:center}
.slide-l{animation:slideInL .7s cubic-bezier(.2,.9,.3,1.08) both}
.slide-r{margin-left:-9%;animation:slideInR .7s cubic-bezier(.2,.9,.3,1.08) both}
.punch{animation:punch .36s .66s ease-out both}
.duck{display:block;width:auto;animation:duck .5s 1.08s ease-in both}
.intro-m{height:min(calc(var(--vh)*46),60vw)}
.intro-f{height:min(calc(var(--vh)*44),58vw)}
.intro-ring{position:absolute;left:50%;top:52%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid var(--glow);
  box-shadow:0 0 24px 6px rgba(255,180,80,.6);animation:ring .6s .66s cubic-bezier(.1,.7,.3,1) both}
.spark{position:absolute;left:50%;top:52%;width:0;height:0}
.spark i{display:block;margin-top:-3px;border-radius:50%;animation:spark .7s .68s cubic-bezier(.1,.8,.3,1) both}
.intro-glow{position:absolute;left:50%;top:50%;width:min(84vw,560px);aspect-ratio:1;transform:translate(-50%,-50%)}
.intro-glow div{width:100%;height:100%;border-radius:50%;animation:glowIn .9s 1.1s ease-out both;
  background:radial-gradient(circle,rgba(255,125,36,.42) 0%,rgba(255,46,23,.16) 40%,transparent 70%)}
.intro-logo{position:absolute;left:50%;top:50%;width:min(74vw,440px);transform:translate(-50%,-50%)}
.intro-logo img{display:block;width:100%;height:auto;animation:bloom .75s 1.1s cubic-bezier(.2,1.35,.4,1) both;filter:drop-shadow(0 12px 40px rgba(0,0,0,.5))}
.intro-skip{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;margin:0;
  font:600 11px/1 var(--serif);letter-spacing:.22em;color:rgba(243,230,207,.5)}

/* ───────── Stage ───────── */
#stage{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  padding:env(safe-area-inset-top) 16px calc(var(--foot) + env(safe-area-inset-bottom));
  background:radial-gradient(circle,rgba(255,150,80,.09) 1px,transparent 1.7px) 0 0/22px 22px,
    radial-gradient(ellipse 70% 45% at 50% -5%,rgba(255,125,36,.30),transparent 70%),
    radial-gradient(ellipse 90% 35% at 50% 108%,rgba(255,46,23,.32),transparent 70%),
    linear-gradient(180deg,#26111a 0%,var(--night) 55%,#140508 100%)}
#stage.intro-in{animation:stageIn 1s cubic-bezier(.2,.8,.2,1) 1.95s both}

.edge{position:absolute;top:0;bottom:0;width:6px;opacity:.75;z-index:1;pointer-events:none;background-color:var(--red);
  background-image:radial-gradient(circle,#fff 0 1.2px,var(--gold) 1.5px 2.2px,transparent 2.6px),
    linear-gradient(45deg,var(--orange) 25%,transparent 25% 75%,var(--orange) 75%),
    linear-gradient(45deg,var(--orange) 25%,transparent 25% 75%,var(--orange) 75%);
  background-size:6px 14px,6px 6px,6px 6px;background-position:0 7px,0 0,3px 3px}
.edge-l{left:0}.edge-r{right:0}

#rings{position:absolute;left:50%;top:calc(var(--vh)*24);width:min(120vw,calc(var(--vh)*84));aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
#rings div{position:absolute;border-radius:50%}
#rings div:nth-child(1){inset:0;border:7px dotted rgba(233,185,73,.26);animation:spin 110s linear infinite}
#rings div:nth-child(2){inset:9%;border:1.5px dashed rgba(255,125,36,.38);animation:spinRev 140s linear infinite}
#rings div:nth-child(3){inset:18%;border:3px dotted rgba(255,255,255,.16);animation:spin 80s linear infinite}
#rings div:nth-child(4){inset:27%;border:1px solid rgba(233,185,73,.18)}
#rings div:nth-child(5){inset:30%;background:radial-gradient(circle,rgba(255,125,36,.28),rgba(255,46,23,.08) 55%,transparent 72%)}

#embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.ember{position:absolute;bottom:-10px;border-radius:50%;opacity:0;animation:ember linear infinite}

#toran{position:absolute;top:0;left:0;right:0;height:calc(34px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);overflow:hidden;
  display:flex;justify-content:center;gap:6px;pointer-events:none;z-index:3;transition:opacity .3s}
.toran-line{position:absolute;top:env(safe-area-inset-top);left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent)}
.pennant{position:relative;width:20px;height:24px;flex:none;transform-origin:50% 0;animation:pennant 2.8s ease-in-out infinite alternate}
.pennant b{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%)}
.pennant i{position:absolute;left:50%;top:1px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#FFF1C4;
  box-shadow:0 0 8px 2px rgba(255,210,120,.85);animation:twinkle 2.1s ease-in-out infinite}

/* Desktop mascots flanking the card */
#flank{display:none;position:absolute;inset:0;pointer-events:none;z-index:1}
.flank-side{position:absolute;bottom:calc(var(--vh)*2.5)}
.flank-l{right:calc(50% + 236px)}
.flank-r{left:calc(50% + 236px)}
.flank-glow{position:absolute;left:5%;right:5%;bottom:calc(var(--vh)*-3);height:calc(var(--vh)*9);border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,125,36,.5),transparent 70%);filter:blur(8px)}
.flank-side img{position:relative;display:block;width:auto;height:min(calc(var(--vh)*80),740px,calc((50vw - 250px)*1.55));transform-origin:50% 100%;
  animation:sway 1.9s ease-in-out infinite alternate;filter:drop-shadow(0 30px 30px rgba(0,0,0,.45))}
/* each mascot is capped by its own width so neither can be clipped by the screen edge */
.flank-l img{height:min(calc(var(--vh)*80),740px,calc((50vw - 262px)*1.34))}
.flank-r img{animation-delay:-.95s;height:min(calc(var(--vh)*78),720px,calc((50vw - 262px)*1.16))}

/* Logo + card. Always fits the screen: CSS tightens it first, then app.js scales it by the remainder (never scrolls). */
#col{position:relative;z-index:2;flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
#hero{position:relative;z-index:2;flex:none;padding-top:36px;display:flex;justify-content:center;width:100%;max-height:calc(var(--vh)*40);overflow:hidden;
  transition:max-height .35s ease,opacity .25s ease,padding .35s ease}
#hero img{display:block;width:min(62vw,320px);height:auto;max-height:calc(var(--vh)*28);object-fit:contain;filter:drop-shadow(0 16px 32px rgba(0,0,0,.45))}

#cardWrap{position:relative;z-index:2;flex:none;width:100%;max-width:440px;padding-top:clamp(110px,calc(var(--vh)*18),160px);transition:padding .3s ease}

/* Mobile mascots peeking over the card */
#peek{position:absolute;top:0;left:0;right:0;height:clamp(210px,calc(var(--vh)*34),300px);pointer-events:none;transition:opacity .25s}
.peek-l,.peek-r{position:absolute;bottom:0}
.peek-l{left:-14px}.peek-r{right:-14px}
#peek img{display:block;width:auto;height:clamp(210px,calc(var(--vh)*34),300px);transform-origin:50% 100%;
  animation:peekLife 5.2s ease-in-out infinite;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))}
.peek-r img{animation-delay:-2.6s!important}

#stage.jump .jumper{animation:jump .7s cubic-bezier(.3,.7,.3,1) 2}

#confetti{position:absolute;left:50%;top:60%;width:0;height:0;z-index:3;pointer-events:none}
.bit{position:absolute;left:0;top:0;width:0;height:0}
.bit i{display:block;animation:confetti cubic-bezier(.1,.8,.3,1) both}

/* ───────── Ticket card ───────── */
.card-shadow{position:relative;z-index:1;border-radius:20px;box-shadow:0 30px 70px -24px rgba(0,0,0,.75)}
#card{position:relative;background:var(--cream);color:var(--ink);border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px rgba(233,185,73,.5);
  -webkit-mask-image:radial-gradient(circle 11px at 0 76px,transparent 98%,#000 100%),radial-gradient(circle 11px at 100% 76px,transparent 98%,#000 100%);
  mask-image:radial-gradient(circle 11px at 0 76px,transparent 98%,#000 100%),radial-gradient(circle 11px at 100% 76px,transparent 98%,#000 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.band{height:10px;background-color:var(--red);
  background-image:radial-gradient(circle,#fff 0 1.5px,var(--gold) 1.8px 2.5px,transparent 2.9px),
    linear-gradient(45deg,var(--orange) 25%,transparent 25% 75%,var(--orange) 75%),
    linear-gradient(45deg,var(--orange) 25%,transparent 25% 75%,var(--orange) 75%);
  background-size:16px 10px,10px 10px,10px 10px;background-position:0 0,0 0,5px 5px}
.band-top{border-bottom:1px solid var(--gold)}.band-bottom{border-top:1px solid var(--gold)}

.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;height:66px;padding:0 22px;border-bottom:1.5px dashed rgba(44,46,53,.22)}
.card-head-text{min-width:0}
.pass-label{font:700 12px/1 var(--serif);letter-spacing:.18em;color:var(--red);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pass-sub{margin-top:7px;font:500 14px/1.35 var(--sans);color:rgba(44,46,53,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-price{text-align:right;flex:none}
.price{font:700 20px/1 var(--sans);font-variant-numeric:tabular-nums}
.per{margin-top:5px;font:500 12px/1 var(--sans);color:rgba(44,46,53,.6)}

.card-body{padding:14px 18px 16px}
#form{display:flex;flex-direction:column;gap:12px;margin:0}
.field-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 12px/1 var(--sans);letter-spacing:.04em;color:rgba(44,46,53,.75);text-transform:uppercase}
.wa-tag{display:flex;align-items:center;gap:7px}
.wa-dot{width:8px;height:8px;border-radius:50%;background:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.22)}
.field-hint{font-weight:500;text-transform:none;letter-spacing:0;color:rgba(44,46,53,.55)}
.field{display:flex;align-items:center;height:58px;margin-top:-4px;border-radius:14px;background:#fff;border:1.5px solid rgba(44,46,53,.16);transition:border-color .15s,box-shadow .15s}
.field:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,125,36,.22)}
.field.bad{border-color:var(--red);box-shadow:0 0 0 4px rgba(200,24,14,.14)}
.field.shake{animation:shake .4s ease}
.cc{padding:0 12px 0 16px;height:26px;display:flex;align-items:center;border-right:1px solid rgba(44,46,53,.12);font:600 18px/1 var(--sans);color:rgba(44,46,53,.6)}
#wa{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;padding:0 14px;font:600 22px/1 var(--sans);letter-spacing:.08em;color:var(--ink);font-variant-numeric:tabular-nums}
#wa::placeholder{font-size:16px;letter-spacing:.01em;font-weight:500;color:rgba(44,46,53,.38)}
.err{margin-top:-6px;font:500 13px/1.3 var(--sans);color:var(--red)}

.qty-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 2px}
.qty-title{font:600 12px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:rgba(44,46,53,.75)}
.qty-note{margin-top:6px;font:500 14px/1.2 var(--sans);color:rgba(44,46,53,.6)}
.stepper{display:flex;align-items:center;gap:6px;flex:none}
.step{width:48px;height:48px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;touch-action:manipulation;
  background:radial-gradient(circle at 35% 30%,#fff 0,#eef2f5 35%,#c9d3dc 75%,#a9b5c0 100%);
  box-shadow:0 0 0 2px var(--gold),0 0 0 3.5px #8f1a10,0 3px 8px rgba(0,0,0,.25);color:var(--ink);font:600 26px/1 var(--sans);transition:transform .12s,opacity .2s}
.step:active{transform:scale(.92)}
.step:disabled{opacity:.4}
.step:focus-visible,.cta:focus-visible,.again:focus-visible{outline:3px solid rgba(255,125,36,.55);outline-offset:3px}
.qty{min-width:46px;text-align:center;font:700 30px/1 var(--serif);color:var(--ink)}
.qty.bump{animation:bump .32s ease-out}

.cta{position:relative;overflow:hidden;width:100%;height:58px;border:0;border-radius:14px;background:var(--orange);color:var(--ink);display:flex;align-items:center;justify-content:space-between;
  padding:0 8px 0 20px;font:700 17px/1 var(--sans);box-shadow:0 12px 30px -10px rgba(255,125,36,.6),inset 0 -3px 0 rgba(0,0,0,.14);transition:transform .12s,filter .15s;touch-action:manipulation}
.cta:hover{filter:brightness(1.05)}.cta:active{transform:scale(.98)}
.cta.ready{animation:ctaGlow 2.4s ease-in-out infinite}
.sheen{position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:sheen 4.5s ease-in-out 2s infinite;pointer-events:none}
.cta-label{position:relative;display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap}
.spinner{width:18px;height:18px;flex:none;border-radius:50%;border:2.5px solid rgba(44,46,53,.25);border-top-color:var(--ink);animation:spin .8s linear infinite}
.cta-total{position:relative;flex:none;padding:0 14px;height:42px;display:flex;align-items:center;border-radius:10px;background:var(--ink);color:var(--glow);font:700 17px/1 var(--sans);font-variant-numeric:tabular-nums}
.cta-total.rise{animation:rise .32s ease-out}
#tsBox:empty{display:none}
#tsBox{display:flex;justify-content:center;min-height:0}
.legal{text-align:center;font:500 12px/1.4 var(--sans);color:rgba(44,46,53,.6)}

.success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:4px 0 0}
.taali{font:700 13px/1 var(--serif);letter-spacing:.2em;color:var(--red)}
.in{font:700 28px/1.1 var(--sans);letter-spacing:-.01em}
.paid{font:500 15px/1.4 var(--sans);color:rgba(44,46,53,.8)}
.onway{font:500 14px/1.5 var(--sans);color:rgba(44,46,53,.75);max-width:320px}
.onway b{color:var(--ink);font-weight:700;white-space:nowrap}
.pay-id{padding:8px 12px;border-radius:8px;background:rgba(44,46,53,.06);font:500 12px/1.3 var(--sans);color:rgba(44,46,53,.6);letter-spacing:.02em;word-break:break-all}
.aavjo{margin-top:2px;font:600 12px/1 var(--serif);letter-spacing:.16em;color:var(--red)}
.again{margin-top:2px;height:44px;padding:0 22px;border-radius:12px;border:1.5px solid rgba(44,46,53,.2);background:transparent;color:var(--ink);font:600 15px/1 var(--sans);transition:transform .12s,background .15s}
.again:hover{background:rgba(44,46,53,.06)}.again:active{transform:scale(.97)}

.closed{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:22px 6px 18px}
.closed p{margin:0;font:600 17px/1.45 var(--sans);color:var(--ink);max-width:320px}

#foot{position:absolute;left:0;right:0;bottom:0;z-index:2;height:calc(var(--foot) + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:12px;padding-bottom:env(safe-area-inset-bottom)}
#foot span{font:600 10px/1 var(--serif);letter-spacing:.22em;color:rgba(243,230,207,.55)}
#foot img{display:block;height:34px;width:auto;max-width:130px;object-fit:contain;border-radius:8px;background:var(--cream);padding:4px 9px}

/* ───────── Responsive states ───────── */

/* On-screen keyboard open: fold the logo away so the field and button stay in view.
   This is the only state that may scroll — the keyboard leaves too little room for the whole card. */
#stage[data-kb="1"]{overflow:hidden auto}
#stage[data-kb="1"] #col{justify-content:flex-start}
#stage[data-kb="1"] #hero{max-height:0;opacity:0;padding-top:0}
#stage[data-kb="1"] #cardWrap{padding-top:14px}
#stage[data-kb="1"] #peek,#stage[data-kb="1"] #toran{opacity:0}

/* Tall phones: mascots peek over the card, logo tightened so everything fits */
@media (min-height:701px) and (max-width:899px){
  #hero{padding-top:30px}
  #hero img{max-height:calc(var(--vh)*19)}
  #cardWrap{padding-top:clamp(84px,calc(var(--vh)*12),160px)}
  #peek,#peek img{height:clamp(180px,calc(var(--vh)*27),300px)}
}
/* Extra-tall phones have room to spare: bigger logo and mascots */
@media (min-height:800px) and (max-width:899px){
  #hero img{max-height:calc(var(--vh)*24)}
  #cardWrap{padding-top:clamp(110px,calc(var(--vh)*16),170px)}
  #peek,#peek img{height:clamp(210px,calc(var(--vh)*32),300px)}
}
/* Short phones: no room for the peeking mascots */
@media (max-height:700px){
  #peek{display:none}
  #cardWrap{padding-top:12px}
  #hero{padding-top:32px}
  #hero img{max-height:calc(var(--vh)*20)}
}
@media (max-height:600px){
  :root{--foot:42px}
  #hero img{max-height:calc(var(--vh)*17)}
}
/* Very narrow phones */
@media (max-width:359px){
  #stage{padding-left:12px;padding-right:12px}
  .card-head{padding:0 16px}
  .card-body{padding:14px 14px 16px}
  .step{width:44px;height:44px}
  .qty{min-width:38px;font-size:26px}
  .cta{font-size:16px;padding-left:16px}
  .field-hint{display:none}
  .pass-sub{font-size:12.5px;line-height:1.25;margin-top:5px;white-space:normal}
  #wa{font-size:20px;letter-spacing:.05em}
}
/* Desktop & landscape tablets: mascots flank the card */
@media (min-width:900px){
  #flank{display:block}
  #peek{display:none}
  #cardWrap{padding-top:0}
  #hero{padding-top:0}
  #stage{padding-top:calc(38px + env(safe-area-inset-top))}
  #col{justify-content:center;gap:26px}
  #rings{top:58%;width:min(135vw,calc(var(--vh)*100))}
}
@media (min-width:900px) and (max-height:800px){
  #col{gap:14px}
  #hero img{max-height:calc(var(--vh)*22)}
}
/* Phones in landscape: logo left, card right */
@media (max-height:520px) and (min-width:620px){
  :root{--foot:34px}
  #stage{padding:calc(30px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(var(--foot) + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
  #col{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);align-items:center;justify-items:center;column-gap:24px;gap:0 24px}
  #hero{padding-top:0;max-height:none}
  #hero img{width:min(36vw,300px);max-height:calc(var(--vh)*62)}
  #cardWrap{padding-top:0}
  #flank,#peek{display:none}
  #rings{top:50%;left:25%}
  #foot img{height:24px;padding:2px 7px}
  #stage[data-kb="1"] #hero{max-height:none;opacity:1}
}

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

/* ───────── Keyframes ───────── */
@keyframes slideInL{0%{transform:translateX(-90vw) rotate(-10deg);opacity:0}30%{opacity:1}100%{transform:translateX(0) rotate(0);opacity:1}}
@keyframes slideInR{0%{transform:translateX(90vw) rotate(10deg);opacity:0}30%{opacity:1}100%{transform:translateX(0) rotate(0);opacity:1}}
@keyframes punch{0%{transform:scale(1)}45%{transform:scale(1.08) translateY(-12px)}100%{transform:scale(1)}}
@keyframes duck{0%{transform:translateY(0) scale(1);opacity:1}100%{transform:translateY(70px) scale(.82);opacity:0}}
@keyframes ring{0%{transform:scale(0);opacity:1}100%{transform:scale(16);opacity:0}}
@keyframes spark{0%{transform:translateX(0) scale(1);opacity:1}100%{transform:translateX(min(36vw,240px)) scale(.1);opacity:0}}
@keyframes bloom{0%{transform:scale(.25);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes glowIn{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes iris{0%{clip-path:circle(150% at 50% 50%)}100%{clip-path:circle(0% at 50% 50%)}}
@keyframes stageIn{0%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes sway{0%{transform:rotate(-2.4deg) translateY(0)}100%{transform:rotate(2.4deg) translateY(-8px)}}
@keyframes peekLife{0%{transform:translateY(0) rotate(-1.5deg)}20%{transform:translateY(-7px) rotate(1.5deg)}40%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-20px) rotate(-5deg)}58%{transform:translateY(0) rotate(2deg)}70%{transform:translateY(-7px) rotate(1.5deg)}100%{transform:translateY(0) rotate(-1.5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinRev{to{transform:rotate(-360deg)}}
@keyframes twinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@keyframes ember{0%{transform:translate(0,0);opacity:0}8%{opacity:.9}70%{opacity:.7}100%{transform:translate(28px,calc(var(--vh)*-105));opacity:0}}
@keyframes pennant{0%{transform:rotate(-5deg)}100%{transform:rotate(5deg)}}
@keyframes sheen{0%{transform:translateX(-120%) skewX(-20deg)}30%,100%{transform:translateX(320%) skewX(-20deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes rise{0%{transform:translateY(10px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes jump{0%{transform:translateY(0)}35%{transform:translateY(-30px)}65%{transform:translateY(0)}82%{transform:translateY(-10px)}100%{transform:translateY(0)}}
@keyframes confetti{0%{transform:translateX(0) rotate(0) scale(1);opacity:1}100%{transform:translateX(190px) rotate(260deg) scale(.4);opacity:0}}
@keyframes pulse{0%,100%{transform:scale(.7);opacity:.35}50%{transform:scale(1.15);opacity:1}}
@keyframes ctaGlow{0%,100%{box-shadow:0 12px 30px -10px rgba(255,125,36,.6),inset 0 -3px 0 rgba(0,0,0,.14)}50%{box-shadow:0 16px 42px -8px rgba(255,125,36,.95),inset 0 -3px 0 rgba(0,0,0,.14)}}