/* Horror Ghouls Bakery — shared stylesheet
   IMPORTANT: this file is cached immutable via _headers.
   Any edit requires bumping ?v= on every <link> (currently v=1). */
/* Creaking Crypt by Chad Savage (sinisterfonts.com) — display font for
   hero/banner/section titles. License: free for commercial use (see font readme). */
@font-face{
  font-family:'Creaking Crypt';
  src:url('fonts/creaking-crypt.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --black-cherry:#170a0f; --deep:#0d0608; --crimson:#9e1b1b; --crimson-bright:#d12f2f;
  --charcoal:#241c1e; --bone:#eae1d0; --bone-dim:#c8bda8; --gold:#d9a441; --gold-soft:#e7c578;
  --display:'Fraunces',serif;
  --slasher:'Creaking Crypt','Fraunces',serif; --body:'Outfit',sans-serif; --mono:'Space Mono',monospace;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black-cherry);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.65;overflow-x:hidden}
::selection{background:var(--crimson);color:var(--bone)}
img{max-width:100%;display:block}
a{color:var(--gold)}
h1,h2,h3{font-family:var(--display)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px}
.eyebrow::before{content:"▸ "}
section{padding:88px 0;position:relative}
.section-title{font-family:var(--slasher);font-weight:400;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.2;letter-spacing:.02em;margin-bottom:20px;padding-bottom:.12em}
.section-title em{font-style:normal;color:var(--crimson-bright)}
.lede{color:var(--bone-dim);max-width:62ch}
.btn{display:inline-block;font-family:var(--mono);font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:15px 28px;border:1px solid var(--gold);color:var(--gold);background:transparent;transition:background .25s,color .25s,box-shadow .25s;cursor:pointer}
.btn:hover{background:var(--gold);color:var(--deep)}
.btn-red{border-color:var(--crimson-bright);color:var(--bone);background:linear-gradient(180deg,#b32424,#7d1414);box-shadow:0 0 22px rgba(209,47,47,.45),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-red:hover{box-shadow:0 0 38px rgba(209,47,47,.75);background:linear-gradient(180deg,#c92c2c,#8f1818);color:#fff}
.btn-red::before{content:"● ";font-size:.7em;vertical-align:2px;animation:recblink 1.6s steps(2) infinite}
@keyframes recblink{50%{opacity:.25}}

/* header */
header{position:sticky;top:0;z-index:100;background:rgba(13,6,8,.98);backdrop-filter:blur(8px);border-bottom:1px solid rgba(217,164,65,.18)}
.nav{display:flex;align-items:center;gap:24px;max-width:var(--maxw);margin:0 auto;padding:14px 24px;position:relative}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone)}
.logo svg{width:42px;height:42px;flex-shrink:0}
.logo-name{font-family:var(--display);font-weight:900;font-size:1.12rem;line-height:1;letter-spacing:.02em}
.logo-name small{display:block;font-family:var(--mono);font-weight:400;font-size:.58rem;letter-spacing:.3em;color:var(--gold);margin-top:4px}
.nav-links{display:flex;gap:24px;margin-left:auto;list-style:none}
.nav-links a{font-family:var(--mono);font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;color:var(--bone);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav .btn{padding:11px 18px;font-size:.7rem;margin-left:6px}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--gold);color:var(--gold);font-family:var(--mono);padding:8px 14px;font-size:.75rem;letter-spacing:.1em;cursor:pointer}

/* page banner (interior pages) */
.banner{padding:78px 0 64px;background:radial-gradient(ellipse 70% 70% at 70% 0%,rgba(158,27,27,.25),transparent 65%),linear-gradient(180deg,var(--deep),var(--black-cherry))}
.banner h1{font-family:var(--slasher);font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.18;letter-spacing:.02em;padding-bottom:.18em}
.banner h1 em{font-style:normal;color:var(--crimson-bright)}
.banner .lede{margin-top:18px}
.crumbs{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);margin-bottom:22px}
.crumbs a{color:var(--bone-dim);text-decoration:none}
.crumbs a:hover{color:var(--gold)}

/* film frame around photos */
.film{position:relative;border:1px solid rgba(217,164,65,.35);padding:10px;background:#100709;box-shadow:0 26px 60px rgba(0,0,0,.6)}
.film .frame{position:relative;overflow:hidden}
.film .frame::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px);pointer-events:none}
.film img{width:100%;height:100%;object-fit:cover}
.film figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);text-align:center;padding-top:10px}

/* ticker */
.ticker{background:var(--deep);border-top:1px solid rgba(217,164,65,.3);border-bottom:1px solid rgba(217,164,65,.3);overflow:hidden;padding:11px 0}
.ticker-track{display:flex;width:max-content;animation:scroll 28s linear infinite;font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ticker-track span{padding:0 34px;white-space:nowrap}
.ticker-track span::before{content:"REC ● ";color:var(--crimson-bright);font-size:.85em}
@keyframes scroll{to{transform:translateX(-50%)}}

/* product cards */
.menu-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-top:48px}
.card{position:relative;border:1px solid rgba(234,225,208,.12);background:var(--charcoal);display:flex;flex-direction:column;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 24px 50px rgba(0,0,0,.55)}
.card-visual{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid rgba(234,225,208,.1)}
.card-visual img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-visual img{transform:scale(1.05)}
.card-visual::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px);pointer-events:none}
.badge{position:absolute;top:14px;left:14px;z-index:3;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;background:var(--crimson);color:var(--bone);padding:6px 12px;box-shadow:0 0 18px rgba(209,47,47,.5)}
.badge.gold{background:rgba(13,6,8,.8);border:1px solid var(--gold);color:var(--gold);box-shadow:none}
.card-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--crimson-bright)}
.card h3{font-size:1.5rem;font-weight:900;line-height:1.1}
.card h3 a{color:var(--bone);text-decoration:none}
.card h3 a:hover{color:var(--gold-soft)}
.card p{color:var(--bone-dim);font-size:.95rem;flex:1}
.card-foot{display:flex;align-items:baseline;justify-content:space-between;border-top:1px dashed rgba(234,225,208,.18);padding-top:14px;margin-top:6px;gap:10px;flex-wrap:wrap}
.price{font-family:var(--mono);color:var(--gold);font-size:.95rem}
.price small{color:var(--bone-dim);font-size:.7rem;letter-spacing:.08em}
.card-link{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.card-link:hover{color:var(--gold-soft)}
.card.feature{grid-column:span 12;flex-direction:row;border-color:rgba(217,164,65,.45)}
.card.feature .card-visual{aspect-ratio:auto;flex:1.1;border-bottom:none;border-right:1px solid rgba(234,225,208,.1)}
.card.feature .card-body{flex:1;padding:42px;justify-content:center}
.card.feature h3{font-size:clamp(1.8rem,3vw,2.6rem);font-style:italic}
.card.std{grid-column:span 6}

/* chapters (how to order) */
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:48px 0 44px;border:1px solid rgba(217,164,65,.25)}
.chapter{padding:36px 30px;border-right:1px solid rgba(217,164,65,.25)}
.chapter:last-child{border-right:none}
.chapter .ch-num{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;color:var(--crimson-bright);text-transform:uppercase;display:block;margin-bottom:14px}
.chapter h3{font-size:1.3rem;font-weight:900;margin-bottom:10px}
.chapter p{color:var(--bone-dim);font-size:.93rem}

/* quotes */
.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.quote{border:1px solid rgba(234,225,208,.13);padding:34px;background:rgba(36,28,30,.45)}
.quote .stars{font-family:var(--mono);color:var(--gold);letter-spacing:.3em;font-size:.8rem;margin-bottom:14px}
.quote blockquote{font-family:var(--display);font-size:1.2rem;font-style:italic;line-height:1.4;margin-bottom:18px}
.quote cite{font-family:var(--mono);font-style:normal;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.quote cite b{color:var(--gold)}

/* faq */
.faq-list{margin-top:42px;border-top:1px solid rgba(234,225,208,.14)}
.faq-item{border-bottom:1px solid rgba(234,225,208,.14)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:24px 4px;font-family:var(--display);font-weight:700;font-size:1.15rem;gap:20px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--mono);color:var(--gold);font-size:1.3rem;transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .a{padding:0 4px 26px;color:var(--bone-dim);max-width:70ch}

/* forms */
.form-card{background:var(--charcoal);border:1px solid rgba(234,225,208,.14);padding:38px}
.fg{margin-bottom:20px}
.fg label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.fg input,.fg select,.fg textarea{width:100%;background:#120a0d;border:1px solid rgba(234,225,208,.2);color:var(--bone);padding:13px 15px;font-family:var(--body);font-size:.95rem}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:2px solid var(--gold);outline-offset:-1px}
.fg textarea{resize:vertical;min-height:120px}
.fg select option{background:#120a0d}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--bone-dim);margin-top:14px;line-height:1.7}

/* product page */
.product-hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.product-hero .film{max-width:560px}
.spec-list{list-style:none;margin:24px 0;border-top:1px dashed rgba(234,225,208,.2)}
.spec-list li{display:flex;justify-content:space-between;gap:18px;padding:13px 2px;border-bottom:1px dashed rgba(234,225,208,.2);font-size:.93rem}
.spec-list li span:first-child{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);padding-top:3px}
.spec-list li span:last-child{text-align:right;color:var(--bone)}

/* footer */
footer{background:var(--deep);border-top:1px solid rgba(217,164,65,.25);padding:64px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.foot-grid h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:10px;color:var(--bone-dim);font-size:.92rem}
.foot-grid a{color:var(--bone-dim);text-decoration:none;font-size:.92rem}
.foot-grid a:hover{color:var(--gold)}
.foot-desc{color:var(--bone-dim);max-width:42ch;font-size:.95rem}
.foot-bottom{margin-top:54px;padding-top:24px;border-top:1px solid rgba(234,225,208,.1);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim)}
.foot-easter{color:rgba(200,189,168,.55)}
.foot-admin{color:rgba(200,189,168,.35)!important;font-size:.62rem!important;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}

/* reveal + focus */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* responsive */
@media (max-width:980px){
  .card.std{grid-column:span 12}
  .product-hero,.quote-grid{grid-template-columns:1fr}
  .chapters{grid-template-columns:1fr}
  .chapter{border-right:none;border-bottom:1px solid rgba(217,164,65,.25)}
  .chapter:last-child{border-bottom:none}
  .foot-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:760px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--deep);border-bottom:1px solid rgba(217,164,65,.3);padding:10px 0}
  .nav-links.open{display:flex}
  .nav-links li{padding:14px 24px}
  .menu-toggle{display:block}
  .nav>.btn{display:none}
  .card.feature{flex-direction:column}
  .card.feature .card-visual{aspect-ratio:16/10;border-right:none;border-bottom:1px solid rgba(234,225,208,.1)}
  .card.feature .card-body{padding:28px}
  section{padding:64px 0}
  .form-row{grid-template-columns:1fr}
}

/* ---- v2 additions: knife cursor, rewind button, cat accents ---- */
@media (pointer:fine){
  /* knife tip sits exactly at 0,0 so clicks land where the point is */
  body{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M1 1 L13 5 Q15 6 14 8 L8 14 Q6 15 5 13 Z' fill='%23eae1d0' stroke='%23241c1e' stroke-width='1'/><rect x='12.2' y='9.2' width='12' height='5.4' rx='2' transform='rotate(45 12 9)' fill='%233a2c20' stroke='%23170a0f'/><circle cx='17' cy='15.4' r='.8' fill='%23d9a441'/></svg>") 1 1, auto}
  a,button,summary,[role=button],input[type=checkbox],select,label{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M1 1 L13 5 Q15 6 14 8 L8 14 Q6 15 5 13 Z' fill='%23eae1d0' stroke='%239e1b1b' stroke-width='1.2'/><path d='M4 4 L9 9' stroke='%23d12f2f' stroke-width='1.6' stroke-linecap='round'/><rect x='12.2' y='9.2' width='12' height='5.4' rx='2' transform='rotate(45 12 9)' fill='%233a2c20' stroke='%23170a0f'/></svg>") 1 1, pointer}
}

/* "Rewind to Top" — VHS button, appears after scroll */
.rewind{
  position:fixed;right:22px;bottom:22px;z-index:200;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:linear-gradient(180deg,#1c1014,#0d0608);
  border:1px solid var(--crimson-bright);color:var(--bone);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  padding:12px 16px;opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .35s,transform .35s,box-shadow .25s;
  box-shadow:0 0 18px rgba(209,47,47,.35),inset 0 1px 0 rgba(255,255,255,.08);
}
.rewind.show{opacity:1;transform:none;pointer-events:auto}
.rewind:hover{box-shadow:0 0 32px rgba(209,47,47,.7)}
.rewind .tri{display:flex;gap:3px}
.rewind .tri span{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:11px solid var(--crimson-bright)}
.rewind:hover .tri span{animation:rwd .5s linear infinite}
@keyframes rwd{from{transform:translateX(0)}to{transform:translateX(-5px)}}


/* events list (booking page + home strip) */
.event-row{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:var(--charcoal);border:1px solid rgba(234,225,208,.13);padding:20px 24px;margin-bottom:12px;transition:border-color .3s}
.event-row:hover{border-color:var(--gold)}
.event-date{text-align:center;border-right:1px dashed rgba(234,225,208,.2);padding-right:22px;min-width:74px}
.event-date b{display:block;font-family:var(--display);font-weight:900;font-size:1.7rem;line-height:1;color:var(--gold)}
.event-date span{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--crimson-bright)}
.event-info h3{font-size:1.15rem;font-weight:900;margin-bottom:3px}
.event-info p{font-size:.85rem;color:var(--bone-dim)}
.event-time{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--gold);white-space:nowrap}
.events-empty{color:var(--bone-dim);font-size:.95rem;border:1px dashed rgba(234,225,208,.2);padding:26px;text-align:center}
@media (max-width:640px){.event-row{grid-template-columns:auto 1fr}.event-time{grid-column:2}}

/* ===================== v4: immersion layer ===================== */

/* 2. skip link (a11y) */
.skip{position:fixed;top:-60px;left:16px;z-index:300;background:var(--crimson);color:var(--bone);font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px;text-decoration:none;transition:top .25s}
.skip:focus{top:12px}

/* 3. scroll progress: a red slash bleeding across the top */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:250;background:linear-gradient(90deg,var(--crimson),var(--crimson-bright));box-shadow:0 0 12px rgba(209,47,47,.8)}

/* 4. page fade-in */
@keyframes pagein{from{opacity:0}to{opacity:1}}
body{animation:pagein .5s ease both}

/* 5. drip divider between sections */
.drip{height:46px;background-repeat:repeat-x;background-size:auto 100%;margin-top:-1px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'><path d='M0 0 H200 V6 q-6 0 -8 10 q-2 14 -6 14 q-4 0 -5 -12 q-1 -10 -6 -10 q-7 0 -9 18 q-1 8 -4 8 q-4 0 -5 -16 q-1 -10 -7 -10 q-8 0 -9 6 q-2 10 -6 10 q-5 0 -6 -14 q-1 -8 -8 -8 q-9 0 -10 12 q-1 16 -6 16 q-4 0 -5 -20 q-1 -8 -7 -8 q-8 0 -9 8 q-2 12 -6 12 q-5 0 -6 -14 q-1 -6 -8 -6 q-8 0 -10 14 q-2 12 -5 12 q-4 0 -5 -18 q-1 -8 -7 -8 q-9 0 -10 6 q-2 8 -6 8 q-5 0 -7 -10 q-2 -4 -9 -4 Z' fill='%230e0608'/></svg>")}
.drip.cherry{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 46' preserveAspectRatio='none'><path d='M0 0 H200 V6 q-6 0 -8 10 q-2 14 -6 14 q-4 0 -5 -12 q-1 -10 -6 -10 q-7 0 -9 18 q-1 8 -4 8 q-4 0 -5 -16 q-1 -10 -7 -10 q-8 0 -9 6 q-2 10 -6 10 q-5 0 -6 -14 q-1 -8 -8 -8 q-9 0 -10 12 q-1 16 -6 16 q-4 0 -5 -20 q-1 -8 -7 -8 q-8 0 -9 8 q-2 12 -6 12 q-5 0 -6 -14 q-1 -6 -8 -6 q-8 0 -10 14 q-2 12 -5 12 q-4 0 -5 -18 q-1 -8 -7 -8 q-9 0 -10 6 q-2 8 -6 8 q-5 0 -7 -10 q-2 -4 -9 -4 Z' fill='%23170a0f'/></svg>")}

/* 6. film-strip vault scroller */
.vault{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:26px 0;margin-top:40px;
  border-top:14px solid transparent;border-bottom:14px solid transparent;
  border-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='14'><rect width='40' height='14' fill='%230d0608'/><rect x='8' y='3.5' width='13' height='7' rx='2' fill='%23170a0f' stroke='%23d9a44155'/></svg>") 14 round;
  background:#0d0608}
.vault::-webkit-scrollbar{display:none}
.vault-track{display:flex;gap:16px;padding:0 24px;width:max-content}
.vault figure{flex:0 0 auto;width:300px;position:relative;border:1px solid rgba(217,164,65,.25);background:#100709}
.vault .vf{position:relative;aspect-ratio:4/3;overflow:hidden}
.vault .vf::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px);pointer-events:none}
.vault img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.vault figure:hover img{transform:scale(1.06)}
.vault figcaption{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);padding:10px 12px;display:flex;justify-content:space-between;gap:8px}
.vault figcaption b{color:var(--gold);font-weight:400}

/* 7. VHS timecode overlay */
.timecode{position:absolute;top:12px;right:12px;z-index:4;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:#fff;background:rgba(13,6,8,.55);padding:5px 9px;text-shadow:0 0 6px rgba(0,0,0,.9)}
.timecode::before{content:"● ";color:var(--crimson-bright);animation:recblink 1.2s steps(2) infinite}

/* 8. lightbox */
.lb{position:fixed;inset:0;z-index:400;background:rgba(8,3,5,.94);display:none;align-items:center;justify-content:center;padding:30px}
.lb.open{display:flex}
.lb img{max-width:min(1100px,94vw);max-height:86vh;border:1px solid rgba(217,164,65,.4);box-shadow:0 0 80px rgba(0,0,0,.9)}
.lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.lb-x{position:absolute;top:18px;right:18px;background:none;border:1px solid var(--crimson-bright);color:var(--bone);font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;padding:10px 16px;text-transform:uppercase}
.lb-x:hover{background:var(--crimson)}
.film .frame.lbable{cursor:zoom-in}

/* 9. title-card flicker on section emphasis */
.section-title em,.banner h1 em{animation:emflicker 7s infinite}
@keyframes emflicker{0%,91%,93.5%,100%{opacity:1}92%{opacity:.45}93%{opacity:.8}}

/* 10. ticker pause on hover */
.ticker:hover .ticker-track{animation-play-state:paused}

/* 11. film frame tracking band on hover (scene change) */
.film .frame::after{content:"";position:absolute;left:0;right:0;height:26px;top:-12%;z-index:3;background:linear-gradient(180deg,transparent,rgba(234,225,208,.45),transparent);opacity:0;mix-blend-mode:overlay;pointer-events:none}
.film:hover .frame::after{opacity:.3;animation:track 2s linear infinite}
@keyframes track{from{top:-12%}to{top:112%}}

/* 12. hero feature-presentation open */
.hero-open{position:absolute;inset:0;z-index:5;background:#050203;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:openout .9s ease 1.4s both}
.hero-open span{font-family:var(--mono);font-size:clamp(.8rem,2vw,1.1rem);letter-spacing:.5em;text-transform:uppercase;color:var(--gold);animation:openpulse 1.4s ease both}
@keyframes openout{to{opacity:0;visibility:hidden}}
@keyframes openpulse{0%{opacity:0;transform:scale(.92)}35%{opacity:1;transform:scale(1)}100%{opacity:1}}

/* 13. easter-egg lightning + toast */
.flash{position:fixed;inset:0;z-index:380;background:#fff;opacity:0;pointer-events:none}
.flash.go{animation:bolt .7s steps(1)}
@keyframes bolt{0%{opacity:.85}8%{opacity:0}14%{opacity:.6}22%{opacity:0}30%{opacity:.25}38%{opacity:0}}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);z-index:390;background:var(--deep);border:1px solid var(--gold);color:var(--bone);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;padding:14px 22px;opacity:0;transition:opacity .4s,transform .4s;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 14. booth-exclusive cards */
.booth-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
.booth-card{position:relative;border:1px solid rgba(234,225,208,.13);background:#15090c;overflow:hidden}
.booth-card .bv{position:relative;aspect-ratio:1;overflow:hidden}
.booth-card .bv::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px)}
.booth-card img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.booth-card:hover img{transform:scale(1.07)}
.booth-card p{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);padding:12px 14px}
.booth-card p b{display:block;color:var(--bone);font-family:var(--display);font-size:.95rem;letter-spacing:0;text-transform:none;margin-bottom:3px}
@media (max-width:980px){.booth-grid{grid-template-columns:repeat(2,1fr)}}

@media (prefers-reduced-motion:reduce){.hero-open{display:none}.progress{transition:none}}

/* ===================== v8 ===================== */

/* 1. blood-drip hover on red CTAs */
.btn-red{position:relative;overflow:visible}
.btn-red::after{content:"";position:absolute;left:18%;top:100%;width:3px;height:0;background:linear-gradient(180deg,var(--crimson-bright),transparent);transition:height .45s ease;border-radius:0 0 3px 3px}
.btn-red:hover::after{height:16px}

/* 2. hero candlelight spotlight + fog drift */
.hero .spot{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle 320px at var(--mx,70%) var(--my,30%),rgba(217,164,65,.13),transparent 70%);transition:background .1s}
.hero .fog{position:absolute;inset:-20%;z-index:1;pointer-events:none;opacity:.5;
  background:radial-gradient(ellipse 40% 26% at 24% 70%,rgba(200,189,168,.05),transparent 70%),radial-gradient(ellipse 36% 22% at 76% 46%,rgba(200,189,168,.04),transparent 70%);
  animation:fog 26s ease-in-out infinite alternate}
@keyframes fog{from{transform:translateX(-4%) translateY(1%)}to{transform:translateX(4%) translateY(-2%)}}

/* 3. 3D tilt on film frames */
@media (pointer:fine){
  .film{transform-style:preserve-3d;transition:transform .2s ease,box-shadow .3s}
  .film.tilting{transition:none}
}

/* 4. VHS static page transition */
.static-out{position:fixed;inset:0;z-index:500;pointer-events:none;opacity:0;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 2px,transparent 2px 4px),#0d0608;
  mix-blend-mode:normal}
.static-out.go{animation:staticout .24s steps(3) forwards}
@keyframes staticout{from{opacity:0}to{opacity:1}}

/* 5. booking product checklist */
.pchecks{display:grid;gap:8px;margin-bottom:8px}
.pcheck{display:flex;align-items:center;gap:12px;border:1px solid rgba(234,225,208,.16);padding:11px 14px;background:#120a0d;font-size:.9rem}
.pcheck:hover{border-color:var(--gold)}
.pcheck input{accent-color:var(--crimson-bright);width:16px;height:16px}
.pcheck .pp{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--gold);white-space:nowrap}

/* 6. event skeleton + add-to-calendar */
.skel{height:78px;margin-bottom:12px;background:linear-gradient(90deg,#1a0f13 25%,#241419 50%,#1a0f13 75%);background-size:200% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.ics-link{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);text-decoration:none;border:1px solid rgba(234,225,208,.2);padding:6px 10px;white-space:nowrap}
.ics-link:hover{color:var(--gold);border-color:var(--gold)}

@media (prefers-reduced-motion:reduce){.hero .fog{animation:none}.static-out{display:none}}

/* ===================== v10: 90s easter eggs ===================== */

/* tape tracking glitch (Konami code) */
body.tracking-bad{animation:trackbad 1.8s steps(12)}
@keyframes trackbad{
  0%,100%{transform:none;filter:none}
  10%{transform:translateY(3px) skewX(.4deg);filter:saturate(1.6) hue-rotate(8deg)}
  25%{transform:translateY(-4px) skewX(-.6deg);filter:saturate(.6)}
  40%{transform:translateY(2px);filter:contrast(1.4)}
  55%{transform:translateY(-2px) skewX(.3deg);filter:hue-rotate(-10deg)}
  70%{transform:translateY(5px);filter:saturate(1.8)}
  85%{transform:translateY(-1px) skewX(-.2deg)}
}

/* VCR Channel 3 blue screen (triple-click logo) */
.ch3{position:fixed;inset:0;z-index:600;background:#0000a8;display:none;align-items:center;justify-content:center;flex-direction:column;gap:18px}
.ch3.on{display:flex;animation:ch3out .4s ease 1.4s forwards}
.ch3 span{font-family:var(--mono);color:#fff;font-size:clamp(1rem,3vw,1.6rem);letter-spacing:.3em;text-transform:uppercase;text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.ch3 .small{font-size:.8rem;letter-spacing:.2em;opacity:.8}
@keyframes ch3out{to{opacity:0;visibility:hidden}}

/* bouncing cookie screensaver */
.saver{position:fixed;inset:0;z-index:550;background:rgba(5,2,3,.96);display:none;cursor:none}
.saver.on{display:block}
.saver .puck{position:absolute;width:110px;height:110px;will-change:transform}
.saver .hint{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(200,189,168,.5)}
@media (prefers-reduced-motion:reduce){.saver{display:none!important}body.tracking-bad{animation:none}}

/* ===================== v11: mobile layer ===================== */

/* 1. thumb-zone action bar (mobile only) */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:1px;position:fixed;left:0;right:0;bottom:0;z-index:240;
    background:rgba(13,6,8,.97);backdrop-filter:blur(10px);border-top:1px solid rgba(217,164,65,.3);
    padding-bottom:env(safe-area-inset-bottom)}
  .mbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 6px 9px;text-decoration:none;
    font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
  .mbar a svg{width:19px;height:19px}
  .mbar a.hot{background:linear-gradient(180deg,#b32424,#7d1414);color:var(--bone)}
  body.has-mbar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  body.has-mbar .rewind{bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* 2. full-screen nav overlay */
@media (max-width:760px){
  .nav-links{position:fixed;inset:0;top:0;background:rgba(8,3,5,.97);backdrop-filter:blur(8px);
    padding:90px 28px 40px;border-bottom:none;z-index:150;flex-direction:column;gap:0}
  .nav-links.open{display:flex;animation:navin .25s ease}
  .nav-links li{padding:0;opacity:0;transform:translateY(14px)}
  .nav-links.open li{animation:liin .4s ease forwards}
  .nav-links.open li:nth-child(1){animation-delay:.05s}.nav-links.open li:nth-child(2){animation-delay:.1s}
  .nav-links.open li:nth-child(3){animation-delay:.15s}.nav-links.open li:nth-child(4){animation-delay:.2s}
  .nav-links.open li:nth-child(5){animation-delay:.25s}.nav-links.open li:nth-child(6){animation-delay:.3s}
  .nav-links a{display:block;font-family:var(--slasher);font-size:1.7rem;letter-spacing:.04em;text-transform:none;
    padding:16px 0;border-bottom:1px dashed rgba(234,225,208,.15);color:var(--bone)}
  .nav-links a.active{color:var(--crimson-bright)}
  .menu-toggle{position:relative;z-index:160}
  body.nav-open{overflow:hidden}
  @keyframes navin{from{opacity:0}to{opacity:1}}
  @keyframes liin{to{opacity:1;transform:none}}
}

/* 3. tap feedback (touch has no hover) */
@media (hover:none){
  .card:active{transform:scale(.985);border-color:var(--gold)}
  .btn:active{transform:scale(.97)}
  .pcheck:active,.event-row:active,.booth-card:active{border-color:var(--gold)}
  .film:active .frame::after{opacity:.3;animation:track 1.2s linear 1}
}

/* 4. vault: scroll snap + edge fade affordance */
.vault{scroll-snap-type:x proximity}
.vault figure{scroll-snap-align:center}
@media (max-width:760px){
  .vault{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .vault figure{width:78vw;max-width:300px}
}

/* 5. mobile hero + type tuning */
@media (max-width:760px){
  .hero{min-height:auto;padding-top:36px}
  .hero-inner{padding-bottom:74px;gap:34px}
  .hero h1{font-size:clamp(2.1rem,9.5vw,2.8rem)}
  .hero-sub{font-size:1.02rem;margin:20px 0 28px}
  .hero .film{max-width:340px}
  section{padding:56px 0}
  .section-title{font-size:clamp(1.6rem,7vw,2.2rem)}
  .ticker-track{animation-duration:38s}
  .hero-open span{letter-spacing:.3em}
  .quote blockquote{font-size:1.08rem}
  .chapters{margin:36px 0 34px}
}

/* 6. form ergonomics: 16px+ inputs prevent iOS auto-zoom */
.fg input,.fg select,.fg textarea{font-size:16px}
.news input{font-size:16px}

/* 7. safe-area for fixed elements */
.rewind{bottom:calc(22px + env(safe-area-inset-bottom))}
.toast{bottom:calc(90px + env(safe-area-inset-bottom))}

/* ===================== v12: maximum 1990s ===================== */

/* 1. FEATURE PRESENTATION green intro (once per session) */
.feature-card{position:fixed;inset:0;z-index:700;background:#0a3b1e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;cursor:pointer}
.feature-card.bye{animation:featout .5s ease forwards}
.feature-card h2{font-family:var(--mono);font-weight:700;color:#e8f5e9;font-size:clamp(1.3rem,4.5vw,2.6rem);letter-spacing:.18em;text-transform:uppercase;text-align:center;text-shadow:0 0 18px rgba(232,245,233,.4);animation:featpulse 1.6s ease infinite}
.feature-card p{font-family:var(--mono);color:rgba(232,245,233,.75);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase}
.feature-card::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);pointer-events:none}
@keyframes featpulse{50%{opacity:.75}}
@keyframes featout{to{opacity:0;visibility:hidden}}

/* 2. video-store rental sticker */
.rental{position:absolute;top:-14px;right:-12px;z-index:5;transform:rotate(7deg);
  background:#f4e04d;color:#1a1208;font-family:var(--mono);font-weight:700;font-size:.56rem;
  letter-spacing:.08em;text-transform:uppercase;text-align:center;line-height:1.5;
  padding:8px 10px;box-shadow:2px 3px 8px rgba(0,0,0,.5);border-radius:2px}
.rental b{display:block;font-size:.7rem;border-bottom:1px solid #1a1208;margin-bottom:2px;padding-bottom:2px}

/* 3. VHS chromatic aberration on display headings */
.hero h1,.banner h1,.section-title{text-shadow:1.5px 0 0 rgba(209,47,47,.45),-1.5px 0 0 rgba(80,200,220,.35)}

/* 4. automatic tracking drift on hero film (not just hover) */
.hero .film .frame::after{opacity:.22;animation:track 9s linear infinite}

/* 5. tape wow — subtle vertical wobble on hero image */
.hero .film img{animation:wow 7s ease-in-out infinite}
@keyframes wow{0%,100%{transform:translateY(0)}23%{transform:translateY(-1px)}47%{transform:translateY(1px)}52%{transform:translateY(0)}81%{transform:translateY(-1px)}}

/* 6. MPAA-style rating card */
.rated{background:#0a3b1e;border:2px solid #e8f5e9;max-width:680px;margin:0 auto;padding:34px 30px;text-align:center;position:relative;overflow:hidden}
.rated::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px);pointer-events:none}
.rated .badge-s{display:inline-block;border:3px solid #e8f5e9;color:#e8f5e9;font-family:var(--mono);font-weight:700;font-size:2.4rem;padding:6px 22px;margin-bottom:14px}
.rated p{font-family:var(--mono);color:#e8f5e9;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;line-height:2}

/* 7. video-store shelf genre tabs */
.genre-tab{position:absolute;bottom:14px;right:-2px;z-index:3;background:#e8e0d0;color:#1a1208;
  font-family:var(--mono);font-weight:700;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px 5px 14px;clip-path:polygon(8px 0,100% 0,100% 100%,8px 100%,0 50%)}
.genre-tab.pick{background:#f4e04d}

/* 8. TO BE CONTINUED… success screen */
.success h3.tbc{font-family:var(--slasher);font-size:clamp(1.8rem,5vw,2.6rem);font-style:italic;transform:skewX(-6deg);color:var(--bone);text-shadow:2px 0 0 rgba(209,47,47,.5)}

/* 9. footer coming attractions */
.coming{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px dashed rgba(217,164,65,.4);padding:10px 14px;margin-top:16px;display:none}
.coming b{color:var(--crimson-bright)}

/* 10. notice bar as TV lower-third */
.notice-bar{background:linear-gradient(90deg,#7d1414,#b32424 40%,#7d1414)!important;border-bottom:2px solid var(--gold);text-align:left!important;padding-left:18px!important}
.notice-bar::before{content:"★ SPECIAL ANNOUNCEMENT — ";color:var(--gold-soft);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .feature-card{display:none}
  .hero .film img,.hero .film .frame::after{animation:none}
}

/* ===================== IMPROVEMENTS: Enhanced UX & Motion ===================== */

/* IMPROVEMENT #35: Exit-intent modal styling */
.exit-modal{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease;backdrop-filter:blur(4px)}
.exit-card{background:var(--charcoal);border:1px solid rgba(217,164,65,.35);padding:40px;max-width:400px;width:90%;border-radius:12px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.8)}
.exit-card h3{font-size:1.4rem;margin-bottom:12px;color:var(--bone)}
.exit-card p{color:var(--bone-dim);margin-bottom:20px;font-size:.95rem}
.exit-form{display:flex;flex-direction:column;gap:14px}
.exit-form input[type="email"]{background:#120a0d;border:1px solid rgba(217,164,65,.25);color:var(--bone);padding:12px;border-radius:6px;font-size:16px}
.exit-form input[type="email"]:focus{outline:2px solid var(--gold);outline-offset:-1px}
.exit-form label{display:flex;align-items:center;gap:8px;color:var(--bone-dim);font-size:.9rem;cursor:pointer}
.exit-form input[type="checkbox"]{cursor:pointer}
.exit-form .btn{width:100%;text-align:center}
.exit-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--bone-dim);font-size:24px;cursor:pointer;padding:0;line-height:1}
.exit-close:hover{color:var(--gold)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* IMPROVEMENT #32: Ripple effect on buttons */
.btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:ripple-anim .6s ease-out}
@keyframes ripple-anim{to{transform:scale(4);opacity:0}}

/* IMPROVEMENT #26 & #27: Enhanced scroll animations & dynamic nav */
header{transition:background .4s ease}
.reveal{opacity:1;transform:none;will-change:auto}

/* IMPROVEMENT #28: Card border scanning effect on hover */
.card{position:relative;overflow:visible}
.card::before{content:"";position:absolute;inset:-1px;border:1px solid transparent;border-radius:8px;background:linear-gradient(90deg,transparent,rgba(217,164,65,.6),transparent);background-size:200% 100%;transition:background-position .6s ease;pointer-events:none}
.card:hover::before{background-position:200% 0}

/* IMPROVEMENT #29: Loading sequence animation */
@keyframes scan{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.loading{display:inline-block;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em}
.loading::after{content:"...";animation:scan 1.2s steps(3,end) infinite}

/* IMPROVEMENT #31: Film reel scroll indicator */
.reel-indicator{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:90;font-family:var(--mono);font-size:.7rem;color:var(--gold);writing-mode:vertical-rl;transform:rotate(180deg) translateY(-50%);opacity:.4;pointer-events:none;transition:opacity .3s}
.reel-indicator.visible{opacity:.7}
@media (max-width:768px){.reel-indicator{display:none}}

/* IMPROVEMENT #39: Trust section styling (for new "Why Choose" section) */
.trust-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px;margin:36px 0}
.trust-badge{text-align:center;padding:20px;border:1px solid rgba(217,164,65,.25);border-radius:8px;background:rgba(36,28,30,.3)}
.trust-badge strong{display:block;color:var(--gold);font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:8px}
.trust-badge p{color:var(--bone-dim);font-size:.9rem;line-height:1.5}

/* IMPROVEMENT #43: Samantha's Notes sidebar styling */
.directors-notes{position:sticky;top:80px;background:rgba(36,28,30,.4);border-left:3px solid var(--crimson-bright);padding:16px;margin:24px 0;font-style:italic;color:var(--bone-dim);font-size:.9rem;line-height:1.7}
.directors-notes::before{content:"— ";color:var(--gold);font-weight:700;margin-right:4px}

/* IMPROVEMENT #30: Sound toggle in footer */
.sound-toggle{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim);cursor:pointer;margin:0 12px 0 0}
.sound-toggle input{accent-color:var(--gold)}

/* Form enhancements for improvements #36, #37, #44 */
.form-card input::placeholder,
.form-card textarea::placeholder{color:rgba(200,189,168,.5)}
.form-card label{color:var(--gold);font-weight:500}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}

/* Express order flow styling (mobile optimization #37) */
.express-order{max-width:100%;margin:0}
.express-order .fg{margin-bottom:16px}
.express-order .form-row{grid-template-columns:1fr}

/* Product card border animation #28 */
@keyframes scan-border{0%{left:-100%}100%{left:100%}}

/* Micro-interaction feedback on form fields #30 */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(217,164,65,.15)}

/* Improved button states */
.btn:active{transform:scale(.98)}
.btn-red:active{box-shadow:0 0 22px rgba(209,47,47,.6)}

/* Product reveal animation #15 */
@keyframes glitch-reveal{0%{clip-path:polygon(0 0,100% 0,100% 20%,0 40%,0 0);opacity:.8}50%{clip-path:polygon(0 40%,100% 20%,100% 50%,0 80%,0 40%);opacity:.6}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}}

/* Newsletter signup (for #35 flow) */
.news{background:rgba(36,28,30,.3);padding:24px;border:1px dashed rgba(217,164,65,.25);border-radius:8px;margin:20px 0}
.news h3{font-size:1.1rem;margin-bottom:12px;color:var(--bone)}
.news p{color:var(--bone-dim);margin-bottom:14px;font-size:.9rem}
.news form{display:flex;gap:10px;flex-wrap:wrap}
.news input{flex:1;min-width:180px;background:#120a0d;border:1px solid rgba(217,164,65,.25);color:var(--bone);padding:10px 12px;border-radius:4px;font-size:15px}
.news input:focus{outline:2px solid var(--gold);outline-offset:-1px}
.news button{padding:10px 18px;font-size:.75rem}

@media (max-width:640px){
  .exit-card{width:95%;padding:32px 24px}
  .form-row{grid-template-columns:1fr}
  .news form{flex-direction:column}
  .news input{width:100%}
}

/* NEW IMPROVEMENTS STYLING */

/* #2: Easter egg modal */
.easter-modal .easter-content{
  background:#170a0f;
  border:2px solid #d9a441;
  padding:2rem;
  border-radius:8px;
  text-align:center;
  box-shadow:0 0 40px rgba(158,27,27,0.5);
  max-width:350px;
}
.easter-modal .easter-content button{
  background:#9e1b1b;
  color:#f5e6d3;
  padding:10px 20px;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-weight:600;
}

/* #4: Reel badges */
.reel-badge{
  display:inline-block;
  background:rgba(217,164,65,0.15);
  color:#d9a441;
  padding:4px 10px;
  border-radius:20px;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:1px;
  margin-bottom:12px;
  border:1px solid rgba(217,164,65,0.3);
}

/* #17: Scare counter badge */
.scare-counter-badge{
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%, 100%{opacity:1}
  50%{opacity:0.7}
}

/* #13: Spin wheel styling */
#spin-wheel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  padding:2rem;
  background:rgba(36,28,30,0.3);
  border:1px dashed rgba(217,164,65,0.25);
  border-radius:8px;
  margin:2rem 0;
}
#spin-wheel canvas{
  border-radius:50%;
  box-shadow:0 0 40px rgba(217,164,65,0.2);
}

/* #14: Quiz modal */
.quiz-modal{
  animation:fadeIn 0.3s ease-out;
}
.quiz-box{
  background:#170a0f;
  border:2px solid #d9a441;
  padding:2.5rem;
  border-radius:12px;
  max-width:500px;
  position:relative;
  box-shadow:0 0 50px rgba(158,27,27,0.4);
}
.quiz-box h2{
  font-family:Fraunces;
  color:var(--bone);
  margin-bottom:1.5rem;
  text-align:center;
}
.quiz-close{
  position:absolute;
  top:15px;
  right:15px;
  background:transparent;
  border:none;
  color:#d9a441;
  font-size:28px;
  cursor:pointer;
  width:32px;
  height:32px;
}
.quiz-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.quiz-options button{
  padding:15px;
  background:rgba(217,164,65,0.1);
  border:1px solid rgba(217,164,65,0.3);
  color:var(--bone);
  cursor:pointer;
  border-radius:6px;
  font-weight:500;
  transition:all 0.2s;
}
.quiz-options button:hover{
  background:rgba(217,164,65,0.2);
  border-color:#d9a441;
}
@media (max-width:640px){
  .quiz-options{
    grid-template-columns:1fr;
  }
  .quiz-box{
    padding:1.5rem;
  }
}

/* #15: Glitch effect */
[data-glitch]{
  transition:transform 0.1s ease-out;
}

/* #18: Wrong answer easter egg */
.wrong-answer{
  animation:slideDown 0.3s ease-out;
}
@keyframes slideDown{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* #7: Multi-act booking progress */
.booking-progress{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-bottom:2rem;
}
.progress-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  padding:1rem;
  border:2px solid rgba(217,164,65,0.2);
  border-radius:8px;
  background:rgba(217,164,65,0.05);
  opacity:0.5;
  transition:all 0.3s;
}
.progress-step.active{
  border-color:#d9a441;
  background:rgba(217,164,65,0.15);
  opacity:1;
}
.progress-num{
  font-family:Fraunces;
  font-size:1.5rem;
  font-weight:900;
  color:#d9a441;
}
.progress-label{
  font-size:0.85rem;
  color:var(--bone-dim);
  text-align:center;
}
@media (max-width:640px){
  .booking-progress{
    grid-template-columns:1fr;
  }
  .progress-step{
    flex-direction:row;
    justify-content:flex-start;
  }
  .progress-num{
    min-width:40px;
  }
}

/* #35: Exit-intent modal */
.exit-modal .exit-content{
  position:relative;
}
.exit-close{
  position:absolute;
  top:-10px;
  right:-10px;
  background:#9e1b1b;
  border:none;
  color:#f5e6d3;
  font-size:24px;
  cursor:pointer;
  width:40px;
  height:40px;
  border-radius:50%;
}
.exit-modal .exit-content h3{
  font-family:Fraunces;
  color:var(--bone);
  margin-bottom:0.75rem;
}
.exit-modal .exit-content p{
  color:var(--bone-dim);
  font-size:0.95rem;
  margin-bottom:1.5rem;
}
.exit-modal form input::placeholder{
  color:rgba(245,230,211,0.5);
}

/* CTA Microcopy styling */
.cta-micro{
  opacity:0.75;
  transition:opacity 0.2s;
}
.btn:hover .cta-micro{
  opacity:1;
}

/* Film reel sprocket holes (del Toro #1) */
[data-product]::before,
[data-product]::after{
  content:'';
  display:block;
  background-image:repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(217,164,65,0.1) 10px, rgba(217,164,65,0.1) 15px);
  background-size:20px 4px;
  background-position:0 0;
  height:6px;
  margin:12px 0;
}

@keyframes fadeIn{
  from{opacity:0;transform:scale(0.95)}
  to{opacity:1;transform:scale(1)}
}