/* The Second Quest — cinematic chrome, parallax, glassmorphism */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --chrome-light: #d0d4d8;
  --chrome-dark: #a0a4a8;
  --steel-deep: #3a3e42;
  --accent-blue: #4a8ac4;
  --glass: rgba(255,255,255,0.15);
  --glass-strong: rgba(255,255,255,0.22);
  --glass-border: rgba(255,255,255,0.35);
  --sharp-light: #f0f4f8;
  --shadow-metal: #60646a;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.75;
  color: var(--steel-deep);
  background: var(--chrome-light);
  overflow-x: hidden;
}

/* SCENES — full viewport cinematic stages */
.scene {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 60px);
  isolation: isolate;
}

.scene-content {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  width: 100%;
}

.scene-content-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Parallax layers */
.parallax-bg, .parallax-mid {
  position: absolute;
  inset: -10vh -5vw;
  pointer-events: none;
  will-change: transform;
}
.parallax-bg { z-index: 1; }
.parallax-mid { z-index: 2; }

.chrome-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, var(--chrome-light) 0%, #b8bcc0 45%, var(--chrome-dark) 100%);
}
.chrome-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(240,244,248,0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(74,138,196,0.18) 0%, transparent 60%);
}
.chrome-grad-2 { background: linear-gradient(195deg, #b8bcc0 0%, #9ea2a6 50%, var(--chrome-dark) 100%); }
.chrome-grad-3 { background: linear-gradient(165deg, #c4c8cc 0%, #989ca0 50%, #6a6e72 100%); }
.chrome-grad-4 { background: linear-gradient(180deg, #a8acb0 0%, #7a7e82 50%, var(--steel-deep) 100%); }

/* Sharp angle light streaks */
.streak {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--sharp-light) 30%, var(--sharp-light) 70%, transparent 100%);
  opacity: 0.18;
  transform-origin: center;
}
.streak-1 { top: 22%; left: -10%; right: -10%; transform: rotate(-18deg); }
.streak-2 { top: 58%; left: -10%; right: -10%; transform: rotate(15deg); height: 1.5px; opacity: 0.24; }
.streak-3 { top: 80%; left: -10%; right: -10%; transform: rotate(-22deg); opacity: 0.14; }

.streak-c {
  position: absolute;
  top: 50%;
  left: -10%;
  right: -10%;
  height: 1px;
  transform: rotate(-12deg);
  background: linear-gradient(90deg, transparent, var(--sharp-light) 50%, transparent);
  opacity: 0.25;
}

/* HERO content */
.chapter-tag {
  display: inline-block;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--shadow-metal);
  padding: 8px 18px;
  border: 1px solid rgba(58,62,66,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(-10px);
  animation: fadeUp 0.9s ease 0.2s forwards;
}

.hero-title {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(40px, 9vw, 120px);
  line-height: 0.96;
  color: var(--steel-deep);
  letter-spacing: -0.01em;
  margin-bottom: 36px;
}
.title-line {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 0.9s ease forwards;
}
.title-line:nth-of-type(1) { animation-delay: 0.4s; }
.title-line:nth-of-type(2) { animation-delay: 0.65s; }
.title-italic { font-style: italic; font-weight: 500; color: var(--accent-blue); }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* GLASS CARDS */
.glass-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 40px);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 8px 32px rgba(58,62,66,0.18);
  color: var(--steel-deep);
}
.glass-card p { color: var(--steel-deep); font-size: clamp(15px, 1.5vw, 18px); }

.glass-hero {
  max-width: 560px;
  margin: 0 auto 36px;
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  animation: fadeUp 0.9s ease 0.95s forwards;
}

.hero-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 0.9s ease 1.3s forwards;
}
.meter-line {
  width: 1px;
  height: 60px;
  background: rgba(58,62,66,0.2);
  position: relative;
  overflow: hidden;
}
.meter-line span {
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  background: var(--accent-blue);
  animation: meterRun 2.4s ease-in-out infinite;
}
@keyframes meterRun {
  to { top: 100%; }
}
.meter-label {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--shadow-metal);
}

/* ACT scenes */
.act-frame {
  max-width: 880px;
  margin: 0 auto;
}
.act-frame.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.act-frame.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.act-label {
  display: inline-block;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--accent-blue);
  margin-bottom: 18px;
  text-transform: uppercase;
}

.act-frame h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: clamp(34px, 6vw, 72px);
  line-height: 1.05;
  color: var(--sharp-light);
  margin-bottom: 22px;
  text-shadow: 0 2px 16px rgba(58,62,66,0.45);
}
.scene-act:first-of-type .act-frame h2,
.scene-act:nth-of-type(2) .act-frame h2 { color: var(--steel-deep); text-shadow: 0 2px 16px rgba(255,255,255,0.4); }

.act-frame > p {
  color: rgba(58,62,66,0.92);
  font-size: clamp(16px, 1.6vw, 19px);
  margin-bottom: 28px;
  max-width: 720px;
}
.scene-finale .act-frame > p { color: rgba(240,244,248,0.92); }

.card-eyebrow {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--accent-blue);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.glass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.glass-final {
  max-width: 520px;
  margin-top: 24px;
}
.glass-final p { font-style: italic; font-size: clamp(17px, 1.7vw, 21px); }

.scene-finale .glass-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.scene-finale .glass-card p { color: var(--sharp-light); }
.scene-finale .glass-card .card-eyebrow { color: #8ab2da; }

/* COLOPHON */
.colophon {
  position: relative;
  background: var(--steel-deep);
  color: var(--sharp-light);
  padding: clamp(60px, 9vw, 110px) 24px;
  text-align: center;
  overflow: hidden;
}
.colophon-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.chapter-tag-foot {
  background: rgba(240,244,248,0.06);
  border-color: rgba(240,244,248,0.2);
  color: rgba(240,244,248,0.85);
}
.colophon p {
  font-family: "Playfair Display", serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  color: var(--sharp-light);
  margin-top: 18px;
}
.colophon em { color: var(--accent-blue); font-style: italic; }

@media (max-width: 720px) {
  .glass-grid { grid-template-columns: 1fr; }
  .scene { padding: 80px 20px; }
}