/* ============================================================
   DEER PARK SUSHI — HALLOWEEN / DÍA DE LOS MUERTOS SEASON LAYER
   Loads AFTER the brand CSS and re-skins it for spooky season.
   Japanese · Mexican · Muertos — pumpkin, purple, marigold.
   ============================================================ */

/* ---- 1. PALETTE OVERRIDE (cascades through the whole site) ---- */
:root{
  --red:        #FF7518;   /* primary accent → pumpkin orange */
  --red-dark:   #C4560F;
  --red-glow:   rgba(255,117,24,0.28);
  --off-white:  #F4ECFF;
  --dark:       #0A0710;   /* purple-black night */
  --dark-2:     #140C20;
  --dark-3:     #1C1330;
  --border:     rgba(255,255,255,0.07);
  --border-red: rgba(255,117,24,0.30);
  --text-muted: #9A8FB0;

  /* extra seasonal tokens */
  --hw-purple:  #9D4EDD;
  --hw-purple-2:#6A1FB0;
  --hw-green:   #8BE24A;
  --hw-gold:    #FFC43D;
  --hw-blood:   #B0000C;
}

body{
  background:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(106,31,176,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(255,117,24,0.10) 0%, transparent 60%),
    var(--dark);
}

/* keep the brand logo glowing red but give it a spooky halo */
.nav-logo-img{ filter: drop-shadow(0 0 10px rgba(255,117,24,0.35)); }

/* ---- 2. ANNOUNCEMENT BAR ---- */
.hw-bar{
  position:fixed; top:0; left:0; right:0; height:38px; z-index:300;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg,#4A1080 0%, #C4560F 50%, #4A1080 100%);
  border-bottom:1px solid rgba(255,196,61,0.55);
  overflow:hidden; white-space:nowrap;
  box-shadow:0 2px 18px rgba(0,0,0,0.5);
}
.hw-bar .hw-track{
  display:inline-flex; align-items:center; gap:2.6rem;
  font-family:var(--font-bebas,'BebasKai',sans-serif);
  letter-spacing:0.22em; text-transform:uppercase; font-size:0.72rem;
  color:#FFF3E0; animation:hw-marquee 26s linear infinite;
}
.hw-bar .hw-track span{ display:inline-flex; align-items:center; gap:.5rem; }
.hw-bar b{ color:var(--hw-gold); font-weight:400; }
@keyframes hw-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* push the fixed nav below the bar */
nav{ top:38px !important; }
nav.scrolled{ border-bottom:1px solid var(--border-red); }

/* ---- 3. HERO: turn the red glow into a haunted purple/orange night ---- */
.hero-bg::before{
  background:
    radial-gradient(circle at 82% 22%, rgba(255,196,61,0.28) 0%, rgba(255,196,61,0.06) 12%, transparent 26%), /* harvest moon */
    radial-gradient(ellipse 70% 80% at 55% 42%, rgba(106,31,176,0.42) 0%, transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(255,117,24,0.20) 0%, transparent 55%),
    linear-gradient(180deg,#05030A 0%, #0A0710 55%, #000 100%) !important;
}
.hero-bg::after{
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 80px,
      rgba(157,78,221,0.035) 80px, rgba(157,78,221,0.035) 81px) !important;
}
/* the MEXICO highlight → marigold gradient text for Muertos */
.hero-mexico, .highlight, .highlight-red, .story-text h2 .highlight-red{
  color:var(--hw-gold) !important;
  text-shadow:0 0 26px rgba(255,196,61,0.45);
}
.hero-japan{ text-shadow:0 0 26px rgba(157,78,221,0.4); }

/* section labels / accents already use var(--red) → now pumpkin. Add glow. */
.section-label{ text-shadow:0 0 16px rgba(255,117,24,0.4); }

/* buttons inherit var(--red); add a candy-glow on primary */
.btn-primary{ box-shadow:0 6px 22px rgba(255,117,24,0.30); }
.btn-primary:hover{ box-shadow:0 8px 30px rgba(255,117,24,0.45); }

/* ---- 4. COBWEB CORNERS ---- */
.hw-web{ position:fixed; z-index:150; pointer-events:none; width:190px; height:190px; opacity:0.5; }
.hw-web.tl{ top:38px; left:0; }
.hw-web.tr{ top:38px; right:0; transform:scaleX(-1); }
.hw-web path, .hw-web line{ stroke:rgba(244,236,255,0.55); stroke-width:1.1; fill:none; }

/* ---- 5. DRIFTING BATS ---- */
.hw-bat{
  position:fixed; z-index:140; pointer-events:none; will-change:transform;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6));
  animation:hw-fly linear infinite;
}
.hw-bat svg{ display:block; }
.hw-bat .wing{ transform-origin:center; animation:hw-flap .38s ease-in-out infinite alternate; }
@keyframes hw-fly{
  0%{   transform:translate(-14vw, 0)     rotate(-5deg); }
  50%{  transform:translate(48vw, -26px)  rotate(5deg);  }
  100%{ transform:translate(114vw, 4px)   rotate(-5deg); }
}
@keyframes hw-flap{ from{ transform:scaleY(1); } to{ transform:scaleY(0.55); } }

/* ---- 6. HANGING SPIDER ---- */
.hw-spider{ position:fixed; top:38px; z-index:150; pointer-events:none; left:16%;
  display:flex; flex-direction:column; align-items:center; animation:hw-dangle 5.5s ease-in-out infinite; }
.hw-spider .thread{ width:1px; height:120px; background:rgba(244,236,255,0.4); }
@keyframes hw-dangle{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(26px); } }

/* ---- 7. BOTTOM FOG ---- */
.hw-fog{ position:fixed; left:0; right:0; bottom:0; height:190px; z-index:118; pointer-events:none;
  background:linear-gradient(0deg, rgba(157,78,221,0.22) 0%, rgba(157,78,221,0.05) 55%, transparent 100%); }

/* ---- 7b. GRAVEYARD (foreground silhouette pinned to the bottom) ---- */
.hw-yard{ position:fixed; left:0; right:0; bottom:0; width:100%; height:210px; z-index:125;
  pointer-events:none; }
.hw-yard svg{ display:block; width:100%; height:100%; }
/* jack-o'-lantern faces flicker like candlelight */
.hw-flicker{ animation:hw-flicker 2.6s ease-in-out infinite; transform-origin:center; }
@keyframes hw-flicker{
  0%,100%{ opacity:1;   filter:drop-shadow(0 0 6px rgba(255,180,40,0.9)); }
  40%{     opacity:0.7; filter:drop-shadow(0 0 3px rgba(255,180,40,0.6)); }
  55%{     opacity:0.95;filter:drop-shadow(0 0 8px rgba(255,180,40,1)); }
  70%{     opacity:0.6; filter:drop-shadow(0 0 2px rgba(255,180,40,0.5)); }
}
/* leave room so the footer clears the graveyard */
body{ padding-bottom:150px; }
footer{ position:relative; z-index:126; }

/* ---- 7c. FLOATING GHOSTS (rise + fade) ---- */
.hw-ghost{ position:fixed; z-index:135; pointer-events:none; bottom:-60px; will-change:transform,opacity;
  filter:drop-shadow(0 0 10px rgba(244,236,255,0.35)); animation:hw-ghost linear infinite; }
@keyframes hw-ghost{
  0%{   transform:translate(0,0) scale(0.9);      opacity:0; }
  12%{  opacity:0.92; }
  85%{  opacity:0.85; }
  100%{ transform:translate(28px,-96vh) scale(1.06); opacity:0; }
}

/* ---- 7d. BOBBING SKULLS (float + rock) ---- */
.hw-skull{ position:fixed; z-index:136; pointer-events:none; will-change:transform;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,0.6)); animation:hw-skull 6s ease-in-out infinite; }
@keyframes hw-skull{
  0%,100%{ transform:translateY(0) rotate(-12deg); }
  50%{     transform:translateY(-20px) rotate(12deg); }
}

/* ---- 7e. CRAWLING SPIDER (walks across the top) ---- */
.hw-crawler{ position:fixed; top:52px; z-index:150; pointer-events:none;
  animation:hw-crawl 28s linear infinite; }
@keyframes hw-crawl{
  0%{ transform:translateX(-8vw) rotate(0deg); }
  50%{ transform:translateX(52vw) rotate(4deg); }
  100%{ transform:translateX(112vw) rotate(0deg); }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .hw-bar .hw-track, .hw-bat, .hw-bat .wing, .hw-spider,
  .hw-ghost, .hw-skull, .hw-crawler, .hw-flicker{ animation:none !important; }
  .hw-ghost{ opacity:0.7 !important; }
}

/* ---- 8. mobile tuning ---- */
@media (max-width:640px){
  .hw-bar{ height:34px; }
  .hw-bar .hw-track{ font-size:0.62rem; letter-spacing:0.16em; }
  nav{ top:34px !important; }
  .hw-web{ width:120px; height:120px; opacity:0.4; }
  .hw-web.tl,.hw-web.tr{ top:34px; }
  .hw-spider, .hw-crawler{ display:none; }
  .hw-yard{ height:150px; }
  body{ padding-bottom:110px; }
}