/* ==========================================================
   TEBos – Halloween theme (overlay on top of style.css)
   To turn it off: remove the 3 "halloween" lines from index.php
   Photos (hotlinked from Wikimedia Commons):
   - Full moon – NASA/JPL/USGS, public domain
   - Halloween lantern & pumpkin – Pixel.la Free Stock Photos, CC0
   Bats, pumpkins, cobwebs, ghosts – original SVG
   ========================================================== */

:root {
    --hw-orange: #ff7a18;
    --hw-orange-deep: #c94a00;
    --hw-purple: #5b2a86;
    --hw-slime: #7bd23a;
    --hw-night: #0d0716;
}

/* ── Night sky ── */
body {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(120, 50, 160, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 110%, rgba(255, 110, 20, 0.25) 0%, transparent 55%),
        linear-gradient(180deg, #160b24 0%, #0d0716 55%, #120806 100%);
    background-size: 100% 100%;
    animation: none;
}

/* Background photo: glowing jack-o'-lantern (CC0), dim + blurred */
.hw-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Lamp-halloween-lantern-pumpkin_%2824217627862%29.jpg/1280px-Lamp-halloween-lantern-pumpkin_%2824217627862%29.jpg') center 70% / cover no-repeat;
    opacity: 0.22;
    filter: blur(3px) saturate(1.3);
}
.hw-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, var(--hw-night) 85%);
}

/* Harvest moon (NASA, public domain) */
.hw-moon {
    position: fixed;
    top: 28px;
    left: 50%;
    width: 210px;
    height: 210px;
    margin-left: -105px;
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
    background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Full_moon.jpeg/960px-Full_moon.jpeg') center / 106% no-repeat, #e8d9b0;
    filter: sepia(0.55) saturate(1.6) hue-rotate(-12deg) brightness(1.05);
    box-shadow:
        0 0 40px 8px rgba(255, 170, 70, 0.35),
        0 0 120px 40px rgba(255, 120, 30, 0.18);
    animation: hw-moon-glow 7s ease-in-out infinite;
}
@keyframes hw-moon-glow {
    0%, 100% { box-shadow: 0 0 40px 8px rgba(255,170,70,.35), 0 0 120px 40px rgba(255,120,30,.18); }
    50%      { box-shadow: 0 0 55px 12px rgba(255,170,70,.45), 0 0 160px 55px rgba(255,120,30,.24); }
}

/* Drifting fog */
.hw-fog {
    position: fixed;
    left: -50%;
    width: 200%;
    height: 45vh;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 25% 40% at 20% 80%, rgba(200, 190, 230, 0.10), transparent 70%),
        radial-gradient(ellipse 30% 45% at 55% 90%, rgba(200, 190, 230, 0.12), transparent 70%),
        radial-gradient(ellipse 22% 35% at 85% 85%, rgba(200, 190, 230, 0.09), transparent 70%);
    animation: hw-fog 60s linear infinite;
}
.hw-fog.two {
    animation-duration: 95s;
    animation-direction: reverse;
    opacity: 0.8;
    bottom: 5vh;
}
@keyframes hw-fog {
    from { transform: translateX(0); }
    to   { transform: translateX(25%); }
}

/* Keep logos and tiles above the decorations */
body > div:first-child,
body > div:nth-child(3) { z-index: 10; }
body > div:first-child { fill: var(--hw-orange); filter: drop-shadow(0 0 8px rgba(255,122,24,.5)); }
body > div:nth-child(3) { fill: #b77cff; filter: drop-shadow(0 0 8px rgba(160,90,255,.5)); }
.tiles { z-index: 5; }

/* ── Tiles ── */
.tile {
    border: 1px solid rgba(255, 160, 60, 0.25);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.55),
        inset 0 0 25px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.tile.green {   /* clock + next lesson – witchy purple */
    background: linear-gradient(135deg, #3b1760, #5b2a86, #2a0f45);
    background-size: 300% 300%;
    box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 28px rgba(140, 70, 220, 0.35);
}
.tile.red {     /* events – blood red */
    background: linear-gradient(135deg, #8e0e1a, #5c0610, #b3121f);
    background-size: 300% 300%;
}
.tile.orange {  /* countdowns – pumpkin */
    background: linear-gradient(135deg, #ff8a1e, #e2620a, #b84300);
    background-size: 300% 300%;
    box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 26px rgba(255, 120, 20, 0.4);
}
.tile.purple {  /* info (notouch) – midnight */
    background: linear-gradient(135deg, #1b1030, #2c1a4a, #120a22);
    background-size: 300% 300%;
}
.tile.teal {    /* weather – toxic slime */
    background: linear-gradient(135deg, #1f3d14, #2f5e1c, #173010);
    background-size: 300% 300%;
    box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 24px rgba(123, 210, 58, 0.3);
}

/* Cobweb in the clock tile's corner */
.tile.green::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
    opacity: 0.35;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='white' stroke-width='1'%3E%3Cpath d='M100 0 L0 0 M100 0 L20 60 M100 0 L55 85 M100 0 L100 100'/%3E%3Cpath d='M78 0 Q80 14 100 22 M55 0 Q60 32 100 45 M32 0 Q42 52 100 70 M12 0 Q26 72 100 94'/%3E%3C/svg%3E") top right / contain no-repeat;
}

/* Clock digits glow */
.tile.green .counter { text-shadow: 0 0 14px rgba(255, 170, 70, 0.55); }
.tile-label { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.tile-icon { filter: drop-shadow(0 0 6px rgba(255, 170, 70, 0.6)); }

/* ── Pumpkin row above the ticker ── */
.hw-pumpkins {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 42px;               /* ticker is 28px * 1.5 */
    height: 70px;
    z-index: 6;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 3vw;
}
.hw-pumpkins svg {
    height: 58px;
    width: auto;
    filter: drop-shadow(0 0 10px rgba(255, 140, 30, 0.55));
}
.hw-pumpkins svg:nth-child(even) { height: 44px; }
.hw-pumpkins .glow { animation: hw-candle 2.4s ease-in-out infinite; }
.hw-pumpkins svg:nth-child(2n) .glow { animation-delay: -.8s; }
.hw-pumpkins svg:nth-child(3n) .glow { animation-delay: -1.6s; }
@keyframes hw-candle {
    0%, 100% { opacity: 1; }
    30% { opacity: .75; }
    55% { opacity: .95; }
    75% { opacity: .65; }
}

/* ── Bats ── */
.hw-bat {
    position: fixed;
    top: 0;
    left: 0;
    width: 46px;
    z-index: 8;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 0 4px rgba(255, 150, 50, 0.75)) drop-shadow(0 0 10px rgba(180, 90, 255, 0.35));
}
.hw-bat svg { width: 100%; height: auto; display: block; }
.hw-bat .wing { transform-origin: 50% 40%; animation: hw-flap .22s ease-in-out infinite alternate; }
@keyframes hw-flap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(.35); }
}

/* ── Ghosts ── */
.hw-ghost {
    position: fixed;
    z-index: 3;
    width: 70px;
    pointer-events: none;
    opacity: 0;
    animation: hw-ghost 22s ease-in-out infinite;
}
.hw-ghost.left  { left: 6vw;  top: 34vh; }
.hw-ghost.right { right: 7vw; top: 40vh; animation-delay: -11s; }
@keyframes hw-ghost {
    0%   { opacity: 0;   transform: translateY(20px); }
    15%  { opacity: .55; }
    50%  { opacity: .55; transform: translateY(-25px); }
    85%  { opacity: .55; }
    100% { opacity: 0;   transform: translateY(20px); }
}

/* ── Popups & ticker ── */
.popup { background: #150d1f; border: 1px solid rgba(255, 140, 40, 0.2); }
.popup-header.green  { background: #5b2a86; }
.popup-header.red    { background: #8e0e1a; }
.popup-header.orange { background: #d85a06; }
.popup-header.teal   { background: #2f5e1c; }
.cd-card { border-left-color: var(--hw-orange); }
.ev-desc-inner { border-left-color: rgba(255, 122, 24, 0.5); }
.event-badge { background: rgba(255, 122, 24, 0.2); color: #ffb26b; }

.ticker-bar {
    background: rgba(20, 8, 30, 0.85);
    border-top: 1px solid rgba(255, 122, 24, 0.5);
}
.ticker-bar ul li { border-left-color: var(--hw-orange); }