/* Halloween skin for the Verdugo Counter site (a seasonal copy of
   designs/vp-02-counter). Everything is gated on html.hw, set by halloween.js. */
@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');

html.hw {
  --mustard: #ff7518;            /* pumpkin replaces mustard everywhere */
  --hw-night: #0c0a0d;
  --hw-bone: #efe6d2;
  --hw-slime: #8fd12a;
}
.hw-hero { display: none; }

/* ---------- every page ---------- */
html.hw .anno { background: var(--hw-night); color: var(--hw-bone); border-bottom: 2px solid var(--mustard); }
html.hw .anno .hw-boo { font-family: 'Creepster', cursive; font-weight: 400; color: var(--mustard); font-size: 17px; letter-spacing: 0.06em; text-transform: none; }

/* slimmer top bars */
html.hw .anno { padding: 7px 12px; }
html.hw .nav-inner { height: 62px; }
@media (max-width: 820px) {
  html.hw .nav-inner { height: 56px; }
  html.hw .nlinks { top: 56px; }
  html.hw .logo .badge { width: 36px; height: 36px; font-size: 17px; }
  html.hw .logo .name { font-size: 19px; }
  html.hw .nav-toggle { width: 40px; height: 40px; }
}
@media (max-width: 620px) {
  html.hw .anno { font-size: 11px; padding: 6px 10px; letter-spacing: 0.04em; }
  html.hw .anno .hw-boo { font-size: 14px; }
  html.hw .anno .anno-extra { display: none; }
}

/* pumpkin stem + leaf on the round V badge */
html.hw .logo .badge { position: relative; }
html.hw .logo .badge::before {
  content: ""; position: absolute; top: -8px; left: 50%; width: 6px; height: 10px;
  background: #4f7a22; border-radius: 2px 2px 1px 1px; transform: translateX(-50%) rotate(9deg);
}
html.hw .logo .badge::after {
  content: ""; position: absolute; top: -7px; left: 52%; width: 10px; height: 6px;
  background: var(--hw-slime); border-radius: 0 8px 0 8px; transform: rotate(-14deg);
}

/* dangling spider under the nav (z -1 keeps it beneath the mobile menu) */
.hw-spider { position: absolute; top: 100%; left: 61%; z-index: -1; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.hw-spider i { display: block; width: 1px; height: 46px; background: linear-gradient(rgba(239,230,210,0.15), rgba(239,230,210,0.8)); animation: hw-thread 5.5s ease-in-out infinite; }
.hw-spider svg { width: 30px; height: 30px; margin-top: -2px; animation: hw-wiggle 5.5s ease-in-out infinite; filter: drop-shadow(0 0 2px rgba(255,117,24,0.9)) drop-shadow(0 0 8px rgba(255,117,24,0.45)); }
@keyframes hw-thread { 0%, 100% { height: 46px; } 45% { height: 118px; } 60% { height: 104px; } }
@keyframes hw-wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }
@media (max-width: 820px) { .hw-spider { left: auto; right: 84px; } }

.hw-web { position: absolute; pointer-events: none; z-index: 3; opacity: 0.7; }
.hw-web--tl { top: 0; left: 0; }
.hw-web--tr { top: 0; right: 0; transform: scaleX(-1); }
html.hw footer { position: relative; }

.hw-drip { position: absolute; left: 0; right: 0; top: 0; height: 34px; pointer-events: none; z-index: 2; }
.hw-drip svg { display: block; width: 100%; height: 100%; }

/* ---------- homepage: the shop after dark ---------- */
html.hw-home .hero { display: none; }
html.hw-home .hw-hero { display: block; position: relative; background: var(--hw-night); overflow: hidden; }
.hw-banner { position: relative; overflow: hidden; container-type: inline-size; }
/* full-bleed, but capped shorter than the viewport; crops a little sky/table */
.hw-banner img { display: block; width: 100%; height: min(100cqw * 948 / 1659, 100vh - 96px); object-fit: cover; object-position: 50% 35%; }

/* candle flicker over the jack-o'-lantern faces. The layer is sized like the
   uncropped image and shifted by the same 35% crop, so the % positions below
   are positions in the original 1659×948 banner. */
.hw-flames { position: absolute; left: 0; width: 100%; aspect-ratio: 1659 / 948; pointer-events: none;
  top: calc((min(100cqw * 948 / 1659, 100vh - 96px) - 100cqw * 948 / 1659) * 0.35); }
/* phones: a taller 3:2 crop so the banner isn't a thin strip. The image now
   overflows sideways instead, so the overlay is widened and shifted to match. */
@media (max-width: 620px) {
  .hw-banner img { height: calc(100cqw / 1.5); object-position: 45% 35%; }
  .hw-flames { top: 0; width: calc(100cqw * 1659 / 948 / 1.5); left: calc((100cqw - 100cqw * 1659 / 948 / 1.5) * 0.45); }
}
.hw-flame { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1.15; transform: translate(-50%, -50%);
  border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,214,120,0.7), rgba(255,140,30,0.35) 45%, rgba(255,90,10,0) 100%);
  animation: hw-flicker var(--d) ease-in-out var(--delay) infinite; }
/* steam curling up off the pie and the pulled slice */
.hw-steam { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 0.42; transform-origin: 50% 100%;
  border-radius: 50%; mix-blend-mode: screen; filter: blur(7px); opacity: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 60%, rgba(255,246,232,0.55), rgba(255,236,214,0.18) 55%, transparent 75%);
  animation: hw-steam var(--d) ease-out var(--delay) infinite; }
@keyframes hw-steam {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.5, 0.6); }
  18% { opacity: 0.85; }
  50% { transform: translate(calc(-50% + var(--sx)), -100%) scale(0.95, 1.2) rotate(4deg); }
  70% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(calc(-50% - var(--sx)), -190%) scale(1.7, 1.6) rotate(-6deg); }
}
/* gentle candle breathing — small swings, one soft dip per cycle */
@keyframes hw-flicker {
  0%, 100% { opacity: 0.4; } 18% { opacity: 0.52; } 34% { opacity: 0.44; } 52% { opacity: 0.56; }
  60% { opacity: 0.32; } 68% { opacity: 0.5; } 84% { opacity: 0.46; }
}
.hw-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; pointer-events: none;
  background: linear-gradient(0deg, var(--hw-night), transparent); }

.hw-strip { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap; padding-top: 30px; padding-bottom: 44px; }
.hw-strip h1 { font-family: 'Creepster', cursive; font-weight: 400; color: var(--mustard); font-size: clamp(48px, 7.4vw, 96px); line-height: 0.9; letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(255,117,24,0.5), 0 0 60px rgba(255,80,10,0.3); animation: hw-glow 3.6s ease-in-out infinite; }
.hw-strip h1 span { color: var(--hw-bone); text-shadow: none; }
.hw-strip p { color: rgba(239,230,210,0.82); font-size: 17px; max-width: 40ch; margin-top: 10px; font-weight: 500; }
.hw-strip .btnrow { flex-shrink: 0; }
@keyframes hw-glow { 0%, 100% { text-shadow: 0 0 18px rgba(255,117,24,0.5), 0 0 60px rgba(255,80,10,0.3); } 50% { text-shadow: 0 0 26px rgba(255,140,40,0.8), 0 0 90px rgba(255,80,10,0.5); } }

.hw-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: 1; pointer-events: none; overflow: hidden; }
.hw-fog::before, .hw-fog::after {
  content: ""; position: absolute; inset: 0 -50% 0 -50%;
  background:
    radial-gradient(28% 45% at 20% 75%, rgba(214,206,196,0.12), transparent 70%),
    radial-gradient(22% 38% at 55% 85%, rgba(214,206,196,0.09), transparent 70%),
    radial-gradient(30% 50% at 85% 78%, rgba(214,206,196,0.11), transparent 70%);
  animation: hw-fog 38s linear infinite;
}
.hw-fog::after { animation-duration: 57s; animation-direction: reverse; opacity: 0.8; top: 20%; }
@keyframes hw-fog { from { transform: translateX(0); } to { transform: translateX(33%); } }

.hw-bats { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 2; pointer-events: none; overflow: hidden; }
.hw-bat { position: absolute; left: -8%; top: var(--y); animation: hw-fly var(--dur) linear var(--delay) infinite; }
.hw-bat > span { display: block; animation: hw-bob 1.9s ease-in-out infinite alternate; }
.hw-bat svg { display: block; width: var(--w); fill: #120806; animation: hw-flap var(--flap) ease-in-out infinite alternate; }
@keyframes hw-fly { from { left: -8%; } to { left: 108%; } }
@keyframes hw-bob { from { transform: translateY(-14px); } to { transform: translateY(16px); } }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }

html.hw-home body.tilebg {
  background-color: #151210;
  background-image:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,117,24,0.07), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Crect width='120' height='60' fill='%23191614'/%3E%3Cg stroke='%230c0a09' stroke-width='2.4'%3E%3Cline x1='0' y1='1.2' x2='120' y2='1.2'/%3E%3Cline x1='0' y1='30' x2='120' y2='30'/%3E%3Cline x1='0' y1='58.8' x2='120' y2='58.8'/%3E%3Cline x1='60' y1='0' x2='60' y2='30'/%3E%3Cline x1='30' y1='30' x2='30' y2='60'/%3E%3Cline x1='90' y1='30' x2='90' y2='60'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='0.8' opacity='0.05'%3E%3Cline x1='0' y1='2.6' x2='120' y2='2.6'/%3E%3Cline x1='0' y1='31.4' x2='120' y2='31.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 120px 60px;
}
/* lantern vignette — sits under the sticky nav */
html.hw-home body::after {
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 58%, rgba(5,3,2,0.5) 100%);
}

html.hw-home .ticker .hw-tk { font-style: normal; font-family: 'Creepster', cursive; color: var(--mustard); letter-spacing: 0.06em; }
html.hw-home .board, html.hw-home .cta { position: relative; overflow: hidden; }

/* menu board moon */
.hw-moon {
  position: absolute; top: 46px; right: 6%; width: 150px; height: 150px; border-radius: 50%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 34% 38%, rgba(120,50,0,0.12) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 64%, rgba(120,50,0,0.1) 0 13%, transparent 14%),
    radial-gradient(circle at 66% 30%, rgba(120,50,0,0.09) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 40%, #ffe6a8, #f3a845 75%);
  box-shadow: 0 0 60px 14px rgba(255,170,70,0.22), 0 0 170px 50px rgba(255,117,24,0.12);
  opacity: 0.85;
}
html.hw-home .board .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) { .hw-moon { width: 64px; height: 64px; top: 40px; right: 14px; opacity: 0.7; } }

/* headings that used to sit on white tile */
html.hw-home .room h2, html.hw-home .rev-head h2, html.hw-home .visit-head h2 { color: var(--hw-bone) !important; }
html.hw-home .rev-head .marker, html.hw-home .visit-head .marker, html.hw-home .room .marker { color: var(--mustard) !important; }
html.hw-home .room-photo { border-color: #2c241d; }

/* reviews: parchment notes pinned with orange tape */
html.hw-home .rev-card { background: #efe4cb; border-color: #cdb991; box-shadow: 0 22px 40px -18px rgba(0,0,0,0.9); }
html.hw-home .rev-card .tape { background: rgba(255,117,24,0.72); }
html.hw-home .rev-card .who { border-top-color: #d5c5a0; }
html.hw-home .rev-card .stars .off { color: #cbb993; }
html.hw-home .rev-agg { border: 1px solid rgba(255,117,24,0.4); }

/* visit: night map */
html.hw-home .map-frame { border-color: #2c241d; background: #1c1916; }
html.hw-home .map-frame iframe { filter: invert(0.92) hue-rotate(180deg) saturate(0.4) brightness(0.9) sepia(0.25); }
html.hw-home .visit-card { position: relative; border: 1px solid rgba(255,117,24,0.3); }

/* CTA: blood red with night goo dripping in */
html.hw-home .cta { padding-top: 104px; }
html.hw-home .cta h2 { font-family: 'Creepster', cursive; font-weight: 400; text-transform: none; letter-spacing: 0.03em; text-shadow: 0 6px 0 rgba(0,0,0,0.25); }
html.hw-home .cta .marker { color: var(--hw-bone); }

@media (prefers-reduced-motion: reduce) {
  .hw-bats { display: none; }
  .hw-flame { animation: none !important; opacity: 0.45; }
  .hw-steam { display: none; }
  .hw-spider i, .hw-spider svg, .hw-fog::before, .hw-fog::after, .hw-strip h1 { animation: none !important; }
}