/* ============================================================
   SENILL — style
   ============================================================ */

:root{
  --void:      #05060a;
  --ink:       #0a0c14;
  --gold:      #e8c37a;
  --gold-lit:  #fff0cf;
  --ember:     #ffb070;
  --halo:      #cfe4ff;
  --text:      #c9cede;
  --muted:     #767e93;
  --line:      rgba(232,195,122,.16);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Segoe UI", system-ui, sans-serif;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --gap: clamp(5.5rem, 15vh, 11rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.95rem + .25vw,1.125rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:rgba(232,195,122,.28); color:#fff; }

/* ---------- background layers ---------- */

#sky{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
}

.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aurora i{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(90px);
  opacity:.5;
  animation:drift 34s ease-in-out infinite alternate;
}
.aurora .a1{
  width:62vmax; height:62vmax; left:-18vmax; top:-24vmax;
  background:radial-gradient(circle, rgba(60,86,150,.42), transparent 68%);
}
.aurora .a2{
  width:52vmax; height:52vmax; right:-16vmax; top:14vh;
  background:radial-gradient(circle, rgba(232,195,122,.16), transparent 66%);
  animation-duration:46s; animation-direction:alternate-reverse;
}
.aurora .a3{
  width:70vmax; height:70vmax; left:20vw; bottom:-40vmax;
  background:radial-gradient(circle, rgba(120,80,170,.22), transparent 68%);
  animation-duration:58s;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(4vw,-5vh,0) scale(1.16); }
}

.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(5,6,10,.55) 78%, rgba(5,6,10,.92) 100%);
}

.progress{ position:fixed; top:0; left:0; right:0; height:1px; z-index:60; background:rgba(255,255,255,.05); }
.progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold-lit));
  box-shadow:0 0 12px rgba(232,195,122,.7);
}

/* ---------- topbar ---------- */

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1.4rem var(--pad);
  mix-blend-mode:screen;
}
.mark{
  font-family:var(--serif);
  font-size:.95rem; letter-spacing:.55em; text-indent:.55em;
  color:var(--gold); text-decoration:none; opacity:.85;
  transition:opacity .4s;
}
.mark:hover{ opacity:1; }
.mark-note{
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); opacity:.6;
}
@media (max-width:640px){ .mark-note{ display:none; } }

/* ---------- shared layout ---------- */

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

.section{
  max-width:64rem;
  margin:0 auto;
  padding:var(--gap) var(--pad);
}

h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2rem,1.4rem + 3vw,3.6rem);
  line-height:1.12;
  letter-spacing:.005em;
  margin:.2em 0 1.1em;
  color:#f2f0ea;
}

h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:1.5rem;
  letter-spacing:.02em;
  margin:0 0 .5rem;
  color:var(--gold-lit);
}

.kicker{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
  color:var(--gold);
  opacity:.6;
  margin:0;
  letter-spacing:.2em;
}

.prose p{ margin:0 0 1.35em; max-width:52ch; }
.prose em, .lede em{ font-family:var(--serif); font-style:italic; font-size:1.12em; color:#e6e2d8; }
.hl{ color:var(--gold-lit); }

.sub{ color:var(--muted); max-width:48ch; margin:-.5em 0 2.5em; }

.footnote{
  margin-top:2.4rem;
  font-size:.85rem;
  color:var(--muted);
  font-style:italic;
  font-family:var(--serif);
  letter-spacing:.03em;
  max-width:44ch;
}

/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:7rem var(--pad) 5rem;
}

.sigil-wrap{
  position:absolute;
  top:50%; left:50%;
  translate:-50% -58%;
  width:min(92vw,42rem);
  aspect-ratio:1;
  z-index:-1;
  opacity:.85;
  will-change:transform;
}
.sigil{ width:100%; height:100%; overflow:visible; }
.sigil circle, .sigil path{ vector-effect:non-scaling-stroke; }

.spin-slow  { animation:spin 150s linear infinite; transform-origin:center; }
.spin-slower{ animation:spin 260s linear infinite; transform-origin:center; }
.spin-rev   { animation:spin 190s linear infinite reverse; transform-origin:center; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.lamp{ animation:breathe 5.5s ease-in-out infinite; transform-origin:center; filter:drop-shadow(0 0 14px rgba(255,224,160,.9)); }
@keyframes breathe{ 0%,100%{ opacity:.85; r:6; } 50%{ opacity:1; r:7.4; } }

.eyebrow{
  font-size:.68rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 1.6rem;
}

.name{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(4rem,2rem + 15vw,13rem);
  line-height:.95;
  letter-spacing:.14em;
  text-indent:.14em;
  margin:0;
  background:linear-gradient(100deg,#a08654 0%,#e8c37a 22%,#fff6e2 44%,#e8c37a 64%,#8d7647 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:sheen 9s ease-in-out infinite;
  filter:drop-shadow(0 0 40px rgba(232,195,122,.28));
}
@keyframes sheen{ 0%,100%{ background-position:0% 0; } 50%{ background-position:100% 0; } }

.epithets{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(.95rem,.85rem + .35vw,1.2rem);
  color:var(--halo);
  opacity:.62;
  margin:1.6rem 0 0;
  letter-spacing:.04em;
}

.lede{
  max-width:40ch;
  margin:2.6rem auto 0;
  color:var(--text);
  opacity:.85;
}

.claim{
  font-family:var(--serif);
  font-size:clamp(1.5rem,1.1rem + 1.8vw,2.5rem);
  font-weight:300;
  color:#f4f1e9;
  margin:.6rem auto 0;
  max-width:22ch;
  line-height:1.3;
}
.claim em{
  font-style:italic;
  color:var(--gold-lit);
  text-shadow:0 0 26px rgba(232,195,122,.45);
}

.scroll-cue{
  margin-top:clamp(2.5rem,7vh,5rem);
  width:1px; height:4.5rem;
  background:linear-gradient(var(--gold),transparent);
  position:relative;
  opacity:.5;
}
.scroll-cue span{
  position:absolute; top:0; left:-2px;
  width:5px; height:5px; border-radius:50%;
  background:var(--gold-lit);
  box-shadow:0 0 10px var(--gold);
  animation:fall 2.8s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes fall{
  0%  { top:0;    opacity:0; }
  25% { opacity:1; }
  100%{ top:4.5rem; opacity:0; }
}

/* ============================================================
   THEOREM
   ============================================================ */

.theorem{
  border-left:1px solid var(--line);
  padding:.4rem 0 .4rem clamp(1.2rem,4vw,2.6rem);
  max-width:54ch;
}
.theorem .line{ margin:0 0 1.5em; color:var(--text); opacity:.9; }
.tag{
  display:inline-block;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); opacity:.7;
  margin-right:1rem;
  transform:translateY(-.15em);
}
.therefore{
  font-family:var(--serif);
  font-size:clamp(1.6rem,1.1rem + 2.2vw,2.9rem);
  line-height:1.25;
  color:var(--gold-lit);
  margin:2rem 0 .6rem;
  text-shadow:0 0 34px rgba(232,195,122,.32);
}
.therefore .sym{ opacity:.55; margin-right:.4em; font-size:.8em; }
.qed{ margin:0; color:var(--muted); font-family:var(--serif); font-style:italic; font-size:1.15rem; }
.qed-mark{
  font-style:normal; font-family:var(--sans);
  font-size:.62rem; letter-spacing:.3em;
  color:var(--gold); opacity:.75; margin-left:.6rem;
}

/* ============================================================
   CARDS
   ============================================================ */

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0));
  padding:clamp(1.6rem,3vw,2.4rem);
  transition:background .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.card:hover{ background:rgba(232,195,122,.05); transform:translateY(-3px); }
.card p{ margin:0; font-size:.94rem; color:var(--muted); line-height:1.8; }
.card:hover p{ color:#a6adc0; }

.glyph{ width:2.4rem; height:2.4rem; margin-bottom:1.4rem; }
.glyph svg{
  width:100%; height:100%;
  fill:none; stroke:var(--gold);
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
  opacity:.75;
  transition:opacity .5s, filter .5s;
}
.card:hover .glyph svg{ opacity:1; filter:drop-shadow(0 0 8px rgba(232,195,122,.5)); }

/* ============================================================
   SIGNS
   ============================================================ */

.signs{
  list-style:none;
  counter-reset:sign;
  margin:0; padding:0;
  max-width:54ch;
}
.signs li{
  counter-increment:sign;
  position:relative;
  padding:1.5rem 0 1.5rem 3.6rem;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:var(--text); opacity:.86;
}
.signs li:first-child{ border-top:1px solid rgba(255,255,255,.05); }
.signs li::before{
  content:counter(sign,upper-roman);
  position:absolute; left:0; top:1.7rem;
  font-family:var(--serif);
  font-size:.85rem; letter-spacing:.14em;
  color:var(--gold); opacity:.55;
}
.signs em{ font-family:var(--serif); font-style:italic; color:var(--gold-lit); font-size:1.08em; }

/* ============================================================
   RITES
   ============================================================ */

.rites{ display:grid; gap:clamp(1.6rem,3vw,2.6rem); max-width:56ch; }
.rite{ display:flex; gap:clamp(1.2rem,3vw,2rem); align-items:flex-start; }
.rite .num{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--gold); opacity:.4;
  line-height:1; min-width:2.4ch;
}
.rite p{ margin:0; color:var(--muted); }
.rite strong{ font-weight:400; color:#e9e6de; }
.rite em{ font-family:var(--serif); font-style:italic; color:var(--gold-lit); font-size:1.1em; }

/* ============================================================
   VIGIL
   ============================================================ */

.vigil{ text-align:center; padding:2rem 0 0; }

.vigil-field{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:flex-end;
  gap:.9rem;
  min-height:5.5rem;
  margin-bottom:2.4rem;
  border-bottom:1px solid var(--line);
  padding-bottom:1.2rem;
}

.flame{
  position:relative;
  width:10px; height:16px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 72%, #fff6e0 0%, var(--ember) 46%, rgba(255,140,60,.15) 78%, transparent 100%);
  box-shadow:0 0 14px rgba(255,170,90,.6), 0 0 34px rgba(255,140,60,.28);
  transform-origin:50% 100%;
  animation:flicker 1.7s ease-in-out infinite, kindle .8s ease-out backwards;
}
@keyframes flicker{
  0%,100%{ transform:scale(1) skewX(0deg);   opacity:.92; }
  30%    { transform:scale(1.1,.94) skewX(3deg); opacity:1; }
  55%    { transform:scale(.94,1.08) skewX(-3deg); opacity:.85; }
  75%    { transform:scale(1.04,.98) skewX(1.5deg); opacity:.97; }
}
@keyframes kindle{
  from{ transform:scale(0); opacity:0; }
  to  { transform:scale(1); opacity:1; }
}

.lightbtn{
  font-family:var(--sans);
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold);
  background:transparent;
  border:1px solid var(--line);
  padding:1rem 2.4rem;
  cursor:pointer;
  transition:all .5s cubic-bezier(.2,.7,.2,1);
}
.lightbtn:hover{
  color:#0a0806;
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:0 0 40px rgba(232,195,122,.35);
  letter-spacing:.36em;
}
.lightbtn:active{ transform:scale(.97); }
.lightbtn:focus-visible{ outline:1px solid var(--gold-lit); outline-offset:4px; }

.vigil-count{
  margin:1.6rem 0 0;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   LITANY
   ============================================================ */

.litany-section{ padding-bottom:calc(var(--gap) * .7); }
.litany{
  margin:0;
  padding:clamp(2rem,5vw,3.5rem) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.25rem,1rem + 1.5vw,2.1rem);
  line-height:1.65;
  color:#eae7df;
  max-width:34ch;
}
.litany p{ margin:0; opacity:.9; }
.litany .last{
  color:var(--gold-lit);
  font-style:italic;
  margin-top:.6em;
  text-shadow:0 0 30px rgba(232,195,122,.35);
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer{
  position:relative; z-index:2;
  text-align:center;
  padding:clamp(4rem,10vh,8rem) var(--pad) clamp(3rem,7vh,5rem);
}
.foot-mark{
  width:34px; height:34px;
  fill:none; stroke:var(--gold); stroke-width:1;
  opacity:.5; margin-bottom:1.6rem;
  animation:spin 120s linear infinite;
}
.foot-mark .fill{ fill:var(--gold); stroke:none; }
.foot-line{
  font-family:var(--serif);
  font-size:.8rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); opacity:.7; margin:0 0 .8rem;
}
.foot-small{ font-size:.72rem; letter-spacing:.14em; color:var(--muted); margin:.3rem 0; }
.foot-small.dim{ opacity:.45; font-style:italic; font-family:var(--serif); font-size:.85rem; letter-spacing:.1em; }

/* ============================================================
   REVEAL
   ============================================================ */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in{ opacity:1; transform:none; }

.cards.is-in .card{ animation:cardIn .9s cubic-bezier(.2,.7,.2,1) backwards; }
.cards.is-in .card:nth-child(2){ animation-delay:.1s; }
.cards.is-in .card:nth-child(3){ animation-delay:.2s; }
.cards.is-in .card:nth-child(4){ animation-delay:.3s; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .aurora i{ opacity:.35; }
}