/* =====================================================================
   Halloween theme — Both Ways Realty
   ---------------------------------------------------------------------
   Loaded only while App\Support\Season::isHalloween() is true, which is
   1–31 October. On 1 November the <link> stops being printed and the site
   returns to normal with nothing to undo.

   Nothing here changes layout or spacing — it only repaints the hero and
   adds decorations, so removing the file can never break the page.
   ===================================================================== */

:root {
  --hw-orange: #ff8a1f;
  --hw-ember: #ffb347;
  --hw-deep: #1a0d05;
}

/* ---------------------------------------------------------------
   1. Hero — photo background with a scrim so the wording stays loud
   --------------------------------------------------------------- */

.hero.hw {
  position: relative;
  overflow: hidden;
  border-color: #4a2a12;
  background-image:
    linear-gradient(100deg, rgba(10, 6, 3, .86) 0%, rgba(14, 8, 4, .72) 40%, rgba(20, 11, 5, .34) 70%, rgba(26, 13, 5, .12) 100%),
    url('/assets/halloween-hero.jpg');
  background-size: cover;
  background-position: center 62%;
  box-shadow: 0 14px 40px rgba(26, 13, 5, .28);
}

/* The photo is busy on the right; this keeps the left column calm. */
.hero.hw::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 88% at 6% 50%, rgba(8, 4, 2, .72) 0%, rgba(8, 4, 2, .26) 46%, transparent 70%);
  pointer-events: none;
}

.hero.hw > * {
  position: relative;
  z-index: 1;
}

.hero.hw .eyebrow {
  color: var(--hw-ember);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9), 0 0 20px rgba(0, 0, 0, .6);
}

.hero.hw h1 {
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .8), 0 0 30px rgba(0, 0, 0, .62);
}

.hero.hw .lead {
  color: #f3e7dc;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .85), 0 0 18px rgba(0, 0, 0, .5);
}

.hero.hw .lead strong {
  color: #fff;
  background: rgba(255, 138, 31, .16);
  box-shadow: inset 0 -2px 0 rgba(255, 138, 31, .55);
  padding: 0 3px;
  border-radius: 3px;
}

/* Buttons: the primary glows, the ghost button turns readable on dark. */
.hero.hw .cta {
  background: var(--hw-orange);
  border-color: transparent;
  color: #2a1403;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(255, 138, 31, .32);
}

.hero.hw .cta:hover {
  background: #ff9a3d;
}

.hero.hw .cta.ghost {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  box-shadow: none;
}

.hero.hw .cta.ghost:hover {
  background: rgba(255, 255, 255, .2);
}

/* ---------------------------------------------------------------
   2. "Halloween is coming!" — animated badge inside the hero
   --------------------------------------------------------------- */

.hw-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  text-align: center;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #ffd9a8;
}

.hw-banner .hw-count {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
  color: #ffb347;
  opacity: .92;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}

/* The glow now lives on the text, since the pill around it is gone. */
.hw-banner .hw-word {
  animation: hw-textglow 2.8s ease-in-out infinite;
}

/* Each letter lifts in turn, like a slow wave. */
.hw-banner .hw-word span {
  display: inline-block;
  animation: hw-wave 2.4s ease-in-out infinite;
}

@keyframes hw-textglow {
  0%, 100% { text-shadow: 0 2px 10px rgba(0, 0, 0, .75), 0 0 18px rgba(255, 138, 31, .25); }
  50%      { text-shadow: 0 2px 10px rgba(0, 0, 0, .75), 0 0 34px rgba(255, 138, 31, .62); }
}

@keyframes hw-wave {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-5px); }
}

/* Skull: twice the size of the header pumpkin. Bounces twice, spins once,
   rests, then repeats. Keeping the spin to a single segment of a long cycle
   stops it reading as a permanently twirling ornament. */
.hw-skull {
  font-size: 44px;
  line-height: 1;
  display: inline-block;
  transform-origin: 50% 60%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
  animation: hw-skull 4.6s ease-in-out infinite;
}

@keyframes hw-skull {
  0%   { transform: perspective(520px) translateY(0)     rotateY(0deg); }
  8%   { transform: perspective(520px) translateY(-20px) rotateY(0deg); }
  17%  { transform: perspective(520px) translateY(0)     rotateY(0deg); }
  25%  { transform: perspective(520px) translateY(-12px) rotateY(0deg); }
  34%  { transform: perspective(520px) translateY(0)     rotateY(0deg); }
  44%  { transform: perspective(520px) translateY(0)     rotateY(0deg); }
  58%  { transform: perspective(520px) translateY(-9px)  rotateY(180deg); }
  72%  { transform: perspective(520px) translateY(0)     rotateY(360deg); }
  100% { transform: perspective(520px) translateY(0)     rotateY(360deg); }
}

/* ---------------------------------------------------------------
   3. Header decorations — pumpkin by the logo, ghosts on the right
   --------------------------------------------------------------- */

.hw-deco {
  font-size: 22px;
  line-height: 1;
  flex: none;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}

/* A small ghost wandering around the logo.

   Two stacked animations give the "random" feel without any JavaScript:
   the wrapper sweeps a full circle at a steady rate, while the ghost inside
   pushes in and out along the radius on a different, non-matching duration.
   Because 17s and 6.3s never line up, the path drifts and rarely repeats.
   z-index 0 lets it slip behind the wordmark as it passes. */

.hw-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 0;
  pointer-events: none;
  animation: hw-sweep 17s linear infinite;
}

.hw-orbit-ghost {
  position: absolute;
  font-size: 19px;
  line-height: 1;
  left: -9px;
  top: -9px;
  opacity: .9;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5));
  animation: hw-reach 6.3s ease-in-out infinite, hw-upright 17s linear infinite;
}

@keyframes hw-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Counter-rotates so the ghost never appears upside down. */
@keyframes hw-upright {
  from { rotate: 0deg; }
  to   { rotate: -360deg; }
}

/* Distance from the logo centre, wandering between 34px and 52px. */
@keyframes hw-reach {
  0%   { translate: 44px 0; }
  22%  { translate: 52px 0; }
  45%  { translate: 36px 0; }
  68%  { translate: 50px 0; }
  85%  { translate: 34px 0; }
  100% { translate: 44px 0; }
}

/* The wordmark sits above the orbit, so the ghost passes behind it. */
header.site.hw .brandtext { position: relative; z-index: 1; }

/* Pumpkin: a bob-and-tilt dance, never a full spin. */
.hw-pumpkin {
  margin-left: 2px;
  transform-origin: 50% 85%;
  animation: hw-dance 1.9s ease-in-out infinite;
}

@keyframes hw-dance {
  0%, 100% { transform: translateY(0)    rotate(-9deg) scale(1); }
  25%      { transform: translateY(-5px) rotate(0deg)  scale(1.07); }
  50%      { transform: translateY(0)    rotate(9deg)  scale(1); }
  75%      { transform: translateY(-3px) rotate(0deg)  scale(1.04); }
}

/* Ghosts: drift up and down, fading as they rise. */
.hw-ghosts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hw-ghost {
  animation: hw-float 3.4s ease-in-out infinite;
}

.hw-ghost:nth-child(2) {
  font-size: 17.5px;
  opacity: .88;
  animation-duration: 3.3s;
  animation-delay: -1.1s;
}

.hw-ghost:nth-child(3) {
  font-size: 15px;
  opacity: .8;
  animation-duration: 3.9s;
  animation-delay: -1.7s;
}

@keyframes hw-float {
  0%, 100% { transform: translateY(0)     translateX(0)    rotate(0deg)   scale(1); }
  20%      { transform: translateY(-13px) translateX(4px)  rotate(6deg)   scale(1.08); }
  45%      { transform: translateY(-2px)  translateX(-2px) rotate(-4deg)  scale(.97); }
  70%      { transform: translateY(-10px) translateX(-5px) rotate(-7deg)  scale(1.05); }
  88%      { transform: translateY(-1px)  translateX(2px)  rotate(3deg)   scale(.99); }
}

/* The fairy gets a wider, faster arc — she is the one that catches the eye. */
.hw-fairy {
  font-size: 19px !important;
  opacity: 1 !important;
  animation-name: hw-flit !important;
  animation-duration: 2.8s !important;
  animation-delay: -.6s !important;
  animation-timing-function: ease-in-out !important;
}

@keyframes hw-flit {
  0%, 100% { transform: translateY(0)     translateX(0)    rotate(-8deg)  scale(1); }
  18%      { transform: translateY(-16px) translateX(6px)  rotate(10deg)  scale(1.14); }
  40%      { transform: translateY(-4px)  translateX(-4px) rotate(-6deg)  scale(.96); }
  62%      { transform: translateY(-14px) translateX(-7px) rotate(-12deg) scale(1.1); }
  82%      { transform: translateY(-2px)  translateX(3px)  rotate(5deg)   scale(1); }
}

/* A warm ember line under the header ties it together. */
header.site.hw {
  border-bottom: 2px solid rgba(255, 138, 31, .55);
  box-shadow: 0 2px 18px rgba(255, 138, 31, .18);
}

/* ---------------------------------------------------------------
   4. Small screens — keep one pumpkin, drop the rest
   --------------------------------------------------------------- */

@media (max-width: 1000px) {
  .hw-ghosts { display: none; }
  .hw-orbit { display: none; }
  .hw-deco { font-size: 19px; }

  .hero.hw {
    background-position: center 70%;
    background-image:
      linear-gradient(176deg, rgba(10, 6, 3, .88) 0%, rgba(12, 7, 4, .70) 48%, rgba(24, 12, 5, .30) 100%),
      url('/assets/halloween-hero.jpg');
  }

  .hw-banner { font-size: 16px; gap: 11px; letter-spacing: .06em; }
  .hw-banner .hw-count { font-size: 13px; }
  .hw-skull { font-size: 34px; }
}

/* ---------------------------------------------------------------
   5. Respect people who asked for less motion
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hw-pumpkin,
  .hw-orbit,
  .hw-orbit-ghost,
  .hw-ghost,
  .hw-fairy,
  .hw-banner,
  .hw-skull,
  .hw-banner .hw-word,
  .hw-banner .hw-word span {
    animation: none !important;
  }
}

/* Printing a page should not print decorations. */
@media print {
  .hw-deco, .hw-ghosts, .hw-banner, .hw-orbit { display: none !important; }
  .hero.hw { background: #fff !important; }
  .hero.hw h1, .hero.hw .lead, .hero.hw .eyebrow { color: #111 !important; text-shadow: none !important; }
}