:root {
  color-scheme: dark;
  --ink: #020508;
  --ink-deep: #000204;
  --navy: #041020;
  --conduit: #f1cf8c;
  --gold: #dda848;
  --gold-strong: #efbd62;
  --ivory: #f2dfb0;
  --text: #eee7d9;
  --muted: rgba(226, 216, 198, 0.58);
  --line: rgba(241, 207, 140, 0.24);
}

* { box-sizing: border-box; }

html {
  width: 100%;
  min-height: 100%;
  background: var(--ink-deep);
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--ink-deep);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; }
button { font: inherit; }

.scene {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 43%, #02080e 0%, #010408 49%, #000 100%);
}

.phenomenon {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 43%;
  pointer-events: none;
}

.layer-base,
.poster { z-index: 1; }

.hero-conduit {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 50% 43%, transparent 0 8%, rgba(0,0,0,.10) 10%, rgba(0,0,0,.48) 14%, #000 19%);
  mask-image: radial-gradient(circle at 50% 43%, transparent 0 8%, rgba(0,0,0,.10) 10%, rgba(0,0,0,.48) 14%, #000 19%);
}

.hero-conduit path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.hero-conduit-glow {
  stroke: rgba(241, 207, 140, 0.12);
  stroke-width: 8;
}

.hero-conduit-core {
  stroke: var(--conduit);
  stroke-width: 2.5;
  opacity: 0.62;
}

.voice {
  z-index: 3;
  mix-blend-mode: screen;
  background: #000;
  opacity: 0;
  will-change: opacity;
}
.voice-turbulence { z-index: 4; }
.voice-rage { z-index: 5; }

.poster { display: none; }

.ignition {
  z-index: 7;
  opacity: 1;
  background: #000;
  transition: opacity 160ms ease;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 2, 5, 0.06), transparent 31%, rgba(0, 1, 3, 0.18) 76%, rgba(0, 0, 0, 0.52)),
    linear-gradient(to right, rgba(0, 2, 5, 0.23), transparent 38%, transparent 74%, rgba(0, 2, 5, 0.05));
}

.identity,
.hero-copy {
  position: absolute;
  z-index: 20;
}

.identity {
  top: max(28px, env(safe-area-inset-top));
  left: max(30px, 4.3vw);
  max-width: 340px;
}

.brand-name,
.brand-descriptor,
.hero-title { margin: 0; }

.brand-name {
  color: rgba(244, 235, 219, 0.92);
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  font-weight: 640;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.brand-descriptor {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: clamp(0.72rem, 0.8vw, 0.86rem);
  font-weight: 520;
  letter-spacing: 0.09em;
  text-transform: lowercase;
}

.hero-copy {
  left: max(30px, 4.3vw);
  bottom: max(36px, 7vh);
  width: min(640px, 43vw);
}

.hero-title {
  max-width: 11.8em;
  color: rgba(244, 237, 225, 0.94);
  font-size: clamp(2.3rem, 4.2vw, 4.65rem);
  font-weight: 520;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.38);
}

.hero-cta,
.detail-cta {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid rgba(241, 207, 140, 0.34);
  background: rgba(2, 5, 8, 0.58);
  color: rgba(240, 225, 199, 0.82);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 610;
  letter-spacing: 0.035em;
  backdrop-filter: blur(7px);
  transition: border-color 260ms ease, color 260ms ease, background 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.hero-cta { margin-top: clamp(22px, 3vh, 34px); }

.hero-cta:hover,
.hero-cta:focus-visible,
.detail-cta:hover,
.detail-cta:focus-visible {
  outline: none;
  border-color: rgba(255, 220, 151, 0.78);
  background: rgba(18, 12, 5, 0.62);
  color: var(--ivory);
  box-shadow: 0 0 28px rgba(221, 168, 72, 0.08);
  transform: translateY(-1px);
}

.hero-cta:focus-visible,
.detail-cta:focus-visible,
.door-node:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(2, 5, 8, 0.94), 0 0 0 4px rgba(241, 207, 140, 0.72);
}

.hero-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 720ms cubic-bezier(.2,.75,.15,1), transform 880ms cubic-bezier(.2,.75,.15,1);
}
.hero-reveal.is-visible { opacity: 1; transform: translateY(0); }
.scene.is-reduced .hero-reveal,
.scene.is-fallback .hero-reveal { opacity: 1; transform: none; }

.doors {
  position: relative;
  min-height: 165svh;
  background:
    radial-gradient(circle at 50% 28%, rgba(8, 19, 31, 0.86), rgba(2, 7, 12, 0.56) 38%, transparent 66%),
    linear-gradient(to bottom, #000 0%, #010408 18%, #02070d 64%, #010306 100%);
  --journey-progress: 0;
}

.doors::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.65;
  background:
    radial-gradient(circle at 18% 44%, rgba(241, 207, 140, 0.028), transparent 18%),
    radial-gradient(circle at 82% 44%, rgba(241, 207, 140, 0.028), transparent 18%),
    radial-gradient(circle at 50% 65%, rgba(18, 38, 58, 0.14), transparent 28%);
}

.doors-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
}

.doors-question {
  position: absolute;
  z-index: 12;
  top: 11vh;
  left: max(30px, 6.2vw);
  width: min(620px, 46vw);
  margin: 0;
  color: rgba(244, 237, 225, 0.94);
  font-size: clamp(2.45rem, 4.4vw, 4.9rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms cubic-bezier(.2,.75,.15,1), transform 900ms cubic-bezier(.2,.75,.15,1);
}
.doors.is-question-visible .doors-question { opacity: 1; transform: translateY(0); }

.doors-network {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.doors-network-mobile { display: none; }

.doors-network path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: opacity 240ms ease;
}
.network-glow path {
  stroke: rgba(241, 207, 140, 0.08);
  stroke-width: 8;
}
.network-core path {
  stroke: var(--conduit);
  stroke-width: 2.5;
  opacity: 0.46;
}
.doors[data-selected] [data-route-owner] { opacity: 0.22; }
.doors[data-selected="start"] [data-route-owner="start"],
.doors[data-selected="improve"] [data-route-owner="improve"],
.doors[data-selected="operate"] [data-route-owner="operate"],
.doors[data-selected="particular"] [data-route-owner="particular"],
.doors[data-selected="care"] [data-route-owner="care"] { opacity: 0.92; }

.door-node {
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  min-height: 48px;
  padding: 10px 10px 10px 29px;
  border: 0;
  background: transparent;
  color: rgba(231, 220, 201, 0.42);
  text-align: left;
  font-size: clamp(0.92rem, 1.08vw, 1.12rem);
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: 0.005em;
  cursor: pointer;
  opacity: 0.22;
  transform: translateY(9px);
  transition: opacity 620ms ease, color 260ms ease, transform 620ms cubic-bezier(.2,.75,.15,1), text-shadow 260ms ease;
}

.door-node::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(241, 207, 140, 0.48);
  border-radius: 50%;
  background: rgba(4, 8, 12, 0.92);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(241, 207, 140, 0.018);
  transition: background 260ms ease, border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.door-node[data-priority="primary"] { font-weight: 610; }
.door-node.is-arrived {
  opacity: 0.82;
  transform: translateY(0);
}
.door-node.is-arrived[data-priority="depth"] { opacity: 0.64; }
.door-node:hover,
.door-node:focus-visible,
.door-node.is-selected {
  color: rgba(247, 236, 215, 0.98);
  opacity: 1;
  text-shadow: 0 0 24px rgba(241, 207, 140, 0.13);
}
.door-node:hover::before,
.door-node:focus-visible::before,
.door-node.is-selected::before {
  border-color: rgba(255, 226, 166, 0.92);
  background: rgba(241, 207, 140, 0.88);
  box-shadow: 0 0 16px rgba(241, 207, 140, 0.22);
  transform: translateY(-50%) scale(1.12);
}

.door-start { left: 11.5%; top: 39.5%; }
.door-improve { left: 43%; top: 35.5%; }
.door-operate { right: 7.5%; top: 39.5%; }
.door-particular { left: 26%; top: 60.5%; }
.door-care { right: 24%; top: 60.5%; }

.door-detail {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: max(28px, 5.2vh);
  width: min(860px, 82vw);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(28px, 4vw, 58px);
  padding-top: 18px;
  border-top: 1px solid rgba(241, 207, 140, 0.20);
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
  transition: opacity 520ms ease, transform 620ms cubic-bezier(.2,.75,.15,1);
}
.door-detail.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.door-detail h3,
.door-detail p,
.door-detail ul { margin: 0; }
.door-detail h3 {
  color: rgba(247, 237, 218, 0.95);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  font-weight: 580;
  letter-spacing: -0.025em;
}
.door-detail p {
  margin-top: 10px;
  color: rgba(231, 220, 201, 0.66);
  font-size: clamp(0.92rem, 1.1vw, 1.05rem);
  line-height: 1.55;
}
.door-detail ul {
  padding-left: 1.05rem;
  color: rgba(231, 220, 201, 0.58);
  font-size: 0.86rem;
  line-height: 1.48;
}
.door-detail li + li { margin-top: 4px; }
.detail-cta {
  min-height: 42px;
  margin-top: 15px;
  padding-inline: 14px;
  font-size: 0.78rem;
}

@media (max-width: 960px) {
  .hero-copy { width: min(610px, 56vw); }
  .hero-title { font-size: clamp(2.2rem, 5.4vw, 4.1rem); }
  .door-node { max-width: 220px; }
  .door-start { left: 8%; }
  .door-operate { right: 5%; }
}

@media (max-width: 680px) {
  .scene,
  .doors-stage { min-height: 100svh; }
  .layer { object-position: 50% 43%; }

  .identity {
    top: max(22px, calc(env(safe-area-inset-top) + 12px));
    left: max(20px, calc(env(safe-area-inset-left) + 20px));
    right: 20px;
    max-width: none;
  }
  .brand-name { font-size: 0.92rem; }
  .brand-descriptor { font-size: 0.70rem; }

  .hero-copy {
    left: max(20px, calc(env(safe-area-inset-left) + 20px));
    right: max(20px, calc(env(safe-area-inset-right) + 20px));
    bottom: max(28px, calc(env(safe-area-inset-bottom) + 24px));
    width: auto;
  }
  .hero-title {
    max-width: 10.5em;
    font-size: clamp(2.05rem, 9vw, 3.15rem);
    line-height: 1.00;
  }
  .hero-cta { min-height: 50px; margin-top: 20px; padding-inline: 16px; font-size: 0.82rem; }

  .hero-conduit-core { stroke-width: 2; }
  .hero-conduit-glow { stroke-width: 7; }

  .doors { min-height: 178svh; }
  .doors-question {
    top: max(64px, 8.5vh);
    left: max(20px, calc(env(safe-area-inset-left) + 20px));
    right: 20px;
    width: auto;
    font-size: clamp(2.2rem, 10vw, 3.4rem);
  }
  .doors-network-desktop { display: none; }
  .doors-network-mobile { display: block; }
  .network-core path { stroke-width: 2; }
  .network-glow path { stroke-width: 7; }

  .door-node {
    max-width: 47vw;
    min-height: 44px;
    padding: 8px 6px 8px 25px;
    font-size: 0.88rem;
  }
  .door-node::before { left: 6px; width: 6px; height: 6px; }
  .door-start { left: 13%; top: 27.5%; }
  .door-improve { left: 55%; top: 36.5%; }
  .door-operate { left: 13%; right: auto; top: 46.5%; }
  .door-particular { left: 55%; top: 56.5%; }
  .door-care { left: 13%; right: auto; top: 66.5%; }

  .door-detail {
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
    width: calc(100vw - 40px);
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 12px;
  }
  .door-detail h3 { font-size: 1.12rem; }
  .door-detail p { margin-top: 6px; font-size: 0.82rem; line-height: 1.42; }
  .door-detail ul { display: none; }
  .detail-cta { min-height: 38px; margin-top: 8px; font-size: 0.72rem; }

  .scene::after {
    background: linear-gradient(to bottom, rgba(0, 2, 5, 0.04), transparent 36%, rgba(0, 1, 3, 0.18) 62%, rgba(0, 0, 0, 0.60));
  }
}

@media (max-height: 720px) and (min-width: 681px) {
  .hero-copy { bottom: 28px; width: min(580px, 45vw); }
  .hero-title { font-size: clamp(2.1rem, 3.8vw, 3.55rem); }
  .identity { top: 24px; }
  .door-detail { bottom: 18px; }
  .door-detail p { font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .voice,
  .ignition { display: none !important; }
  .poster { display: block; }
  .hero-conduit path,
  .doors-network path { stroke-dashoffset: 0 !important; }
  .hero-reveal,
  .doors-question,
  .door-node { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-cta,
  .detail-cta,
  .door-detail,
  .door-node { transition: none; }
}