/* Route 420 competition entry popup (leaf green, between emerald and the site lime), the passport celebration and the stamp highlights.
   Every animation here moves only transform and opacity (plus one box-shadow
   pulse on a single small element), so it stays smooth on older phones. */

/* ---------------------------------------------------------------- the card */

.r420l-btn--emerald{position:relative;overflow:hidden;color:#D4F59A;letter-spacing:.2px;border:1.5px solid transparent;background:linear-gradient(160deg,#1C2A0E,#121A09) padding-box,linear-gradient(120deg,#B1E457,#5E9A1F 45%,#D4F59A 70%,#7FB82C) border-box;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 6px 22px rgba(130,190,50,.22),inset 0 1px 0 rgba(212,245,154,.12)}
.r420l-btn--emerald:hover{color:#E9FBC4;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 8px 26px rgba(150,210,60,.32),inset 0 1px 0 rgba(212,245,154,.18)}
.r420l-btn--emerald::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(212,245,154,.22),transparent);transform:translateX(-180%) skewX(-18deg);animation:r420tBtnSheen 3.2s ease-in-out 1s infinite}
.r420l-wrap > .r420l-btn--emerald{margin-top:12px}
.r420l-wrap > .r420l-btn--emerald + .r420l-btn{margin-top:10px}
@keyframes r420tBtnSheen{0%{transform:translateX(-180%) skewX(-18deg)}55%,100%{transform:translateX(320%) skewX(-18deg)}}

/* Already stamped here: the ring glows, a shine crosses the logo. */
.r420l-slot{position:relative}
.r420l-slot--here{animation:r420lHereRing .8s ease-in-out 2;z-index:3}
.r420l-slot--here::after{content:"";position:absolute;inset:-10%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);transform:translateX(-120%);animation:r420lHereShine .9s ease-out .15s 1 both;pointer-events:none}
@keyframes r420lHereRing{
  0%,100%{box-shadow:0 0 0 2px #B1E457,0 0 0 0 rgba(177,228,87,0)}
  50%{box-shadow:0 0 0 3px #D4F59A,0 0 0 7px rgba(177,228,87,.28),0 0 26px 4px rgba(177,228,87,.65)}
}
@keyframes r420lHereShine{to{transform:translateX(120%)}}
.r420l-foot--flash p{animation:r420lFootFlash 1.6s ease-out 1}
@keyframes r420lFootFlash{0%,35%{color:#D4F59A}100%{color:rgba(255,255,255,.75)}}

/* A full passport: a gold wave runs across the stamps. */
.r420l-slot--wave{animation:r420lWave .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes r420lWave{
  0%{transform:scale(1)}
  40%{transform:scale(1.14);box-shadow:0 0 0 3px #F5D27A,0 0 22px 3px rgba(245,210,122,.7)}
  100%{transform:scale(1);box-shadow:0 0 0 2px #B1E457}
}
.r420l-card--complete{animation:r420lCardGlow 1.6s ease-out 1}
@keyframes r420lCardGlow{0%{box-shadow:0 0 0 0 rgba(245,210,122,0)}30%{box-shadow:0 0 0 2px rgba(245,210,122,.8),0 0 40px rgba(245,210,122,.35)}100%{box-shadow:0 0 0 0 rgba(245,210,122,0)}}
.r420l-card__tokens.is-pop{display:inline-block;animation:r420lTokenPop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes r420lTokenPop{0%{transform:scale(1)}35%{transform:scale(1.35);color:#F5D27A;text-shadow:0 0 12px rgba(245,210,122,.8)}100%{transform:scale(1)}}

/* ------------------------------------------------------------- the ticket */

.r420t{position:fixed;inset:0;z-index:100001;font-family:Arial,Helvetica,sans-serif;color:#fff;-webkit-tap-highlight-color:transparent}
.r420t *,.r420t *::before,.r420t *::after{box-sizing:border-box}
.r420t__backdrop{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,rgba(30,50,10,.84),rgba(0,0,0,.94) 70%);opacity:0;transition:opacity .32s ease}
.r420t.is-in .r420t__backdrop{opacity:1}
.r420t__stage{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));perspective:1200px}

.r420t__float{position:relative;width:min(88vw,360px);flex:0 0 auto}
.r420t__float.is-idle{animation:r420tBob 4.2s ease-in-out infinite alternate}
@keyframes r420tBob{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.r420t__glow{position:absolute;inset:6% 4%;border-radius:30px;background:radial-gradient(closest-side,rgba(150,210,70,.5),rgba(150,210,70,0));filter:blur(22px);opacity:0;transition:opacity .8s ease .4s;pointer-events:none}
.r420t.is-in .r420t__glow{opacity:1}

.r420t__ticket{--stub:118px;position:relative;border-radius:20px;overflow:hidden;
  background:
    radial-gradient(120% 70% at 15% 0%,rgba(200,240,130,.30),transparent 60%),
    radial-gradient(90% 60% at 100% 100%,rgba(14,30,4,.75),transparent 70%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),
    linear-gradient(160deg,#5A9420 0%,#3C6B12 45%,#20400A 100%);
  -webkit-mask:radial-gradient(circle 14px at 0 calc(100% - var(--stub)),#0000 13px,#000 14px) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% calc(100% - var(--stub)),#0000 13px,#000 14px) right/51% 100% no-repeat;
          mask:radial-gradient(circle 14px at 0 calc(100% - var(--stub)),#0000 13px,#000 14px) left/51% 100% no-repeat,radial-gradient(circle 14px at 100% calc(100% - var(--stub)),#0000 13px,#000 14px) right/51% 100% no-repeat;
  transform-origin:50% 60%;will-change:transform,opacity}
.r420t__frame{position:absolute;inset:8px;border:1px solid rgba(245,210,122,.55);border-radius:14px;pointer-events:none}
.r420t__facet{position:absolute;inset:0;background:conic-gradient(from 210deg at 70% 30%,rgba(255,255,255,.10),transparent 20%,rgba(255,255,255,.06) 40%,transparent 60%,rgba(0,0,0,.12) 80%,rgba(255,255,255,.08));pointer-events:none}
.r420t__sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.r420t__sheen::before{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:42%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.14) 38%,rgba(255,247,214,.42) 50%,rgba(255,255,255,.14) 62%,transparent 100%);transform:translateX(-170%) skewX(-18deg)}
.r420t.is-shining .r420t__sheen::before{animation:r420tSheen 3.8s cubic-bezier(.45,0,.2,1) infinite}
@keyframes r420tSheen{0%{transform:translateX(-170%) skewX(-18deg)}42%,100%{transform:translateX(330%) skewX(-18deg)}}

.r420t__main{position:relative;padding:22px 22px 18px}
.r420t__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.r420t__brand{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#F5D27A}
.r420t__kind{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,243,196,.75);border:1px solid rgba(245,210,122,.45);border-radius:999px;padding:4px 9px}
.r420t__art{position:relative;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 40%,#4F861B,#15290A);box-shadow:0 0 0 1px rgba(245,210,122,.6),0 10px 24px rgba(0,0,0,.35)}
.r420t__art img{width:100%;height:100%;object-fit:contain;display:block}
.r420t__art svg{position:absolute;inset:0;width:100%;height:100%}
.r420t__title{margin:18px 0 6px;font-size:26px;line-height:1.1;font-weight:900;letter-spacing:.2px;text-align:center;
  background:linear-gradient(180deg,#FFF8DC 0%,#F5D27A 55%,#C9962F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.r420t__lead{margin:0;font-size:14px;line-height:1.45;text-align:center;color:rgba(255,255,255,.85)}
.r420t__lead b{color:#fff}
.r420t__when{margin:8px 0 0;font-size:12px;text-align:center;color:rgba(255,243,196,.7);letter-spacing:.3px}

.r420t__stub{position:relative;height:var(--stub);padding:14px 22px 16px;display:flex;flex-direction:column;gap:6px}
.r420t__stub::before{content:"";position:absolute;top:0;left:20px;right:20px;border-top:2px dashed rgba(245,210,122,.5)}
.r420t__row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.r420t__label{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,243,196,.65)}
.r420t__no{font-family:"Courier New",Courier,monospace;font-size:15px;font-weight:700;letter-spacing:1.5px;color:#F5D27A}
.r420t__terms{margin:0;flex:1 1 auto;overflow-y:auto;font-size:11px;line-height:1.45;color:rgba(255,255,255,.62)}

.r420t__seal{position:absolute;right:16px;top:30%;width:104px;height:104px;margin-top:-52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:900;letter-spacing:2.5px;text-transform:uppercase;color:#FFF3C4;
  background:radial-gradient(circle,#D9A93A 0 52%,#B8892B 53% 56%,#E9C46A 57% 62%,#9C7020 63%);box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 0 0 3px rgba(255,248,220,.35);
  transform:rotate(-14deg) scale(2.2);opacity:0;pointer-events:none}
.r420t__seal span{text-shadow:0 1px 0 rgba(0,0,0,.35)}
.r420t.is-entered .r420t__seal{animation:r420tSeal .34s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes r420tSeal{to{transform:rotate(-14deg) scale(1);opacity:1}}

.r420t__spark{position:absolute;width:16px;height:16px;background:#FFF3C4;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;pointer-events:none}
.r420t.is-shining .r420t__spark{animation:r420tTwinkle 2.6s ease-in-out infinite}
.r420t__spark:nth-of-type(1){top:-10px;left:-8px}
.r420t__spark:nth-of-type(2){top:24%;right:-12px;width:11px;height:11px;animation-delay:.7s !important}
.r420t__spark:nth-of-type(3){bottom:22%;left:-12px;width:12px;height:12px;animation-delay:1.3s !important}
.r420t__spark:nth-of-type(4){bottom:-8px;right:10%;animation-delay:1.9s !important}
@keyframes r420tTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}}

.r420t__actions{width:min(88vw,360px);display:flex;flex-direction:column;align-items:stretch;gap:8px;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}
.r420t.is-ready .r420t__actions{opacity:1;transform:none}
.r420t__enter{position:relative;border:0;border-radius:999px;min-height:52px;padding:15px 20px;font:700 16px/1 Arial,Helvetica,sans-serif;letter-spacing:.3px;color:#1C1400;cursor:pointer;
  background:linear-gradient(180deg,#FBE7A1 0%,#E9C46A 45%,#C9962F 100%);box-shadow:0 10px 24px rgba(201,150,47,.35),inset 0 1px 0 rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;gap:10px}
.r420t__enter:active{transform:translateY(1px)}
.r420t__enter[disabled]{cursor:default;filter:saturate(.85)}
.r420t__enter .r420t__spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(28,20,0,.25);border-top-color:#1C1400;animation:r420tSpin .7s linear infinite}
@keyframes r420tSpin{to{transform:rotate(360deg)}}
.r420t__later{background:transparent;border:0;color:rgba(255,255,255,.7);font:600 14px Arial,Helvetica,sans-serif;padding:10px;cursor:pointer;min-height:44px}
.r420t__later:hover{color:#fff}
.r420t__msg{margin:2px 0 0;min-height:1em;text-align:center;font-size:13px;color:#FFD6D6}
.r420t__msg:empty{display:none}

.r420t :focus-visible{outline:2px solid #F5D27A;outline-offset:3px}

@media (max-height:680px){
  .r420t__art{aspect-ratio:16/9}
  .r420t__title{font-size:22px;margin-top:12px}
  .r420t__stage{justify-content:flex-start}
}

/* The canvas the sparkle trail and confetti draw on. */
.r420t-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:100002}

@media (prefers-reduced-motion:reduce){
  .r420t__float.is-idle,.r420t.is-shining .r420t__sheen::before,.r420t.is-shining .r420t__spark,.r420l-btn--emerald::after{animation:none}
  .r420l-slot--wave,.r420l-card--complete,.r420l-slot--here,.r420l-slot--here::after{animation-duration:.01s}
}