/* ============================================================
   CHRONOVERSE — DESIGN TOKENS
   Palette logic: the past glows warm (gold/ember), the present
   sits neutral, the future cools into cyan/violet. Color itself
   tells you which era you're in.
   ============================================================ */
:root{
  --void: #05060a;
  --void-soft: #0b0e17;
  --panel: rgba(11, 14, 23, 0.55);
  --panel-border: rgba(242, 237, 226, 0.09);
  --ivory: #f2ede2;
  --mist: rgba(242, 237, 226, 0.62);
  --mist-dim: rgba(242, 237, 226, 0.38);

  --gold: #c9a876;
  --gold-glow: rgba(201, 168, 118, 0.35);
  --ember: #e8895a;
  --cyan: #5fd8e6;
  --cyan-glow: rgba(95, 216, 230, 0.35);
  --violet: #8b7bff;
  --violet-glow: rgba(139, 123, 255, 0.35);

  --accent: var(--gold);
  --accent-glow: var(--gold-glow);

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html{ background: var(--void); }

body{
  background: var(--void);
  color: var(--ivory);
  font-family: var(--font-body);
  overflow-x: hidden;
  cursor: none;
}

body.no-custom-cursor{ cursor: auto; }
body.no-custom-cursor .cursor-dot,
body.no-custom-cursor .cursor-ring{ display:none; }

::selection{ background: var(--accent); color: var(--void); }

a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot, .cursor-ring{
  position: fixed;
  top:0; left:0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{
  width: 6px; height: 6px;
  background: var(--accent);
  transition: background .3s var(--ease-out);
}
.cursor-ring{
  width: 34px; height: 34px;
  border: 1px solid rgba(242,237,226,0.4);
  transition: width .25s var(--ease-out), height .25s var(--ease-out),
              border-color .3s var(--ease-out), opacity .3s var(--ease-out);
}
.cursor-ring.is-hover{
  width: 60px; height: 60px;
  border-color: var(--accent);
}

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position: fixed; inset:0;
  z-index: 10000;
  background: var(--void);
  display:flex; align-items:center; justify-content:center;
}
.loader-inner{ text-align:center; }
.loader-glyph{ position:relative; width:120px; height:120px; margin: 0 auto 28px; }
.loader-glyph svg{ width:100%; height:100%; transform: rotate(-90deg); }
.loader-ring-track{
  fill:none; stroke: rgba(242,237,226,0.08); stroke-width: 1;
}
.loader-ring-fill{
  fill:none; stroke: var(--accent); stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
}
.loader-num{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  letter-spacing: 1px;
  color: var(--ivory);
}
.loader-label{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--mist);
}
.loader-sub{
  margin-top:8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--mist-dim);
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-track{
  position: fixed; top:0; left:0; right:0;
  height: 2px;
  background: rgba(242,237,226,0.06);
  z-index: 500;
}
.progress-fill{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--gold), var(--cyan), var(--violet));
  transform-origin: left;
}

/* ============================================================
   BACKGROUND CANVAS + ATMOSPHERE
   ============================================================ */
#webgl{
  position: fixed; inset:0;
  width: 100vw; height: 100vh;
  z-index: 0;
  display:block;
}
.vignette{
  position: fixed; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(5,6,10,0.75) 100%);
}
.grain{
  position: fixed; inset:0; z-index:2; pointer-events:none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 400;
  display:flex; align-items:center; justify-content:space-between;
  padding: 28px 44px;
  pointer-events: none;
}
.nav-mark{ display:flex; align-items:center; gap:10px; }
.nav-mark-glyph{ color: var(--accent); font-size: 1.1rem; transition: color .6s var(--ease-out); }
.nav-mark-text{
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 3px; color: var(--ivory);
}
.nav-era{ text-align:right; }
.nav-era-label{
  display:block; font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 2.5px; color: var(--mist-dim);
}
.nav-era-name{
  display:block; font-family: var(--font-display); font-style: italic;
  font-size: 1.05rem; color: var(--ivory); margin-top: 2px;
  transition: color .6s var(--ease-out);
}

/* ============================================================
   CHRONO COMPASS (signature element)
   ============================================================ */
.compass{
  position: fixed; right: 36px; bottom: 32px; z-index: 400;
  width: 108px; height: 108px;
  pointer-events: none;
}
.compass-svg{ width:100%; height:100%; transform: rotate(-90deg); }
.compass-track{ fill:none; stroke: rgba(242,237,226,0.1); stroke-width: 1; }
.compass-arc{
  fill:none; stroke: var(--accent); stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 440; stroke-dashoffset: 440;
  transition: stroke .6s var(--ease-out);
}
.compass-core{ fill: var(--accent); transition: fill .6s var(--ease-out); }
#compassTicks line{ stroke: rgba(242,237,226,0.18); stroke-width: 1; }
.compass-readout{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family: var(--font-mono);
}
.compass-coord{ font-size: 0.62rem; letter-spacing: 1px; color: var(--ivory); }
.compass-pct{ font-size: 0.58rem; color: var(--mist-dim); margin-top: 2px; }

/* ============================================================
   LAYOUT / SECTIONS
   ============================================================ */
main{ position: relative; z-index: 10; }

.scene{
  min-height: 100vh;
  display:flex; align-items:center;
  padding: 0 8vw;
  position: relative;
}
#scene-hero{ justify-content:center; text-align:center; }
.center-panel{ max-width: 640px; margin: 0 auto; text-align:center; }
.side-panel{ max-width: 480px; }
.side-left{ margin-right:auto; }
.side-right{ margin-left:auto; text-align:right; }
.side-right .scene-facts{ align-items:flex-end; }
.side-right .scene-facts li{ flex-direction: row-reverse; }

.panel{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 40px 46px;
  border-radius: 2px;
}
.hero-panel{
  background: transparent; border: none; backdrop-filter: none;
  max-width: 760px;
}

.eyebrow{
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 4px;
  color: var(--accent); margin-bottom: 22px;
}
.hero-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3.2rem, 9vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--ivory);
  margin-bottom: 26px;
}
.hero-title em{ font-style: italic; color: var(--accent); font-weight: 400; }
.hero-sub{
  font-size: 1.02rem; line-height: 1.65; color: var(--mist);
  max-width: 520px; margin: 0 auto 40px;
}

.scroll-cue{
  background:none; border:none; color: var(--ivory); cursor: none;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 3px;
  margin: 0 auto;
}
.scroll-cue-line{
  width:1px; height: 46px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--ivory);
  animation: cueDrop 2.2s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}

.scene-index{
  display:block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 3px; color: var(--accent); margin-bottom: 18px;
}
.scene-title{
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.05; margin-bottom: 20px; color: var(--ivory);
}
.scene-copy{
  font-size: 1rem; line-height: 1.75; color: var(--mist);
}
.scene-facts{
  margin-top: 28px; display:flex; flex-direction:column; gap:10px;
}
.scene-facts li{
  display:flex; gap:14px; font-size: 0.85rem; color: var(--mist);
  font-family: var(--font-mono);
}
.scene-facts li span{
  color: var(--accent); min-width: 46px; letter-spacing: 1px; font-size: 0.66rem;
  align-self:center;
}

.nexus-title{ color: var(--accent); }
.nexus-actions{ margin-top: 34px; }
.btn-ghost{
  display:inline-block; padding: 14px 34px;
  border: 1px solid var(--panel-border);
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 3px;
  color: var(--ivory);
  transition: border-color .4s var(--ease-out), color .4s var(--ease-out), background .4s var(--ease-out);
}
.btn-ghost:hover{ border-color: var(--accent); color: var(--void); background: var(--accent); }

/* reveal animation base states (GSAP toggles opacity/transform via inline styles,
   these are just safe fallbacks for no-js / prefers-reduced-motion) */
.reveal-line{ opacity: 1; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  position: relative; z-index: 10;
  padding: 60px 8vw 50px;
  border-top: 1px solid var(--panel-border);
}
.footer-row{
  display:flex; flex-wrap:wrap; gap: 16px 32px; justify-content:space-between;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 2px;
  color: var(--mist-dim);
}

/* ============================================================
   EASTER EGG TOAST
   ============================================================ */
.easter-toast{
  position: fixed; left: 50%; bottom: 40px; z-index: 9998;
  transform: translate(-50%, 20px);
  background: var(--void-soft); border: 1px solid var(--accent);
  padding: 12px 22px; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 1.5px; color: var(--ivory);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.easter-toast.is-visible{ opacity: 1; transform: translate(-50%, 0); }
.easter-toast b{ color: var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .nav{ padding: 20px 24px; }
  .compass{ right: 18px; bottom: 18px; width: 84px; height: 84px; }
  .scene{ padding: 0 6vw; }
  .panel{ padding: 30px 26px; }
  .side-panel{ max-width: 100%; text-align:left !important; margin: 0 !important; }
  .side-right .scene-facts{ align-items:flex-start; }
  .side-right .scene-facts li{ flex-direction: row; }
  .footer-row{ justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}