/*
 * Halloween theme — homepage only.
 * Loaded from include/css.php when $halloween is true (set in index.php).
 * Visual overrides only: colours, decorations and animation. No sizing,
 * spacing or layout properties of existing elements are changed.
 */

:root {
  --hw-orange: #ff8a1f;
  --hw-orange-deep: #e2580b;
  --hw-gold: #ffc14d;
  --hw-purple: #2a1245;
  --hw-night: #0a0614;
  --hw-text: #f3eadb;
}

/* ---------- header accents ---------- */

.top_header {
  background: linear-gradient(90deg, #0a0614, #2a1245 50%, #0a0614);
  box-shadow: inset 0 -2px 0 var(--hw-orange), 0 2px 14px rgba(255, 138, 31, .35);
}

.top_main p,
.top_main ul li a {
  color: var(--hw-gold);
}

/* ---------- buttons ---------- */

.themebtn {
  background: linear-gradient(0deg, #b9420a, #ffa04a, #7a2a06);
  color: #1a0700;
}

.themebtn:hover {
  color: #fff;
}

.home_banner .themebtn.trans {
  background: transparent;
  box-shadow: 0 0 0 2px var(--hw-orange), 0 0 16px rgba(255, 138, 31, .45);
  color: var(--hw-text);
}

/* ---------- banner text on the night sky ---------- */

.home_banner > .container {
  position: relative;
  z-index: 2;
}

.home_banner .banner_cont h6 {
  color: var(--hw-orange);
  text-shadow: 0 0 10px rgba(255, 138, 31, .55);
}

.home_banner .banner_cont h1 {
  color: var(--hw-text);
  text-shadow: 0 3px 14px rgba(0, 0, 0, .7);
}

.home_banner .banner_cont h1 span {
  color: var(--hw-orange);
  text-shadow: 0 0 18px rgba(255, 138, 31, .6);
}

.home_banner .banner_cont h1 c {
  color: var(--hw-gold);
}

.home_banner .banner_cont p {
  color: #e6dccb;
  margin: 15px 0px;
}

.home_banner .banner_cont h4 {
  color: var(--hw-orange);
}

.home_banner .banner_cont h4::before,
.home_banner .banner_point ul li::before {
  filter: invert(56%) sepia(93%) saturate(1700%) hue-rotate(350deg) brightness(102%) contrast(101%);
}

.home_banner .banner_point ul li {
  color: var(--hw-text);
}

.home_banner .contact___form form {
  box-shadow: 0 0 0 2px rgba(255, 138, 31, .75), 0 0 34px rgba(255, 110, 20, .45);
}

.home_banner .contact___form form h5 {
  color: var(--hw-orange);
  text-shadow: 0 0 14px rgba(255, 138, 31, .6);
}

/* ---------- decoration layer ---------- */

.hw-deco,
.hw-page-bats {
  pointer-events: none;
  user-select: none;
}

.hw-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hw-deco svg {
  position: absolute;
  display: block;
  overflow: visible;
}

.hw-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 58% 16%, rgba(255, 180, 70, .22), transparent 32%),
    radial-gradient(ellipse at 50% 115%, rgba(255, 100, 20, .5), transparent 58%),
    linear-gradient(180deg, #07040f 0%, #1a0b2e 42%, #33123f 72%, #4f1a2c 100%);
}

.hw-sky::before {
  content: '';
  position: absolute;
  inset: 0 0 35% 0;
  background-image:
    radial-gradient(1.5px 1.5px at 6% 12%, #fff, transparent),
    radial-gradient(1px 1px at 14% 34%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 23% 8%, #fff, transparent),
    radial-gradient(1px 1px at 31% 26%, #fff, transparent),
    radial-gradient(1px 1px at 40% 14%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 47% 40%, #fff, transparent),
    radial-gradient(1px 1px at 66% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 73% 6%, #fff, transparent),
    radial-gradient(1px 1px at 81% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 89% 10%, #fff, transparent),
    radial-gradient(1px 1px at 95% 36%, #fff, transparent),
    radial-gradient(1px 1px at 18% 52%, #fff, transparent),
    radial-gradient(1px 1px at 86% 54%, #fff, transparent);
  animation: hw-twinkle 4s ease-in-out infinite alternate;
}

.hw-moon {
  position: absolute;
  top: 9%;
  left: calc(50% + 20px);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 38%, rgba(190, 140, 60, .35) 0 9%, transparent 10%),
    radial-gradient(circle at 36% 64%, rgba(190, 140, 60, .3) 0 7%, transparent 8%),
    radial-gradient(circle at 70% 70%, rgba(190, 140, 60, .25) 0 5%, transparent 6%),
    radial-gradient(circle at 35% 35%, #fffbe6, #fde9ae 45%, #f2c463 78%, #dc9c3c);
  box-shadow: 0 0 50px 14px rgba(255, 205, 100, .45), 0 0 140px 50px rgba(255, 140, 40, .22);
  animation: hw-moonglow 6s ease-in-out infinite alternate;
}

.hw-moon-bat {
  width: 38px;
  height: 19px;
  fill: #08040e;
  animation: hw-flap .35s ease-in-out infinite alternate, hw-hover 3s ease-in-out infinite alternate;
}

.hw-moon-bat-1 { top: calc(9% + 40px);  left: calc(50% + 60px); }
.hw-moon-bat-2 { top: calc(9% + 100px); left: calc(50% + 130px); width: 28px; height: 14px; animation-delay: .1s, .8s; }
.hw-moon-bat-3 { top: calc(9% + 10px);  left: calc(50% + 175px); width: 22px; height: 11px; animation-delay: .2s, 1.4s; }

.hw-web {
  top: 0;
  width: 190px;
  height: 190px;
  color: rgba(255, 255, 255, .32);
}

.hw-web-left  { left: 0; }
.hw-web-right { right: 0; transform: scaleX(-1); }

.hw-spider {
  position: absolute;
  top: 0;
  left: 46%;
  width: 34px;
  animation: hw-dangle 5s ease-in-out infinite alternate;
  transform-origin: top center;
}

.hw-spider::before {
  content: '';
  display: block;
  width: 1px;
  height: 90px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .45);
}

.hw-spider svg {
  position: static;
  width: 34px;
  height: 34px;
}

.hw-ghost {
  width: 46px;
  height: 62px;
  opacity: .75;
  filter: drop-shadow(0 0 12px rgba(220, 210, 255, .6));
  animation: hw-float 6s ease-in-out infinite alternate;
}

.hw-ghost-1 { top: calc(9% + 150px); left: calc(50% + 10px); width: 38px; height: 50px; }
.hw-ghost-2 { top: 42%; left: 1.5%; animation-delay: 2s; }

.hw-fog {
  position: absolute;
  bottom: -40px;
  width: 140%;
  height: 160px;
  background: radial-gradient(ellipse at center, rgba(220, 210, 240, .22), transparent 65%);
  filter: blur(8px);
}

.hw-fog-1 { left: -20%; animation: hw-drift 22s linear infinite alternate; }
.hw-fog-2 { left: -40%; bottom: -20px; opacity: .7; animation: hw-drift 30s linear infinite alternate-reverse; }

.hw-graveyard {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 170px;
}

.hw-pumpkin {
  filter: drop-shadow(0 0 18px rgba(255, 120, 20, .55));
}

.hw-pumpkin-1 { left: 2%;   bottom: 8px;  width: 110px; height: 100px; }
.hw-pumpkin-2 { left: 40%;  bottom: 16px; width: 66px;  height: 60px; }
.hw-pumpkin-3 { right: 22%; bottom: 22px; width: 80px;  height: 73px; }

.hw-flicker {
  animation: hw-flicker 2.4s steps(1) infinite;
}

/* bats that cross the whole homepage now and then */

.hw-page-bats {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
}

.hw-fly {
  position: absolute;
  left: 0;
  width: 46px;
  height: 23px;
  fill: #120818;
  opacity: .85;
  translate: -80px 0;
  animation: hw-flap .3s ease-in-out infinite alternate, hw-cross 20s linear infinite;
}

.hw-fly-1 { top: 22%; }
.hw-fly-2 { top: 48%; width: 32px; height: 16px; animation-delay: 0s, 7s; }
.hw-fly-3 { top: 70%; width: 38px; height: 19px; animation-delay: 0s, 13s; }

/* witch that flies across the homepage now and then */

.hw-page-bats .hw-witch {
  position: absolute;
  top: 12%;
  left: 0;
  width: 150px;
  height: 84px;
  opacity: .9;
  translate: -200px 0;
  animation: hw-witch 34s linear 6s infinite;
}

/* ---------- section decorations (added by assets/js/halloween.js) ---------- */

.hw-sdeco {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.hw-sdeco > * {
  position: absolute;
}

/* faint purple mist along the bottom edge of each section */
.hw-sdeco::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(88, 40, 130, .10), transparent);
}

/* pumpkin-orange heading ornaments */
.section_title::before,
.spotlight_cont h3::before {
  filter: invert(56%) sepia(93%) saturate(1700%) hue-rotate(350deg) brightness(102%) contrast(101%);
}

.hw-sdeco svg {
  display: block;
  overflow: visible;
}

.hw-sdeco .hw-web {
  color: rgba(40, 24, 10, .35);
}

.footer .hw-sdeco .hw-web,
.counter_main .hw-sdeco .hw-web {
  color: rgba(40, 24, 10, .45);
}

.hw-garland {
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 48'%3E%3Cpath d='M0 6Q75 30 150 6T300 6' fill='none' stroke='%233a2a1a' stroke-width='1.5'/%3E%3Cpath fill='%23ff7a12' d='M16 13h18l-9 22zM91 17h18l-9 22zM191 17h18l-9 22zM266 13h18l-9 22z'/%3E%3Cpath fill='%231a0f1f' d='M41 17h18l-9 22zM116 13h18l-9 22zM216 18h18l-9 22z'/%3E%3Cpath fill='%236b2fa0' d='M66 18h18l-9 22zM166 13h18l-9 22zM241 17h18l-9 22z'/%3E%3C/svg%3E") repeat-x;
  background-size: 300px 48px;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .18));
  animation: hw-sway 6s ease-in-out infinite alternate;
  transform-origin: top center;
}

.hw-sdeco .hw-spider {
  left: auto;
}

.hw-bats {
  width: 110px;
  height: 60px;
}

.hw-bats svg {
  position: absolute;
  fill: #120818;
  animation: hw-flap .32s ease-in-out infinite alternate, hw-hover 3s ease-in-out infinite alternate;
}

.hw-bats svg:nth-child(1) { left: 0;    top: 18px; width: 40px; height: 20px; }
.hw-bats svg:nth-child(2) { left: 52px; top: 0;    width: 30px; height: 15px; animation-delay: .1s, 1s; }
.hw-bats svg:nth-child(3) { left: 78px; top: 34px; width: 24px; height: 12px; animation-delay: .2s, 1.8s; }

.hw-sdeco .hw-ghost {
  opacity: .8;
  filter: drop-shadow(0 0 10px rgba(120, 90, 200, .45));
}

.hw-pumpkin {
  filter: drop-shadow(0 0 14px rgba(255, 120, 20, .5));
}

.hw-candle {
  filter: drop-shadow(0 0 10px rgba(255, 170, 50, .6));
}

.hw-candy {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2));
}

.hw-cauldron {
  filter: drop-shadow(0 0 12px rgba(120, 255, 90, .35));
}

.hw-blink {
  transform-box: fill-box;
  transform-origin: center;
  animation: hw-blink 5s infinite;
}

.hw-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: hw-flame .9s ease-in-out infinite alternate;
}

.hw-bubble {
  transform-box: fill-box;
  animation: hw-bubble 2.2s ease-in infinite;
}

.hw-bubble-2 { animation-delay: .7s; }
.hw-bubble-3 { animation-delay: 1.4s; }

/* ---------- animations ---------- */

@keyframes hw-sway  { from { transform: rotate(-.4deg); } to { transform: rotate(.4deg); } }
@keyframes hw-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes hw-flame { from { transform: scale(1, 1); } to { transform: scale(.88, 1.12) rotate(3deg); } }

@keyframes hw-bubble {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-26px); opacity: 0; }
}

@keyframes hw-witch {
  0%   { translate: -200px 0; }
  8%   { translate: 30vw -40px; }
  16%  { translate: 65vw 10px; }
  26%  { translate: 110vw -60px; }
  100% { translate: 110vw -60px; }
}

@keyframes hw-twinkle { from { opacity: .45; } to { opacity: 1; } }

@keyframes hw-moonglow {
  from { box-shadow: 0 0 40px 10px rgba(255, 205, 100, .4), 0 0 120px 40px rgba(255, 140, 40, .18); }
  to   { box-shadow: 0 0 60px 18px rgba(255, 205, 100, .55), 0 0 160px 60px rgba(255, 140, 40, .28); }
}

@keyframes hw-flap  { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes hw-hover { from { translate: 0 0; } to { translate: 14px -10px; } }
@keyframes hw-float { from { translate: 0 0; } to { translate: 10px -22px; } }
@keyframes hw-drift { from { transform: translateX(0); } to { transform: translateX(18%); } }
@keyframes hw-dangle { from { transform: translateY(-20px) rotate(-3deg); } to { transform: translateY(30px) rotate(3deg); } }

@keyframes hw-flicker {
  0%, 100% { opacity: 1; }
  42% { opacity: .75; }
  46% { opacity: 1; }
  71% { opacity: .85; }
}

@keyframes hw-cross {
  0%   { translate: -80px 0; }
  10%  { translate: 12vw -40px; }
  20%  { translate: 26vw 10px; }
  30%  { translate: 40vw -30px; }
  40%  { translate: 54vw 20px; }
  50%  { translate: 68vw -20px; }
  60%  { translate: 84vw 10px; }
  70%  { translate: 110vw -30px; }
  100% { translate: 110vw -30px; }
}

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
  .hw-moon { width: 130px; height: 130px; }
  .hw-deco .hw-ghost-2 { display: none; }
}

@media (max-width: 991px) {
  .hw-moon { top: 18px; left: auto; right: 18px; width: 90px; height: 90px; }
  .hw-moon-bat-1 { top: 40px;  left: auto; right: 120px; }
  .hw-moon-bat-2 { top: 100px; left: auto; right: 70px; }
  .hw-deco .hw-moon-bat-3 { display: none; }
  .hw-web { width: 110px; height: 110px; }
  .hw-deco .hw-web-right,
  .hw-deco .hw-ghost,
  .hw-deco .hw-spider,
  .hw-deco .hw-pumpkin-2 { display: none; }
  .hw-graveyard { height: 110px; }
  .hw-pumpkin-1 { width: 70px; height: 64px; }
  .hw-pumpkin-3 { right: 6%; width: 56px; height: 51px; }

  .hw-sdeco .hw-nosm { display: none !important; }
  .hw-sdeco .hw-web { width: 90px !important; height: 90px !important; }
  .hw-sdeco .hw-pumpkin { width: 46px !important; height: 42px !important; }
  .hw-garland { height: 36px; background-size: 225px 36px; }
  .hw-page-bats .hw-witch { width: 100px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-deco *,
  .hw-deco *::before,
  .hw-sdeco *,
  .hw-sdeco *::before,
  .hw-blink,
  .hw-flame,
  .hw-bubble,
  .hw-flicker,
  .hw-fly {
    animation: none !important;
  }
  .hw-page-bats { display: none; }
}