@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Share+Tech+Mono&display=swap');

:root {
  --void: #06040a;
  --deep: #0d0914;
  --blood: #6b0f0f;
  --crimson: #9b1a1a;
  --gold: #c8a96e;
  --gold-bright: #e8c98e;
  --gold-dim: #6b5a35;
  --gold-ghost: rgba(200,169,110,0.08);
  --mist: #cdc0b0;
  --mist-dim: rgba(205,192,176,0.5);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--void); color:var(--mist); font-family:'Cormorant Garamond',serif; overflow-x:hidden; cursor:none; min-height:100vh; }

#cursor { position:fixed; width:8px; height:8px; background:var(--gold); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .3s,height .3s,background .3s; }
#cursor-ring { position:fixed; width:36px; height:36px; border:1px solid rgba(200,169,110,0.4); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .3s,height .3s,border-color .3s; }

#grain { position:fixed; inset:-50%; width:200%; height:200%; z-index:1; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); animation:grain .5s steps(2) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,-1%)} 50%{transform:translate(1%,2%)} 75%{transform:translate(-1%,1%)} 100%{transform:translate(2%,-2%)} }

#vignette { position:fixed; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at center,transparent 30%,rgba(6,4,10,.7) 80%,rgba(6,4,10,.97) 100%); }
#scanlines { position:fixed; inset:0; z-index:3; pointer-events:none; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(6,4,10,.03) 2px,rgba(6,4,10,.03) 4px); }

canvas#bg-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; }

.ghost-msg { position:fixed; pointer-events:none; z-index:100; font-family:'Cormorant Garamond',serif; font-style:italic; color:rgba(200,169,110,.45); white-space:nowrap; animation:ghost-float 4s ease-out forwards; font-size:clamp(.75rem,1.5vw,.95rem); letter-spacing:.1em; }
@keyframes ghost-float { 0%{opacity:0;transform:translateY(20px)} 20%{opacity:1} 70%{opacity:.6} 100%{opacity:0;transform:translateY(-60px)} }

.btn-void { position:relative; font-family:'Cinzel Decorative',cursive; font-size:clamp(.55rem,1.5vw,.75rem); letter-spacing:.35em; color:var(--gold); background:transparent; border:none; cursor:none; padding:0; outline:none; }
.btn-inner { position:relative; display:inline-block; padding:1.1rem 3rem; border:1px solid var(--gold-dim); transition:border-color .5s; overflow:hidden; }
.btn-inner::before { content:''; position:absolute; inset:0; background:var(--gold-ghost); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.btn-void:hover .btn-inner { border-color:var(--gold); }
.btn-void:hover .btn-inner::before { transform:scaleX(1); }
.btn-corner { position:absolute; width:6px; height:6px; border-color:var(--gold); border-style:solid; transition:all .4s; }
.btn-corner.tl { top:-1px; left:-1px; border-width:1px 0 0 1px; }
.btn-corner.tr { top:-1px; right:-1px; border-width:1px 1px 0 0; }
.btn-corner.bl { bottom:-1px; left:-1px; border-width:0 0 1px 1px; }
.btn-corner.br { bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
.btn-void:hover .btn-corner { width:12px; height:12px; }

.blood-line { width:240px; height:1px; margin:0 auto 2.5rem; position:relative; }
.blood-line::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,var(--blood),var(--gold),var(--blood),transparent); }
.blood-line::after { content:'✦'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--gold); font-size:.6rem; background:var(--void); padding:0 8px; }

.section-label { font-family:'Share Tech Mono',monospace; font-size:.6rem; letter-spacing:.4em; color:rgba(200,169,110,.3); text-transform:uppercase; text-align:center; margin-bottom:1rem; }
.section-head { font-family:'Cinzel Decorative',cursive; font-size:clamp(1rem,3vw,1.8rem); color:var(--gold); text-align:center; letter-spacing:.15em; margin-bottom:.75rem; }
.section-desc { font-style:italic; color:var(--mist-dim); text-align:center; font-size:1rem; margin-bottom:3rem; letter-spacing:.05em; }

.reveal { opacity:0; transform:translateY(40px); transition:opacity .8s ease-out,transform .8s ease-out; }
.reveal.visible { opacity:1; transform:translateY(0); }

@keyframes fadein { from{opacity:0} to{opacity:1} }
@keyframes rotate-slow { to{transform:rotate(360deg)} }
@keyframes page-flicker { 0%,100%{opacity:1} 10%{opacity:.15} 12%{opacity:1} 30%{opacity:.7} 32%{opacity:1} 60%{opacity:.4} 62%{opacity:1} }
.flickering { animation:page-flicker .6s ease-in-out; }

.ritual-progress { display:flex; align-items:center; gap:.5rem; margin-bottom:3rem; justify-content:center; }
.ritual-step { width:30px; height:1px; background:var(--gold-dim); transition:background .6s,width .4s; }
.ritual-step.done { background:var(--gold); }
.ritual-step.active { background:var(--crimson); width:50px; }

.void-warning { margin-top:2rem; font-family:'Share Tech Mono',monospace; font-size:.6rem; letter-spacing:.2em; color:rgba(107,15,15,.6); }

footer { padding:2rem; text-align:center; position:relative; border-top:1px solid rgba(200,169,110,.06); }
.footer-text { font-family:'Share Tech Mono',monospace; font-size:.6rem; letter-spacing:.2em; color:rgba(200,169,110,.15); }