/* =====================================================
   FAMILIO GAMES - HALLOWEEN HOMEPAGE LAYER
   Seasonal decoration only.
   Removing this stylesheet + the Halloween include
   restores the permanent homepage.
   ===================================================== */


/* ---------- HERO SEASONAL LAYER ---------- */

.hph-hero {
  position: relative;
  isolation: isolate;
}

.hph-hero > .hph-wrap {
  position: relative;
  z-index: 2;
}

.hph-halloween-decor {
  position: absolute;
  inset: 0;

  overflow: hidden;

  z-index: 1;

  pointer-events: none;
  user-select: none;
}


/* Subtle Halloween atmosphere */

.hph-halloween-decor::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 6% 82%,
      rgba(255, 111, 0, 0.11),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 25%,
      rgba(119, 51, 255, 0.10),
      transparent 30%
    );

  pointer-events: none;
}


/* =====================================================
   SPIDER WEBS
   ===================================================== */

.hph-halloween-web {
  position: absolute;

  width: clamp(150px, 16vw, 280px);
  height: auto;

  opacity: 0.46;

  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.08));

  z-index: 1;
}

.hph-halloween-web-left {
  top: -25px;
  left: -25px;
}

.hph-halloween-web-right {
  top: -25px;
  right: -25px;

  transform: scaleX(-1);
}


/* =====================================================
   SPIDER
   ===================================================== */

.hph-halloween-spider-wrap {
  position: absolute;

  top: 0;
  right: 13%;

  width: 55px;
  height: 180px;

  z-index: 3;

  animation:
    hphSpiderFloat 4.8s ease-in-out infinite;
}

.hph-halloween-spider-thread {
  position: absolute;

  top: 0;
  left: 50%;

  width: 1px;
  height: 105px;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.52)
    );
}

.hph-halloween-spider {
  position: absolute;

  top: 94px;
  left: 50%;

  width: 48px;
  height: auto;

  transform: translateX(-50%);

  filter:
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55));
}

@keyframes hphSpiderFloat {

  0%,
  100% {
    transform: translateY(-18px);
  }

  50% {
    transform: translateY(10px);
  }
}


/* =====================================================
   BATS
   ===================================================== */

.hph-halloween-bats {
  position: absolute;

  width: clamp(90px, 9vw, 155px);
  height: auto;

  opacity: 0;

  z-index: 2;

  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
}


/* First bat group */

.hph-halloween-bats-one {
  top: 13%;

  animation:
    hphBatsFlyOne 13s linear infinite;
}

@keyframes hphBatsFlyOne {

  0% {
    left: -14%;
    opacity: 0;
    transform: translateY(10px) scale(0.72);
  }

  8% {
    opacity: 0.72;
  }

  48% {
    transform: translateY(-20px) scale(0.88);
  }

  92% {
    opacity: 0.72;
  }

  100% {
    left: 110%;
    opacity: 0;
    transform: translateY(12px) scale(0.76);
  }
}


/* Second group has a different path/timing */

.hph-halloween-bats-two {
  top: 33%;

  animation:
    hphBatsFlyTwo 17s linear 6s infinite;
}

@keyframes hphBatsFlyTwo {

  0% {
    right: -15%;
    opacity: 0;
    transform:
      scaleX(-1)
      translateY(0)
      scale(0.62);
  }

  10% {
    opacity: 0.52;
  }

  50% {
    transform:
      scaleX(-1)
      translateY(-24px)
      scale(0.75);
  }

  90% {
    opacity: 0.52;
  }

  100% {
    right: 110%;
    opacity: 0;
    transform:
      scaleX(-1)
      translateY(10px)
      scale(0.66);
  }
}


/* =====================================================
   PUMPKINS
   ===================================================== */

.hph-halloween-pumpkin {
  position: absolute;

  bottom: 10px;

  height: auto;

  filter:
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.65));

  z-index: 3;
}

.hph-halloween-pumpkin-left {
  left: 1.5%;

  width: clamp(72px, 7vw, 120px);

  transform: rotate(-7deg);
}

.hph-halloween-pumpkin-right {
  right: 2%;

  width: clamp(82px, 8vw, 135px);

  transform: rotate(6deg);
}


/* Soft glow beneath pumpkins */

.hph-halloween-pumpkin-left::after,
.hph-halloween-pumpkin-right::after {
  content: "";
}


/* =====================================================
   SKELETON
   ===================================================== */

.hph-halloween-skeleton {
  position: absolute;

  right: -34px;
  bottom: 5%;

  width: clamp(95px, 9vw, 155px);
  height: auto;

  opacity: 0.52;

  transform:
    rotate(-8deg)
    translateX(22%);

  filter:
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55));

  z-index: 1;

  animation:
    hphSkeletonPeek 7s ease-in-out infinite;
}

@keyframes hphSkeletonPeek {

  0%,
  100% {
    transform:
      rotate(-8deg)
      translateX(30%);
  }

  50% {
    transform:
      rotate(-4deg)
      translateX(12%);
  }
}


/* =====================================================
   SUBTLE HALLOWEEN TREATMENT ON HERO SCREEN
   ===================================================== */

.hph-screen-shell-main {
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    0 0 44px rgba(255, 111, 0, 0.08),
    0 0 70px rgba(100, 52, 255, 0.06);
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 991.98px) {

  .hph-halloween-spider-wrap {
    right: 7%;
  }

  .hph-halloween-skeleton {
    opacity: 0.32;
  }

  .hph-halloween-pumpkin-left {
    left: -10px;
  }

}


@media (max-width: 767.98px) {

  .hph-halloween-web {
    width: 145px;
    opacity: 0.30;
  }

  .hph-halloween-spider-wrap {
    right: 3%;

    transform: scale(0.78);
    transform-origin: top center;
  }

  .hph-halloween-skeleton {
    display: none;
  }

  .hph-halloween-pumpkin {
    opacity: 0.65;
  }

  .hph-halloween-pumpkin-left {
    width: 70px;
  }

  .hph-halloween-pumpkin-right {
    width: 78px;
  }

  .hph-halloween-bats {
    width: 85px;
  }

}


/* Respect accessibility settings */

@media (prefers-reduced-motion: reduce) {

  .hph-halloween-spider-wrap,
  .hph-halloween-bats,
  .hph-halloween-skeleton {
    animation: none !important;
  }

  .hph-halloween-bats {
    display: none;
  }

}

/* =====================================================
   HALLOWEEN DECOR BETWEEN HOMEPAGE SECTIONS
   ===================================================== */

.hph-halloween-break {
  position: relative;

  width: 100%;
  height: 0;

  z-index: 6;

  pointer-events: none;
  user-select: none;

  overflow: visible;
}


/* =====================================================
   GAME FORMATS - WEB + SPIDER
   ===================================================== */

.hph-halloween-break-formats .hph-halloween-break-web {
  position: absolute;

  top: -55px;
  right: -30px;

  width: clamp(135px, 11vw, 210px);
  height: auto;

  opacity: 0.28;

  transform: scaleX(-1);

  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.07));
}


.hph-halloween-break-spider {
  position: absolute;

  top: 55px;
  right: 4%;

  width: clamp(34px, 3vw, 50px);
  height: auto;

  opacity: 0.72;

  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6));

  animation:
    hphHalloweenSectionSpider 4.5s ease-in-out infinite;
}


@keyframes hphHalloweenSectionSpider {

  0%,
  100% {
    transform:
      translateY(-5px)
      rotate(-4deg);
  }

  50% {
    transform:
      translateY(8px)
      rotate(4deg);
  }

}


/* =====================================================
   HOW IT WORKS - PUMPKIN
   ===================================================== */

.hph-halloween-break-pumpkin-image {
  position: absolute;

  top: -65px;
  left: -22px;

  width: clamp(72px, 6vw, 110px);
  height: auto;

  opacity: 0.78;

  transform: rotate(-8deg);

  filter:
    drop-shadow(0 15px 18px rgba(0, 0, 0, 0.58));
}


/* =====================================================
   USE CASES - SKELETON
   ===================================================== */

.hph-halloween-break-skeleton-image {
  position: absolute;

  top: -155px;
  right: -55px;

  width: clamp(105px, 9vw, 160px);
  height: auto;

  opacity: 0.38;

  filter:
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.58));

  animation:
    hphHalloweenSectionSkeleton 7s ease-in-out infinite;
}


@keyframes hphHalloweenSectionSkeleton {

  0%,
  100% {
    transform:
      translateX(28%)
      rotate(-8deg);
  }

  50% {
    transform:
      translateX(8%)
      rotate(-3deg);
  }

}


/* =====================================================
   SOCIAL PROOF / DEMO - BATS
   ===================================================== */

.hph-halloween-break-bats {
  height: 1px;
}


.hph-halloween-break-bats-image {
  position: absolute;

  top: -70px;
  left: -150px;

  width: clamp(95px, 8vw, 145px);
  height: auto;

  opacity: 0;

  filter:
    drop-shadow(0 8px 15px rgba(0, 0, 0, 0.55));

  animation:
    hphHalloweenSectionBats 17s linear infinite;
}


@keyframes hphHalloweenSectionBats {

  0% {
    left: -12%;
    opacity: 0;

    transform:
      translateY(12px)
      scale(0.78);
  }

  8% {
    opacity: 0.52;
  }

  48% {
    transform:
      translateY(-24px)
      scale(0.9);
  }

  92% {
    opacity: 0.52;
  }

  100% {
    left: 108%;
    opacity: 0;

    transform:
      translateY(8px)
      scale(0.8);
  }

}


/* =====================================================
   LOWER PAGE - WEB + PUMPKIN
   ===================================================== */

.hph-halloween-final-web {
  position: absolute;

  top: -65px;
  left: -35px;

  width: clamp(135px, 11vw, 205px);
  height: auto;

  opacity: 0.23;

  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.06));
}


.hph-halloween-final-pumpkin {
  position: absolute;

  top: -55px;
  right: -18px;

  width: clamp(75px, 6.5vw, 115px);
  height: auto;

  opacity: 0.74;

  transform: rotate(7deg);

  filter:
    drop-shadow(0 15px 18px rgba(0, 0, 0, 0.58));
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 767.98px) {

  .hph-halloween-break-web,
  .hph-halloween-final-web {
    width: 110px;
    opacity: 0.17;
  }

  .hph-halloween-break-spider {
    width: 29px;
    opacity: 0.48;
  }

  .hph-halloween-break-skeleton-image {
    display: none;
  }

  .hph-halloween-break-pumpkin-image,
  .hph-halloween-final-pumpkin {
    width: 62px;
    opacity: 0.5;
  }

  .hph-halloween-break-bats-image {
    width: 78px;
  }

}


/* =====================================================
   ACCESSIBILITY
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

  .hph-halloween-break-spider,
  .hph-halloween-break-skeleton-image,
  .hph-halloween-break-bats-image {
    animation: none !important;
  }

  .hph-halloween-break-bats-image {
    display: none;
  }

}

/* =====================================================
   EXTRA MID-PAGE HALLOWEEN ACCENTS
   ===================================================== */


/* ---------- LEFT WEB + SPIDER ---------- */

.hph-halloween-mid-web {
  position: absolute;

  top: -90px;
  left: -38px;

  width: clamp(135px, 10vw, 195px);
  height: auto;

  opacity: 0.24;

  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.06));
}


.hph-halloween-mid-spider {
  position: absolute;

  top: -5px;
  left: 5%;

  width: clamp(32px, 2.8vw, 46px);
  height: auto;

  opacity: 0.68;

  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6));

  animation:
    hphHalloweenMidSpider 4.6s ease-in-out infinite;
}


@keyframes hphHalloweenMidSpider {

  0%,
  100% {
    transform:
      translateY(-4px)
      rotate(-4deg);
  }

  50% {
    transform:
      translateY(8px)
      rotate(4deg);
  }

}


/* ---------- RIGHT-SIDE PUMPKINS ---------- */

.hph-halloween-mid-right {
  z-index: 7;
}


.hph-halloween-mid-pumpkin {
  position: absolute;

  height: auto;

  filter:
    drop-shadow(0 15px 20px rgba(0, 0, 0, 0.62));
}


.hph-halloween-mid-pumpkin-one {
  top: -82px;
  right: -20px;

  width: clamp(76px, 6.5vw, 115px);

  opacity: 0.8;

  transform: rotate(7deg);
}


.hph-halloween-mid-pumpkin-two {
  top: -58px;
  right: 55px;

  width: clamp(48px, 4vw, 75px);

  opacity: 0.63;

  transform: rotate(-8deg);
}


/* ---------- LEFT-SIDE SKELETON ---------- */

.hph-halloween-mid-skeleton-image {
  position: absolute;

  top: -155px;
  left: -52px;

  width: clamp(105px, 8.5vw, 155px);
  height: auto;

  opacity: 0.34;

  transform:
    scaleX(-1)
    rotate(-7deg);

  filter:
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.6));

  animation:
    hphHalloweenMidSkeleton 7s ease-in-out infinite;
}


@keyframes hphHalloweenMidSkeleton {

  0%,
  100% {
    transform:
      scaleX(-1)
      translateX(28%)
      rotate(-7deg);
  }

  50% {
    transform:
      scaleX(-1)
      translateX(8%)
      rotate(-3deg);
  }

}


/* ---------- RIGHT WEB + SPIDER ---------- */

.hph-halloween-mid-web-two {
  position: absolute;

  top: -90px;
  right: -38px;

  width: clamp(135px, 10vw, 195px);
  height: auto;

  opacity: 0.23;

  transform: scaleX(-1);

  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.06));
}


.hph-halloween-mid-spider-two {
  position: absolute;

  top: 0;
  right: 5%;

  width: clamp(31px, 2.7vw, 45px);
  height: auto;

  opacity: 0.64;

  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6));

  animation:
    hphHalloweenMidSpiderTwo 5.2s ease-in-out infinite;
}


@keyframes hphHalloweenMidSpiderTwo {

  0%,
  100% {
    transform:
      translateY(-5px)
      rotate(5deg);
  }

  50% {
    transform:
      translateY(9px)
      rotate(-4deg);
  }

}


/* ---------- MOBILE ---------- */

@media (max-width: 767.98px) {

  .hph-halloween-mid-web,
  .hph-halloween-mid-web-two {
    width: 110px;
    opacity: 0.15;
  }

  .hph-halloween-mid-spider,
  .hph-halloween-mid-spider-two {
    width: 28px;
    opacity: 0.45;
  }

  .hph-halloween-mid-pumpkin-one {
    width: 62px;
    opacity: 0.5;
  }

  .hph-halloween-mid-pumpkin-two {
    width: 42px;
    opacity: 0.42;
  }

  .hph-halloween-mid-skeleton-image {
    display: none;
  }

}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {

  .hph-halloween-mid-spider,
  .hph-halloween-mid-spider-two,
  .hph-halloween-mid-skeleton-image {
    animation: none !important;
  }

}

/* =====================================================
   BETWEEN PRICING AND FAQ
   ===================================================== */

.hph-halloween-pricing-gap {
  position: relative;
  height: 1px;
  z-index: 8;

  pointer-events: none;
  user-select: none;
}


/* ---------- LEFT SIDE ---------- */

.hph-halloween-pricing-left {
  position: absolute;
  left: 0;
  top: 0;
}


.hph-halloween-pricing-web {
  position: absolute;

  top: -115px;
  left: -38px;

  width: clamp(140px, 11vw, 210px);
  height: auto;

  opacity: 0.25;

  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.07));
}


.hph-halloween-pricing-spider {
  position: absolute;

  top: -15px;
  left: 58px;

  width: clamp(32px, 2.7vw, 46px);
  height: auto;

  opacity: 0.68;

  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6));

  animation:
    hphPricingSpider 4.8s ease-in-out infinite;
}


@keyframes hphPricingSpider {

  0%,
  100% {
    transform:
      translateY(-4px)
      rotate(-4deg);
  }

  50% {
    transform:
      translateY(8px)
      rotate(4deg);
  }

}


/* ---------- RIGHT SIDE ---------- */

.hph-halloween-pricing-right {
  position: absolute;
  right: 0;
  top: 0;
}


.hph-halloween-pricing-pumpkin {
  position: absolute;

  height: auto;

  filter:
    drop-shadow(0 15px 20px rgba(0, 0, 0, 0.62));
}


.hph-halloween-pricing-pumpkin-big {
  top: -92px;
  right: -22px;

  width: clamp(78px, 6.5vw, 118px);

  opacity: 0.8;

  transform: rotate(7deg);
}


.hph-halloween-pricing-pumpkin-small {
  top: -62px;
  right: 62px;

  width: clamp(48px, 4vw, 72px);

  opacity: 0.62;

  transform: rotate(-8deg);
}


/* ---------- MOBILE ---------- */

@media (max-width: 767.98px) {

  .hph-halloween-pricing-web {
    width: 110px;
    opacity: 0.16;
  }

  .hph-halloween-pricing-spider {
    width: 28px;
    opacity: 0.45;
  }

  .hph-halloween-pricing-pumpkin-big {
    width: 62px;
    opacity: 0.52;
  }

  .hph-halloween-pricing-pumpkin-small {
    width: 42px;
    opacity: 0.4;
  }

}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {

  .hph-halloween-pricing-spider {
    animation: none !important;
  }

}