/* ============ CursedForge - cursed-forge.com landing ============ */
/* Tokens are copied verbatim from section 9 of
   docs/planning/Color Palette & Mood Board.md, which governs this file.
   A hex typed in by hand is how palettes drift. */
:root {
  /* surfaces */
  --cf-obsidian:      #16181D;
  --cf-slate:         #282D37;
  --cf-cavern:        #1A0B2E;
  --cf-forge-ambient: #3D1B0B;
  --cf-bronze:        #A86838;
  --cf-brass:         #D49B35;
  --cf-leather:       #3A2A20;

  /* signal */
  --cf-cyan:          #00FFCC;
  --cf-turquoise:     #00C6FF;
  --cf-amber:         #FF5500;
  --cf-yellow:        #FFA500;
  --cf-violet:        #9D00FF;

  /* status */
  --cf-good:          #8CC773;
  --cf-warn:          #D9B847;
  --cf-bad:           #DB4A38;

  /* text */
  --cf-text:          #E6FFFF;
  --cf-text-body:     #DED4BF;
  --cf-text-dim:      #555C66;

  /* type */
  --cf-display: "Metamorphous", serif;
  --cf-body:    "Gemunu Libre", system-ui, sans-serif;

  /* type scale, 1.25 ratio on a 16px base */
  --t-0: 16px; --t-1: 20px; --t-2: 25px; --t-3: 31px;
  --t-4: 39px; --t-5: 49px; --t-6: 61px;

  /* motion: 200ms to 300ms ease-out, nothing bounces */
  --ease: cubic-bezier(.16,1,.3,1);
}

* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  background:var(--cf-obsidian); color:var(--cf-text-body);
  font-family:var(--cf-body); font-weight:400; font-size:18px;
  line-height:1.65; overflow-x:hidden;
}
::selection { background:var(--cf-cyan); color:var(--cf-obsidian) }

/* ---------- full-screen slider ---------- */
.slider {
  height:100svh; overflow-y:auto; scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
}
.slide {
  min-height:100svh; scroll-snap-align:start; position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:96px 24px 48px; background:var(--cf-obsidian); overflow:hidden;
}
/* Sections may deepen toward Cavern Purple for atmosphere. */
.slide.alt { background:linear-gradient(180deg,var(--cf-obsidian),var(--cf-cavern)) }
.slide::before { /* faint chiselled basalt tooth */
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:repeating-linear-gradient(115deg, transparent 0 22px, rgba(168,104,56,.035) 22px 23px);
}
.slide-content { max-width:1080px; width:100%; position:relative; z-index:2 }
.slide-content.narrow { max-width:720px; text-align:center }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family:var(--cf-display); font-weight:400;
  letter-spacing:.01em; line-height:1.15; color:var(--cf-text);
}
h2 { font-size:clamp(var(--t-4), 6vw, var(--t-6)); margin:14px 0 20px }
h2 b { color:var(--cf-cyan); font-weight:400 }
.eyebrow {
  font-family:var(--cf-body); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cf-cyan);
}
.lede {
  max-width:68ch; color:var(--cf-text-body);
  font-size:var(--t-1); margin-bottom:36px;
}
.lede b { color:var(--cf-text); font-weight:600 }

/* ---------- rune conduit accent (replaces the reference's claw) ---------- */
.rune { display:flex; gap:9px; height:26px; margin-bottom:10px }
.rune i {
  width:4px; height:100%; background:var(--cf-cyan); border-radius:2px;
  opacity:.85; animation:runePulse 2s ease-in-out infinite; /* 0.5Hz, as in world */
}
.rune i:nth-child(2) { height:130%; animation-delay:.18s }
.rune i:nth-child(3) { animation-delay:.36s }

/* ---------- buttons ---------- */
.cta-row { display:flex; gap:16px; flex-wrap:wrap }
.btn {
  font-family:var(--cf-body); font-weight:600; font-size:var(--t-0);
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  padding:14px 32px; border-radius:3px; cursor:pointer;
  border:1px solid transparent; display:inline-block;
  transition:background .25s ease-out, color .25s ease-out,
             border-color .25s ease-out, transform .2s ease-out;
}
/* Amber is the single primary action on the page. */
.btn-amber { background:var(--cf-amber); color:var(--cf-obsidian) }
.btn-amber:hover { background:var(--cf-yellow); transform:translateY(-2px) }
.btn-ghost { border-color:rgba(168,104,56,.55); color:var(--cf-cyan) }
.btn-ghost:hover { border-color:var(--cf-brass); background:rgba(212,155,53,.12) }

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity:0; transform:translateY(16px);
  transition:opacity .3s ease-out, transform .3s ease-out;
}
.reveal.in-view { opacity:1; transform:none }

/* ---------- header / burger ---------- */
.site-header {
  position:fixed; inset:0 0 auto 0; z-index:60; display:flex;
  align-items:center; justify-content:space-between; padding:18px 26px;
  background:linear-gradient(180deg,rgba(22,24,29,.94),rgba(22,24,29,0));
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none }
.brand-mark {
  width:14px; height:14px; background:var(--cf-cyan);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  animation:runePulse 2s ease-in-out infinite;
}
.brand-name {
  font-family:var(--cf-display); font-size:var(--t-1);
  letter-spacing:.1em; color:var(--cf-text);
}
.brand-name em { font-style:normal; color:var(--cf-amber) }
.burger {
  width:46px; height:40px; background:none;
  border:1px solid rgba(168,104,56,.55); border-radius:3px;
  cursor:pointer; display:flex; flex-direction:column; justify-content:center;
  align-items:center; gap:5px; transition:border-color .25s ease-out;
}
.burger:hover { border-color:var(--cf-brass) }
.burger span {
  display:block; width:20px; height:2px; background:var(--cf-text);
  transition:transform .3s ease-out, opacity .3s ease-out, background .3s ease-out;
}
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); background:var(--cf-cyan) }
.burger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); background:var(--cf-cyan) }

/* ---------- mega menu ---------- */
.mega-menu {
  position:fixed; inset:0; z-index:50; background:rgba(22,24,29,.97);
  backdrop-filter:blur(8px); display:grid; place-items:center;
  clip-path:circle(0 at calc(100% - 49px) 38px); visibility:hidden;
  transition:clip-path .3s ease-out, visibility 0s .3s;
}
.mega-menu.open {
  clip-path:circle(150% at calc(100% - 49px) 38px); visibility:visible;
  transition:clip-path .3s ease-out;
}
.mega-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:8px 64px;
  padding:24px; max-width:900px; width:100%;
}
.mega-link {
  display:block; text-decoration:none; padding:16px 8px;
  border-bottom:1px solid rgba(168,104,56,.35);
  font-family:var(--cf-display); font-size:clamp(var(--t-2),4vw,var(--t-4));
  color:var(--cf-text); opacity:0; transform:translateY(16px);
  transition:color .25s ease-out;
}
.mega-menu.open .mega-link { animation:fadeUp .3s ease-out forwards }
/* Every link animates, however many there are. The reference hardcoded three. */
.mega-link:nth-child(1) { animation-delay:.05s }
.mega-link:nth-child(2) { animation-delay:.10s }
.mega-link:nth-child(3) { animation-delay:.15s }
.mega-link:nth-child(4) { animation-delay:.20s }
.mega-link:hover { color:var(--cf-cyan) }
.mega-link small {
  display:inline-block; font-family:var(--cf-body); font-weight:600;
  font-size:12px; color:var(--cf-cyan); letter-spacing:.18em;
  margin-right:14px; vertical-align:middle;
}
.mega-link span {
  display:block; font-family:var(--cf-body); font-size:13px;
  letter-spacing:.06em; color:var(--cf-text-dim); margin-top:2px;
}
.mega-foot {
  grid-column:1/-1; padding-top:22px; color:var(--cf-text-dim);
  font-size:14px; opacity:0;
}
.mega-menu.open .mega-foot { animation:fadeUp .3s .25s ease-out forwards }

/* ---------- dot rail ---------- */
.dots {
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  z-index:40; display:flex; flex-direction:column; gap:14px;
}
.dots a {
  width:9px; height:9px; border-radius:50%; background:transparent;
  border:1px solid var(--cf-text-dim); display:block;
  transition:background .25s ease-out, border-color .25s ease-out, transform .25s ease-out;
}
.dots a.active { background:var(--cf-cyan); border-color:var(--cf-cyan); transform:scale(1.25) }

/* ---------- keyframes ---------- */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:none } }
@keyframes runePulse { 0%,100% { opacity:.55 } 50% { opacity:1 } }

/* ---------- 01 hero ---------- */
/* Obsidian sky, cave air below it, warm forge bounce at the horizon. The
   ridgeline is Obsidian, so the ground behind it has to be something other
   than Obsidian or the silhouette reads as missing. */
.hero { background:linear-gradient(180deg,var(--cf-obsidian) 0%,var(--cf-cavern) 58%,var(--cf-forge-ambient) 100%) }
.hero-heat { /* the heat comes from behind the words, never from a text-shadow */
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 112%, rgba(255,85,0,.30), transparent 62%),
    radial-gradient(ellipse 40% 30% at 50% 108%, rgba(255,165,0,.20), transparent 70%);
  animation:emberGlow 6s ease-in-out infinite alternate;
}
h1.title {
  font-family:var(--cf-display);
  /* Metamorphous is a wide face and this is eleven characters. 11vw ran off
     the right edge at 1440px, so the ceiling is set from measured width. */
  font-size:clamp(34px,8vw,118px); line-height:1; letter-spacing:.02em;
  color:var(--cf-text); animation:fadeUp .3s ease-out both;
}
.subtitle {
  font-family:var(--cf-display); font-size:clamp(var(--t-1),2.6vw,var(--t-3));
  color:var(--cf-cyan); margin-top:6px; animation:fadeUp .3s .08s ease-out both;
}
.status-chip {
  display:inline-block; margin:18px 0 20px; padding:6px 14px;
  border:1px solid rgba(168,104,56,.55); border-radius:3px;
  font-family:var(--cf-body); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cf-brass);
}
.lava-channel {
  position:absolute; top:0; right:0; width:34vw; max-width:340px; height:60svh; z-index:1;
}
.ridgeline { position:absolute; bottom:0; left:0; width:100%; height:22svh; min-height:110px; z-index:1 }
.ridgeline path { fill:var(--cf-obsidian) }
.scroll-hint {
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--cf-body); font-weight:600; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cf-text-dim); text-align:center;
}
.scroll-hint span {
  display:block; width:1px; height:34px; margin:0 auto 10px;
  background:linear-gradient(180deg,var(--cf-cyan),transparent);
  animation:dropLine 2s ease-in-out infinite;
}

/* ---------- ambient ember field ---------- */
.ember-field { position:fixed; inset:0; z-index:1; pointer-events:none }
.ember-field i {
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--cf-amber); opacity:0; animation:rise 22s linear infinite;
}
.ember-field i:nth-child(1) { left:8%;  animation-delay:0s;   animation-duration:24s }
.ember-field i:nth-child(2) { left:19%; animation-delay:4s;   animation-duration:30s; background:var(--cf-yellow) }
.ember-field i:nth-child(3) { left:31%; animation-delay:9s;   animation-duration:26s }
.ember-field i:nth-child(4) { left:44%; animation-delay:14s;  animation-duration:34s }
.ember-field i:nth-child(5) { left:56%; animation-delay:2s;   animation-duration:28s; background:var(--cf-yellow) }
.ember-field i:nth-child(6) { left:67%; animation-delay:18s;  animation-duration:32s }
.ember-field i:nth-child(7) { left:78%; animation-delay:7s;   animation-duration:25s }
.ember-field i:nth-child(8) { left:88%; animation-delay:21s;  animation-duration:36s; background:var(--cf-yellow) }
.ember-field i:nth-child(9) { left:96%; animation-delay:12s;  animation-duration:29s }

@keyframes rise {
  0%   { transform:translateY(0) translateX(0);      opacity:0 }
  10%  { opacity:.5 }
  70%  { opacity:.35 }
  100% { transform:translateY(-104svh) translateX(18px); opacity:0 }
}
@keyframes emberGlow { from { opacity:.7 } to { opacity:1 } }
@keyframes dropLine {
  0%   { transform:scaleY(0); transform-origin:top }
  45%  { transform:scaleY(1); transform-origin:top }
  55%  { transform:scaleY(1); transform-origin:bottom }
  100% { transform:scaleY(0); transform-origin:bottom }
}

/* ---------- feature cards ---------- */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px }
.card {
  background:rgba(40,45,55,.55); border:1px solid rgba(168,104,56,.35);
  border-radius:3px; padding:24px 22px; position:relative; overflow:hidden;
  transition:border-color .25s ease-out, transform .25s ease-out;
}
.card::before { /* a conduit lighting down the edge on hover */
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--cf-cyan); transform:scaleY(0); transform-origin:top;
  transition:transform .3s ease-out;
}
.card:hover { transform:translateY(-3px); border-color:rgba(212,155,53,.6) }
.card:hover::before { transform:scaleY(1) }
.card h3 { font-size:var(--t-2); margin-bottom:8px }
.card p { color:var(--cf-text-body); font-size:var(--t-0); line-height:1.6 }

.feature-grid .reveal:nth-child(2) { transition-delay:.06s }
.feature-grid .reveal:nth-child(3) { transition-delay:.12s }
.feature-grid .reveal:nth-child(4) { transition-delay:.18s }

/* ---------- zone grid ---------- */
.zone-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px }
.zone {
  background:rgba(40,45,55,.5); border:1px solid rgba(168,104,56,.35);
  border-radius:3px; padding:16px 18px; position:relative; overflow:hidden;
  transition:border-color .25s ease-out;
}
.zone:hover { border-color:rgba(212,155,53,.6) }
.zone .z-num {
  position:absolute; right:14px; top:10px; font-family:var(--cf-display);
  font-size:var(--t-2); color:var(--cf-cyan); opacity:.3;
  transition:opacity .25s ease-out;
}
.zone:hover .z-num { opacity:.75 }
.zone h3 { font-size:var(--t-1); margin-bottom:3px; padding-right:40px }
.zone p { color:var(--cf-text-body); font-size:14px; line-height:1.5 }

.world-magic { max-width:68ch; margin-top:22px; font-size:var(--t-0); color:var(--cf-text-body) }
.honest-note {
  margin-top:8px; padding:10px 16px; max-width:68ch;
  border-left:2px solid rgba(168,104,56,.7);
  color:var(--cf-text-dim); font-size:15px;
}

.zone-grid .reveal:nth-child(2) { transition-delay:.05s }
.zone-grid .reveal:nth-child(3) { transition-delay:.10s }
.zone-grid .reveal:nth-child(4) { transition-delay:.15s }
.zone-grid .reveal:nth-child(5) { transition-delay:.20s }
.zone-grid .reveal:nth-child(6) { transition-delay:.25s }
.zone-grid .reveal:nth-child(7) { transition-delay:.30s }
.zone-grid .reveal:nth-child(8) { transition-delay:.35s }

/* This section carries eight cards plus two paragraphs, the most on the page.
   The display size steps down one rung so the honesty note stays above the
   fold rather than being cut off by the snap. */
#world h2,
#roadmap h2 { font-size:clamp(var(--t-3),4.4vw,var(--t-5)); margin:8px 0 14px }
#world .lede { margin-bottom:22px }

/* ---------- roadmap timeline ---------- */
.timeline { position:relative; display:grid; gap:14px; padding-left:34px }
.timeline::before {
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--cf-cyan),rgba(168,104,56,.5) 70%,transparent);
}
.t-item { position:relative }
.t-item::before {
  content:""; position:absolute; left:-32px; top:9px; width:12px; height:12px;
  border-radius:50%; background:var(--cf-obsidian); border:2px solid var(--cf-bronze);
}
.t-item.current::before { border-color:var(--cf-cyan); animation:runePulse 2s ease-in-out infinite }
.t-phase {
  font-family:var(--cf-body); font-weight:600; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cf-text-dim);
}
.t-item.current .t-phase { color:var(--cf-cyan) }
.t-item h3 { font-size:var(--t-2); margin:2px 0 4px }
.t-item p { color:var(--cf-text-body); font-size:var(--t-0); max-width:68ch }

.timeline .reveal:nth-child(2) { transition-delay:.08s }
.timeline .reveal:nth-child(3) { transition-delay:.16s }
.timeline .reveal:nth-child(4) { transition-delay:.24s }

/* ---------- community ---------- */
#community .rune { justify-content:center }
#community .lede { margin-left:auto; margin-right:auto }
#community .cta-row { justify-content:center }
.social-row {
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:26px;
}
.social-row a,
.social-row button {
  font-family:var(--cf-body); font-weight:600; font-size:14px;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:var(--cf-cyan); padding-bottom:3px;
  border-bottom:1px solid rgba(168,104,56,.5);
  transition:color .25s ease-out, border-color .25s ease-out;
}
.social-row button { padding:0 0 3px; border-width:0 0 1px; background:transparent; cursor:pointer }
.social-row a:hover,
.social-row button:hover { color:var(--cf-text); border-color:var(--cf-brass) }

.site-foot { margin-top:44px; color:var(--cf-text-dim); font-size:14px }
.site-foot .status-chip { margin-bottom:16px }

/* ---------- optional analytics consent ---------- */
/* The same card idiom as the feature cards: slate ground, bronze edge, a cyan
   conduit down the leading edge. Amber appears once, on the single
   affirmative, exactly as it does in the hero. */
.consent-banner {
  position:fixed; right:20px; bottom:20px; z-index:100;
  width:min(430px,calc(100vw - 40px)); padding:22px 24px;
  border:1px solid rgba(168,104,56,.55); border-radius:3px;
  background:rgba(22,24,29,.97); color:var(--cf-text-body);
  animation:consentIn .3s ease-out both;
}
.consent-banner::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--cf-cyan);
}
.consent-banner h2 {
  margin:0 0 10px; font-size:var(--t-2); line-height:1.2; color:var(--cf-text);
}
.consent-banner p { margin:0 0 18px; font-size:15px; line-height:1.55 }
/* The landing page has no prose links anywhere else, so the banner has to
   colour its own. */
.consent-banner a { color:var(--cf-cyan); text-underline-offset:3px }
.consent-banner a:hover { color:var(--cf-text) }
.consent-actions { display:flex; gap:12px; flex-wrap:wrap }
.consent-actions button {
  flex:1 1 auto; padding:12px 20px; border:1px solid transparent; border-radius:3px;
  font:600 14px/1 var(--cf-body); letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:background .25s ease-out, color .25s ease-out,
    border-color .25s ease-out, transform .2s ease-out;
}
.consent-actions .consent-allow { background:var(--cf-amber); color:var(--cf-obsidian) }
.consent-actions .consent-allow:hover { background:var(--cf-yellow); transform:translateY(-2px) }
.consent-actions .consent-decline { background:transparent; border-color:rgba(168,104,56,.55); color:var(--cf-cyan) }
.consent-actions .consent-decline:hover { border-color:var(--cf-brass); background:rgba(212,155,53,.12) }
.consent-banner[hidden] { display:none }

@keyframes consentIn { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }

/* ---------- focus visibility ---------- */
a:focus-visible, button:focus-visible {
  outline:2px solid var(--cf-cyan); outline-offset:3px; border-radius:3px;
}

/* ---------- responsive ---------- */
@media (max-width:760px) {
  body { font-size:17px }
  /* Stacked cards make every section taller than a phone viewport, and
     mandatory snapping with sections taller than the scrollport can strand
     the content between snap points. Plain scrolling is correct here. */
  .slider { scroll-snap-type:none }
  .slide { scroll-snap-align:none }
  /* The desktop header fades to transparent, which works only when a section
     is pinned behind it by the snap. With plain scrolling the page runs under
     it and the two collide, so on mobile it gets a solid ground and an edge. */
  .site-header {
    background:var(--cf-obsidian);
    border-bottom:1px solid rgba(168,104,56,.35);
    padding:14px 18px;
  }
  .mega-inner { grid-template-columns:1fr; gap:0 }
  .dots { display:none }
  .slide { padding:84px 18px 40px }
  .cta-row .btn { width:100%; text-align:center }
  .lava-channel { width:52vw; opacity:.7 }
  .zone-grid { grid-template-columns:1fr }
  .social-row { gap:16px }
  .consent-banner { right:12px; left:12px; bottom:12px; width:auto; padding:20px }
  .consent-actions button { flex:1 1 100% }
}

/* ---------- reduced motion ---------- */
/* A glow loop is exactly the sort of thing that hurts people. Drop all of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html { scroll-behavior:auto }
  .slider { scroll-behavior:auto }
  .ember-field { display:none }
  .reveal { opacity:1; transform:none }
}