/* =========================================
   MC Server — 炉火未熄
   Design tokens & cinematic visual system
   ========================================= */

/* --- Tokens --- */
:root {
  --ink: #0b0b0a;
  --iron: #1b1a17;
  --brass: #b88a4a;
  --fire: #e56f35;
  --twilight: #73617f;
  --paper: #eee5d2;
  --smoke: #8a8278;
  --fire-glow: rgba(229, 111, 53, 0.25);
  --brass-glow: rgba(184, 138, 74, 0.15);
  --twilight-glow: rgba(115, 97, 127, 0.25);

  --font-display: 'Noto Serif SC', 'Source Han Serif SC', 'STSong', 'SimSun', 'Songti SC', Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;

  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Skip Link --- */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  padding: 0.5rem 1rem;
  background: var(--fire);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
  top: 0;
}

/* --- Progress Bar --- */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--fire), var(--brass));
  z-index: 500;
  transition: width 0.1s linear;
  will-change: width;
}

/* --- Film Grain --- */
.grain-svg {
  position: absolute;
  width: 0;
  height: 0;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 400;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  will-change: transform;
}

/* =========================================
   Scenes — Cinematic long take
   ========================================= */

.scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* --- Scene Backgrounds --- */

.scene__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}

/* Shared light source */
.scene__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Scene 1 — Dusk settlement */
.scene__bg--1 {
  background:
    radial-gradient(ellipse 120% 35% at 50% 100%, var(--fire-glow) 0%, transparent 60%),
    radial-gradient(ellipse 90% 45% at 35% 100%, var(--brass-glow) 0%, transparent 50%),
    radial-gradient(ellipse 50% 25% at 50% 85%, rgba(229, 111, 53, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, var(--ink) 0%, #1a1814 25%, #221d16 45%, #1a1510 65%, var(--ink) 100%);
}

.scene__bg--1::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* distant furnace glow */
    radial-gradient(ellipse 15% 20% at 25% 75%, rgba(229, 111, 53, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 10% 15% at 60% 80%, rgba(184, 138, 74, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse 8% 12% at 80% 72%, rgba(229, 111, 53, 0.08) 0%, transparent 50%);
}

/* Scene 2 — Mechanical workshop */
.scene__bg--2 {
  background:
    radial-gradient(ellipse 100% 25% at 50% 100%, var(--fire-glow) 0%, transparent 50%),
    radial-gradient(circle at 68% 55%, var(--brass-glow) 0%, transparent 40%),
    radial-gradient(circle at 25% 40%, rgba(184, 138, 74, 0.08) 0%, transparent 30%),
    linear-gradient(180deg, var(--ink) 0%, var(--iron) 30%, #1f1c16 55%, #161412 80%, var(--ink) 100%);
}

.scene__bg--2::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 10% at 50% 20%, rgba(238, 229, 210, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 30% 15% at 75% 70%, rgba(229, 111, 53, 0.06) 0%, transparent 50%);
}

/* Gear decorations for scene 2 */
.scene__gear {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(184, 138, 74, 0.06);
  pointer-events: none;
}

.scene__gear::before,
.scene__gear::after {
  content: '';
  position: absolute;
  background: rgba(184, 138, 74, 0.04);
  border-radius: 2px;
}

.scene__gear--1 {
  width: 280px;
  height: 280px;
  top: 15%;
  right: -40px;
}

.scene__gear--1::before {
  width: 30px;
  height: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(184, 138, 74, 0.06);
}

.scene__gear--1::after {
  width: 4px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 2px;
  box-shadow:
    0 -60px 0 rgba(184, 138, 74, 0.04),
    0 60px 0 rgba(184, 138, 74, 0.04),
    -60px 0 0 rgba(184, 138, 74, 0.04),
    60px 0 0 rgba(184, 138, 74, 0.04);
}

.scene__gear--2 {
  width: 160px;
  height: 160px;
  bottom: 20%;
  left: 10%;
  border-width: 2px;
}

.scene__gear--2::before {
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(184, 138, 74, 0.05);
}

.scene__gear--2::after {
  width: 3px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(30deg);
  border-radius: 1.5px;
  box-shadow:
    0 -35px 0 rgba(184, 138, 74, 0.03),
    0 35px 0 rgba(184, 138, 74, 0.03),
    -35px 0 0 rgba(184, 138, 74, 0.03),
    35px 0 0 rgba(184, 138, 74, 0.03);
}

/* Scene 3 — Warm dining hall */
.scene__bg--3 {
  background:
    radial-gradient(ellipse 130% 40% at 50% 100%, rgba(229, 111, 53, 0.3) 0%, transparent 55%),
    radial-gradient(ellipse 80% 30% at 30% 60%, rgba(184, 138, 74, 0.18) 0%, transparent 45%),
    radial-gradient(ellipse 60% 20% at 70% 50%, rgba(229, 111, 53, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, #1f1810 0%, #2a1f14 30%, #2a2015 55%, #1a1410 80%, #0d0b08 100%);
}

.scene__bg--3::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 8% at 50% 40%, rgba(238, 229, 210, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 30% 5% at 30% 55%, rgba(238, 229, 210, 0.04) 0%, transparent 50%);
}

/* Scene 4 — Twilight Forest */
.scene__bg--4 {
  background:
    radial-gradient(ellipse 100% 30% at 50% 100%, var(--twilight-glow) 0%, transparent 50%),
    radial-gradient(ellipse 70% 40% at 50% 45%, rgba(115, 97, 127, 0.10) 0%, transparent 40%),
    radial-gradient(ellipse 50% 25% at 20% 60%, rgba(115, 97, 127, 0.08) 0%, transparent 35%),
    linear-gradient(180deg, #0b0a0e 0%, #141118 25%, #1a1423 45%, #120f18 70%, #0b0a0e 100%);
}

.scene__bg--4::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* tree-like vertical silhouettes */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 30px,
      rgba(11, 10, 14, 0.3) 30px,
      rgba(11, 10, 14, 0.3) 32px,
      transparent 32px,
      transparent 50px,
      rgba(11, 10, 14, 0.15) 50px,
      rgba(11, 10, 14, 0.15) 51px,
      transparent 51px,
      transparent 80px,
      rgba(11, 10, 14, 0.2) 80px,
      rgba(11, 10, 14, 0.2) 82px,
      transparent 82px,
      transparent 120px
    ),
    /* ground mist */
    radial-gradient(ellipse 90% 15% at 50% 85%, rgba(115, 97, 127, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 10% at 30% 90%, rgba(115, 97, 127, 0.08) 0%, transparent 50%);
}

.scene__bg--4::after {
  background:
    /* light shaft */
    linear-gradient(
      160deg,
      transparent 30%,
      rgba(115, 97, 127, 0.03) 35%,
      transparent 38%,
      transparent 60%,
      rgba(238, 229, 210, 0.02) 65%,
      transparent 68%
    );
}

/* Scene 5 — Night, single light */
.scene__bg--5 {
  background:
    radial-gradient(ellipse 100% 20% at 50% 100%, rgba(229, 111, 53, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 25% 12% at 50% 18%, rgba(238, 229, 210, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--ink) 0%, #0f0e0d 35%, #0d0c0b 65%, var(--ink) 100%);
}

/* Starfield */
.scene__starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene__starfield::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(238, 229, 210, 0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 8%, rgba(238, 229, 210, 0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 40% 22%, rgba(238, 229, 210, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 12%, rgba(238, 229, 210, 0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 18%, rgba(238, 229, 210, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 10%, rgba(238, 229, 210, 0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 30%, rgba(238, 229, 210, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 35%, rgba(238, 229, 210, 0.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 28%, rgba(238, 229, 210, 0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 32%, rgba(238, 229, 210, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 45%, rgba(238, 229, 210, 0.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 50%, rgba(238, 229, 210, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 42%, rgba(238, 229, 210, 0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 20% 55%, rgba(238, 229, 210, 0.15) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 48%, rgba(238, 229, 210, 0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 60%, rgba(238, 229, 210, 0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 55%, rgba(238, 229, 210, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 52%, rgba(238, 229, 210, 0.2) 0%, transparent 100%);
}

/* ---- Content Layer ---- */

.scene__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

.scene__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--smoke);
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  font-style: italic;
}

.scene__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
  color: var(--paper);
}

.scene__title--last {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.scene__text {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.9;
  color: var(--paper);
  opacity: 0.82;
  max-width: 56ch;
  margin-bottom: 1.2rem;
}

.scene__text--last {
  margin-bottom: 0;
}

.scene__text--center {
  text-align: center;
}

/* ---- Address Block (Scene 1) ---- */

.address-block {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.address {
  font-family: var(--font-mono);
  font-size: 1.125rem;
  color: var(--brass);
  letter-spacing: 0.05em;
  padding: 0.4em 0.8em;
  background: rgba(184, 138, 74, 0.08);
  border: 1px solid rgba(184, 138, 74, 0.15);
  border-radius: 6px;
}

.address--large {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  padding: 0.5em 1em;
}

.copy-btn {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--fire);
  border: none;
  padding: 0.6em 1.4em;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background 0.25s var(--ease-out),
    transform 0.2s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
  white-space: nowrap;
}

.copy-btn:hover {
  background: #d05a2a;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(229, 111, 53, 0.3);
}

.copy-btn:active {
  transform: translateY(0);
}

.copy-btn:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

.copy-btn--large {
  font-size: 1rem;
  padding: 0.7em 1.8em;
}

.copy-btn[data-state="copied"] {
  background: #4a7c59;
  pointer-events: none;
}

/* ---- Scene 5 — Details ---- */

.address-block--final {
  justify-content: center;
  margin-top: 3rem;
}

.details {
  margin-top: 3rem;
  text-align: center;
}

.details__line {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--smoke);
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
}

.details__downloads {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.details__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.9rem;
  color: var(--brass);
  text-decoration: none;
  padding: 0.5em 1.2em;
  border: 1px solid rgba(184, 138, 74, 0.25);
  border-radius: 6px;
  transition:
    background 0.25s var(--ease-out),
    border-color 0.25s var(--ease-out);
}

.details__link:hover {
  background: rgba(184, 138, 74, 0.1);
  border-color: rgba(184, 138, 74, 0.4);
}

.details__link:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

.details__link::before {
  content: '↓';
  font-size: 0.85em;
}

.details__note {
  font-size: 0.8rem;
  color: var(--smoke);
  opacity: 0.7;
  line-height: 1.5;
}

/* =========================================
   Viewport transitions (dissolve feel)
   ========================================= */

.scene::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to top, var(--ink) 0%, transparent 100%);
}

.scene:first-child::after {
  height: 180px;
}

.scene--last::after {
  display: none;
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 768px) {
  .scene__content {
    padding: 5rem 1.5rem;
  }

  .scene__text br {
    display: none;
  }

  .address-block {
    flex-direction: column;
    align-items: flex-start;
  }

  .address-block--final {
    align-items: center;
  }

  .details__downloads {
    flex-direction: column;
    align-items: center;
  }

  .scene__gear {
    display: none;
  }

  .grain {
    opacity: 0.015;
    background-size: 150px 150px;
  }

  .scene__bg--1::before {
    opacity: 0.6;
  }
}

@media (max-width: 480px) {
  .scene__content {
    padding: 3rem 1.25rem;
  }

  .scene__eyebrow {
    font-size: 0.75rem;
  }

  .address {
    font-size: 1rem;
  }

  .address--large {
    font-size: 1.1rem;
  }
}

/* =========================================
   Reduced Motion
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .grain {
    display: none;
  }

  .scene__bg {
    transform: none !important;
  }

  .scene__gear {
    display: none;
  }
}

/* =========================================
   Scroll-driven enhancements (set by JS)
   ========================================= */

.scene[data-visible="true"] .scene__content {
  animation: scene-fade-in 0.8s var(--ease-out) both;
}

@keyframes scene-fade-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene[data-visible="true"] .scene__content {
    animation: none;
    opacity: 1;
    transform: none;
  }
}