:root {
  --bg: #07090D;
  --text: #F5F7FA;
  --muted: rgba(245, 247, 250, .58);
  --accent: #63D8FF;
  --transition-ms: 700ms;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body, main { width: 100%; min-height: 100%; margin: 0; }

body {
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

button { font: inherit; }

#loader {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: var(--bg);
  transition: opacity 650ms cubic-bezier(.65, 0, .35, 1), visibility 650ms;
}

#loader.is-exiting { opacity: 0; visibility: hidden; pointer-events: none; }

#introBackdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 9, 13, .92) 0%, rgba(7, 9, 13, .62) 38%, rgba(7, 9, 13, .14) 72%, rgba(7, 9, 13, .42) 100%),
    linear-gradient(180deg, rgba(7, 9, 13, .24), rgba(7, 9, 13, .65)),
    url("assets/frames/frame_0001.webp") center / cover no-repeat;
  filter: saturate(.72) contrast(1.05);
  transform: scale(1.025);
  animation: intro-focus 1600ms cubic-bezier(.2, .7, .2, 1) both;
}

.intro-content {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(1.75rem, 5vw, 5rem);
  width: min(34rem, 42vw);
  transform: translateY(-50%);
}

.intro-content p, .intro-content h1 { margin: 0; }
.intro-kicker { color: var(--accent); font-size: .64rem; font-weight: 700; letter-spacing: .25em; }

#introTitle {
  display: grid;
  margin: 1rem 0 2rem;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(4.5rem, 7.8vw, 8.5rem);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .73;
  text-transform: uppercase;
  text-shadow: 0 1px 26px rgba(7, 9, 13, .42);
}

#introTitle span {
  display: block;
  animation: title-rise 850ms cubic-bezier(.2, .7, .2, 1) both;
}
#introTitle span:nth-child(2) { animation-delay: 90ms; }
#introTitle span:nth-child(3) { animation-delay: 180ms; }

.intro-status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .18em;
}

#loaderProgress {
  display: block;
  width: 100%;
  height: .12rem;
  margin-top: .75rem;
  border: 0;
  accent-color: var(--accent);
}

#loaderProgress::-webkit-progress-bar { background: rgba(245, 247, 250, .14); }
#loaderProgress::-webkit-progress-value { background: var(--accent); }

#enterButton, #retryButton {
  border: 1px solid rgba(245, 247, 250, .42);
  border-radius: 0;
  min-width: 13rem;
  margin-top: 1.4rem;
  padding: .9rem 1.05rem;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, opacity 180ms ease;
}

#enterButton:hover:not(:disabled), #retryButton:hover { background: var(--accent); color: var(--bg); }
#enterButton:disabled { cursor: wait; opacity: .35; }
#enterButton:focus-visible, #retryButton:focus-visible, #stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

#fatalError { max-width: min(32rem, 90vw); color: var(--muted); font-size: .78rem; line-height: 1.6; }
#fatalError p { margin: .4rem 0; }
#fatalErrorDetail { overflow-wrap: anywhere; }

@keyframes intro-focus {
  from { filter: saturate(.4) contrast(.9) blur(8px); transform: scale(1.06); }
  to { filter: saturate(.72) contrast(1.05) blur(0); transform: scale(1.025); }
}

@keyframes title-rise {
  from { opacity: 0; transform: translateY(.55em); }
  to { opacity: 1; transform: translateY(0); }
}

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}

#productCanvas, #grade, #blackout { position: absolute; inset: 0; width: 100%; height: 100%; }

#productCanvas { filter: brightness(.96) contrast(1.02); }

#grade {
  pointer-events: none;
  background:
    radial-gradient(ellipse 82% 72% at 8% 2%, rgba(194, 230, 255, .20) 0%, rgba(123, 198, 235, .09) 34%, rgba(99, 216, 255, 0) 68%),
    linear-gradient(135deg, rgba(7, 9, 13, 0) 18%, rgba(7, 9, 13, .06) 48%, rgba(7, 9, 13, .30) 100%),
    linear-gradient(90deg, rgba(7, 9, 13, .10) 0%, rgba(7, 9, 13, 0) 38%, rgba(7, 9, 13, .12) 100%);
}

#blackout { z-index: 3; pointer-events: none; background: var(--bg); opacity: 0; transition: opacity 350ms ease; }
#blackout.is-black { opacity: 1; }

.caption {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(1.75rem, 5vw, 5rem);
  bottom: auto;
  width: min(43rem, 48vw);
  transform: translateY(-50%);
  text-shadow: 0 2px 24px rgba(7, 9, 13, .72);
}

.caption p, .caption h1 { margin: 0; }
#captionIndex {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
}
#captionIndex::before { content: ""; width: 2.8rem; height: 1px; background: currentColor; }
#captionTitle {
  max-width: 7.4ch;
  margin-top: 1.1rem;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(4.8rem, 8.5vw, 9rem);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: .78;
  text-transform: uppercase;
  text-wrap: balance;
}

#stationDots {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(1.3rem, 3vw, 3rem);
  display: grid;
  gap: .8rem;
  transform: translateY(-50%);
}

.station-dot { width: .34rem; height: .34rem; border: 1px solid var(--muted); border-radius: 50%; }
.station-dot.is-active { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 .8rem rgba(99, 216, 255, .7); }

#chapterControls {
  position: absolute;
  z-index: 2;
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  justify-items: end;
  gap: .65rem;
}

#inputHint {
  margin: 0;
  color: var(--muted);
  font-size: .64rem;
  letter-spacing: .13em;
}

.chapter-buttons { display: flex; gap: .55rem; }

.chapter-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-width: 7rem;
  height: 3rem;
  padding: 0 .9rem;
  border: 1px solid rgba(245, 247, 250, .34);
  background: rgba(7, 9, 13, .62);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, opacity 180ms ease;
}

.chapter-button:hover:not(:disabled) { border-color: var(--accent); background: rgba(99, 216, 255, .15); }
.chapter-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.chapter-button:disabled { cursor: default; opacity: .28; }
.chapter-arrow { color: var(--accent); font-size: 1rem; line-height: 1; }

#cursorDot, #cursorRing {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
  opacity: 0;
}

#cursorDot {
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 .8rem rgba(99, 216, 255, .8);
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease;
}

#cursorRing {
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(99, 216, 255, .62);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: width 180ms ease, height 180ms ease, opacity 120ms ease, background 180ms ease, left 95ms linear, top 95ms linear;
}

#cursorLabel { color: var(--text); font-size: .48rem; font-weight: 800; letter-spacing: .1em; opacity: 0; transition: opacity 180ms ease; }
#cursorRing.is-active { width: 4.2rem; height: 4.2rem; background: rgba(7, 9, 13, .46); backdrop-filter: blur(5px); }
#cursorRing.is-active #cursorLabel { opacity: 1; }
.cursor-visible #cursorDot, .cursor-visible #cursorRing { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .has-custom-cursor, .has-custom-cursor * { cursor: none !important; }
  .has-custom-cursor #cursorDot, .has-custom-cursor #cursorRing { display: flex; }
}

@media (max-width: 980px) and (min-width: 761px) {
  .caption { width: min(34rem, 48vw); }
  .chapter-button { min-width: 6.25rem; }
}

@media (max-width: 760px) {
  .intro-content { left: 1.25rem; width: calc(100% - 2.5rem); }
  #introTitle { font-size: clamp(3.7rem, 18vw, 6rem); }
  .caption { top: 48%; left: 1.25rem; width: 74vw; }
  #captionTitle { max-width: 7.4ch; font-size: clamp(3rem, 15vw, 5.2rem); }
  #stationDots { top: 1.3rem; right: 1.25rem; grid-auto-flow: column; transform: none; }
  #chapterControls { right: 1rem; bottom: 1rem; left: 1rem; justify-items: center; gap: .5rem; }
  #inputHint { white-space: nowrap; font-size: .58rem; }
  .chapter-buttons { width: 100%; }
  .chapter-button { flex: 1; min-width: 0; height: 2.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; }
  #cursorDot, #cursorRing { display: none !important; }
}