/* =========================================================
   SEASON: Fall / Halloween
   Remove this file + the "SEASON" blocks in index.html to go back to the evergreen look.
   ========================================================= */
:root {
  --promo-h: 40px;
  --leaf-1: #FF7A2F;  /* pumpkin */
  --leaf-2: #E2542B;  /* rust */
  --leaf-3: #FFB443;  /* gold */
  --leaf-4: #F0468F;  /* brand pink */
}

/* ---------- Promo bar ---------- */
.promo {
  height: var(--promo-h); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px;
  background: linear-gradient(90deg, #2A1433, #4A1D4F 45%, #2A1433); color: #fff; font-size: 14px; overflow: hidden;
  transition: margin-top .35s var(--ease); position: relative;
}
.promo::after { /* slow shimmer */
  content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,180,67,.18) 50%, transparent 65%);
  background-size: 250% 100%; animation: promoShine 6s linear infinite; pointer-events: none;
}
@keyframes promoShine { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.promo b { color: #FFB778; font-weight: 800; }
.promo__more { color: rgba(255,255,255,.85); }
.promo__icon { color: var(--pumpkin); font-size: 18px; display: inline-flex; animation: wobble 2.4s ease-in-out infinite; }
.promo__arrow { transition: transform .3s var(--ease); }
.promo:hover .promo__arrow { transform: translateX(4px); }
.promo:hover .promo__more { text-decoration: underline; text-underline-offset: 3px; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(0); } }
.header.is-scrolled .promo { margin-top: calc(-1 * var(--promo-h)); }

/* ---------- Fall section ---------- */
.fall {
  background:
    radial-gradient(50% 60% at 15% 0%, rgba(255,122,47,.28), transparent 65%),
    radial-gradient(45% 55% at 90% 100%, rgba(240,70,143,.32), transparent 65%),
    linear-gradient(180deg, #2A1433, #1E0D26);
  color: #fff; overflow: hidden; isolation: isolate;
}
.fall .shead h2 em { color: #FFB778; }
.fall .shead > p:not(.eyebrow) { color: rgba(255,255,255,.78); }
.fall .eyebrow { color: #FFB778; }
.fall__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fcard {
  position: relative; padding: 32px 28px; border-radius: 24px; overflow: hidden;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(6px);
  transition: transform .45s var(--ease), background .3s, box-shadow .3s;
}
.fcard::before { content: ""; position: absolute; inset: auto -30% -60% auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,47,.35), transparent 65%); opacity: 0; transition: opacity .4s; }
.fcard:hover { transform: translateY(-6px); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,183,120,.45), 0 24px 50px -20px rgba(0,0,0,.6); }
.fcard:hover::before { opacity: 1; }
.fcard__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; font-size: 26px; color: #fff; background: linear-gradient(135deg, var(--rose), var(--pumpkin)); box-shadow: 0 10px 24px -8px rgba(255,122,47,.7); margin-bottom: 20px; transition: transform .5s var(--ease); }
.fcard:hover .fcard__icon { transform: rotate(-10deg) scale(1.08); }
.fcard h3 { font-size: 22px; margin-bottom: 8px; }
.fcard p { color: rgba(255,255,255,.75); }
.fall__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 48px; text-align: center; }
.fall__cta p { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.72); font-size: 15px; }
.fall__cta p svg { color: #FFB778; }

/* bats & drifting leaves */
.fall__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fall__sky::before { /* harvest moon */
  content: ""; position: absolute; top: 6%; right: 9%; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #FFF4DF, #FFD9A0 55%, #FFB778);
  box-shadow: 0 0 60px 20px rgba(255,183,120,.35), 0 0 160px 60px rgba(255,122,47,.18);
  opacity: .92;
}
.bat { position: absolute; width: 46px; height: 23px; color: #12051A; opacity: .95; z-index: 1; animation: batFly 14s linear infinite; }
.bat--1 { top: 13%; animation-delay: -2s; }
.bat--2 { top: 22%; width: 30px; height: 15px; animation-duration: 18s; animation-delay: -9s; }
.bat--3 { top: 6%; width: 36px; height: 18px; animation-duration: 22s; animation-delay: -15s; }
@keyframes batFly {
  0% { left: -8%; transform: translateY(0) scaleY(1); }
  10% { transform: translateY(-14px) scaleY(.55); }
  20% { transform: translateY(6px) scaleY(1); }
  30% { transform: translateY(-10px) scaleY(.55); }
  40% { transform: translateY(8px) scaleY(1); }
  50% { transform: translateY(-12px) scaleY(.55); }
  60% { transform: translateY(4px) scaleY(1); }
  70% { transform: translateY(-8px) scaleY(.55); }
  80% { transform: translateY(6px) scaleY(1); }
  100% { left: 108%; transform: translateY(0) scaleY(.55); }
}
.leaf { position: absolute; top: -10%; width: 26px; height: 26px; opacity: .85; animation: leafFall 16s linear infinite; }
.leaf--1 { left: 6%;  color: var(--leaf-1); animation-delay: -1s; }
.leaf--2 { left: 18%; color: var(--leaf-3); width: 18px; height: 18px; animation-duration: 19s; animation-delay: -7s; }
.leaf--3 { left: 33%; color: var(--leaf-2); animation-duration: 14s; animation-delay: -11s; }
.leaf--4 { left: 49%; color: var(--leaf-4); width: 20px; height: 20px; animation-duration: 21s; animation-delay: -4s; }
.leaf--5 { left: 63%; color: var(--leaf-1); width: 30px; height: 30px; animation-duration: 17s; animation-delay: -13s; }
.leaf--6 { left: 76%; color: var(--leaf-3); animation-duration: 15s; animation-delay: -2s; }
.leaf--7 { left: 88%; color: var(--leaf-2); width: 22px; height: 22px; animation-duration: 20s; animation-delay: -9s; }
.leaf--8 { left: 95%; color: var(--leaf-4); width: 16px; height: 16px; animation-duration: 18s; animation-delay: -15s; }
@keyframes leafFall {
  0%   { transform: translate(0, 0) rotate(0); }
  25%  { transform: translate(40px, 30vh) rotate(120deg); }
  50%  { transform: translate(-20px, 60vh) rotate(220deg); }
  75%  { transform: translate(30px, 90vh) rotate(330deg); }
  100% { transform: translate(-10px, 125vh) rotate(420deg); }
}

/* ---------- Final CTA: leaves instead of sparkles ---------- */
.final__sparkles svg { position: absolute; width: 26px; height: 26px; opacity: .8; animation: leafSway 5s ease-in-out infinite; }
.final__sparkles svg:nth-child(1) { left: 7%;  top: 18%; color: var(--leaf-1); }
.final__sparkles svg:nth-child(2) { left: 16%; bottom: 16%; width: 18px; height: 18px; color: var(--leaf-4); animation-delay: -1.2s; }
.final__sparkles svg:nth-child(3) { right: 9%; top: 14%; width: 34px; height: 34px; color: var(--leaf-3); animation-delay: -2.1s; }
.final__sparkles svg:nth-child(4) { right: 18%; bottom: 20%; width: 20px; height: 20px; color: var(--leaf-2); animation-delay: -3s; }
.final__sparkles svg:nth-child(5) { left: 46%; top: 7%; width: 16px; height: 16px; color: var(--leaf-1); animation-delay: -3.8s; }
.final__sparkles svg:nth-child(6) { left: 28%; top: 10%; width: 14px; height: 14px; color: var(--leaf-3); animation-delay: -.6s; }
@keyframes leafSway { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(12px) rotate(18deg); } }
.final h2 em { color: #FFB778; }

/* marquee sparkles become fall-coloured */
.marquee__track i { color: var(--pumpkin); }

@media (max-width: 1080px) {
  .fall__grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 720px) {
  :root { --promo-h: 38px; }
  .promo { font-size: 13px; }
  .promo__more { display: none; }
  .bat--3, .leaf--6, .leaf--7, .leaf--8 { display: none; }
  .fall__sky::before { width: 80px; height: 80px; top: -18px; right: -18px; }
}