/* Layout only, mobile first. Components (type, buttons, status, progress, seg, toggle) come from kit/ikier.css.
   Layout patterns follow stardust-x.com: a floating nav pill, mission-control readouts, space doing the work.
   Phone: crystal above the copy, the page scrolls. Desktop (≥ 861 px and landscape): crystal fills the
   viewport behind the copy. The breakpoint matches `desk` in crystal.js. */
html, body { margin: 0; min-height: 100%; }
body { position: relative; overflow-x: hidden; }
:root { --gut: clamp(16px, 5.8vw, 112px); }

/* ── Nav pill: the Ikier × NUS Alumni lockup (brand book 09.2), the event, the language ── */
.nav { position: fixed; z-index: 10; top: 8px; left: 8px; right: 8px; height: 52px; display: flex; align-items: center; gap: 10px;
  padding: 0 6px 0 14px; border: 1px solid var(--hair); border-radius: 999px; background: rgba(17, 17, 20, .62);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.lock { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { width: 72px; height: auto; display: block; flex: none; }            /* the wordmark's minimum on screen */
.lock i { display: block; width: 1px; height: 20px; background: var(--ink50); flex: none; }
.lock .partner { height: 15px; width: auto; display: block; min-width: 0; }
.navtele { display: none; }
.lang { flex: none; }
.lang button { height: 32px; min-width: 40px; padding: 0 10px; font-family: var(--sans); }
.lang button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 379px) { .lock { gap: 8px; } .lock .partner { height: 13px; } .nav { gap: 8px; } }
/* very narrow: show only the language you can switch to */
@media (max-width: 479px) {
  .lang { padding: 0; background: transparent; }
  .lang button[aria-pressed="true"] { display: none; }
  .lang button { border: 1px solid var(--hair2); border-radius: 99px; }
}

/* ── Sound: on by default; the bars move only while sound is actually playing ── */
.snd { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; margin-left: auto; border: 1px solid var(--hair2);
  border-radius: 99px; background: transparent; color: var(--ink76); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  transition: color var(--t-ui) var(--ease-beam), border-color var(--t-ui) var(--ease-beam); }
.snd:hover { color: var(--fg); border-color: var(--ink62); }
.snd:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.snd-label { display: none; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { display: block; width: 2px; height: 3px; background: currentColor; border-radius: 1px; transform-origin: bottom; }
.snd.live .eq i { animation: eq 1.2s var(--ease-beam) infinite alternate; }
.snd.live .eq i:nth-child(1) { animation-duration: .9s; }
.snd.live .eq i:nth-child(2) { animation-duration: 1.3s; animation-delay: -.4s; }
.snd.live .eq i:nth-child(3) { animation-duration: 1.05s; animation-delay: -.7s; }
.snd.live .eq i:nth-child(4) { animation-duration: 1.45s; animation-delay: -.2s; }
@keyframes eq { from { transform: scaleY(1); } to { transform: scaleY(4); } }
.snd[aria-pressed="false"] .eq i { opacity: .5; }
.lang { margin-left: 0; }
/* ── Launch gate: docked vehicle, upright, nose up. Ignition is motion, light on the pad and sound — never a drawn plume. ── */
.pf-gate { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; transition: opacity 500ms cubic-bezier(.16, 1, .3, 1); }
.pf-gate.gone { opacity: 0; pointer-events: none; }
.pf-dock { position: relative; display: grid; place-items: center; width: 168px; height: 168px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.pf-dock:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.pf-dock-ship { width: 84px; height: 84px; transform: translateY(-10px); transition: transform 300ms cubic-bezier(.16, 1, .3, 1); }
.pf-dock:hover .pf-dock-ship { transform: translateY(-14px); }
.pf-pad { position: absolute; left: 50%; bottom: 36px; width: 120px; height: 1px; transform: translateX(-50%); background: var(--ink50); transition: background 300ms, box-shadow 300ms, width 300ms; }
.pf-ring { position: absolute; inset: 0; border: 1px solid var(--hair2); border-radius: 50%; animation: pf-breathe 2.4s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes pf-breathe { 0% { transform: scale(.86); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.08); opacity: 0; } }
.pf-dock.ignite .pf-ring { animation: none; opacity: 0; }
.pf-dock.ignite .pf-dock-ship { animation: pf-tremble 70ms linear infinite; }
.pf-dock.ignite .pf-pad { width: 168px; background: var(--bone); animation: pf-flare 1.1s cubic-bezier(.2, .7, .1, 1) forwards; }
@keyframes pf-flare { 0% { box-shadow: 0 0 0 0 rgba(239, 238, 234, 0); } 30% { box-shadow: 0 0 10px 1px rgba(239, 238, 234, .3); }
  45% { box-shadow: 0 0 4px 0 rgba(239, 238, 234, .15); } 100% { box-shadow: 0 0 26px 3px rgba(239, 238, 234, .45); } }
.pf-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes pf-tremble { 0% { transform: translate(-.6px, -10px); } 50% { transform: translate(.6px, -10.8px); } 100% { transform: translate(-.4px, -10.2px); } }
.pf-dock.lift .pf-dock-ship { animation: none; }   /* the climb itself is driven from JS (Web Animations) */
.pf-dock.lift .pf-pad { background: var(--ink50); box-shadow: none; transition: background 900ms, box-shadow 900ms; }
.pf-gate-hint { margin: 0; transition: opacity 300ms cubic-bezier(.16, 1, .3, 1); }
.pf-gate.launching .pf-gate-hint, .pf-gate.launching .pf-quiet { opacity: 0; pointer-events: none; }
.pf-quiet { margin-top: 4px; padding: 6px 10px; border: 0; background: transparent; color: var(--ink50); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.pf-quiet:hover { color: var(--ink76); }
.pf-quiet:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Stage ── */
.stage { position: relative; height: 64svh; min-height: 360px; margin-top: 60px; }
#stage { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }  /* vertical swipes still scroll */
#stage:active { cursor: grabbing; }

/* ── Copy ── */
.hero { position: relative; z-index: 2; }
.copy { display: grid; gap: 20px; padding: 24px 0 28px; }
.copy .hl-xl { font-size: clamp(40px, 11vw, 56px); }
html[lang^="zh"] .copy .hl-xl { font-size: clamp(34px, 9.4vw, 48px); letter-spacing: 0; line-height: 1.1; }
html[lang^="zh"] .copy .hl .a { letter-spacing: 0; }
.copy .lead { font-size: 17px; }
.hbtn { display: flex; gap: 10px; flex-wrap: wrap; }
.hbtn .btn { flex: 1 1 auto; }
.btn[hidden] { display: none; }   /* the kit's .btn display would otherwise override [hidden] */
.readout { display: grid; gap: 14px; max-width: 440px; }
.readout .progress { width: 100%; }
.readout .progress b { width: 0; transition: width var(--t-ui) var(--ease-beam); }
.bgrow { display: flex; align-items: center; gap: 12px; }

/* ── HUD: telemetry and the Stardust signature ── */
.hud { position: relative; z-index: 3; display: grid; gap: 6px; padding: 0 16px 28px; }
.hud p { margin: 0; }
.hud a { color: inherit; }
.hint { transition: opacity 1.2s var(--ease-beam); }
.legal a { color: inherit; text-decoration: none; }
.legal a:hover { color: var(--fg); }
.hint.gone { opacity: 0; }
.sign { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--hair);
  text-decoration: none; color: inherit; justify-self: start; }
.sign-ship { width: 18px; height: 18px; opacity: .76; transition: opacity var(--t-ui) var(--ease-beam); }
.sign-mark { width: 62px; height: auto; opacity: .76; transition: opacity var(--t-ui) var(--ease-beam); }
.sign:hover .sign-ship, .sign:hover .sign-mark, .sign:focus-visible .sign-ship, .sign:focus-visible .sign-mark { opacity: 1; }
.sign:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }

/* ── Pre-flight (a Stardust production → Ikier) ── */
.preflight { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; align-content: center; gap: 10px; background: var(--carbon);
  transition: opacity 900ms cubic-bezier(.16, 1, .3, 1); }
.preflight.away { opacity: 0; pointer-events: none; }
.preflight[hidden] { display: none; }
.pf-label { position: absolute; top: 24px; left: 16px; margin: 0; }
/* ── The Ikier reveal ── */
.rv { position: absolute; inset: 0; z-index: 2; }
.rv[hidden] { display: none; }
.rv-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rv-wave { fill: none; stroke: var(--bone); stroke-width: 1.1; }
.rv-mark { position: absolute; height: auto; opacity: 0; }
.rv-meta { position: absolute; left: 0; right: 0; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 44px); display: grid; justify-items: center; gap: 8px; text-align: center; padding: 0 16px; }
.rv-meta .num { font-size: 15px; letter-spacing: .12em; color: var(--fg); }
.pf-sign.gone { opacity: 0; transition: opacity 600ms cubic-bezier(.16, 1, .3, 1); }

.pf-sign { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.pf-sign img { width: 74px; height: auto; opacity: .76; }

/* ── Drop target ── */
.drop { position: fixed; inset: 12px; z-index: 30; display: grid; place-items: center; padding: 24px; text-align: center; border: 1px dashed var(--hair2);
  border-radius: var(--r-card); background: rgba(17, 17, 20, .82); opacity: 0; pointer-events: none; transition: opacity var(--t-ui) var(--ease-beam); }
.drop.on { opacity: 1; }

/* ── Account: the free-crystal line, and the sheet (Bone working surface over the Carbon stage) ── */
.acct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: 440px; }
.linkbtn { padding: 4px 0; border: 0; background: transparent; color: var(--ink76); font: 500 14px/1.4 var(--sans); cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: var(--hair2); text-underline-offset: 3px; }
.linkbtn:hover { color: var(--fg); text-decoration-color: currentColor; }
.linkbtn b { color: var(--fg); font-weight: 650; }
.linkbtn:disabled { text-decoration: none; cursor: default; color: var(--ink50); }
.linkbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.acct .linkbtn { font-size: 13px; color: var(--fg); }
/* the kit's .s-bone only paints; inside the Carbon page the sheet re-declares the Bone ink ladder (kit :root values) */
.reg { --bg: var(--bone); --card: #F6F5F2; --fg: var(--carbon);
  --ink76: rgba(17, 17, 20, .76); --ink62: rgba(17, 17, 20, .62); --ink50: rgba(17, 17, 20, .5);
  --hair: rgba(17, 17, 20, .12); --hair2: rgba(17, 17, 20, .22);
  --accent-ink: var(--beam); --fault-text: var(--fault-ink); --focus: var(--beam);
  --primary-bg: var(--carbon); --primary-fg: var(--bone); }
.reg { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain; }
.reg::backdrop { background: rgba(17, 17, 20, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reg-in { display: grid; gap: 20px; padding: 14px 16px calc(28px + env(safe-area-inset-bottom)); }
.reg-top { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.reg-top .btn-quiet { margin-right: -8px; }
.reg section { display: grid; gap: 16px; align-content: start; }
.reg section[hidden] { display: none; }
.reg form { display: grid; gap: 14px; }
.reg .hl-s { font-size: 28px; }
html[lang^="zh"] .reg .hl { letter-spacing: 0; line-height: 1.2; }
.reg .field input, .reg .field select { width: 100%; font-size: 16px; }   /* 16 px: no zoom-on-focus on iPhone */
.reg .field select { padding-right: 32px; appearance: none; -webkit-appearance: none; color: var(--fg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111114' stroke-opacity='.62' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center; }
.reg .field input:disabled { color: var(--ink62); background: var(--hair); }
.reg .pair { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.reg .checks { display: grid; gap: 12px; padding-top: 4px; }
.reg .checks[hidden] { display: none; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--ink76); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--carbon); cursor: pointer; }
.check a { color: var(--fg); text-underline-offset: 2px; }
.formerr, .formok { margin: 0; font-size: 14px; line-height: 1.45; }
.formerr { color: var(--fault-text); }
.formerr::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--fault); vertical-align: 2px; }
.formok { color: var(--ink76); }
.errdetail { font: 400 12px/1.4 var(--mono); color: var(--ink62); word-break: break-word; }
.formerr[hidden], .formok[hidden] { display: none; }
.codein { height: 60px !important; font: 500 28px/1 var(--mono) !important; letter-spacing: .42em; text-align: center; padding-left: .42em !important; }
.linkrow { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.reg [data-submit] { width: 100%; }
.reg .progress b { width: 0; transition: width 1.2s var(--ease-beam); }
@media (min-width: 600px) {
  .reg { width: min(520px, calc(100% - 48px)); height: fit-content; max-height: calc(100% - 48px); margin: auto; border-radius: var(--r-card);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); }
  .reg-in { padding: 18px 28px 32px; }
}

/* ── Tablet ── */
@media (min-width: 600px) {
  .nav { top: 12px; left: var(--gut); right: var(--gut); height: 56px; gap: 18px; padding: 0 8px 0 20px; }
  .lock { gap: 16px; }
  .logo { width: 84px; }
  .lock i { height: 24px; }
  .lock .partner { height: 22px; }
  .stage { height: 66svh; margin-top: 76px; }
  .copy { max-width: 620px; }
  .copy .hl-xl { font-size: clamp(48px, 7.4vw, 72px); }
  html[lang^="zh"] .copy .hl-xl { font-size: clamp(40px, 6.4vw, 60px); }
  .hbtn .btn { flex: 0 0 auto; }
  .hud { padding: 0 var(--gut) 32px; }
  .pf-label { left: var(--gut); top: 28px; }
  .snd-label { display: inline; }
}

/* ── Desktop: the crystal fills the viewport behind the copy ── */
@media (min-width: 861px) and (min-aspect-ratio: 11/10) {
  .nav { top: 14px; height: 60px; gap: 24px; padding: 0 10px 0 24px; }
  .lock { gap: 20px; }
  .logo { width: 96px; }
  .lock i { height: 27px; }
  .lock .partner { height: 27px; }
  .lang button { min-width: 52px; }
  .stage { position: fixed; inset: 0; height: auto; min-height: 0; margin: 0; z-index: 0; }
  #stage { touch-action: none; }
  .hero { min-height: 100svh; display: flex; align-items: center; pointer-events: none; }
  .copy { width: min(500px, 40vw); max-width: none; gap: 22px; padding: 112px 0 120px; pointer-events: auto; }
  .copy .hl-xl { font-size: clamp(44px, 4.7vw, 84px); }
  html[lang^="zh"] .copy .hl-xl { font-size: clamp(40px, 4.2vw, 74px); line-height: 1.08; }
  .copy .lead { font-size: clamp(17px, 1.35vw, 21px); }
  .hud { position: fixed; right: var(--gut); bottom: 22px; padding: 0; justify-items: end; text-align: right; max-width: min(560px, 46vw); }
  .sign { justify-self: end; }
}
@media (min-width: 1180px) and (min-aspect-ratio: 11/10) {
  .navtele { display: block; margin-left: auto; white-space: nowrap; }
  .snd { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .preflight, .pf-gate { transition: none; }
  .pf-ring { animation: none; opacity: 1; }
  .pf-dock.ignite .pf-dock-ship, .pf-dock.lift .pf-dock-ship { animation: none; transition: none; }
  .snd.live .eq i { animation: none; transform: scaleY(2.5); }
}