/* ============================================================
   Base: design tokens, reset, shared effects
   ============================================================ */
:root{
  --night:#1e040b;
  --deep:#2e0710;
  --maroon:#5a1020;
  --wine:#7a1a2c;
  --gold:#c9a24b;
  --gold-hi:#e6cb85;
  --gold-lo:#8f6d26;
  --rust:#b9531d;
  --ember:#e0742a;
  --cream:#f1dfbd;

  --serif:'Playfair Display','Rozha One',Georgia,serif;
  --display:'Rozha One','Playfair Display',serif;
  --sans:'Inter',system-ui,sans-serif;

  --foil:linear-gradient(105deg,#8f6d26 0%,#e6cb85 22%,#fff3c9 30%,#e6cb85 38%,#c9a24b 60%,#8f6d26 100%);
  --foil-rust:linear-gradient(105deg,#a8431a,#e0742a 22%,#ffb067 30%,#e0742a 38%,#b9531d 60%,#a8431a);
  --foil-border:linear-gradient(135deg,#f3dc97,#8f6d26 30%,rgba(201,162,75,.3) 55%,#e6cb85 80%,#8f6d26);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--night);color:var(--cream);font-family:var(--sans);font-weight:300;
  line-height:1.6;min-height:100svh;overflow-x:clip;max-width:100%;
}
body.intro{overflow:hidden}
a{color:inherit}
main{position:relative;z-index:2;overflow-x:clip}

/* shared keyframes */
@keyframes shimmer{to{background-position:-250% 0}}
@keyframes flicker{
  0%{transform:translateX(-50%) scale(1,1) rotate(-2deg)}
  30%{transform:translateX(-50%) scale(.92,1.08) rotate(2deg)}
  60%{transform:translateX(-50%) scale(1.06,.94) rotate(-1deg)}
  100%{transform:translateX(-50%) scale(.96,1.05) rotate(1.5deg)}
}
@keyframes sway{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@keyframes bob{to{transform:translateY(-5px) rotate(5deg)}}
@keyframes rot{to{transform:rotate(360deg)}}

/* shimmering gold / rust foil text */
.title,.hi,.hi-intro,.sec-title,.countdown b,.arch .num{
  background-image:var(--foil);background-size:250% 100%;background-repeat:repeat-x;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite;
}
.title em,.sec-title em{
  background-image:var(--foil-rust);background-size:250% 100%;background-repeat:repeat-x;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite reverse;
}

/* film grain + vignette over everything (non-interactive) */
body::before{
  content:"";position:fixed;inset:0;z-index:98;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(10,1,4,.55) 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .7  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* floating embers + petals canvas */
#embers{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* scroll reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1.1s ease var(--d,0s),transform 1.1s ease var(--d,0s)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}