/* Brand palette: --neon = electric lime, --pink (legacy name) = cobalt blue */
:root { --neon: #b8ff1f; --pink: #3d6bff; --obsidian: #121212; --surface: #1a1a1a; --offwhite: #f5f5f7; --muted: #9ca3af; }
html { scroll-behavior: smooth; }
body { background: var(--obsidian); color: var(--offwhite); font-family: 'Inter', system-ui, sans-serif; }
.text-slate-400, .text-slate-300 { color: var(--muted); }
#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.font-display { font-family: 'Space Grotesk', 'Inter', 'Noto Sans SC', sans-serif; letter-spacing: -0.03em; }
html[lang="zh-Hans"] body { font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif; }
html[lang="zh-Hans"] .font-display { letter-spacing: 0; line-height: 1.15; }
.lang-btn { font-size: .75rem; font-weight: 600; padding: .3rem .6rem; border-radius: .5rem; border: 1px solid rgba(255,255,255,.12); color: #94a3b8; transition: color .2s, border-color .2s, background .2s; }
.lang-btn:hover { color: #fff; }
.lang-btn[aria-pressed="true"] { color: #0b1400; background: var(--neon); border-color: var(--neon); }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Preloader "ENTER PORTAL" button: electric border that pulses */
.enter-btn { position: relative; background: rgba(184,255,31,.06); border: 1px solid var(--neon); animation: enter-glow 1.6s ease-in-out infinite; transition: background .2s, color .2s; }
.enter-btn:hover, .enter-btn:focus-visible { background: var(--neon); color: #0b1400; outline: none; }
@keyframes enter-glow { 0%, 100% { box-shadow: 0 0 8px rgba(184,255,31,.35), inset 0 0 8px rgba(184,255,31,.12); } 50% { box-shadow: 0 0 26px rgba(184,255,31,.75), inset 0 0 14px rgba(184,255,31,.25); } }
@media (prefers-reduced-motion: reduce) { .enter-btn { animation: none; } }
/* Intro logo: pulsing lime + cobalt glow */
.pl-logo-glow { filter: drop-shadow(0 0 10px rgba(184,255,31,.75)) drop-shadow(0 0 28px rgba(61,107,255,.7)); animation: pl-glow 2.4s ease-in-out infinite; }
@keyframes pl-glow { 50% { filter: drop-shadow(0 0 16px rgba(184,255,31,1)) drop-shadow(0 0 44px rgba(61,107,255,.95)); } }
@media (prefers-reduced-motion: reduce) { .pl-logo-glow { animation: none; } }
/* Intro radar rings, centred on the emblem */
.pl-ring { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 1px solid rgba(61,107,255,.55); opacity: 0; animation: pl-ring 4.5s ease-out infinite; }
.pl-ring:nth-child(2) { animation-delay: 1.5s; border-color: rgba(184,255,31,.45); }
.pl-ring:nth-child(3) { animation-delay: 3s; }
@keyframes pl-ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(11); opacity: 0; } }

.text-neon { color: var(--neon); }
.bg-neon { background: var(--neon); }
.grad-text { background: linear-gradient(90deg, var(--neon), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.grid-bg {
  background-image: linear-gradient(rgba(184,255,31,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(184,255,31,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}

.btn-neon { position: relative; background: var(--neon); color: #0b1400; font-weight: 700; transition: transform .2s, box-shadow .2s; box-shadow: 0 0 0 rgba(184,255,31,0); }
.btn-neon:hover { transform: translateY(-2px); box-shadow: 0 10px 40px -8px rgba(184,255,31,.65); }
.btn-ghost { border: 1px solid rgba(61,107,255,.7); transition: background .2s, box-shadow .2s; }
.btn-ghost:hover { background: rgba(61,107,255,.14); box-shadow: 0 0 30px -6px rgba(61,107,255,.7); }

.glass { background: rgba(26,26,26,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.08); }

.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(1deg); } }

.card { transition: transform .35s, border-color .35s, box-shadow .35s; }
.card:hover { transform: translateY(-8px); border-color: rgba(184,255,31,.5); box-shadow: 0 20px 60px -20px rgba(184,255,31,.3); }
.card .thumb { transition: transform .6s; }
.card:hover .thumb { transform: scale(1.06); }

.field { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: .75rem; padding: .8rem 1rem; color: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
.field:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(184,255,31,.15); }
.field option { background: #1a1a1a; }
.field.invalid { border-color: #ff4d6d; }

/* Modal */
#booking-modal, #elig-modal, #qr-modal { visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
#booking-modal.open, #elig-modal.open, #qr-modal.open { visibility: visible; opacity: 1; }
#booking-modal .panel, #elig-modal .panel { transform: translateY(30px) scale(.97); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
#booking-modal.open .panel, #elig-modal.open .panel { transform: none; }
/* QR popup: zoom-in entrance; image is as large as fits the viewport (width and height capped), so it works on phones and desktops */
#qr-open { cursor: zoom-in; }
#qr-open:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; }
.qr-zoom-badge { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9999px; background: rgba(18,18,18,.85); color: var(--neon); pointer-events: none; }
#qr-modal { position: fixed; inset: 0; z-index: 60; display: flex; padding: 16px; overflow-y: auto; }
#qr-modal .qr-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#qr-modal .qr-panel { position: relative; margin: auto; display: flex; flex-direction: column; align-items: center; max-width: 100%; padding: 16px; border-radius: 24px; border: 1px solid rgba(184,255,31,.4); background: #121212; box-shadow: 0 0 90px -20px rgba(184,255,31,.5); transform: scale(.6); transition: transform .4s cubic-bezier(.2,.9,.25,1.2); }
@media (min-width: 640px) { #qr-modal .qr-panel { padding: 24px; } }
#qr-modal.open .qr-panel { transform: none; }
#qr-modal .qr-close { position: absolute; top: -12px; right: -12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--neon); color: #0b1400; box-shadow: 0 6px 20px rgba(0,0,0,.5); }
#qr-modal .qr-title { margin: 0 0 12px; text-align: center; font-size: .75rem; letter-spacing: .2em; color: var(--neon); }
#qr-modal .qr-hint { margin: 12px 0 0; max-width: 320px; text-align: center; font-size: .75rem; color: #94a3b8; }
/* Never wider than the screen; on very short landscape screens keep a scannable minimum and let the popup scroll */
#qr-modal .qr-big { display: block; border-radius: 12px; background: #fff; width: max(min(calc(100vw - 88px), 520px, calc((100dvh - 190px) * 676 / 810)), min(300px, calc(100vw - 88px))); height: auto; image-rendering: -webkit-optimize-contrast; }
@media (prefers-reduced-motion: reduce) { #qr-modal .qr-panel { transform: none; transition: none; } }

/* About / Mission incentive card: cursor-following glow, pulsing CTA, checkbox pills */
.elig-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(184,255,31,.16), rgba(61,107,255,.10) 45%, transparent 70%); }
.elig-card:hover::before { opacity: 1; }
.elig-border { box-shadow: 0 0 60px -22px rgba(184,255,31,.55); transition: box-shadow .3s; }
.elig-border:hover { box-shadow: 0 0 90px -18px rgba(61,107,255,.7); }
.pulse-cta { animation: pulse-cta 2.2s ease-out infinite; }

.nav-link-hit { animation: nav-link-pop .45s ease-out; }
@keyframes nav-link-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); color: var(--neon); text-shadow: 0 0 14px rgba(184,255,31,.8); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .nav-link-hit { animation: none; } }

/* Language switch: neon scan line sweeps across while the new text decodes in */
.lang-scan { position: fixed; top: 0; bottom: 0; left: 0; width: 3px; z-index: 120; pointer-events: none; background: var(--neon); box-shadow: 0 0 24px 6px rgba(184,255,31,.65), 0 0 60px 18px rgba(61,107,255,.35); animation: lang-scan .7s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes pl-hint { from { opacity: .55; } to { opacity: 1; } }
@keyframes lang-scan { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100vw); opacity: 0; } }
.lang-swap [data-i18n] { animation: lang-decode .75s ease-out both; }
@keyframes lang-decode {
  0% { opacity: 0; filter: blur(6px); text-shadow: 0 0 14px rgba(184,255,31,.9), -3px 0 rgba(61,107,255,.8); }
  45% { opacity: .85; filter: blur(1.5px); text-shadow: 2px 0 rgba(184,255,31,.8), -2px 0 rgba(61,107,255,.7); }
  100% { opacity: 1; filter: blur(0); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .lang-scan { display: none; } .lang-swap [data-i18n] { animation: none; } }
@keyframes pulse-cta { 0% { box-shadow: 0 0 0 0 rgba(184,255,31,.55); } 70%, 100% { box-shadow: 0 0 0 18px rgba(184,255,31,0); } }
.elig-opt { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: .75rem; cursor: pointer; font-size: .9rem;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); transition: border-color .2s, background .2s; }
.elig-opt:hover { border-color: rgba(184,255,31,.5); }
.elig-opt .box { flex: none; height: 1.4rem; width: 1.4rem; border-radius: .4rem; border: 2px solid rgba(255,255,255,.3); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.elig-opt:has(input:checked) { border-color: var(--neon); background: rgba(184,255,31,.08); }
.elig-opt input:checked + .box { background: var(--neon); border-color: var(--neon); }
.elig-opt input:checked + .box::after { content: ""; width: .35rem; height: .7rem; border: solid #0b1400; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px,-1px); }
.elig-opt input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(184,255,31,.35); }
@media (prefers-reduced-motion: reduce) { .pulse-cta { animation: none; } }

/* Submit button states */
.submit-btn .spinner { display: none; width: 1.1rem; height: 1.1rem; border: 2px solid rgba(11,20,0,.3); border-top-color: #0b1400; border-radius: 50%; animation: spin .7s linear infinite; }
.submit-btn.loading .spinner { display: inline-block; }
.submit-btn.loading .arrow { display: none; }
.submit-btn.done { background: #22ff9a; }
@keyframes spin { to { transform: rotate(360deg); } }
.check path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.success.show .check path { animation: draw .6s .1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.timeline-line { background: linear-gradient(180deg, var(--neon), var(--pink)); }

@media (prefers-reduced-motion: reduce) {
  .float, .card, .card .thumb { animation: none; transition: none; }
}