/* ============================================================= halloween ===
   Page-scoped overrides + decorations for halloween-prize-draw.html only.
   Loaded after style.css, so same-specificity selectors here win the cascade
   without needing !important. Nothing in this file is referenced by any
   other page. */

/* ------------------------------------------------------------- background --
   A dark, moody blend of deep navy blue and burnt orange, fixed to the
   viewport. Subtle — low-saturation glows rather than a bright gradient. */
html {
  background:
    radial-gradient(1100px 620px at 12% -6%, rgba(255, 122, 26, 0.16), transparent 60%),
    radial-gradient(900px 560px at 92% 8%, rgba(255, 122, 26, 0.10), transparent 55%),
    radial-gradient(1000px 700px at 50% 112%, rgba(255, 122, 26, 0.14), transparent 60%),
    linear-gradient(160deg, #05070f 0%, #0a0f24 32%, #150d10 68%, #1e1108 100%)
    fixed;
}

/* ------------------------------------------------------------- decorations -
   Pumpkins and webs are purely decorative: unclickable, unreadable by
   screen readers, and never part of the document flow that carries content. */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* Pumpkins scattered on the cards. */
.deco-pumpkin-card {
  font-size: 42px;
  line-height: 1;
  opacity: 0.5;
  filter: drop-shadow(0 0 6px rgba(255, 122, 26, 0.3));
}

/* Spiderwebs scattered on the cards — an elegant 12-spoke orb web with five
   concentric rings and a few dew-drop highlights, repeated at different
   sizes, positions and rotations so nothing lines up. Bold, high-opacity
   silvery-white threads with a dark contour so they read clearly against
   the card, not a faint wisp. */
.deco-web {
  width: 110px;
  height: 110px;
  opacity: 0.85;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none'%3E%3Ccircle cx='50' cy='50' r='3' stroke='%23f5f2e8' stroke-width='0.9' stroke-opacity='0.95'/%3E%3Cg stroke='%23f5f2e8' stroke-width='1' stroke-opacity='0.95'%3E%3Cline x1='50' y1='50' x2='98' y2='50'/%3E%3Cline x1='50' y1='50' x2='91.6' y2='74'/%3E%3Cline x1='50' y1='50' x2='74' y2='91.6'/%3E%3Cline x1='50' y1='50' x2='50' y2='98'/%3E%3Cline x1='50' y1='50' x2='26' y2='91.6'/%3E%3Cline x1='50' y1='50' x2='8.4' y2='74'/%3E%3Cline x1='50' y1='50' x2='2' y2='50'/%3E%3Cline x1='50' y1='50' x2='8.4' y2='26'/%3E%3Cline x1='50' y1='50' x2='26' y2='8.4'/%3E%3Cline x1='50' y1='50' x2='50' y2='2'/%3E%3Cline x1='50' y1='50' x2='74' y2='8.4'/%3E%3Cline x1='50' y1='50' x2='91.6' y2='26'/%3E%3C/g%3E%3Cpolygon points='62,50 60.4,56 56,60.4 50,62 44,60.4 39.6,56 38,50 39.6,44 44,39.6 50,38 56,39.6 60.4,44' stroke='%23f5f2e8' stroke-width='0.85' stroke-opacity='0.92'/%3E%3Cpolygon points='70,50 67.3,60 60,67.3 50,70 40,67.3 32.7,60 30,50 32.7,40 40,32.7 50,30 60,32.7 67.3,40' stroke='%23f5f2e8' stroke-width='0.8' stroke-opacity='0.88'/%3E%3Cpolygon points='78,50 74.2,64 64,74.2 50,78 36,74.2 25.8,64 22,50 25.8,36 36,25.8 50,22 64,25.8 74.2,36' stroke='%23f5f2e8' stroke-width='0.75' stroke-opacity='0.82'/%3E%3Cpolygon points='86,50 81.2,68 68,81.2 50,86 32,81.2 18.8,68 14,50 18.8,32 32,18.8 50,14 68,18.8 81.2,32' stroke='%23f5f2e8' stroke-width='0.7' stroke-opacity='0.76'/%3E%3Cpolygon points='94,50 88.1,72 72,88.1 50,94 28,88.1 11.9,72 6,50 11.9,28 28,11.9 50,6 72,11.9 88.1,28' stroke='%23f5f2e8' stroke-width='0.65' stroke-opacity='0.68'/%3E%3C/g%3E%3Cg fill='%23fffdf6' fill-opacity='0.9'%3E%3Ccircle cx='64' cy='74.2' r='0.9'/%3E%3Ccircle cx='18.8' cy='32' r='0.8'/%3E%3Ccircle cx='60' cy='32.7' r='0.8'/%3E%3C/g%3E%3C/svg%3E");
}

/* Every top-level section already clips its own overflow (style.css), so
   these absolutely-positioned decorations stay confined to their card. */
main > section { position: relative; }

.page-hero .deco-web,
main > section .deco-web,
main > section .deco-pumpkin-card {
  position: absolute;
}

/* Hero card. */
.hero-web-1 { top: 8%;   left: 4%;   width: 90px;  height: 90px;  transform: rotate(-8deg); }
.hero-web-2 { top: 62%;  left: 46%;  width: 70px;  height: 70px;  transform: rotate(24deg); opacity: 0.5; }
.hero-web-3 { top: -6%;  right: 12%; width: 130px; height: 130px; transform: rotate(12deg); }
.hero-pumpkin-1 { top: 12%; right: 6%;  font-size: 48px; transform: rotate(-6deg); }
.hero-pumpkin-2 { bottom: 8%; left: 8%; font-size: 36px; transform: rotate(10deg); opacity: 0.4; }

/* Terms card. */
.terms-web-1 { top: 4%;   right: 3%;  width: 120px; height: 120px; transform: rotate(-4deg); }
.terms-web-2 { top: 46%;  left: -2%;  width: 95px;  height: 95px;  transform: rotate(18deg); opacity: 0.55; }
.terms-web-3 { bottom: 6%; right: 22%; width: 80px; height: 80px;  transform: rotate(-20deg); opacity: 0.5; }
.terms-web-4 { top: 70%;  right: -3%; width: 105px; height: 105px; transform: rotate(6deg); }
.terms-pumpkin-1 { top: 3%; left: 4%;    font-size: 38px; transform: rotate(8deg); }
.terms-pumpkin-2 { top: 52%; right: 5%;  font-size: 32px; transform: rotate(-10deg); opacity: 0.4; }
.terms-pumpkin-3 { bottom: 4%; left: 12%; font-size: 40px; transform: rotate(4deg); opacity: 0.42; }

/* Banner card. */
.banner-web-1 { top: 6%;  left: 10%; width: 85px; height: 85px; transform: rotate(-14deg); }
.banner-web-2 { bottom: 4%; right: 8%; width: 100px; height: 100px; transform: rotate(20deg); opacity: 0.5; }
.banner-pumpkin-1 { top: 10%; right: 14%; font-size: 38px; transform: rotate(-6deg); }
.banner-pumpkin-2 { bottom: 10%; left: 16%; font-size: 34px; transform: rotate(9deg); opacity: 0.4; }

/* ---------------------------------------------------------------- bats ----
   Five bat.png photos, animated entirely in CSS — no script at all.

   Each bat is two nested layers so its two motions never fight over the
   same transform: the outer .bat-fly runs a long `translate + rotate`
   keyframe animation that swoops it around the full viewport (every path
   uses 7-9 waypoints rather than a straight A-to-B tween, and each bat has
   its own distinct route, duration and delay so none of them move in step);
   the inner <img> runs a fast, independent scale pulse that snaps the wing
   silhouette narrow and wide to read as a flap. Rotation on every path stays
   within a gentle +-16deg bank so a bat is never upside down. */
.bat-fly {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  pointer-events: none;
  will-change: transform;
}

.bat-fly img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
  animation: batWingFlap var(--flapdur, 0.22s) infinite ease-in-out;
}

/* A quick wide-narrow-wide scale pulse, not a slow breathe — reads as a
   real wingbeat rather than a pulse. */
@keyframes batWingFlap {
  0%, 100% { transform: scale(1, 1); }
  45%      { transform: scale(0.78, 1.08); }
  55%      { transform: scale(0.78, 1.08); }
}

.bf-1 { width: 110px; --flapdur: 0.24s; animation: batSwoop1 22s linear infinite; }
.bf-2 { width: 150px; --flapdur: 0.30s; animation: batSwoop2 28s linear infinite; animation-delay: -9s; }
.bf-3 { width: 80px;  --flapdur: 0.18s; animation: batSwoop3 15s linear infinite; animation-delay: -4s; }
.bf-4 { width: 130px; --flapdur: 0.27s; animation: batSwoop4 25s linear infinite; animation-delay: -14s; }
.bf-5 { width: 95px;  --flapdur: 0.20s; animation: batSwoop5 13s linear infinite; animation-delay: -6s; }

/* Wide diagonal sweep, bottom-left to top-right and back down. */
@keyframes batSwoop1 {
  0%   { transform: translate(-10vw, 85vh) rotate(-8deg); }
  11%  { transform: translate(12vw, 55vh)  rotate(10deg); }
  22%  { transform: translate(30vw, 75vh)  rotate(-14deg); }
  33%  { transform: translate(48vw, 35vh)  rotate(12deg); }
  44%  { transform: translate(66vw, 60vh)  rotate(-10deg); }
  55%  { transform: translate(82vw, 25vh)  rotate(14deg); }
  66%  { transform: translate(96vw, 50vh)  rotate(-6deg); }
  77%  { transform: translate(78vw, 80vh)  rotate(16deg); }
  88%  { transform: translate(45vw, 92vh)  rotate(-12deg); }
  100% { transform: translate(-10vw, 85vh) rotate(-8deg); }
}

/* Big loop around the upper half of the page, opposite direction. */
@keyframes batSwoop2 {
  0%   { transform: translate(104vw, 20vh) rotate(8deg); }
  12%  { transform: translate(80vw, 42vh)  rotate(-10deg); }
  24%  { transform: translate(60vw, 15vh)  rotate(12deg); }
  36%  { transform: translate(40vw, 48vh)  rotate(-14deg); }
  48%  { transform: translate(20vw, 18vh)  rotate(10deg); }
  60%  { transform: translate(0vw, 45vh)   rotate(-8deg); }
  72%  { transform: translate(-4vw, 70vh)  rotate(14deg); }
  84%  { transform: translate(30vw, 90vh)  rotate(-10deg); }
  92%  { transform: translate(70vw, 75vh)  rotate(8deg); }
  100% { transform: translate(104vw, 20vh) rotate(8deg); }
}

/* Fast, small zigzag low across the page. */
@keyframes batSwoop3 {
  0%   { transform: translate(15vw, 95vh) rotate(-6deg); }
  14%  { transform: translate(35vw, 70vh) rotate(10deg); }
  28%  { transform: translate(55vw, 92vh) rotate(-12deg); }
  42%  { transform: translate(75vw, 68vh) rotate(9deg); }
  56%  { transform: translate(92vw, 88vh) rotate(-8deg); }
  70%  { transform: translate(70vw, 60vh) rotate(12deg); }
  84%  { transform: translate(40vw, 80vh) rotate(-10deg); }
  100% { transform: translate(15vw, 95vh) rotate(-6deg); }
}

/* Big vertical circuit, top to bottom and back up the other side. */
@keyframes batSwoop4 {
  0%   { transform: translate(50vw, -8vh) rotate(2deg); }
  10%  { transform: translate(75vw, 15vh) rotate(16deg); }
  20%  { transform: translate(92vw, 40vh) rotate(-10deg); }
  32%  { transform: translate(80vw, 65vh) rotate(12deg); }
  44%  { transform: translate(55vw, 88vh) rotate(-14deg); }
  56%  { transform: translate(25vw, 70vh) rotate(10deg); }
  68%  { transform: translate(5vw, 45vh)  rotate(-12deg); }
  80%  { transform: translate(18vw, 18vh) rotate(14deg); }
  92%  { transform: translate(40vw, 0vh)  rotate(-6deg); }
  100% { transform: translate(50vw, -8vh) rotate(2deg); }
}

/* Fast, tight weaving loop — a short, darting local flight. */
@keyframes batSwoop5 {
  0%   { transform: translate(78vw, 60vh) rotate(-10deg); }
  14%  { transform: translate(60vw, 35vh) rotate(12deg); }
  28%  { transform: translate(40vw, 55vh) rotate(-14deg); }
  42%  { transform: translate(58vw, 80vh) rotate(10deg); }
  56%  { transform: translate(80vw, 65vh) rotate(-12deg); }
  70%  { transform: translate(95vw, 40vh) rotate(9deg); }
  84%  { transform: translate(88vw, 55vh) rotate(-8deg); }
  100% { transform: translate(78vw, 60vh) rotate(-10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bat-fly { display: none; }
}

@media (max-width: 620px) {
  .bf-1 { width: 78px; }
  .bf-2 { width: 100px; }
  .bf-3 { width: 58px; }
  .bf-4 { width: 90px; }
  .bf-5 { width: 68px; }
}

/* -------------------------------------------------------- hero side image -- */
.hero-image {
  display: flex;
  justify-content: center;
}

.hero-image img {
  width: 100%;
  max-width: 630px;
  height: auto;
  border: 1px solid var(--line-gold);
  border-radius: 12px;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.9);
}

@media (max-width: 860px) {
  .hero-image img { max-width: 420px; }
}

@media (max-width: 620px) {
  .terms-web-4, .hero-web-3 { display: none; }
}

/* ---------------------------------------------------------- social follow --
   Three equal-width follow buttons centred across the bottom of the hero
   card. Orange outline at rest, filling with the orange metal on hover. */
.social-follow {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 230px));
  justify-content: center;
  gap: clamp(14px, 2.4vw, 28px);
  margin-top: clamp(36px, 5vw, 60px);
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid var(--orange-bright);
  border-radius: 999px;
  background: rgba(10, 10, 20, 0.55);
  color: var(--orange-bright);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.social-btn svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.social-btn:hover,
.social-btn:focus-visible {
  background: var(--orange-metal);
  color: var(--black);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 12px 34px -14px rgba(255, 140, 26, 0.75);
}

@media (max-width: 760px) {
  .social-follow {
    grid-template-columns: minmax(0, 280px);
  }
}