/* Halloween styling only. All business content and original assets are retained. */
:root {
  color-scheme: dark;
  --ink: #fff0dc;
  --paper: #110d19;
  --blue: #ffab61;
  --acid: #ffbc75;
  --muted: #c8bcd3;
  --line: #49344f;
  --brand-gradient: linear-gradient(110deg, #4a245e, #803e7c 40%, #b44c2e 78%, #dd702f);
}
body { background: #110d19; color: #fff0dc; }
a, button, input, select, textarea { -webkit-tap-highlight-color: rgba(255, 171, 97, .2); }
:focus-visible, .services :focus-visible, .quote :focus-visible,
.facebook-feed :focus-visible, .product-rotator:focus-visible { outline-color: #ffbb75; }

.nav {
  background: rgba(17, 13, 25, .96);
  border-bottom: 1px solid #523342;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .35);
}
.nav nav a { color: #fff0dc; }
.nav nav a:not(.nav-cta):hover { color: #ffab61; }
.nav-cta {
  background: #ffab61 !important;
  color: #24121a !important;
  box-shadow: 0 0 24px rgba(255, 137, 56, .16);
}
.nav-cta:hover { background: #ffc48c !important; }
.menu { color: #fff0dc; }

.hero {
  background:
    radial-gradient(ellipse at 0% 95%, rgba(177, 71, 34, .2), transparent 60%),
    radial-gradient(ellipse at 70% 0%, rgba(113, 63, 159, .28), transparent 65%),
    #110d19;
}
.hero-copy { isolation: isolate; }
.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5% 1% auto auto;
  width: min(29vw, 240px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(180, 149, 221, .1), transparent 65%);
  pointer-events: none;
}
.hero h1 { color: #fff0dc; text-shadow: 0 3px 32px rgba(0, 0, 0, .5); }
.hero h1 em {
  color: #ffab61;
  text-shadow: 0 0 28px rgba(255, 130, 53, .2);
  animation: lanternGlow 6s ease-in-out infinite;
}
.hero .eyebrow, .eyebrow { color: #ffb575; }
.hero .lede { color: #d4c5da; }
.hero .trust { color: #c2b1ce; }
.hero .trust b { color: #ffd3a0; }
.hero-visual > img { filter: saturate(.85) contrast(1.05); }
.hero-visual::after {
  background: linear-gradient(125deg, rgba(24, 12, 35, .26), transparent 45%, rgba(28, 13, 48, .48));
}
.hero-logo img { filter: drop-shadow(0 10px 26px rgba(12, 4, 24, .65)); }
.hero-logo:hover img, .nav .brand:hover img { filter: drop-shadow(0 0 22px rgba(188, 119, 246, .42)); }
.floating-card { background: #ffb575; color: #24121a; }
.pulse { background: #60295e; animation-name: lanternPulse; }
.button.primary { background: #ffab61; color: #24121a; }
.button.primary:hover { background: #ffc48c; box-shadow: 0 0 24px rgba(255, 137, 56, .2); }
.button.ghost { background: rgba(36, 22, 44, .6); border-color: #986c78; color: #fff0dc; }
.button.ghost:hover { background: #34213f; }

.motion-ribbon {
  background: linear-gradient(110deg, #3c224e, #773858 42%, #a5432c 76%, #3c224e);
  background-size: 200% 100%;
  border-color: #784349;
  color: #fff0dc;
}
.ribbon-track i { color: #ffbc75; }
.shop-anthem {
  background: linear-gradient(115deg, #1a1224, #2a1932);
  border-bottom-color: #50314c;
}
.anthem-copy > p:last-child { color: #c8bcd3; }
.anthem-mark {
  background: conic-gradient(from 25deg, #844aaa, #c290ed, #ffab61, #aa502c, #844aaa);
  box-shadow: 0 0 32px rgba(161, 98, 211, .19);
}
.anthem-mark span { background: #1a1224; color: #fff0dc; }
.shop-anthem audio { color-scheme: dark; accent-color: #ffab61; }

.services, .facebook-feed { background: #16101f; }
.services .eyebrow, .facebook-feed .eyebrow { color: #ffb575; }
.services .section-head > p, .section-head > p { color: #c8bcd3; }
.service-shell, .service-tabs, .service-tab { border-color: #49344f; }
.service-tab { color: #bea8cf; }
.service-tab span { color: #fff0dc; }
.service-tab:hover { background: #2e1c3c; }
.service-tab.active, .service-tab.active:hover { background: #ffab61; color: #24121a; }
.service-tab.active span { color: #24121a; }
.service-tab::after { background: #c290ed; }
.service-detail p, .service-detail li { color: #d0c2d9; }
.service-detail a { color: #ffb575; }
.process {
  background: radial-gradient(ellipse at 100% 0%, rgba(151, 73, 40, .24), transparent 65%), #271728;
  border-block: 1px solid #5a3545;
}
.process .eyebrow { color: #c8a0ed; }
.steps { border-color: #946179; }
.steps article { border-color: #664054; }
.steps b { color: #ffb575; }
.steps p { color: #d0c2d9; }

.work { background: #110d19; }
.work .section-head > p { color: #c8bcd3; }
.work figure { border-color: #70434d; box-shadow: 0 15px 35px rgba(0, 0, 0, .28); }
.work figure figcaption { background: linear-gradient(transparent, rgba(17, 8, 25, .97)); }
.work figure:hover { box-shadow: 0 15px 40px rgba(126, 64, 162, .18); }
.facebook-link { color: #ffb575; }
.facebook-copy > p:not(.eyebrow) { color: #c8bcd3; }
.facebook-feed .button.primary { background: #ffab61; color: #24121a; border-color: #ffb575; }
.facebook-feed .button.primary:hover { background: #ffc48c; }
.facebook-window {
  background: linear-gradient(145deg, #ae7bd3, #66316c 45%, #e37d3c);
  box-shadow: 0 22px 65px rgba(0, 0, 0, .45);
}
.about {
  background: radial-gradient(ellipse at 0% 100%, rgba(102, 48, 122, .23), transparent 70%), #1b1324;
}
.about .eyebrow { color: #ffb575; }
.about > div > p:not(.eyebrow), .mini-grid span { color: #c8bcd3; }
.mini-grid b { color: #fff0dc; }
.badge { background: #ffab61; color: #24121a; box-shadow: 0 0 36px rgba(255, 137, 56, .18); }
.quote {
  background: radial-gradient(ellipse at 100% 0%, rgba(132, 62, 150, .25), transparent 70%), #24132e;
}
.quote .eyebrow { color: #d2abf5; }
.quote form { background: #211629; color: #fff0dc; border: 1px solid #704454; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
.quote input, .quote select, .quote textarea { background: #120d1b; color: #fff0dc; border-color: #725569; }
.quote input::placeholder, .quote textarea::placeholder { color: #b9aabd; opacity: 1; }
.quote input:focus, .quote select:focus, .quote textarea:focus { border-color: #ffab61; }
.quote form :focus-visible { outline-color: #ffb575; }
.contact-card { border-color: #8f6687; }
.contact-card a { color: #fff0dc; }
.contact-card span, .contact-card small, .form-note { color: #c8bcd3; }
footer { background: #0b0811; border-top: 1px solid #593442; color: #d0c2d9; }

/* Atmospheric elements are decorative and do not receive pointer events. */
.halloween-atmosphere { position: fixed; inset: 0; overflow: hidden; z-index: 18; pointer-events: none; }
.halloween-fog {
  position: absolute;
  display: block;
  left: -25vw;
  bottom: -7vh;
  width: 150vw;
  height: 38vh;
  background:
    radial-gradient(ellipse at 16% 70%, rgba(180, 158, 207, .16), transparent 40%),
    radial-gradient(ellipse at 60% 55%, rgba(202, 190, 211, .12), transparent 35%),
    radial-gradient(ellipse at 92% 72%, rgba(150, 130, 177, .13), transparent 40%);
  filter: blur(20px);
  animation: mistDrift 27s ease-in-out infinite alternate;
}
.mist-two { bottom: 1vh; opacity: .48; animation-duration: 36s; animation-direction: alternate-reverse; }
.halloween-web {
  position: absolute;
  top: 130px;
  right: 0;
  width: 180px;
  height: 180px;
  background: #d4c2e6;
  -webkit-mask: url("assets/halloween-web.svg") center / contain no-repeat;
  mask: url("assets/halloween-web.svg") center / contain no-repeat;
  transform: rotate(90deg);
  opacity: .19;
}
.halloween-bats span {
  left: -10vw;
  top: var(--bat-y);
  width: var(--bat-size);
  height: calc(var(--bat-size) * .5);
  background: #a17ab8;
  -webkit-mask: url("assets/halloween-bat.svg") center / contain no-repeat;
  mask: url("assets/halloween-bat.svg") center / contain no-repeat;
  animation: batDrift var(--leaf-speed) linear var(--leaf-delay) infinite;
}
.halloween-bats span:nth-child(1) { --bat-y: 20%; --bat-size: 36px; --leaf-speed: 33s; --leaf-delay: -3s; }
.halloween-bats span:nth-child(2) { --bat-y: 32%; --bat-size: 22px; --leaf-speed: 40s; --leaf-delay: -18s; }
.halloween-bats span:nth-child(3) { --bat-y: 12%; --bat-size: 28px; --leaf-speed: 37s; --leaf-delay: -27s; }
.halloween-bats span:nth-child(4) { --bat-y: 58%; --bat-size: 30px; --leaf-speed: 45s; --leaf-delay: -8s; }
.halloween-bats span:nth-child(5) { --bat-y: 78%; --bat-size: 24px; --leaf-speed: 42s; --leaf-delay: -22s; }
.halloween-bats span:nth-child(6) { --bat-y: 42%; --bat-size: 34px; --leaf-speed: 48s; --leaf-delay: -35s; }
.motion-toggle { background: #211629; color: #ffcf9b; border-color: #a36966; box-shadow: 0 5px 22px rgba(0, 0, 0, .4); }
.motion-toggle:hover { background: #382040; }
.motion-paused .halloween-fog { opacity: 0; }

@keyframes mistDrift {
  from { transform: translate3d(-5vw, 0, 0) scaleX(1); }
  to { transform: translate3d(6vw, -2vh, 0) scaleX(1.06); }
}
@keyframes batDrift {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-7deg) scaleY(.8); }
  3% { opacity: .42; }
  9% { transform: translate3d(30vw, -4vh, 0) rotate(3deg) scaleY(1); }
  15% { transform: translate3d(60vw, 3vh, 0) rotate(-5deg) scaleY(.7); }
  21% { transform: translate3d(90vw, -2vh, 0) rotate(4deg) scaleY(1); }
  27% { opacity: .38; transform: translate3d(122vw, 1vh, 0) rotate(-3deg) scaleY(.8); }
  28%, 100% { opacity: 0; transform: translate3d(125vw, 0, 0); }
}
@keyframes lanternGlow {
  0%, 100% { text-shadow: 0 0 24px rgba(255, 130, 53, .16); }
  50% { text-shadow: 0 0 38px rgba(255, 130, 53, .33); }
}
@keyframes lanternPulse {
  0%, 100% { box-shadow: 0 0 0 7px rgba(96, 41, 94, .16); }
  50% { box-shadow: 0 0 0 12px rgba(96, 41, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-fog, .halloween-bats { display: none !important; }
  .hero h1 em { animation: none !important; }
}
@media (max-width: 800px) {
  .hero { background: radial-gradient(ellipse at 90% 20%, rgba(113, 63, 159, .23), transparent 70%), #110d19; }
  .nav nav { background: #1b1324; border-bottom: 1px solid #704454; }
  .halloween-web { top: 92px; width: 115px; height: 115px; opacity: .13; }
  .halloween-fog { height: 25vh; filter: blur(12px); }
  .halloween-bats span:nth-child(5) { display: none; }
}

/* Visible character scenes have their own space, clear of business content. */
.haunted-parade {
  grid-column: 1 / -1;
  position: relative;
  height: 170px;
  overflow: hidden;
  pointer-events: none;
  border-top: 1px solid #50304b;
  background:
    radial-gradient(ellipse at 15% 100%, rgba(245, 124, 32, .15), transparent 35%),
    radial-gradient(ellipse at 52% 80%, rgba(177, 143, 227, .12), transparent 38%),
    #130d1c;
}
.haunted-parade img { display: block; width: 100%; height: auto; object-fit: contain; }
.parade-pumpkins { position: absolute; left: max(5vw, 16px); bottom: -3px; width: 195px; height: 158px; }
.parade-pumpkins .big-lantern { position: absolute; bottom: 0; left: 0; width: 150px; animation: pumpkinRock 4.2s ease-in-out infinite; }
.parade-pumpkins .little-lantern { position: absolute; bottom: -1px; right: 0; width: 90px; animation: pumpkinRock 3.4s ease-in-out -1.7s infinite reverse; }
.parade-pumpkins img { filter: drop-shadow(0 0 12px rgba(255, 132, 32, .22)); transform-origin: 50% 85%; }
.parade-ghost { position: absolute; left: calc(50% - 68px); bottom: 8px; width: 136px; }
.parade-ghost img { animation: ghostBoo 5.5s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(178, 145, 225, .26)); }
.parade-zombie { position: absolute; right: max(7vw, 16px); bottom: 0; width: 145px; height: 165px; animation: zombieShuffle 10s ease-in-out infinite alternate; }
.parade-zombie img { height: 100%; object-fit: contain; animation: zombieWobble 1.9s ease-in-out infinite; transform-origin: 50% 85%; }
.parade-zombie img, .grave-peek img {
  border-radius: 38%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.process { position: relative; }
.process > .haunt-lantern { position: absolute; bottom: 3px; right: 5vw; width: 98px; height: 98px; object-fit: contain; pointer-events: none; animation: pumpkinRock 4.8s ease-in-out -2s infinite; filter: drop-shadow(0 0 12px rgba(255, 132, 32, .23)); }
.about-image > .haunt-ghost { position: absolute; width: 116px; height: 116px; object-fit: contain; right: -18px; top: -32px; z-index: 4; pointer-events: none; animation: ghostBoo 6s ease-in-out -2s infinite; filter: drop-shadow(0 0 15px rgba(178, 145, 225, .25)); }
.quote { padding-bottom: 160px !important; }
footer { position: relative; }
.grave-peek { position: absolute; top: -122px; right: 6vw; width: 158px; height: 122px; overflow: hidden; pointer-events: none; }
.grave-peek img { display: block; width: 170px; height: 170px; object-fit: contain; animation: gravePeek 8s ease-in-out infinite; }
.grave-peek::after { content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 14px; background: linear-gradient(transparent, #0b0811); }
@keyframes pumpkinRock {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-4px); }
}
@keyframes ghostBoo {
  0%, 100% { transform: translateY(4px) rotate(-6deg); }
  50% { transform: translateY(-18px) rotate(6deg); }
}
@keyframes zombieShuffle {
  from { transform: translateX(-20px); }
  to { transform: translateX(22px); }
}
@keyframes zombieWobble {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-5px); }
}
@keyframes gravePeek {
  0%, 100% { transform: translateY(66px) rotate(-7deg); }
  30%, 65% { transform: translateY(3px) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .haunted-parade *, .process > .haunt-lantern, .about-image > .haunt-ghost, .grave-peek img { animation: none !important; }
  .grave-peek img { transform: translateY(15px); }
}
@media (max-width: 800px) {
  .haunted-parade { height: 145px; }
  .parade-pumpkins { left: 0; width: 140px; height: 115px; }
  .parade-pumpkins .big-lantern { width: 108px; }
  .parade-pumpkins .little-lantern { width: 66px; }
  .parade-ghost { width: 108px; left: calc(50% - 50px); bottom: 10px; }
  .parade-zombie { width: 124px; height: 140px; right: -2px; bottom: -2px; }
  .process > .haunt-lantern { width: 72px; height: 72px; bottom: 2px; right: 16px; }
  .about-image > .haunt-ghost { width: 90px; height: 90px; right: -10px; top: -28px; }
  .grave-peek { right: 18px; }
}
@media (max-width: 360px) {
  .parade-pumpkins { width: 110px; }
  .parade-pumpkins .big-lantern { width: 100px; }
  .parade-pumpkins .little-lantern { display: none; }
  .parade-ghost { width: 88px; left: calc(50% - 44px); }
  .parade-zombie { width: 118px; right: -8px; }
}