/* Smile Halloween 2026 - decorations for every Smile website (halloween.js adds them).
   Nothing here does anything until halloween.js puts .smile-halloween on <html>, and it stops doing
   that at 00:00 UK time on 1 November 2026, so the sites go back to normal by themselves.
   Colours: the Smile navy and gold, with pumpkin orange. */

.smile-halloween .shw-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; overflow: hidden; }

/* spider webs in the top corners */
.smile-halloween .shw-web { position: absolute; top: -2px; width: 150px; height: 150px; opacity: .42; filter: drop-shadow(0 0 6px rgba(242, 194, 0, .25)); }
.smile-halloween .shw-web.left { left: -2px; }
.smile-halloween .shw-web.right { right: -2px; transform: scaleX(-1); }
.smile-halloween .shw-web path { fill: none; stroke: #f2c200; stroke-width: 1.1; stroke-linecap: round; }

/* the spider on its thread */
.smile-halloween .shw-spider { position: absolute; top: 0; right: 92px; width: 26px; transform-origin: 50% 0; animation: shw-drop 7s ease-in-out infinite; }
.smile-halloween .shw-spider .thread { display: block; width: 1px; height: 90px; margin: 0 auto; background: linear-gradient(rgba(242, 194, 0, .55), rgba(242, 194, 0, .2)); }
.smile-halloween .shw-spider svg { display: block; width: 26px; height: 22px; margin-top: -2px; }
@keyframes shw-drop { 0%, 100% { transform: translateY(-46px); } 45% { transform: translateY(0); } 60% { transform: translateY(-6px) rotate(3deg); } 75% { transform: translateY(0) rotate(-2deg); } }

/* bats flying across */
.smile-halloween .shw-bat { position: absolute; left: -80px; top: var(--y, 20vh); width: var(--w, 46px); opacity: 0; animation: shw-fly var(--t, 9s) linear forwards; }
.smile-halloween .shw-bat svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 7px rgba(255, 138, 31, .55)); animation: shw-flap .32s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.smile-halloween .shw-bat.back { left: auto; right: -80px; animation-name: shw-fly-back; }
.smile-halloween .shw-bat.back svg { transform: scaleX(-1); animation-name: shw-flap-back; }
@keyframes shw-fly { 0% { opacity: 0; transform: translate(0, 0); } 8% { opacity: .95; } 50% { transform: translate(55vw, -6vh); } 92% { opacity: .95; } 100% { opacity: 0; transform: translate(112vw, 4vh); } }
@keyframes shw-fly-back { 0% { opacity: 0; transform: translate(0, 0); } 8% { opacity: .95; } 50% { transform: translate(-55vw, -5vh); } 92% { opacity: .95; } 100% { opacity: 0; transform: translate(-112vw, 3vh); } }
@keyframes shw-flap { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
@keyframes shw-flap-back { from { transform: scaleX(-1) scaleY(1); } to { transform: scaleX(-1) scaleY(.55); } }

/* a ghost drifting past now and then */
.smile-halloween .shw-ghost { position: absolute; bottom: 14vh; left: -90px; width: 64px; opacity: 0; animation: shw-ghost 16s ease-in-out forwards; }
.smile-halloween .shw-ghost svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 12px rgba(242, 194, 0, .35)); }
@keyframes shw-ghost { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .5; } 25% { transform: translate(28vw, -3vh); } 50% { transform: translate(55vw, 2vh); } 75% { transform: translate(82vw, -2vh); } 90% { opacity: .5; } 100% { opacity: 0; transform: translate(110vw, 0); } }

/* jack-o'-lanterns in the bottom corner, glowing */
.smile-halloween .shw-pumpkins { position: absolute; left: 14px; bottom: 10px; display: flex; align-items: flex-end; gap: 2px; }
.smile-halloween .shw-pumpkin { display: block; filter: drop-shadow(0 0 10px rgba(255, 138, 31, .5)); animation: shw-glow 3.2s ease-in-out infinite; }
.smile-halloween .shw-pumpkin.big { width: 54px; } .smile-halloween .shw-pumpkin.small { width: 38px; animation-delay: 1.1s; }
@keyframes shw-glow { 0%, 100% { filter: drop-shadow(0 0 7px rgba(255, 138, 31, .4)); } 50% { filter: drop-shadow(0 0 16px rgba(255, 160, 50, .75)); } }
.smile-halloween .shw-fog { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to top, rgba(255, 122, 24, .10), transparent); }

/* the promo pill */
.smile-halloween .shw-pill { position: fixed; z-index: 2147483001; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  padding: 9px 10px 9px 12px; border-radius: 999px; background: rgba(9, 20, 36, .94); border: 1px solid rgba(255, 138, 31, .55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 122, 24, .22); color: #f7f7f2; font: 600 14px/1.3 Inter, "Segoe UI", system-ui, sans-serif;
  backdrop-filter: blur(8px); animation: shw-pill-in .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.smile-halloween .shw-pill .shw-pill-icon { width: 26px; height: 26px; flex: none; }
.smile-halloween .shw-pill .shw-pill-text { min-width: 0; }
.smile-halloween .shw-pill .shw-pill-text b { color: #ff9a3c; font-weight: 800; }
.smile-halloween .shw-pill .shw-code { flex: none; cursor: pointer; border: 1px dashed rgba(242, 194, 0, .8); background: rgba(242, 194, 0, .12); color: #f2c200; border-radius: 8px;
  padding: 5px 9px; font: 800 13px/1 ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.smile-halloween .shw-pill .shw-code:hover { background: rgba(242, 194, 0, .22); }
.smile-halloween .shw-pill .shw-close { flex: none; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: #cfd6df; font: 700 15px/26px system-ui, sans-serif; padding: 0; }
.smile-halloween .shw-pill .shw-close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
@keyframes shw-pill-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 640px) {
  .smile-halloween .shw-web { width: 92px; height: 92px; }
  .smile-halloween .shw-spider { right: 54px; }
  .smile-halloween .shw-spider .thread { height: 56px; }
  .smile-halloween .shw-pumpkins { display: none; }
  .smile-halloween .shw-pill { bottom: 10px; font-size: 12.5px; gap: 7px; padding: 7px 7px 7px 9px; border-radius: 16px; }
  .smile-halloween .shw-pill .shw-pill-icon { width: 22px; height: 22px; }
  .smile-halloween .shw-pill .shw-hh { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .smile-halloween .shw-spider, .smile-halloween .shw-pumpkin, .smile-halloween .shw-pill, .smile-halloween .shw-bat svg { animation: none; }
  .smile-halloween .shw-bat, .smile-halloween .shw-ghost { display: none; }
}
@media print { .smile-halloween .shw-layer, .smile-halloween .shw-pill { display: none; } }