/* House of Kaos - atmosphere layer, step 1: tokens, grain, vignette, reveal */
:root{
  --ink:#14101a; --ink-2:#1c1622; --card:#211a2a;
  --gold:#c9a35c; --gold-soft:#e3c98f;
  --text:#efe9e4; --muted:#a99fae;
  --crimson:#8e2f3c; --sea:#2e6f6a;
  --line:rgba(201,163,92,.28); --line-soft:rgba(201,163,92,.14);
  /* remap the site's existing variables onto the new palette */
  --black:var(--ink); --coal:var(--ink-2); --panel:var(--card);
  --gold-bright:var(--gold-soft);
  --cream:var(--text); --cream-dim:var(--muted);
}
html{scrollbar-color:var(--gold) var(--ink);scrollbar-width:thin}
body{background:var(--ink);color:var(--text)}
::selection{background:var(--gold);color:var(--ink)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:4px}

/* film grain: tiled SVG noise, fixed, never intercepts input */
body::before{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:220px 220px}
/* vignette: transparent to ~60% radius, darkest at the corners */
body::after{content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(5,3,8,.55) 100%)}

/* scroll-reveal: visible by default, hidden only when JS is running */
.js .rv{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
.js .rv.in{opacity:1;transform:none;will-change:auto}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ---- step 2: hero ---- */
header.hero{min-height:100vh;min-height:100svh}
.hero-content{z-index:3}
.hero-scroll{z-index:3;font-size:0;line-height:0;width:1px;height:40px;overflow:hidden}
.hero-scroll::after{content:"";display:block;width:1px;height:40px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:hscroll 2.6s ease-in-out infinite}
@keyframes hscroll{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
header.hero::before,header.hero::after{content:"";position:absolute;z-index:1;pointer-events:none;width:140%;height:140%;top:-20%;left:-20%;opacity:.35;will-change:transform}
header.hero::before{background:radial-gradient(40% 35% at 25% 60%,rgba(142,47,60,.6),transparent 70%),radial-gradient(35% 30% at 70% 30%,rgba(120,90,150,.35),transparent 70%);animation:mista 38s ease-in-out infinite alternate}
header.hero::after{background:radial-gradient(45% 35% at 75% 70%,rgba(201,163,92,.25),transparent 70%),radial-gradient(35% 30% at 30% 25%,rgba(142,47,60,.45),transparent 70%);animation:mistb 44s ease-in-out infinite alternate}
@keyframes mista{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(5%,-3%,0)}}
@keyframes mistb{from{transform:translate3d(4%,2%,0)}to{transform:translate3d(-5%,-2%,0)}}
.hero-content::before{content:"";position:absolute;z-index:-1;left:50%;top:38%;width:min(900px,120vw);height:520px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(227,201,143,.6),transparent);opacity:.12;animation:hglow 4s ease-in-out infinite alternate;pointer-events:none}
@keyframes hglow{to{opacity:.2}}
.hero-title{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;font-weight:500;line-height:1.05}
.btn,.kicker,.hero-lockup{font-family:'IM Fell English',Georgia,'Times New Roman',serif}
.js .hw{display:inline-block;opacity:0;transform:translateY(.35em);animation:hw .5s cubic-bezier(.22,.8,.3,1) forwards;animation-delay:calc(var(--i)*140ms + 150ms)}
@keyframes hw{to{opacity:1;transform:none}}
.js .hero-lockup,.js .hero-tag,.js .hero-cta{opacity:0;animation:hfade .6s cubic-bezier(.22,.8,.3,1) forwards}
.js .hero-lockup{animation-delay:.7s}.js .hero-tag{animation-delay:.85s}.js .hero-cta{animation-delay:.95s}
@keyframes hfade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  header.hero::before,header.hero::after,.hero-content::before{animation:none}
  .hero-scroll::after{animation:none;opacity:.7}
}

/* ---- hero video layer ---- */
.hok-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;z-index:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.hok-video{display:none}}

/* video replaces the old hero photo; photo returns for reduced-motion */
.hero-bg{background:radial-gradient(60% 45% at 50% 42%,rgba(201,169,106,.07),transparent 70%),linear-gradient(rgba(10,8,7,.5),rgba(10,8,7,.72))}
@media (prefers-reduced-motion:reduce){.hero-bg{background:radial-gradient(60% 45% at 50% 42%,rgba(201,169,106,.07),transparent 70%),linear-gradient(rgba(10,8,7,.5),rgba(10,8,7,.72)),url("images/hero/hero-candles.jpg") center 35% / cover no-repeat}}