/* =========================================================
   LUMEN — Design tokens
   Color:  matte black #0a0a0b · warm parchment #f2ede4
           antique gold #c9a227 · deep bronze #6b4423
           hairline rgba(242,237,228,.14)
   Type:   Cormorant Garamond (display) · Manrope (utility/body)
   ========================================================= */

:root{
  --black: #08342D;
  --black-2: #100f10;
  --parchment: #f2ede4;
  --parchment-dim: rgba(242,237,228,.62);
  --gold: #c9a227;
  --gold-bright: #e6c866;
  --bronze: #6b4423;
  --hairline: rgba(242,237,228,.14);
  --glass: rgba(242,237,228,.05);

  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Jost', -apple-system, sans-serif;

  --ease-luxury: cubic-bezier(.16,.84,.24,1);
  --mask-x: 50%;
  --mask-y: 50%;
  --mask-r: 0px;
}

*{ box-sizing: border-box; }

html{
  background: var(--black);
  scroll-behavior: auto; /* GSAP/native scroll handles smoothing */
}

body{
  margin: 0;
  background: var(--black);
  color: var(--parchment);
  font-family: var(--font-body);
  font-weight: 300;
  cursor: none;
  overflow-x: hidden;
}

@media (max-width: 820px), (hover: none){
  body{ cursor: auto; }
  .cursor-glow, .cursor-ring{ display: none; }
}

::selection{ background: var(--gold); color: var(--black); }

/* -------------------- Cursor -------------------- */

.cursor-glow{
  position: fixed;
  top: 0; left: 0;
  width: 380px; height: 380px;
  margin-left: -190px; margin-top: -190px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 40;
  background: radial-gradient(circle, rgba(230,200,102,.10) 0%, rgba(230,200,102,0) 70%);
  will-change: transform;
}

.cursor-ring{
  position: fixed;
  top: 0; left: 0;
  width: 18px; height: 18px;
  margin-left: -9px; margin-top: -9px;
  border-radius: 50%;
  border: 1px solid var(--gold-bright);
  pointer-events: none;
  z-index: 41;
  mix-blend-mode: difference;
  will-change: transform;
  transition: width .3s var(--ease-luxury), height .3s var(--ease-luxury), margin .3s var(--ease-luxury), opacity .3s;
}

/* -------------------- Grain -------------------- */

.noise-overlay{
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* -------------------- Header -------------------- */

.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px clamp(20px, 5vw, 64px);
  pointer-events: none;
}

.site-header .mark{
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .32em;
  font-weight: 500;
  color: var(--parchment);
}

.progress-nav{
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.progress-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hairline);
  transition: background .5s var(--ease-luxury), transform .5s var(--ease-luxury);
}

.progress-dot.is-active{
  background: var(--gold-bright);
  transform: scale(1.6);
}

/* -------------------- Sections -------------------- */

main{ position: relative; z-index: 1; }

.scene-section{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
  border-top: 1px solid var(--hairline);
}

#section-0{ border-top: none; }

.bg-layer{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bg-layer canvas{
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(0.55) saturate(0.6) blur(0px);
  opacity: .55;
  transition: filter .6s var(--ease-luxury), opacity .6s var(--ease-luxury);
}

.scene-section.is-revealing .bg-layer canvas{
  filter: brightness(1.15) saturate(1.25) blur(0px);
  opacity: 1;
}

/* Reveal mask: a dark veil punctured by a soft radial hole that follows the cursor,
   so the animated world beneath only becomes visible near the pointer. */
.reveal-mask{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--black);
  opacity: 1;
  -webkit-mask-image: radial-gradient(circle var(--mask-r) at var(--mask-x) var(--mask-y), transparent 0%, rgba(0,0,0,.35) 55%, black 100%);
          mask-image: radial-gradient(circle var(--mask-r) at var(--mask-x) var(--mask-y), transparent 0%, rgba(0,0,0,.35) 55%, black 100%);
  transition: opacity .8s var(--ease-luxury);
}

.vignette{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10,10,11,.75) 100%);
}

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

.content{
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 0px);
}

.content--center{ text-align: center; }
.content--left{ max-width: 620px; margin-left: clamp(24px, 8vw, 120px); }
.content--right{ max-width: 720px; margin-left: auto; margin-right: clamp(24px, 8vw, 120px); text-align: right; }

.eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 18px;
}

.display-1{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(72px, 15vw, 200px);
  line-height: .92;
  letter-spacing: .01em;
  margin: 0 0 22px;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.display-2{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1;
  margin: 0 0 28px;
  color: var(--parchment);
}


.display-3{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1;
  margin: 0 0 28px;
  color: var(--parchment);
}

.lede{
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
  font-weight: 300;
  color: var(--parchment-dim);
  max-width: 480px;
  margin: 0 auto 56px;
}

.body-text{
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.75;
  font-weight: 300;
  color: var(--parchment-dim);
  margin: 0 0 20px;
}

.content--right .body-text{ margin-left: auto; }

.cta{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 26px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--parchment);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color .4s var(--ease-luxury), color .4s var(--ease-luxury), gap .4s var(--ease-luxury);
}

.cta:hover{
  border-color: var(--gold);
  color: var(--gold-bright);
  gap: 18px;
}

/* -------------------- Scroll cue -------------------- */

.scroll-cue{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.scroll-cue span{
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--gold-bright), transparent);
  animation: scrollPulse 2.2s var(--ease-luxury) infinite;
}

.scroll-cue em{
  font-style: normal;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

@keyframes scrollPulse{
  0%{ transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%{ transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%{ transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* -------------------- Reveal-up entrance animation -------------------- */

.reveal-up{
  opacity: 0;
  transform: translateY(28px);
}

/* -------------------- Footer -------------------- */

.site-footer{
  position: relative;
  z-index: 5;
  background: var(--black);
  border-top: 1px solid var(--hairline);
  padding: 28px clamp(20px, 5vw, 64px);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--parchment-dim);
}

/* -------------------- Accessibility -------------------- */

a:focus-visible, .cta:focus-visible{
  outline: 1px solid var(--gold-bright);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce){
  .scroll-cue span{ animation: none; }
  .bg-layer canvas, .reveal-mask{ transition: none; }
}

/* -------------------- Responsive -------------------- */

@media (max-width: 900px){
  .content--left, .content--right{
    margin-left: clamp(20px, 6vw, 40px);
    margin-right: clamp(20px, 6vw, 40px);
    text-align: left;
    max-width: 100%;
  }
  .site-footer{ flex-direction: column; gap: 6px; }
}

@media (max-width: 560px){
  .display-1{ font-size: clamp(56px, 18vw, 120px); }
  .display-2{ font-size: clamp(40px, 12vw, 64px); }
}