/* The Midnight Tide: the Halloween edition of jennybjewelry.com.
   This file loads after each page's own styles and only applies while <html> has the "halloween" class,
   so the regular site is untouched. Remove the class (or the <link>) and the page is back to normal.
   Palette: Abyss #0a0e14, Deep Water #10202a, Moonlight #e8e4d8, Phosphor #6fd8c9 (the glow), Ember #d9783c, Fog #8c9aa3. */

html.halloween {
  --bg: #0a0e14;
  --bg-2: #0e161d;
  --surface: #10202a;
  --peach: #d9783c;
  --apricot: #d9783c;
  --apricot-text: #e2946a;   /* ember, lifted so small text stays readable on the dark ground */
  --accent: #6fd8c9;         /* phosphor: headline accent, moon and waves */
  --azure: #6fd8c9;
  --azure-deep: #6fd8c9;
  --ink: #e8e4d8;
  --muted: #8c9aa3;
  --line: #22363f;
  --on-azure: #e8e4d8;
  --phos: #6fd8c9;
  --ember: #d9783c;
  --phos-glow: rgba(111, 216, 201, .5);
  --frog: #8fe36a;           /* Ribbit's green, glowing like the rest */
  color-scheme: dark;
}
html.halloween body { background: var(--bg); color: var(--ink); }
html.halloween ::selection { background: rgba(111, 216, 201, .35); color: #fff; }

/* Film grain over everything (a fixed, repeating noise tile; no motion) */
html.halloween body::after {
  content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ---------- Header ---------- */
html.halloween .site-header { background: rgba(10, 14, 20, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
html.halloween .site-header.scrolled { border-color: rgba(111, 216, 201, .22); }
html.halloween .brand img, html.halloween .foot-brand { filter: brightness(0) invert(1) opacity(.9); }   /* the peach logo, in moonlight */
html.halloween .brand-sub { color: var(--phos); opacity: .8; }
html.halloween .section-nav a { color: var(--ink); }
html.halloween .section-nav a:hover, html.halloween .section-nav a[aria-current="page"] { color: var(--phos); text-shadow: 0 0 12px var(--phos-glow); }

/* ---------- Buttons: ember lanterns, phosphor outlines ---------- */
html.halloween .btn { background: var(--ember); border-color: var(--ember); color: #0a0e14; box-shadow: 0 8px 26px -10px rgba(217, 120, 60, .7); transition: background-color .2s, color .2s, border-color .2s, box-shadow .35s; }
html.halloween .btn:hover { background: #e78c51; border-color: #e78c51; box-shadow: 0 0 30px -4px rgba(217, 120, 60, .6); }
html.halloween .btn.ghost { background: transparent; color: var(--phos); border-color: rgba(111, 216, 201, .55); box-shadow: none; }
html.halloween .btn.ghost:hover { background: var(--phos); border-color: var(--phos); color: #0a0e14; box-shadow: 0 0 26px -4px var(--phos-glow); }
html.halloween .btn.peach { background: var(--ember); border-color: var(--ember); color: #0a0e14; }
html.halloween .btn.peach:hover { background: #e78c51; border-color: #e78c51; }
html.halloween .band-azure .btn.ghost { color: var(--phos); border-color: rgba(111, 216, 201, .55); }
html.halloween .band-azure .btn.ghost:hover { background: var(--phos); border-color: var(--phos); color: #0a0e14; }
html.halloween .skip { color: #0a0e14; }
html.halloween .opt .go { color: #0a0e14; }
html.halloween .opt:hover .go { background: #8fe3d7; }
html.halloween .icon-btn:hover { color: #0a0e14; }
html.halloween .text-link { color: var(--phos); }
html.halloween .text-link:hover { color: var(--ink); }
html.halloween .play-badge { background: rgba(10, 14, 20, .85); color: var(--phos); box-shadow: 0 0 18px rgba(111, 216, 201, .35), 0 0 0 1px rgba(111, 216, 201, .35); }

/* ---------- Type ---------- */
html.halloween h1, html.halloween h2, html.halloween h3 { color: var(--ink); }
html.halloween h2 { letter-spacing: .01em; }
html.halloween h1 em, html.halloween h2 em { color: var(--phos); }
html.halloween .label, html.halloween h1 .eyebrow { color: var(--phos); opacity: .8; }

/* ---------- Photos: moonlit until they come into view, then they warm to full color ---------- */
html.halloween :is(.photo, .arch:not(.about-art), .clip-card .ph, .arrive-photo, .rail .ph) img { filter: grayscale(.45) brightness(.78) contrast(1.05); transition: filter .9s ease, transform .6s var(--ease); }
html.halloween :is(.photo, .arch:not(.about-art), .clip-card .ph, .arrive-photo, .rail .ph).mt-lit img { filter: none; }
html.halloween .about-art img { filter: none; }   /* Jenny's photo shows at full color, always (the frog lives there) */
html.halloween .hero .arch img { filter: none; }   /* the hero photo shows at full color the moment it loads: it's the first thing people wait for */
html.halloween .arch::after, html.halloween .host-photo::after { border-color: rgba(111, 216, 201, .35); }
html.halloween .combo-photo img { filter: none; box-shadow: 0 0 70px -12px rgba(217, 120, 60, .45); }   /* the Dream Bar stays lit, warm as a lantern */
html.halloween .gallery-track .ph, html.halloween .rail .ph, html.halloween .clip-card .ph, html.halloween .photo { background: #0e161d; }

/* ---------- Bands: deep water, with a tide line glowing along the top edge ---------- */
html.halloween .band { background: var(--surface); }
html.halloween .band-azure { background: #0d1a22; color: var(--ink); }
html.halloween .band-azure h2, html.halloween .band-azure .lede, html.halloween .band-azure .label, html.halloween .band-azure p, html.halloween .band-azure address { color: var(--ink); }
html.halloween .band-azure .lede, html.halloween .band-azure p:not(.lede):not(h3) { color: var(--muted); }
html.halloween .band-azure h3, html.halloween .band-azure address, html.halloween .band-azure .drive li, html.halloween .band-azure .arrive-steps li { color: var(--ink); }
html.halloween .band-azure .label { color: var(--phos); }
html.halloween .band-azure .text-link { color: var(--phos); }
html.halloween .band-azure .text-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
html.halloween .arrive-steps li::before { color: var(--phos); }
html.halloween .arrive, html.halloween .visit-info { border-color: rgba(111, 216, 201, .25); }
html.halloween .band, html.halloween .band-azure, html.halloween footer { position: relative; }
html.halloween .band > .wrap, html.halloween .band-azure > .wrap, html.halloween footer > .wrap { position: relative; z-index: 1; }
html.halloween :is(.band, .band-azure, footer)::before {
  content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 16px; pointer-events: none; opacity: .6; z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' viewBox='0 0 96 16'%3E%3Cpath d='M0 8c8-5 16-5 24 0s16 5 24 0 16-5 24 0 16 5 24 0' fill='none' stroke='%236fd8c9' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 96px 16px;
  filter: drop-shadow(0 0 4px rgba(111, 216, 201, .7));
}
/* The moon, reflected in the water of the darker bands */
html.halloween .band-azure::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 70% at 86% 0%, rgba(111, 216, 201, .14), rgba(111, 216, 201, 0) 70%); }

/* ---------- Footer ---------- */
html.halloween footer { background: var(--bg); color: var(--ink); padding-bottom: 150px; }
@media (max-width: 600px) { html.halloween footer { padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)); } }
html.halloween .foot .label { color: var(--phos); }
html.halloween .foot li a:hover, html.halloween .legal a:hover { color: var(--phos); }
html.halloween .legal { color: var(--muted); border-top-color: rgba(111, 216, 201, .15); }

/* ---------- Popups and forms ---------- */
html.halloween .modal { box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(111, 216, 201, .15); }
html.halloween .modal::backdrop { background: rgba(2, 4, 8, .7); }
html.halloween .modal-x:hover { border-color: var(--phos); color: var(--phos); }
html.halloween .lightbox-btn { background: rgba(10, 14, 20, .6); border-color: rgba(111, 216, 201, .4); color: var(--ink); }
html.halloween .lightbox-btn:hover { background: rgba(10, 14, 20, .9); }
html.halloween .lightbox-stage img, html.halloween .lightbox-stage video { background: #0a0e14; }
html.halloween .form-status { color: var(--apricot-text); }

/* ---------- Floating "Text us": a lantern, swaying a little ---------- */
html.halloween .text-us-fab { background: #10202a; color: var(--ink); border: 1px solid rgba(111, 216, 201, .35); box-shadow: 0 8px 24px -6px rgba(217, 120, 60, .55), inset 0 0 18px -8px rgba(217, 120, 60, .6); transform-origin: 50% -40px; }
html.halloween .text-us-fab:hover { box-shadow: 0 0 32px -4px rgba(217, 120, 60, .7), inset 0 0 18px -8px rgba(217, 120, 60, .6); }
html.halloween .text-us-fab svg { color: var(--ember); filter: drop-shadow(0 0 5px rgba(217, 120, 60, .8)); }

/* ---------- The welcome offer card ---------- */
html.halloween .promo { background: #0e161d; border-color: rgba(111, 216, 201, .25); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(111, 216, 201, .08); }
html.halloween .promo h2 em { color: var(--phos); }
html.halloween .promo-sun { filter: drop-shadow(0 0 4px rgba(111, 216, 201, .6)); }   /* the same painted sun as the dividers (see the script) */

/* ---------- The sun-and-waves dividers keep the logo's sun (your three sun images, painted phosphor through masks, with the same
   scroll variables as the regular site). Once the rays are fully out, bats fly from the sun; they fly again each time it rises. ---------- */
html.halloween .sunrise .sun { filter: drop-shadow(0 0 5px rgba(111, 216, 201, .65)); }
html.halloween .sunrise .sun img, html.halloween .promo-sun img { visibility: hidden; }   /* the peach originals keep the layout; the painted copies sit on top */
html.halloween .mt-sun-layer { position: absolute; inset: 0; background: var(--phos); -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
html.halloween .mt-sun-core { position: absolute; inset: 0; clip-path: inset(0 0 4% 0); }   /* the sun stays hidden below the horizon while it rises */
@media (prefers-reduced-motion: no-preference) {
  html.halloween .js .sunrise .mt-sun-horizon { transform: scaleX(var(--h, 1)); opacity: clamp(0, calc(var(--h, 1) * 3), 1); }
  html.halloween .js .sunrise .mt-sun-core .mt-sun-layer { transform: translateY(calc((1 - var(--s, 1)) * 48%)); }
  html.halloween .js .sunrise .mt-sun-rays { opacity: var(--r, 1); transform: scale(calc(.55 + .45 * var(--r, 1))); transform-origin: 50% 97%; }
}
html.halloween .sunrise svg path { filter: drop-shadow(0 0 3px rgba(111, 216, 201, .7)); }
/* Bats: a flock on a layer over the whole page. They leave the sun, cross toward the middle of the screen, wheel around the page
   and fly off its edge (the script draws each flight path for the screen it is on, and the flight itself). */
html.halloween .mt-batfield { position: fixed; inset: 0; z-index: 31; pointer-events: none; overflow: visible; }   /* over the header too: the whole page is their sky */
html.halloween .mt-batfield .mt-bat { position: absolute; left: 0; top: 0; opacity: 0; overflow: visible; offset-anchor: center; offset-rotate: auto 90deg; filter: drop-shadow(0 0 6px rgba(111, 216, 201, .7)); }
html.halloween :is(.mt-bat, .mt-greeting-bat) .mt-wing { transform-box: fill-box; transform-origin: center; }
html.halloween :is(.mt-bat, .mt-greeting-bat) path { fill: rgba(111, 216, 201, .3); stroke: var(--phos); stroke-width: 1.3; stroke-linejoin: round; }
html.halloween :is(.mt-bat, .mt-greeting-bat) .mt-bat-body { fill: var(--phos); stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  html.halloween .mt-bat .mt-wing { animation: mt-flap .19s ease-in-out infinite alternate; }
  html.halloween .mt-greeting-bat .mt-wing { animation: mt-flap .19s ease-in-out 28 alternate; }   /* a few seconds of flapping, then they settle */
  html.halloween .mt-greeting-text strong { animation: mt-greet-glow 2.4s ease-out both; }
}
@keyframes mt-flap { from { transform: scaleY(1); } to { transform: scaleY(.4); } }
@keyframes mt-greet-glow { 0% { opacity: .35; text-shadow: 0 0 0 rgba(111, 216, 201, 0); } 45% { opacity: 1; text-shadow: 0 0 24px rgba(111, 216, 201, .95), 0 0 64px rgba(111, 216, 201, .5); } 100% { opacity: 1; text-shadow: 0 0 14px rgba(111, 216, 201, .55), 0 0 36px rgba(111, 216, 201, .25); } }

/* ---------- The witch: on computers, a little witch on her broom trails the mouse (the script moves her; phones have no cursor) ---------- */
html.halloween .mt-witch { position: fixed; left: 0; top: 0; z-index: 32; width: 58px; height: 56px; margin: -28px 0 0 -29px; pointer-events: none; opacity: 0; transition: opacity .5s ease; will-change: transform; }
html.halloween .mt-witch.mt-here { opacity: 1; }
html.halloween .mt-witch svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 7px rgba(111, 216, 201, .8)) drop-shadow(0 0 20px rgba(111, 216, 201, .3)); }
html.halloween .mt-witch .wbody { fill: rgba(111, 216, 201, .13); stroke: var(--phos); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
html.halloween .mt-witch .wline { fill: none; stroke: var(--phos); stroke-width: 2.2; stroke-linecap: round; }
html.halloween .mt-witch .wember { fill: #e2946a; }
html.halloween .mt-witch .weye { fill: #0a0e14; opacity: .92; }
html.halloween .mt-witch .wshine { fill: #eafffb; }
html.halloween .mt-witch .wcheek { fill: rgba(111, 216, 201, .28); }
/* Her chat bubble: sits over her hat, a line at a time, for a few seconds */
html.halloween .mt-say { position: fixed; left: 0; top: 0; z-index: 33; width: max-content; max-width: min(300px, calc(100vw - 24px)); padding: 7px 12px 7px 10px; border-radius: 14px; border: 1px solid rgba(111, 216, 201, .45);
  background: rgba(13, 24, 31, .94); color: var(--ink); font: 400 .84rem/1.35 var(--body); letter-spacing: .01em; white-space: normal; text-align: left; pointer-events: none;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .9), 0 0 18px -4px rgba(111, 216, 201, .35); opacity: 0; transform-origin: 50% 100%; will-change: transform;
  display: inline-flex; align-items: center; gap: 7px; transition: opacity .25s ease; }
html.halloween .mt-say::after { content: ""; position: absolute; left: var(--tail, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: rgba(13, 24, 31, .94); border-right: 1px solid rgba(111, 216, 201, .45); border-bottom: 1px solid rgba(111, 216, 201, .45); transform: rotate(45deg); }
html.halloween .mt-say.mt-open { opacity: 1; }
html.halloween .mt-say.mt-below::after { bottom: auto; top: -6px; transform: rotate(-135deg); }   /* when she is near the top of the screen, the bubble sits under her */
html.halloween .mt-say svg { width: 15px; height: 15px; flex: none; color: var(--phos); filter: drop-shadow(0 0 4px rgba(111, 216, 201, .8)); }
html.halloween .mt-spark { position: fixed; left: 0; top: 0; z-index: 31; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; background: #eafffb; box-shadow: 0 0 6px rgba(111, 216, 201, .9), 0 0 14px rgba(111, 216, 201, .5); animation: mt-spark .9s ease-out forwards; }
@keyframes mt-spark { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: translateY(10px) scale(.2); } }

/* ---------- The giveaway frog: a tiny frog wearing chains, on the water of a sun-and-waves divider (home page). Tap him. ---------- */
html.halloween .sunrise { position: relative; }
/* On the About photo he peeks out of the top right corner, from behind the arch */
html.halloween .about-figure { position: relative; }
html.halloween .about-figure .about-art { position: relative; z-index: 1; }
html.halloween .about-figure .mt-frog { left: auto; right: -12px; top: 3%; width: 54px; height: 62px; z-index: 0; transform: rotate(-22deg); transform-origin: 50% 100%; }
html.halloween .about-figure .mt-frog.mt-hop { animation: mt-hop-tilt .7s cubic-bezier(.3, .8, .3, 1); }
@keyframes mt-hop-tilt { 30% { transform: rotate(-22deg) translateY(-16px); } 60% { transform: rotate(-22deg); } 80% { transform: rotate(-22deg) translateY(-6px); } 100% { transform: rotate(-22deg); } }
@media (max-width: 899px) { html.halloween .about-figure .mt-frog { right: -10px; width: 46px; height: 53px; } }
html.halloween .mt-frog-tap { position: absolute; right: -22px; top: 0; width: 76px; height: 86px; z-index: 3; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (max-width: 899px) { html.halloween .mt-frog-tap { right: -18px; width: 68px; height: 76px; } }
html.halloween .mt-frog { position: absolute; left: calc(50% + 14px); top: -12px; width: 44px; height: 50px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2; filter: drop-shadow(0 0 6px rgba(143, 227, 106, .75)); }   /* over the sun's right half, head out past its edge */
html.halloween .mt-frog svg { display: block; width: 100%; height: 100%; overflow: visible; }
html.halloween :is(.mt-frog, .mt-found-frog) .fbody { fill: rgba(143, 227, 106, .14); stroke: var(--frog); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
html.halloween :is(.mt-frog, .mt-found-frog) .fhat { fill: rgba(111, 216, 201, .13); stroke: var(--phos); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }   /* the witch's hat keeps her phosphor */
html.halloween :is(.mt-frog, .mt-found-frog) .fline { fill: none; stroke: var(--frog); stroke-width: 2.2; stroke-linecap: round; }
html.halloween :is(.mt-frog, .mt-found-frog) .feye { fill: #0a0e14; opacity: .92; }
html.halloween :is(.mt-frog, .mt-found-frog) .fshine { fill: #eafffb; }
html.halloween :is(.mt-frog, .mt-found-frog) .fcheek { fill: rgba(143, 227, 106, .28); }
html.halloween :is(.mt-frog, .mt-found-frog) .fember { fill: #e2946a; }
html.halloween :is(.mt-frog, .mt-found-frog) .fchain { fill: none; stroke: #e2946a; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .1 4; }
html.halloween :is(.mt-frog, .mt-found-frog) .flid { transform-box: fill-box; transform-origin: center; }
html.halloween :is(.mt-frog, .mt-found-frog) .flidline { fill: none; stroke: var(--frog); stroke-width: 1.6; stroke-linecap: round; }
html.halloween :is(.mt-frog, .mt-found-frog) .fbelly { fill: rgba(143, 227, 106, .09); stroke: rgba(143, 227, 106, .55); stroke-width: 1.2; }
html.halloween :is(.mt-frog, .mt-found-frog) .fpad { fill: var(--frog); }
html.halloween :is(.mt-frog, .mt-found-frog) .fnose { fill: var(--frog); opacity: .8; }
html.halloween :is(.mt-frog, .mt-found-frog) .fspot { fill: rgba(143, 227, 106, .55); }
html.halloween :is(.mt-frog, .mt-found-frog) .flidcover { fill: rgba(143, 227, 106, .22); stroke: var(--frog); stroke-width: 1.6; stroke-linejoin: round; }
html.halloween .mt-frog:focus-visible { outline: 2px solid var(--phos); outline-offset: 6px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  html.halloween :is(.mt-frog, .mt-found-frog) .flid { animation: mt-blink 5s linear infinite; }
  html.halloween :is(.mt-frog, .mt-found-frog) .flid + .flid { animation-delay: 2.4s; }   /* the second eye blinks on its own, a couple of seconds after the first */
  html.halloween .mt-frog.mt-hop { animation: mt-hop .7s cubic-bezier(.3, .8, .3, 1); }
}
@keyframes mt-hop { 30% { transform: translateY(-16px); } 60% { transform: translateY(0); } 80% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
/* The card he shows when found: stays until closed, so it can be screenshotted */
html.halloween .mt-found { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 61; width: min(360px, calc(100vw - 32px)); padding: 20px 22px 18px;
  border-radius: 14px; background: #0e161d; border: 1px solid rgba(111, 216, 201, .45); color: var(--ink); display: grid; gap: 8px; justify-items: center; text-align: center;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9), 0 0 30px -6px rgba(111, 216, 201, .4); }
html.halloween .mt-found h2 { font-size: 1.5rem; color: var(--phos); text-shadow: 0 0 14px rgba(111, 216, 201, .5); }
html.halloween .mt-found p { margin: 0; max-width: none; font-size: .95rem; color: var(--muted); }
html.halloween .mt-found strong { color: var(--ink); font-weight: 500; }
html.halloween .mt-found .mt-found-frog { width: 90px; height: 102px; filter: drop-shadow(0 0 8px rgba(143, 227, 106, .8)); }
html.halloween .mt-found .btn { margin-top: 6px; }
html.halloween .mt-found-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; counter-reset: step; width: 100%; }
html.halloween .mt-found-steps li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: baseline; font-size: .95rem; color: var(--muted); counter-increment: step; }
html.halloween .mt-found-steps li::before { content: counter(step); font-family: var(--display); font-size: 1.1rem; line-height: 1; color: var(--phos); text-shadow: 0 0 8px rgba(111, 216, 201, .5); }
html.halloween .mt-found-x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--muted); font: 400 1.3rem/1 var(--body); cursor: pointer; }
html.halloween .mt-found-x:hover { color: var(--ink); background: rgba(111, 216, 201, .12); }

/* ---------- Happy Halloween from Jenny B: the greeting band at the top of every page (above the header; it scrolls away) ---------- */
html.halloween .mt-greeting { position: relative; background: #0d1a22; color: var(--ink); border-bottom: 1px solid rgba(111, 216, 201, .22); }
html.halloween .mt-greeting::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 140% at 50% 100%, rgba(111, 216, 201, .14), rgba(111, 216, 201, 0) 70%); }
html.halloween .mt-greeting-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; padding-block: 11px; padding-inline: 16px; }
html.halloween .mt-greeting-text { margin: 0; max-width: none; font-family: var(--display); font-size: clamp(1rem, 2.3vw, 1.4rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; text-align: center; text-wrap: balance; }
html.halloween .mt-greeting-text strong { font-weight: 400; color: var(--phos); text-shadow: 0 0 14px rgba(111, 216, 201, .55), 0 0 36px rgba(111, 216, 201, .25); }
html.halloween .mt-greeting-text span { color: var(--ink); opacity: .85; }
html.halloween .mt-greeting-bat { width: 36px; height: 15px; flex: none; overflow: visible; filter: drop-shadow(0 0 5px rgba(111, 216, 201, .7)); }
@media (max-width: 480px) { html.halloween .mt-greeting-row { gap: 10px; } html.halloween .mt-greeting-bat { width: 26px; height: 11px; } html.halloween .mt-greeting-text { letter-spacing: .1em; font-size: .95rem; } }

/* ---------- Lantern stars: the Google rating's stars glow ember and bob on the water ---------- */
html.halloween .stars { color: var(--ember); }
html.halloween .stars svg { filter: drop-shadow(0 0 4px rgba(217, 120, 60, .75)); }

/* ---------- Cards: the shadow follows the hover a beat late ---------- */
html.halloween :is(.quote, .clip-card, .opt, .check, .corporate-panel) { transition: transform .25s var(--ease), box-shadow .7s ease .2s, border-color .2s; }
@media (hover: hover) {
  html.halloween :is(.quote, .clip-card, .opt, .corporate-panel):hover { transform: translateY(-3px); box-shadow: 0 22px 30px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(111, 216, 201, .12); }
}

/* ---------- FAQ: answers open like a tide pulling back ---------- */
html.halloween .faq summary:hover { color: var(--phos); }
html.halloween .faq summary svg { color: var(--phos); }

/* ---------- Scroll reveals (the script adds .mt-reveal; nothing is hidden without it) ---------- */
html.halloween .mt-reveal { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1s var(--ease); }
html.halloween .mt-reveal.mt-in { opacity: 1; transform: none; }

/* ---------- The hero: the Remotion loop (fog, ghosts, wisps) plays behind the content ---------- */
html.halloween .hero { position: relative; overflow: hidden; isolation: isolate; }
html.halloween .hero > .wrap { position: relative; z-index: 2; }
html.halloween .mt-sky { position: absolute; inset: -2% 0; z-index: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent); }
html.halloween .mt-sky video, html.halloween .mt-sky img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2s ease; }
html.halloween .mt-sky .is-on { opacity: 1; }
/* The moon, risen over the hero (and the first thing to flicker) */
/* A crescent, drawn in the same thin glowing line as the sun mark (the script puts the SVG in) */
html.halloween .mt-hero-moon { position: absolute; z-index: 1; right: clamp(16px, 6vw, 90px); top: clamp(12px, 3vw, 36px); width: 62px; height: 62px; pointer-events: none; }
html.halloween .mt-hero-moon svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px rgba(111, 216, 201, .75)) drop-shadow(0 0 28px rgba(111, 216, 201, .3)); }
html.halloween .mt-hero-moon path { fill: rgba(111, 216, 201, .1); stroke: var(--phos); stroke-width: 1.6; stroke-linejoin: round; }
html.halloween .mt-hero-moon::after { content: ""; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(111, 216, 201, .2), rgba(111, 216, 201, 0)); }
@media (max-width: 899px) { html.halloween .mt-hero-moon { width: 46px; height: 46px; right: 20px; top: 14px; } }

/* Hero headline: a film title, wide and quiet; "every day." glows */
html.halloween .hero h1 { font-size: clamp(1.75rem, 4.4vw, 3.2rem); letter-spacing: .1em; text-transform: uppercase; line-height: 1.24; }
html.halloween .hero .crumbs + h1 { font-size: clamp(1.45rem, 3.3vw, 2.45rem); letter-spacing: .08em; }   /* the events headline is long: a step smaller */
html.halloween .hero h1 .eyebrow { font-family: var(--display); font-weight: 400; font-size: .82rem; letter-spacing: .26em; color: var(--phos); opacity: .85; text-shadow: 0 0 14px var(--phos-glow); }
html.halloween .hero h1 em.tide { color: var(--phos); text-shadow: 0 0 16px rgba(111, 216, 201, .55), 0 0 40px rgba(111, 216, 201, .25); }
html.halloween .tide .mark { width: 2.4em; }
html.halloween .tide .logo-sun { filter: drop-shadow(0 0 6px rgba(111, 216, 201, .8)); }
html.halloween .tide-waves path { filter: drop-shadow(0 0 3px rgba(111, 216, 201, .8)); }
html.halloween .hero .lede { color: #b9c2c8; }
html.halloween .host p { color: #a9b3b9; }

/* The headline: words settle in; the waves, horizon, sun and rays play exactly as on the regular site (its own keyframes and timing);
   then the flock leaves the risen sun (see the script). The mark dissolves and "every day." blooms where it was. */
@media (prefers-reduced-motion: no-preference) {
  html.halloween .h-words .w { animation: mt-word-in 1.3s var(--ease) both; animation-delay: calc(.2s + var(--i) * .22s); }
  html.halloween .tide-waves { animation: mark-dissolve-waves 1.4s ease-in 5.7s both; }
  html.halloween .tide .mark { animation: mark-dissolve 1.4s ease-in 5.7s both; }
  html.halloween .tide-letters span { animation: letter-bloom 1.3s var(--ease) both; animation-delay: calc(5.9s + var(--i) * .07s); }
  html.halloween .mt-hero-moon { animation: mt-moon-up 2.6s cubic-bezier(.25, .8, .3, 1) 1.2s both, mt-moon-flicker 11s linear 5s infinite; }
  html.halloween .text-us-fab { animation: mt-sway 5.5s ease-in-out infinite; }
  html.halloween .rating .stars svg { animation: mt-bob 3.4s ease-in-out infinite; }
  html.halloween .rating .stars svg:nth-child(2) { animation-delay: -.6s; }
  html.halloween .rating .stars svg:nth-child(3) { animation-delay: -1.2s; }
  html.halloween .rating .stars svg:nth-child(4) { animation-delay: -1.8s; }
  html.halloween .rating .stars svg:nth-child(5) { animation-delay: -2.4s; }
  html.halloween :is(.band, .band-azure, footer)::before { animation: mt-tide 16s linear infinite; }
  html.halloween .faq details[open] p { animation: mt-tide-in .55s var(--ease) both; }
}
@keyframes mt-word-in { from { opacity: 0; filter: blur(8px); letter-spacing: .32em; } to { opacity: 1; filter: blur(0); letter-spacing: .1em; } }
@keyframes mt-moon-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes mt-moon-flicker { 0%, 86%, 100% { opacity: 1; } 87% { opacity: .35; } 88% { opacity: 1; } 90% { opacity: .55; } 91% { opacity: 1; } 95% { transform: scaleY(1); } 96% { transform: scaleY(.12); } 97% { transform: scaleY(1); } }   /* a flicker, then a wink */
@keyframes mt-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes mt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes mt-tide { to { background-position-x: 96px; } }
@keyframes mt-tide-in { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-6px); } to { opacity: 1; clip-path: inset(0 0 -4px 0); transform: none; } }

/* ---------- Eyes in the dark: a pair opens in the FAQ band when the visitor holds still ---------- */
html.halloween .mt-eyes { position: absolute; width: 34px; height: 12px; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; z-index: 1; filter: drop-shadow(0 0 6px rgba(111, 216, 201, .9)); }
html.halloween .mt-eyes.mt-open { opacity: .9; }
html.halloween .mt-eyes i { position: absolute; top: 3px; width: 10px; height: 6px; border-radius: 50%; background: var(--phos); }
html.halloween .mt-eyes i:first-child { left: 0; } html.halloween .mt-eyes i:last-child { right: 0; }
@media (prefers-reduced-motion: no-preference) { html.halloween .mt-eyes.mt-open i { animation: mt-blink 5s linear infinite; } }
@keyframes mt-blink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } 97% { transform: scaleY(1); } }



/* ---------- The footer sea: the sailboat, the tentacle, the bubbles (the script sets the scene; .mt-play runs it once) ---------- */
html.halloween .mt-sea { position: absolute; left: 50%; bottom: 0; width: min(600px, 100%); height: auto; transform: translateX(-50%); z-index: 0; pointer-events: none; opacity: 0; color: var(--phos); filter: drop-shadow(0 0 6px rgba(111, 216, 201, .65)); }
html.halloween .mt-sea .hull, html.halloween .mt-sea .sail, html.halloween .mt-sea .arm { fill: rgba(111, 216, 201, .13); stroke: var(--phos); stroke-width: 2.2; stroke-linejoin: round; }
html.halloween .mt-sea .line { fill: none; stroke: var(--phos); stroke-width: 2.2; stroke-linecap: round; }
html.halloween .mt-sea .flag { fill: var(--ember); }
html.halloween .mt-sea .sucker { fill: rgba(111, 216, 201, .55); }
html.halloween .mt-sea .wave { fill: none; stroke: var(--phos); stroke-width: 1.4; stroke-linecap: round; transform-box: view-box; }
html.halloween .mt-sea .wave.back { opacity: .5; }
html.halloween .mt-sea .sea-bubbles circle { fill: none; stroke: var(--phos); stroke-width: 1.4; opacity: 0; }
html.halloween .mt-sea .sea-boat { transform-box: fill-box; transform-origin: 50% 90%; opacity: 0; }
html.halloween .mt-sea .sea-arm { transform-box: view-box; }
html.halloween .mt-sea.mt-play { animation: sea-scene 13s linear both; }
html.halloween .mt-sea.mt-play .sea-boat { animation: sea-boat 13s ease-in-out both; }
html.halloween .mt-sea.mt-play .sea-arm { animation: sea-arm 13s ease-in-out both; }
html.halloween .mt-sea.mt-play .sea-bubbles circle { animation: sea-bubble 13s ease-out both; }
html.halloween .mt-sea.mt-play .sea-bubbles circle:nth-child(2) { animation-delay: .3s; }
html.halloween .mt-sea.mt-play .sea-bubbles circle:nth-child(3) { animation-delay: .6s; }
html.halloween .mt-sea.mt-play .sea-bubbles circle:nth-child(4) { animation-delay: .9s; }
html.halloween .mt-sea.mt-play .sea-bubbles circle:nth-child(5) { animation-delay: 1.2s; }
html.halloween .mt-sea.mt-play .wave.front { animation: sea-drift 9s linear infinite; }
html.halloween .mt-sea.mt-play .wave.back { animation: sea-drift 13s linear infinite reverse; }
@keyframes sea-scene { 0% { opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sea-boat {
  0% { opacity: 0; transform: translate(-60px, 2px) rotate(-2deg); }
  12% { opacity: 1; transform: translate(0, -2px) rotate(2deg); }
  20% { transform: translate(0, 2px) rotate(-3deg); } 28% { transform: translate(0, -3px) rotate(3deg); } 36% { transform: translate(0, 2px) rotate(-3deg); } 44% { transform: translate(0, -2px) rotate(2deg); }
  52% { transform: translate(0, 1px) rotate(0); }
  58% { opacity: 1; transform: translate(0, 8px) rotate(-8deg); }
  70% { opacity: 1; transform: translate(12px, 120px) rotate(-34deg); }
  73% { opacity: 0; transform: translate(12px, 130px) rotate(-36deg); }
  100% { opacity: 0; transform: translate(12px, 130px) rotate(-36deg); }
}
@keyframes sea-arm {
  0%, 36% { transform: translate(338px, 460px) rotate(0); }      /* under the water, out of sight */
  50% { transform: translate(338px, 300px) rotate(-4deg); }      /* up, the tip curling round the mast */
  56% { transform: translate(336px, 304px) rotate(0); }
  70% { transform: translate(338px, 400px) rotate(2deg); }       /* pulling the boat under */
  76%, 100% { transform: translate(338px, 460px) rotate(0); }
}
@keyframes sea-bubble { 0%, 70% { opacity: 0; transform: translateY(0); } 74% { opacity: .9; } 88% { opacity: 0; transform: translateY(-70px); } 100% { opacity: 0; transform: translateY(-70px); } }
@keyframes sea-drift { to { transform: translateX(-96px); } }

/* ---------- Events page ---------- */
html.halloween .occasions li::before, html.halloween .corporate-list li::before { color: var(--phos); background: var(--phos); box-shadow: 0 0 6px rgba(111, 216, 201, .7); }
html.halloween .occasions li::before { background: none; box-shadow: none; text-shadow: 0 0 6px rgba(111, 216, 201, .8); }
html.halloween .corporate-panel { background: var(--surface); box-shadow: inset 0 0 0 1px rgba(111, 216, 201, .1); }
html.halloween #dreambar { position: relative; }
html.halloween #dreambar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38% 50% at 24% 50%, rgba(217, 120, 60, .13), rgba(217, 120, 60, 0) 70%); }
@media (max-width: 899px) { html.halloween #dreambar::before { background: radial-gradient(60% 30% at 50% 22%, rgba(217, 120, 60, .13), rgba(217, 120, 60, 0) 70%); } }
html.halloween #dreambar .wrap { position: relative; }
html.halloween .combo-photo figcaption { color: var(--ink); }
html.halloween .bar-prices .row .amt { color: var(--apricot-text); }
html.halloween .must { color: var(--apricot-text); }
html.halloween .field input, html.halloween .field select, html.halloween .field textarea { background: #0e161d; color: var(--ink); border-color: #2a3f4a; }
html.halloween .field input:focus, html.halloween .field select:focus, html.halloween .field textarea:focus { border-color: var(--phos); box-shadow: 0 0 0 3px rgba(111, 216, 201, .2); }
html.halloween .check { background: #0e161d; border-color: #2a3f4a; }
html.halloween .check:hover, html.halloween .check:has(input:checked) { border-color: var(--phos); }
html.halloween .crumbs a:hover { color: var(--phos); }

/* ---------- Reduced motion: the finished page, standing still ---------- */
@media (prefers-reduced-motion: reduce) {
  html.halloween .mt-hero-moon, html.halloween .mt-eyes { animation: none; }
  html.halloween .mt-reveal { opacity: 1; transform: none; }
}