/* ════════════════════════════════════════════════════════════════
   PR0M3TH3U5 — landing
   Mix of Baroque oil painting + modern cryptic terminal HUD.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Painting-derived palette */
  --canvas:        #0c0805;
  --canvas-warm:   #1c130b;
  --parchment:     #ebd9b4;
  --parchment-dim: #b8a37a;
  --gold:          #d4a85a;
  --gold-hot:      #f0c878;
  --crimson:       #a83a25;
  --ember:         #ff6a1a;

  /* Tech HUD palette */
  --hud-fg:        #e8d8b8;
  --hud-dim:       #6f5f44;
  --hud-line:      rgba(232, 216, 184, 0.18);
  --hud-bracket:   #6f5f44;
  --hud-em:        #f0c878;
  --hud-pulse:     #ff8c3a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--canvas);
  color: var(--parchment);
  font-family: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
}

/* ── CRT scanlines (subtle, planet-wide) ───────────────────────── */
#scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.0)  0px,
      rgba(0, 0, 0, 0.0)  2px,
      rgba(0, 0, 0, 0.18) 3px,
      rgba(0, 0, 0, 0.0)  4px
    );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* (Motes / drifting embers removed — keeping the scene clean.) */

/* ════════════════════════════════════════════════════════════════
   TOP BAR — tech HUD (terminal monospace)
   ════════════════════════════════════════════════════════════════ */

#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 18px 22px;
  pointer-events: none;
  font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
}

#topbar > * { pointer-events: auto; }

.hud-em {
  color: var(--hud-em);
  text-shadow: 0 0 6px rgba(240, 200, 120, 0.4);
}
.hud-pulse {
  color: var(--hud-pulse);
  text-shadow: 0 0 6px rgba(255, 140, 60, 0.55);
  animation: hud-pulse 2.4s ease-in-out infinite;
}
@keyframes hud-pulse {
  0%, 100% { opacity: 1.0; }
  50%      { opacity: 0.55; }
}

/* Top-right social link */
#social {
  color: var(--hud-dim);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 6px 4px;
  transition: color 160ms ease, text-shadow 160ms ease;
}
#social .bracket { color: var(--hud-bracket); }
#social .label   { color: var(--hud-dim); }
#social .x       {
  color: var(--gold-hot);
  font-weight: 600;
  font-size: 13px;
  text-shadow: 0 0 4px rgba(240, 200, 120, 0.6);
}
#social:hover .bracket,
#social:hover .label  { color: var(--parchment); }
#social:hover .x       {
  text-shadow: 0 0 4px rgba(255, 220, 160, 0.9), 0 0 14px rgba(255, 140, 60, 0.5);
}

/* ════════════════════════════════════════════════════════════════
   HERO — painting + pixel title overlay
   ════════════════════════════════════════════════════════════════ */

#hero {
  position: relative;
  width: 100%;
}

.painting-frame {
  position: relative;
  width: 100%;
}

/* Title planted in the upper-middle of the painting — scrolls away naturally */
.hero-content {
  position: absolute;
  top: 50vh;                         /* center of first viewport */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  text-align: center;
  width: calc(100% - 48px);
  max-width: 1100px;
  padding: 0 24px;
  pointer-events: none;
}
.hero-content > * { pointer-events: auto; }

/* HUD overlay: fixed to viewport always */
#hud-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 15;
  transition: opacity 500ms ease;
}
#hud-overlay > * { pointer-events: none; }

/* Smoothly fade hero-content out as the user scrolls down */
#hero[data-scroll="advanced"] .hero-content {
  opacity: 0;
  transform: translate(-50%, -55%) scale(0.985);
  transition: opacity 600ms ease, transform 600ms ease;
}

#painting {
  display: block;
  width: 100%;
  height: auto;                            /* natural aspect — taller than viewport, scrollable */
  filter:
    saturate(1.0)
    contrast(1.05)
    brightness(0.78);
}

/* Subtle chromatic aberration on the painting */
.painting-aberration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      transparent 60%,
      rgba(168, 58, 37, 0.06) 80%,
      rgba(168, 58, 37, 0.12) 100%);
  mix-blend-mode: screen;
}

/* Vignette pulls focus to centered title */
.painting-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%,
      transparent 0%,
      rgba(12, 8, 5, 0.35) 55%,
      rgba(12, 8, 5, 0.85) 95%);
}

/* Faint film grain */
.painting-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
}

/* Corner targeting reticles (HUD) — inside the sticky painting frame */
.corner {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: 5;
  pointer-events: none;
  border-color: var(--hud-dim);
  opacity: 0.7;
}
.corner-tl { top: 80px;    left: 22px;    border-top: 1px solid; border-left: 1px solid; }
.corner-tr { top: 80px;    right: 22px;   border-top: 1px solid; border-right: 1px solid; }
.corner-bl { bottom: 60px; left: 22px;    border-bottom: 1px solid; border-left: 1px solid; }
.corner-br { bottom: 60px; right: 22px;   border-bottom: 1px solid; border-right: 1px solid; }

/* Scroll cue at the bottom of the painting */
.scroll-cue {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 4px;
  color: var(--hud-bracket);
  pointer-events: none;
  opacity: 0;
  animation: fade-in 1.0s ease forwards;
  animation-delay: 2.4s;
}
.scroll-cue-arrow {
  font-size: 12px;
  color: var(--gold);
  animation: scroll-bob 1.6s ease-in-out infinite;
}
@keyframes scroll-bob {
  0%, 100% { transform: translateY(0);   opacity: 0.5; }
  50%      { transform: translateY(4px); opacity: 1.0; }
}
.scroll-cue.cue-hide {
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

/* Position hud-bottom inside the sticky painting frame */
.hud-bottom {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
}

.eyebrow {
  font-family: "Cinzel", "Cormorant Garamond", serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 8px;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(212, 168, 90, 0.45), 0 2px 4px rgba(0,0,0,0.7);
  margin-bottom: 28px;
  opacity: 0;
  animation: fade-in 1.2s ease forwards;
  animation-delay: 0.3s;
}
@keyframes fade-in {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 0.92; transform: translateY(0); }
}

/* ── TERMINAL TITLE — futuristic monospace, capslock, outlined ── */
.title {
  position: relative;
  display: inline-block;
  font-family: "Share Tech Mono", "JetBrains Mono", "Courier New", monospace;
  font-weight: 400;
  font-size: clamp(36px, 9.4vw, 132px);       /* fits 'PR0M3TH3U5' on one line */
  letter-spacing: 0.08em;
  line-height: 1.0;
  margin: 0 0 36px;
  text-transform: uppercase;
  opacity: 1;
  isolation: isolate;
  white-space: nowrap;                          /* never wrap */
}
.title-text {
  white-space: nowrap;
}

/* Kill the dark shadow layer — legibility comes from the cream stroke + glow */
.title-shadow {
  display: none !important;
}

/* Layer 1: ember halo behind the glyphs (fades in once formation completes) */
.title-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: #ff8c3a;
  filter: blur(28px) saturate(1.35);
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transition: opacity 600ms ease 0s;
}
.title.locked .title-glow {
  opacity: 0.5;
  animation: title-pulse 4.2s ease-in-out infinite 800ms;
}
@keyframes title-pulse {
  0%, 100% { opacity: 0.42; filter: blur(26px) saturate(1.25); }
  50%      { opacity: 0.65; filter: blur(34px) saturate(1.55); }
}

/* Layer 2: deep shadow for legibility against the painting */
.title-shadow {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: rgba(0, 0, 0, 0.0);
  pointer-events: none;
  text-transform: uppercase;
  opacity: 0;
  text-shadow:
    0 2px 0   rgba(0, 0, 0, 0.6),
    0 4px 14px rgba(0, 0, 0, 0.85),
    0 0 32px  rgba(0, 0, 0, 0.55);
  transition: opacity 600ms ease;
}
.title.locked .title-shadow { opacity: 1; }

/* Layer 3: outlined cream foreground — terminal feel.
   The text content is rendered char-by-char by JS during formation. */
.title-text {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.6px rgba(248, 240, 220, 0.97);
          text-stroke: 1.6px rgba(248, 240, 220, 0.97);
  text-shadow:
    0 0 1px  rgba(255, 240, 210, 0.55),
    0 0 18px rgba(255, 200, 110, 0.40),
    0 0 36px rgba(255, 130, 40,  0.22);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

/* ── PER-CHARACTER FORMATION ───────────────────────────────── */
/* Each letter is wrapped in a .char span. Three states:
     .scrambling — cycling through random glyphs
     .locking    — flash-in moment
     .locked     — final state */

.title-text .char {
  display: inline-block;
  position: relative;
  transition: filter 240ms ease, color 240ms ease;
}

/* SCRAMBLING — soft, dim, slightly out of focus, hint of warmth */
.title-text .char.scrambling {
  color: rgba(248, 230, 200, 0.40);
  -webkit-text-stroke: 1.6px rgba(248, 230, 200, 0.45);
          text-stroke: 1.6px rgba(248, 230, 200, 0.45);
  -webkit-text-fill-color: transparent;
  filter:
    blur(0.4px)
    drop-shadow(0 0 5px rgba(255, 180, 110, 0.30));
  opacity: 0.8;
}

/* LOCKING — gentle glow swell + tiny scale settle, no aggressive flash */
.title-text .char.locking {
  animation: char-lock 1100ms cubic-bezier(0.22, 0.7, 0.25, 1) forwards;
}

@keyframes char-lock {
  0% {
    transform: scale(1.06);
    -webkit-text-fill-color: transparent;
    filter:
      blur(0.6px)
      drop-shadow(0 0 8px  rgba(255, 220, 170, 0.55))
      drop-shadow(0 0 16px rgba(255, 170, 90,  0.35));
    opacity: 0.85;
  }
  35% {
    transform: scale(1.02);
    filter:
      blur(0)
      drop-shadow(0 0 10px rgba(255, 230, 180, 0.65))
      drop-shadow(0 0 22px rgba(255, 170, 90,  0.45));
    opacity: 1;
  }
  100% {
    transform: scale(1);
    filter:
      blur(0)
      drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
    opacity: 1;
  }
}

/* No spark burst — too loud. The glow swell does the work. */

/* Hex strip beneath title — modern cryptic */
.hex-strip {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--hud-dim);
  margin-bottom: 28px;
  opacity: 0;
  animation: fade-in 1.2s ease forwards;
  animation-delay: 1.2s;
}
.hex-strip > span { display: inline-block; }
.hex-sep { margin: 0 8px; color: var(--hud-bracket); }

/* Tagline — classical italic serif */
.tagline {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(16px, 2.1vw, 24px);
  font-style: italic;
  font-weight: 400;
  color: var(--parchment);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.03em;
  opacity: 0;
  animation: fade-in 1.4s ease forwards;
  animation-delay: 1.6s;
  margin-bottom: 28px;
}
.tagline em {
  color: var(--gold-hot);
  font-style: italic;
}
.tagline-mark { color: var(--gold); margin: 0 4px; }

/* Subtagline — terminal HUD-style positioning line for V4 */
.subtagline {
  font-family: "JetBrains Mono", "Share Tech Mono", monospace;
  font-size: clamp(11px, 1.25vw, 15px);
  font-weight: 400;
  letter-spacing: 5px;
  color: var(--hud-em);
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(240, 200, 120, 0.35), 0 1px 4px rgba(0, 0, 0, 0.7);
  opacity: 0;
  animation: fade-in 1.4s ease forwards;
  animation-delay: 1.8s;
  margin-top: 12px;
  display: inline-block;
}

/* Bottom HUD strip — sits at bottom of first viewport, sticky during pan */
.hud-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--hud-dim);
  text-transform: uppercase;
  opacity: 0;
  animation: fade-in 1.0s ease forwards;
  animation-delay: 2.0s;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.hud-bottom .signal { color: var(--hud-em); }
.hud-bottom .hud-em { color: var(--gold-hot); }
.hud-sep { color: var(--hud-bracket); }

/* ════════════════════════════════════════════════════════════════
   LORE — alternating classical & terminal blocks
   ════════════════════════════════════════════════════════════════ */

#lore {
  position: relative;
  z-index: 10;
  max-width: 720px;
  margin: 0 auto;
  padding: 110px 28px 100px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--canvas-warm) 18%,
    var(--canvas-warm) 100%);
}

.lore-block {
  position: relative;
}

/* Classical sections */
.lore-section.classical {
  margin-bottom: 28px;
}
.lore-kicker {
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--gold);
  margin-bottom: 6px;
  opacity: 0.75;
}
.lore-h {
  font-family: "Cinzel", serif;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.04em;
  color: var(--parchment);
  margin-bottom: 22px;
  text-shadow: 0 0 18px rgba(212, 168, 90, 0.18);
}
.lore-section.classical p {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--parchment-dim);
  margin-bottom: 14px;
}
.lore-section.classical p.dropcap::first-letter {
  font-family: "Cinzel", serif;
  font-size: 3.2em;
  float: left;
  line-height: 0.9;
  margin: 4px 12px 0 0;
  color: var(--gold-hot);
  text-shadow: 0 0 14px rgba(240, 200, 120, 0.45);
}

/* Machine-read terminal block */
.machine-read {
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--hud-fg);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--hud-line);
  border-left: 2px solid var(--gold);
  padding: 18px 20px;
  margin: 26px 0 36px;
  white-space: pre-wrap;
  overflow-x: auto;
  position: relative;
}
.machine-read::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.0) 0px,
      rgba(255, 255, 255, 0.0) 2px,
      rgba(255, 255, 255, 0.04) 3px,
      rgba(255, 255, 255, 0.0) 4px
    );
  pointer-events: none;
}
.machine-read .blink {
  animation: blink-step 1.0s steps(2) infinite;
  color: var(--ember);
}
@keyframes blink-step { 50% { opacity: 0; } }

/* Ornament between sections */
.ornament {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0 32px;
  opacity: 0.6;
}
.orn-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%, var(--gold) 50%, transparent 100%);
}
.orn-glyph {
  font-family: "Cinzel", serif;
  color: var(--gold);
  font-size: 14px;
  text-shadow: 0 0 10px rgba(212, 168, 90, 0.5);
}

/* Lore CTA */
.lore-cta {
  text-align: center;
  margin-top: 52px;
}
.cta {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--gold-hot);
  text-decoration: none;
  padding: 16px 28px;
  border: 1px solid var(--gold);
  background: rgba(0, 0, 0, 0.4);
  text-shadow: 0 0 8px rgba(240, 200, 120, 0.5);
  transition: all 180ms ease;
  position: relative;
}
.cta::before, .cta::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border-color: var(--gold-hot);
}
.cta::before { top: -1px; left: -1px;   border-top: 1px solid; border-left: 1px solid; }
.cta::after  { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }

.cta:hover {
  background: rgba(212, 168, 90, 0.12);
  color: var(--parchment);
  text-shadow: 0 0 12px rgba(255, 220, 160, 0.8);
  letter-spacing: 5px;
}

.cta-bracket { color: var(--gold); margin: 0 8px; }

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */

#foot {
  background: var(--canvas);
  padding: 36px 24px 48px;
  text-align: center;
  border-top: 1px solid var(--hud-line);
  position: relative;
  z-index: 10;
}
.foot-line {
  font-family: "Cinzel", serif;
  font-size: 11px;
  letter-spacing: 5px;
  color: var(--parchment-dim);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.foot-sep { color: var(--gold); margin: 0 12px; }
.foot-hex {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--hud-bracket);
  opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .title { font-size: clamp(28px, 11vw, 64px); }
  .corner { width: 22px; height: 22px; }
  .corner-tl, .corner-tr { top: 76px; }
}

@media (max-width: 640px) {
  #topbar { padding: 12px 14px; }
  .hud-cluster { font-size: 9.5px; letter-spacing: 1px; }
  .hud-line { margin-bottom: 2px; }
  #social { font-size: 10px; letter-spacing: 1.5px; }
  #social .x { font-size: 12px; }

  #hero { padding: 130px 16px 90px; }
  .eyebrow { font-size: 10px; letter-spacing: 5px; margin-bottom: 22px; }
  .title { font-size: clamp(26px, 10.5vw, 48px); letter-spacing: 0.02em; }
  .hex-strip { font-size: 9.5px; letter-spacing: 1.5px; }
  .hex-sep { margin: 0 4px; }
  .tagline { font-size: 15px; }

  .hud-bottom {
    font-size: 9.5px;
    letter-spacing: 1px;
    gap: 8px;
    bottom: 18px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 92%;
  }

  .corner { width: 18px; height: 18px; }
  .corner-tl, .corner-tr { top: 72px; left: 14px; right: 14px; }
  .corner-bl, .corner-br { bottom: 50px; left: 14px; right: 14px; }

  #lore { padding: 80px 22px 80px; }
  .lore-h { font-size: 22px; }
  .lore-section.classical p { font-size: 16px; }
  .machine-read { font-size: 11.5px; padding: 14px 16px; }

  .cta { padding: 13px 20px; font-size: 11.5px; letter-spacing: 3px; }

  .foot-line { font-size: 10px; letter-spacing: 3px; }
  .foot-line span { display: inline-block; }
  .foot-sep { margin: 0 6px; }
}

@media (max-width: 400px) {
  .title { font-size: clamp(22px, 11vw, 38px); }
  .hex-strip { font-size: 8.5px; }
  .hud-bottom { font-size: 9px; }
}