/* ==========================================================================
   GATE 05 — Agent Cyber Lines Ltd.
   Global styles + per-section styles. Each section's rules are grouped and
   prefixed with its section id so they stay independently editable.
   ========================================================================== */

:root {
  color-scheme: dark;
  --acl-bg: #05070d;
  --acl-panel: #0c1220;
  --acl-panel-2: #111a2e;
  --acl-line: #1f2c47;
  --acl-cyan: #4fd8ff;
  --acl-cyan-dim: #1d6f8a;
  --acl-white: #e8f1ff;
  --acl-muted: #8ea3c4;
  --acl-amber: #ffc24b;
  --acl-danger: #ff6b6b;
  --acl-ok: #55e6a5;
  --acl-glow: 0 0 18px rgba(79, 216, 255, 0.35);
  --acl-font: 'Segoe UI', 'Roboto', system-ui, -apple-system, sans-serif;
  --acl-mono: 'Cascadia Code', 'SF Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--acl-bg);
  color: var(--acl-white);
  font-family: var(--acl-font);
  overflow: hidden;
}

#app { height: 100%; }

.section {
  position: absolute;
  inset: 0;
  overflow: hidden auto;
  opacity: 1;
  transition: opacity 900ms ease;
}
.section.is-hidden { opacity: 0; pointer-events: none; }

/* Full-screen fader driving section-to-section transitions (js/main.js) */
.fader {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
  z-index: 50;
}
.fader.is-active { opacity: 1; pointer-events: all; }
.fader.is-white { background: #fff; }

.acl-btn {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 10px;
  padding: 0.95rem 2.2rem;
  border: 1px solid var(--acl-cyan);
  background: linear-gradient(180deg, rgba(79, 216, 255, 0.22), rgba(79, 216, 255, 0.08));
  color: var(--acl-white);
  box-shadow: var(--acl-glow);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.acl-btn:hover { filter: brightness(1.25); box-shadow: 0 0 28px rgba(79, 216, 255, 0.55); }
.acl-btn:active { transform: translateY(1px) scale(0.99); }
.acl-btn--ghost {
  border-color: var(--acl-line);
  background: rgba(17, 26, 46, 0.7);
  box-shadow: none;
  color: var(--acl-muted);
}
.acl-btn--danger {
  border-color: var(--acl-danger);
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.2), rgba(255, 107, 107, 0.06));
  box-shadow: 0 0 14px rgba(255, 107, 107, 0.25);
}

/* ==========================================================================
   SECTION 1 — #section-gate : futuristic departure gate
   ========================================================================== */

#section-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 1.4rem 1rem 2.4rem;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(79, 216, 255, 0.12), transparent 55%),
    var(--acl-bg);
}

#section-gate .gate-header {
  width: min(1080px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--acl-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--acl-panel-2), var(--acl-panel));
  padding: 0.85rem 1.25rem;
}

#section-gate .gate-id {
  font-family: var(--acl-mono);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: var(--acl-cyan);
  text-shadow: 0 0 22px rgba(79, 216, 255, 0.65);
  white-space: nowrap;
}

#section-gate .gate-carrier {
  text-align: right;
}
#section-gate .gate-carrier .carrier-name {
  margin: 0;
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
#section-gate .gate-carrier .carrier-tag {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acl-muted);
}

#section-gate .gate-scene {
  width: min(1080px, 100%);
  border: 1px solid var(--acl-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  line-height: 0;
}
#section-gate .gate-scene svg { width: 100%; height: auto; }

#section-gate .gate-status {
  width: min(1080px, 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  font-family: var(--acl-mono);
  font-size: 0.85rem;
  color: var(--acl-muted);
}
#section-gate .gate-status .status-boarding {
  color: var(--acl-ok);
  animation: gate-blink 1.6s steps(2, start) infinite;
}
@keyframes gate-blink { 50% { opacity: 0.35; } }

#section-gate .board-btn {
  font-size: 1.05rem;
  padding: 1.1rem 3.2rem;
}

/* ==========================================================================
   SECTION 2 — #section-agreement : liability / user agreement / safety
   ========================================================================== */

#section-agreement {
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 194, 75, 0.07), transparent 55%),
    var(--acl-bg);
}

#section-agreement .agreement-card {
  width: min(760px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--acl-line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--acl-panel-2), var(--acl-panel));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}

#section-agreement .agreement-head {
  padding: 1.1rem 1.4rem 0.9rem;
  border-bottom: 1px solid var(--acl-line);
}
#section-agreement .agreement-head h1 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#section-agreement .agreement-head .warn-strip {
  margin-top: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--acl-mono);
  font-size: 0.78rem;
  color: var(--acl-amber);
  border: 1px dashed rgba(255, 194, 75, 0.55);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
}

#section-agreement .agreement-body {
  overflow-y: auto;
  padding: 1.1rem 1.4rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: #c6d4ec;
}
#section-agreement .agreement-body h2 {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acl-cyan);
  margin: 1.3rem 0 0.4rem;
}
#section-agreement .agreement-body h2:first-child { margin-top: 0; }
#section-agreement .agreement-body ul { margin: 0.3rem 0 0.8rem; padding-left: 1.2rem; }

#section-agreement .agreement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: flex-end;
  padding: 1rem 1.4rem 1.2rem;
  border-top: 1px solid var(--acl-line);
}
#section-agreement .decline-note {
  margin: 0 auto 0 0;
  align-self: center;
  font-size: 0.78rem;
  color: var(--acl-danger);
  opacity: 0;
  transition: opacity 400ms ease;
}
#section-agreement .decline-note.is-visible { opacity: 1; }

/* ==========================================================================
   SECTION 3 — #section-loading : flight setup in progress
   ========================================================================== */

#section-loading {
  display: grid;
  place-items: center;
  background: var(--acl-bg);
}

#section-loading .loading-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: min(560px, 92%);
  text-align: center;
}

/* Slot for the flight-setup animated graphic. The default animation is an
   inline SVG appended by section-loading.js — replace the contents of
   #flight-setup-graphic (or set config.loading.graphicUrl) to swap it out. */
#section-loading #flight-setup-graphic {
  width: min(340px, 70vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
#section-loading #flight-setup-graphic svg,
#section-loading #flight-setup-graphic img {
  width: 100%;
  height: 100%;
}

#section-loading .loading-title {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acl-cyan);
}

#section-loading .loading-phase {
  margin: 0;
  min-height: 1.4em;
  font-family: var(--acl-mono);
  font-size: 0.85rem;
  color: var(--acl-muted);
}

#section-loading .loading-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--acl-panel-2);
  border: 1px solid var(--acl-line);
  overflow: hidden;
}
#section-loading .loading-bar .bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--acl-cyan-dim), var(--acl-cyan));
  box-shadow: var(--acl-glow);
  transition: width 420ms ease;
}

/* ==========================================================================
   SECTION 4 — #section-deck : SpaceX onboarding deck (Three.js canvas)
   ========================================================================== */

#section-deck { background: #000; }
#section-deck canvas { display: block; width: 100%; height: 100%; }

#section-deck .deck-hud {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  padding: 1.1rem;
  pointer-events: none;
}
#section-deck .deck-hud .hud-line {
  font-family: var(--acl-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: rgba(232, 241, 255, 0.85);
  background: rgba(5, 7, 13, 0.55);
  border: 1px solid rgba(31, 44, 71, 0.8);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  opacity: 0;
  transition: opacity 700ms ease;
}
#section-deck .deck-hud .hud-line.is-visible { opacity: 1; }

/* Visor frame — user is suited with visor open; a faint helmet rim frames
   the view without obscuring it. */
#section-deck .visor-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 66% at 50% 46%, transparent 62%, rgba(2, 4, 8, 0.55) 86%, rgba(2, 4, 8, 0.92) 100%);
}

@media (max-width: 640px) {
  .acl-btn { padding: 0.85rem 1.6rem; }
  #section-gate .gate-header { flex-direction: column; text-align: center; }
  #section-gate .gate-carrier { text-align: center; }
}