/* The BAGOON Experience · digital card
   Scenes: tap to start → bus rides the rainbow → fireworks → logo zoom → card */
:root{
  --navy:#130F33; --night:#0D0A2A; --ink:#1C1745; --white:#fff;
  --orange:#FD9608; --yellow:#FDD202; --magenta:#FD2A6E; --blue:#0096FB; --cyan:#00D5D1; --green:#8EE714; --violet:#7A3FF2;
  --rainbow:linear-gradient(90deg,var(--magenta),var(--orange),var(--yellow),var(--green),var(--cyan),var(--blue),var(--violet),var(--magenta));
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito",ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;
  --hand:"Caveat Brush","Comic Sans MS",cursive;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(120% 90% at 50% 0%,#241C66 0%,var(--navy) 45%,var(--night) 100%) fixed;
  color:var(--white);font:700 16px/1.45 var(--body);overflow:hidden;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
[hidden]{display:none!important}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* ---------- sky ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.stars{position:absolute;inset:0}
.stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:.15;
  animation:twinkle var(--d) ease-in-out var(--dl) infinite alternate}
@keyframes twinkle{to{opacity:.95;transform:scale(1.35)}}
.cloud{position:absolute;opacity:0;transition:opacity 1.2s ease;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.cloud.c1{width:clamp(80px,14vw,150px);top:12%;left:-20%;animation:drift 46s linear infinite}
.cloud.c2{width:clamp(50px,8vw,90px);top:24%;left:-15%;animation:drift 64s linear -22s infinite}
.cloud.c3{width:clamp(60px,10vw,110px);top:6%;left:-15%;animation:drift 80s linear -50s infinite}
@keyframes drift{to{transform:translateX(140vw)}}
.cloud{opacity:.9}
.arch{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:opacity 1.4s ease}
.arch path{fill:none;stroke-linecap:butt}
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(110px,16vh,200px);display:block}
@media (orientation:portrait){.skyline{height:clamp(120px,20vh,240px)}}
.is-card .skyline{opacity:.75;transition:opacity 1.4s ease}
.is-card .arch{opacity:.32}
.is-gate .arch{opacity:0;transition:none}

/* ---------- stage ---------- */
.stage{position:fixed;inset:0;z-index:2;pointer-events:none}
.bus{--bw:300px;--pw:calc(var(--bw)*.84);--ph:calc(var(--pw)/2.6875);
  position:absolute;left:0;top:0;width:var(--bw);height:calc(var(--ph)*1.18);
  transform-origin:50% 100%;will-change:transform;opacity:0;pointer-events:auto;cursor:pointer}
.bus.on{opacity:1}
.bus-body{position:absolute;inset:0;animation:rumble .32s ease-in-out infinite alternate}
.bus.parked .bus-body{animation:none}
.bus.honk .bus-body{animation:honk .5s ease}
@keyframes rumble{to{transform:translateY(-1.5px)}}
@keyframes honk{30%{transform:translateY(-6px) scale(1.04)}60%{transform:translateY(0) scale(.98)}}
.panel{position:absolute;right:0;top:0;width:var(--pw);height:var(--ph);object-fit:fill;
  border-radius:calc(var(--ph)*.14) calc(var(--ph)*.08) 3px 3px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.22),0 10px 22px rgba(0,0,0,.45)}
.hood{position:absolute;left:0;bottom:calc(var(--ph)*.18 + 2px);width:calc(var(--bw) - var(--pw) + 10px);height:calc(var(--ph)*.5);
  background:linear-gradient(180deg,#26223A,#18151F);border-radius:calc(var(--ph)*.2) 4px 2px 3px;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.22)}
.hood .grille{position:absolute;left:0;top:28%;width:16%;height:46%;border-radius:2px;
  background:repeating-linear-gradient(180deg,#8E8AA3 0 2px,#16131F 2px 4px)}
.hood .light{position:absolute;left:3%;top:10%;width:14%;height:20%;border-radius:3px;background:#FFF6CF;
  box-shadow:0 0 10px 3px rgba(255,236,150,.85)}
.hood .marker{position:absolute;left:24%;top:12%;width:14%;height:12%;border-radius:2px;background:var(--orange)}
.beam{position:absolute;left:calc(var(--bw)*-.42);bottom:calc(var(--ph)*.52);width:calc(var(--bw)*.44);height:calc(var(--ph)*.3);
  background:linear-gradient(270deg,rgba(255,240,170,.5),rgba(255,240,170,0));clip-path:polygon(100% 35%,0 0,0 100%,100% 65%);
  opacity:.8;filter:blur(2px)}
.bumper{position:absolute;left:-4px;bottom:calc(var(--ph)*.18 - 2px);width:calc(var(--bw)*.075);height:calc(var(--ph)*.1);
  background:#0B0A10;border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.wheel{position:absolute;top:calc(var(--ph)*.76);width:calc(var(--ph)*.42);height:calc(var(--ph)*.42);border-radius:50%;
  background:#0B0A10;box-shadow:0 0 0 2px #3A3550,inset 0 0 0 calc(var(--ph)*.055) #1E1B28}
.w-front{left:calc(var(--bw)*.1 - var(--ph)*.21)}
.w-rear{left:calc(var(--bw) - var(--pw) + var(--pw)*.669 - var(--ph)*.21)}
.wheel i{position:absolute;inset:26%;border-radius:50%;
  background:conic-gradient(#C9C5D8 0 12%,#6F6A86 0 25%,#C9C5D8 0 37%,#6F6A86 0 50%,#C9C5D8 0 62%,#6F6A86 0 75%,#C9C5D8 0 87%,#6F6A86 0);
  animation:spin .5s linear infinite reverse}
.bus.parked .wheel i{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}
.bus.pop{animation:pop .45s cubic-bezier(.3,0,.6,1) forwards}
@keyframes pop{30%{filter:brightness(2.4);scale:1.12}100%{filter:brightness(3);scale:0;opacity:0}}

.logo-zoom{position:absolute;left:50%;top:50%;width:min(82vw,540px);translate:-50% -50%;scale:.05;opacity:0;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
.logo-zoom.in{animation:zoomIn 1.1s cubic-bezier(.2,1.4,.4,1) forwards}
.logo-zoom.glow{animation:breathe 1.6s ease-in-out infinite alternate;scale:1;opacity:1}
.logo-zoom.out{transition:opacity .6s ease,scale .6s ease;scale:.6;opacity:0;animation:none}
@keyframes zoomIn{0%{scale:.05;opacity:0;rotate:-8deg}60%{opacity:1}100%{scale:1;opacity:1;rotate:0deg}}
@keyframes breathe{to{scale:1.04;filter:drop-shadow(0 0 26px rgba(253,210,2,.45)) drop-shadow(0 14px 30px rgba(0,0,0,.55))}}

.fx{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* ---------- tap to start ---------- */
.gate{position:fixed;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;gap:18px;
  padding:24px 24px max(18vh,140px);transition:opacity .6s ease}
.gate.gone{opacity:0;pointer-events:none}
.gate-logo{width:clamp(230px,62vw,320px);height:auto;margin-bottom:12px;animation:float 3.2s ease-in-out infinite;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
@keyframes float{50%{transform:translateY(-10px) rotate(-1.5deg)}}
.cta{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:17px 34px;
  font:400 1.55rem/1 var(--display);letter-spacing:.02em;color:#fff;background:var(--rainbow);background-size:220% 100%;
  animation:shine 4s linear infinite,pulse 1.8s ease-in-out infinite;
  box-shadow:0 7px 0 rgba(0,0,0,.3),0 14px 30px rgba(122,63,242,.5);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.cta .ico{width:26px;height:26px;stroke-width:2.4}
.cta:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(0,0,0,.3),0 8px 20px rgba(122,63,242,.5)}
@keyframes shine{to{background-position:220% 0}}
@keyframes pulse{50%{scale:1.06}}
.gate-note{margin:0;font-size:.9rem;font-weight:800;color:rgba(255,255,255,.7)}
.gate-skip{background:none;border:0;color:rgba(255,255,255,.55);font-weight:800;font-size:.9rem;padding:6px 12px;border-radius:999px;text-decoration:underline;text-underline-offset:3px}
.gate-skip:hover{color:#fff}
@media (min-width:700px){
  .gate-logo{width:clamp(320px,38vw,480px)}
  .cta{font-size:1.8rem;padding:20px 42px}
}
.skip{background:none;border:0;color:rgba(255,255,255,.62);font-weight:800;font-size:.95rem;padding:8px 12px;border-radius:999px}
.skip:hover{color:#fff}
.skip{position:fixed;z-index:21;left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mute{position:fixed;z-index:21;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mute:active{scale:.92}

/* ---------- card ---------- */
.scrim{position:fixed;inset:0;z-index:10;overflow-y:auto;-webkit-overflow-scrolling:touch;display:grid;place-items:center;
  padding:max(70px,calc(env(safe-area-inset-top) + 64px)) 16px max(28px,env(safe-area-inset-bottom));
  opacity:0;pointer-events:none;transition:opacity .6s ease}
.scrim.open{opacity:1;pointer-events:auto}
.card{position:relative;width:min(100%,430px);border-radius:30px;padding:3px;
  transform:translateY(46px) scale(.92);opacity:0;transition:transform .7s cubic-bezier(.2,1.3,.4,1),opacity .5s ease}
.scrim.open .card{transform:none;opacity:1}
.card::before{content:"";position:absolute;inset:0;border-radius:30px;padding:3px;background:var(--rainbow);background-size:200% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:shine 6s linear infinite;pointer-events:none}
.card::after{content:"";position:absolute;inset:8% -6% -4%;z-index:-1;border-radius:40px;background:var(--rainbow);filter:blur(42px);opacity:.28}
.card-inner{position:relative;background:linear-gradient(180deg,#1A1450,#0E0B2C);border-radius:27px;padding:22px 20px 18px;text-align:center}
.card-logo{width:72%;max-width:260px;height:auto;margin:2px auto 4px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.5))}
.scrim.open .card-logo{animation:logoIn .9s cubic-bezier(.2,1.4,.4,1) .15s both}
@keyframes logoIn{from{scale:.7;opacity:0}}
.tagline{margin:4px 0 0;font:400 1.75rem/1.05 var(--hand);color:var(--yellow);transform:rotate(-2deg)}
.lede{margin:8px auto 0;max-width:30ch;color:rgba(255,255,255,.82);font-weight:700;font-size:.97rem}
.loc{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:.86rem;color:rgba(255,255,255,.9)}
.loc .ico{width:1.05em;height:1.05em;color:var(--cyan)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.tile{display:grid;justify-items:center;gap:7px;padding:14px 8px 12px;border-radius:18px;text-align:center;min-width:0;
  background:color-mix(in srgb,var(--c) 15%,#15113C);border:1.5px solid color-mix(in srgb,var(--c) 55%,transparent);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s}
.tile:hover{transform:translateY(-3px);background:color-mix(in srgb,var(--c) 26%,#15113C)}
.tile:active{transform:scale(.96)}
.t-ico{width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--c);color:#fff;
  box-shadow:0 4px 0 color-mix(in srgb,var(--c) 60%,#000)}
.t-ico .ico{width:23px;height:23px;stroke-width:2.3}
.t-txt{display:grid;min-width:0;max-width:100%;line-height:1.2;gap:2px}
.t-txt b{font:400 1.12rem/1.1 var(--display);letter-spacing:.01em}
.t-txt small{font-size:.76rem;font-weight:800;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.btn-save{width:100%;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;
  padding:15px 18px;font:400 1.3rem/1 var(--display);letter-spacing:.02em;color:#fff;background:var(--rainbow);background-size:220% 100%;
  animation:shine 5s linear infinite;box-shadow:0 6px 0 rgba(0,0,0,.32),0 12px 26px rgba(253,42,110,.35);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn-save:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.32)}
.btn-save .ico{width:24px;height:24px;stroke-width:2.4}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.btn-ghost{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 10px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.22);font-weight:900;font-size:.95rem;transition:background .2s,transform .2s}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-ghost:active{transform:scale(.96)}
.btn-ghost .ico{color:var(--yellow)}

.social{display:flex;justify-content:center;gap:10px;margin-top:20px}
.social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.14),0 6px 14px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.social a:hover{transform:translateY(-3px) rotate(-8deg)}
.social .ico{width:22px;height:22px;stroke-width:2.2}
.handle{margin:8px 0 0;font-size:.85rem;color:rgba(255,255,255,.6);font-weight:800}
.handle a:hover{color:#fff}
.card-foot{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:6px;justify-items:center;
  font-size:.7rem;font-weight:700;color:rgba(255,255,255,.45)}
.replay{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:rgba(255,255,255,.62);font-weight:800;font-size:.8rem;padding:4px 8px}
.replay:hover{color:#fff}
.replay .ico{width:1em;height:1em}

/* ---------- share sheet ---------- */
.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:end center;background:rgba(6,5,20,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:16px;animation:fade .25s ease}
@media (min-width:600px){.modal{place-items:center}}
@keyframes fade{from{opacity:0}}
.sheet{position:relative;width:min(100%,400px);background:linear-gradient(180deg,#1E1758,#120E36);border:1.5px solid rgba(255,255,255,.16);
  border-radius:26px;padding:22px 20px max(20px,env(safe-area-inset-bottom));text-align:center;animation:up .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.sheet h2{margin:0;font:400 1.6rem/1.1 var(--display)}
.m-sub{margin:4px 0 0;color:rgba(255,255,255,.7);font-size:.92rem}
.m-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.1);display:grid;place-items:center}
.qr-wrap{position:relative;width:216px;height:216px;margin:16px auto 0;padding:12px;background:#fff;border-radius:20px;
  box-shadow:0 0 0 4px rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.4)}
.qr-wrap:not(.small) .qr,.qr-wrap:not(.small) .qr canvas,.qr-wrap:not(.small) .qr img{width:192px!important;height:192px!important}
.qr-logo{position:absolute;left:50%;top:50%;width:62px;translate:-50% -50%;padding:4px;background:#fff;border-radius:10px}
.qr-wrap.static .qr-logo{display:none}
.m-url{margin:12px 0 0;font-size:.84rem;color:rgba(255,255,255,.7);word-break:break-all;user-select:text;-webkit-user-select:text}
.m-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:16px}
.m-actions>*{display:grid;justify-items:center;gap:6px;padding:10px 4px;border-radius:16px;border:0;background:rgba(255,255,255,.06);font-size:.76rem;font-weight:800}
.m-actions .ico{width:40px;height:40px;padding:9px;border-radius:13px;background:var(--c);color:#fff;stroke-width:2.2}
.m-actions>*:active{transform:scale(.95)}

/* ---------- tablet portrait: bigger single column ---------- */
@media (min-width:600px) and (orientation:portrait){
  .card{width:min(100%,520px)}
  .card-inner{padding:30px 32px 22px}
  .card-logo{max-width:300px}
  .tagline{font-size:2.1rem}
  .lede{font-size:1.08rem}
  .tiles{gap:14px;margin-top:22px}
  .tile{padding:18px 10px 16px}
  .t-ico{width:52px;height:52px;border-radius:16px}.t-ico .ico{width:26px;height:26px}
  .t-txt b{font-size:1.3rem}.t-txt small{font-size:.86rem}
  .btn-save{padding:18px;font-size:1.5rem;margin-top:18px}
  .btn-ghost{padding:15px 10px;font-size:1.05rem}
  .social{gap:14px;margin-top:24px}.social a{width:52px;height:52px}.social .ico{width:25px;height:25px}
}

/* ---------- desktop + tablet landscape: two columns with QR ---------- */
@media (min-width:900px) and (orientation:landscape){
  .scrim{padding:72px 28px 28px}
  .card{width:min(100%,900px)}
  .card-inner{display:grid;grid-template-columns:1fr 1.08fr;gap:0 34px;padding:30px 34px 20px;text-align:center}
  .c-left{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 26px 14px 8px;
    border-right:1px solid rgba(255,255,255,.1)}
  .c-right{display:flex;flex-direction:column;justify-content:center}
  .card-foot{grid-column:1 / -1}
  .card-logo{width:90%;max-width:320px}
  .tagline{font-size:2.1rem}
  .tiles{margin-top:0;gap:12px}
  .tile{padding:16px 10px 14px}
  .t-ico{width:48px;height:48px}.t-ico .ico{width:25px;height:25px}
  .t-txt b{font-size:1.22rem}.t-txt small{font-size:.82rem}
  .btn-save{font-size:1.4rem;padding:17px}
  .social{margin-top:18px}
}
@media (min-width:900px) and (orientation:landscape) and (max-height:820px){
  .scrim{padding-top:64px}
  .card-inner{padding:22px 30px 14px}
  .card-logo{max-width:250px}
  .lede{margin-top:6px}
  .tile{padding:12px 8px 11px}
  .t-ico{width:42px;height:42px}
  .card-foot{margin-top:10px;padding-top:8px}
}

.toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));z-index:50;translate:-50% 20px;opacity:0;pointer-events:none;
  max-width:min(92vw,380px);padding:12px 18px;border-radius:16px;background:#fff;color:var(--ink);font-weight:800;font-size:.9rem;text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.4);transition:opacity .3s,translate .3s}
.toast.show{opacity:1;translate:-50% 0}

@media (max-width:360px){.t-txt small{font-size:.68rem}.card-inner{padding-inline:14px}}
@media (prefers-reduced-motion:reduce){
  .stars i,.cloud,.cta,.gate-logo,.card::before,.btn-save{animation:none!important}
}