/* 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 { visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
#booking-modal.open, #elig-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; }

/* 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; }
@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; }
}