/* The horror theme (scripts/horror.js, SeasonalThemes.cs). horror.js sets data-horror="day" or
   "night" on <html>, on top of data-theme="dark": the dark theme's dark blue turns pitch black
   and its blue accents blood red. MainLayout's .page carries data-theme as well, so the colours
   are set on it too, or it would bring the dark blue back. */

@font-face {
    font-family: 'Creepster';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    /* SIL Open Font License 1.1, Sideshow; the Latin subset from Google Fonts. */
    src: url('../fonts/creepster-latin.woff2') format('woff2');
}

:root[data-horror],
:root[data-horror] [data-theme] {
    color-scheme: dark;
    --cb-primary: #c1121f;
    --cb-primary-dark: #e5383b;
    --cb-secondary: #c1121f;
    --cb-link-color: #ff5c5c;

    --cb-bg-body: #000000;
    --cb-bg-surface: #0a0a0a;
    --cb-bg-elevated: #101010;
    --cb-bg-input: #080808;
    --cb-bg-sidebar-start: #000000;
    --cb-bg-sidebar-end: #2b0000;

    --cb-text-body: #e8e2dc;
    --cb-text-strong: #f6efe8;
    --cb-text-muted: #a89c94;

    --cb-border-color: #331414;
    --cb-border-strong: #5a1d1d;
    --cb-border-focus: #ff3b3b;
    --cb-shadow-color: rgba(120, 0, 0, 0.35);

    --cb-tab-active: #ff5c5c;
    --cb-row-active-bg: #2a0707;
    --cb-row-active-border: #7a1616;
    --cb-accent-strong: #ff2e2e;

    --cbh-blood: #8a0303;
    --cbh-blood-light: #b3060b;
}

/* Headings only: the horror font is fun, but not for song titles and lyrics. Besides the real
   headings, the app shows headings as legends, the "Välj sånglista:"-style selector labels and
   table headers. The dense grids keep their plain headers: those are mostly dates and numbers,
   which the horror font makes hard to read, and it is wide enough to stretch their columns. */
:root[data-horror] :is(h1, h2, h3, h4, h5, h6, legend, .cb-selector-label, .cb-loader-greeting),
:root[data-horror] th:not(:is(.attendance-grid, .attendance-table, .poll-grid-roster-table, .poll-grid-tally-table, .lineup-spread) th) {
    font-family: 'Creepster', var(--cb-font-family);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: #d90429;
}

:root[data-horror="night"] h1,
:root[data-horror="night"] h2,
:root[data-horror="night"] h3,
:root[data-horror="night"] .cb-loader-greeting {
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.55);
}

/* ---- The overlay: never in the way of a tap ---- */
.cbh-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
    overflow: hidden;
}

/* The edges of the screen glow red with a slow heartbeat: faint by day, strong at night, and
   now and then it races (horror.js sets cbh-racing). Only the opacity is animated: the browser
   fades that on the GPU. Animating the box-shadow itself repainted the whole screen on the main
   thread every frame, which starved the app on phones until it froze. */
.cbh-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 110px 18px rgba(90, 0, 0, 0.4);
    opacity: 0.5;
    will-change: opacity;
    animation: cbh-heartbeat 1.4s ease-out infinite;
}

:root[data-horror="night"] .cbh-overlay::before {
    box-shadow: inset 0 0 150px 40px rgba(110, 0, 0, 0.65);
}

.cbh-overlay.cbh-racing::before {
    animation-duration: 0.55s;
}

@keyframes cbh-heartbeat {
    0% { opacity: 0.45; }
    8% { opacity: 1; }
    16% { opacity: 0.6; }
    24% { opacity: 0.9; }
    45%, 100% { opacity: 0.45; }
}

/* Blood along the top edge, dripping. */
.cbh-rim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3e%3cpath d='M0 0H120V5C112 5 110 10 104 10C98 10 99 4 90 4C82 4 84 8 76 8C70 8 70 3 62 3C54 3 56 11 48 11C40 11 42 5 34 5C26 5 28 9 20 9C12 9 12 4 0 5Z' fill='%238a0303'/%3e%3c/svg%3e") repeat-x;
    background-size: 120px 12px;
}

.cbh-drip,
.cbh-drop {
    position: absolute;
    /* From the very top, inside the rim, so a drip always hangs from it; and the rim's red. */
    top: 0;
    width: 7px;
    margin-left: -3.5px;
    background: var(--cbh-blood);
}

.cbh-drip {
    height: var(--len);
    border-radius: 0 0 4px 4px;
    transform-origin: top;
    animation: cbh-drip var(--dur) ease-in var(--delay) infinite;
}

.cbh-drop {
    height: 9px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: cbh-drop var(--dur) ease-in var(--delay) infinite;
}

@keyframes cbh-drip {
    0% { transform: scaleY(0.05); }
    65% { transform: scaleY(1); }
    75% { transform: scaleY(0.75); }
    100% { transform: scaleY(0.05); }
}

@keyframes cbh-drop {
    0%, 64% { transform: translateY(var(--len)); opacity: 0; }
    66% { transform: translateY(var(--len)); opacity: 1; }
    100% { transform: translateY(105vh); opacity: 0.8; }
}

:root[data-horror="day"] .cbh-night-only {
    display: none;
}

.cbh-cobweb {
    /* Top left: on the right it covered the menu button. */
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    color: rgba(220, 220, 220, 0.28);
}

.cbh-cobweb svg {
    width: 100%;
    height: 100%;
}

/* ---- Creatures ---- */
.cbh-spider {
    position: absolute;
    top: 0;
    left: 0;
    /* Off-screen until its animation moves it, and after (horror.js). */
    transform: translate(-200px, -200px);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

/* On the black page a black spider is hard to see; it gets a faint outline. */
.cbh-spider svg,
.cbh-big-spider svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.75));
}

.cbh-legs-a,
.cbh-legs-b {
    animation: cbh-legs 0.18s ease-in-out infinite alternate;
    transform-origin: 0 0;
}

.cbh-legs-b {
    animation-direction: alternate-reverse;
}

/* A spider standing still keeps its legs still (horror.js). */
.cbh-still .cbh-legs-a,
.cbh-still .cbh-legs-b {
    animation-play-state: paused;
}

@keyframes cbh-legs {
    from { transform: rotate(-9deg); }
    to { transform: rotate(9deg); }
}

.cbh-bat {
    position: absolute;
    top: 0;
    left: 0;
    /* Off-screen until its animation moves it, and after (horror.js). */
    transform: translate(-200px, -200px);
    width: 56px;
    height: 24px;
}

.cbh-bat svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 2px rgba(255, 60, 60, 0.5));
}

.cbh-wing {
    animation: cbh-flap 0.16s ease-in-out infinite alternate;
    transform-origin: 0 0;
}

@keyframes cbh-flap {
    from { transform: scaleY(1); }
    to { transform: scaleY(-0.4); }
}

.cbh-eyes {
    position: absolute;
    display: flex;
    gap: 7px;
    animation: cbh-eyes 4.2s ease-in-out forwards;
}

.cbh-eyes i {
    width: 9px;
    height: 5px;
    border-radius: 50%;
    background: #ffcc00;
    box-shadow: 0 0 8px 2px rgba(255, 60, 0, 0.8);
}

@keyframes cbh-eyes {
    0% { opacity: 0; transform: scaleY(0.1); }
    15% { opacity: 1; transform: scaleY(1); }
    45% { opacity: 1; transform: scaleY(1); }
    48% { transform: scaleY(0.1); }
    51% { transform: scaleY(1); }
    85% { opacity: 1; }
    100% { opacity: 0; transform: scaleY(0.1); }
}

/* ---- Jump scares ---- */
.cbh-scare {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

.cbh-scare-bird {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(60, 0, 0, 0.92), rgba(0, 0, 0, 0.98) 70%);
    animation: cbh-scare-fade 1.7s ease-out forwards;
}

.cbh-scare-svg {
    width: min(85vw, 85vh);
    height: auto;
    animation: cbh-lunge 1.7s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}

@keyframes cbh-scare-fade {
    0% { opacity: 0; }
    4% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes cbh-lunge {
    0% { transform: scale(0.15) rotate(-8deg); }
    14% { transform: scale(1.12) rotate(3deg); }
    22% { transform: scale(1) rotate(0); }
    30% { transform: scale(1.04) translateX(-6px); }
    36% { transform: scale(1.04) translateX(6px); }
    42% { transform: scale(1); }
    100% { transform: scale(1.5); }
}

.cbh-scare-spider .cbh-thread {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5px;
    height: 0;
    background: rgba(230, 230, 230, 0.7);
    animation: cbh-thread 2.6s ease-in forwards;
}

.cbh-big-spider {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 216px;
    margin-left: -90px;
    transform: translateY(-240px) rotate(180deg);
    animation: cbh-big-spider 2.6s ease-in forwards;
}

@keyframes cbh-thread {
    0% { height: 0; }
    12% { height: 40vh; }
    70% { height: 40vh; }
    85% { height: 0; }
    100% { height: 0; }
}

@keyframes cbh-big-spider {
    0% { transform: translateY(-240px) rotate(180deg); }
    12% { transform: translateY(calc(40vh - 20px)) rotate(180deg); }
    18% { transform: translateY(calc(40vh - 50px)) rotate(176deg); }
    26% { transform: translateY(calc(40vh - 20px)) rotate(184deg); }
    70% { transform: translateY(calc(40vh - 20px)) rotate(180deg); }
    85% { transform: translateY(-240px) rotate(180deg); }
    100% { transform: translateY(-240px) rotate(180deg); }
}

/* ---- The loading screen ---- */
.cb-loader-horror .cbh-splash-bird {
    width: min(55vw, 13rem);
    height: auto;
    animation: cbh-splash 3s ease-in-out infinite;
}

.cb-loader-horror .cb-loader-lines {
    fill: #4a1a1a;
}

.cb-loader-horror .cb-loader-music {
    fill: #e8e2dc;
}

.cb-loader-horror .cb-loader-note.cb-current {
    fill: #ff1a1a;
}

@keyframes cbh-splash {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-6px) rotate(1deg); }
}

.cbh-eye-glow {
    animation: cbh-glow 2.4s ease-in-out infinite;
}

@keyframes cbh-glow {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* ---- Gothic frames: the start page's cards get a corroded iron frame with blood-red studs ----
   Drawn as an extra layer around each card that ignores the pointer, so the cards keep their size. */
:root[data-horror] .home-page .cb-page-card {
    position: relative;
}

:root[data-horror] .home-page .cb-page-card::before {
    content: "";
    position: absolute;
    inset: -7px;
    border: 14px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E %3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%2377706a'/%3E%3Cstop offset='0.45' stop-color='%2326221f'/%3E%3Cstop offset='1' stop-color='%234d4640'/%3E%3C/linearGradient%3E%3C/defs%3E %3Crect x='4' y='4' width='52' height='52' rx='1.5' fill='none' stroke='url%28%23m%29' stroke-width='5'/%3E %3Crect x='8' y='8' width='44' height='44' fill='none' stroke='%23000' stroke-width='1'/%3E %3Crect x='1.2' y='1.2' width='57.6' height='57.6' fill='none' stroke='%23000' stroke-width='0.8'/%3E %3Cg fill='%234a1405' opacity='0.85'%3E%3Ccircle cx='24' cy='3.4' r='1.3'/%3E%3Ccircle cx='36' cy='4.8' r='0.9'/%3E%3Ccircle cx='56.4' cy='27' r='1.2'/%3E%3Ccircle cx='20' cy='56.2' r='1.4'/%3E%3Ccircle cx='3.6' cy='38' r='1'/%3E%3C/g%3E %3Cg stroke='%23000' stroke-width='0.8' fill='url%28%23m%29'%3E%3Ccircle cx='7' cy='7' r='6.3'/%3E%3Ccircle cx='53' cy='7' r='6.3'/%3E%3Ccircle cx='7' cy='53' r='6.3'/%3E%3Ccircle cx='53' cy='53' r='6.3'/%3E%3C/g%3E %3Cg fill='%238a0303'%3E%3Ccircle cx='7' cy='7' r='2.5'/%3E%3Ccircle cx='53' cy='7' r='2.5'/%3E%3Ccircle cx='7' cy='53' r='2.5'/%3E%3Ccircle cx='53' cy='53' r='2.5'/%3E%3C/g%3E %3Cg fill='%23ff6a6a' opacity='0.6'%3E%3Ccircle cx='6.2' cy='6.2' r='0.8'/%3E%3Ccircle cx='52.2' cy='6.2' r='0.8'/%3E%3Ccircle cx='6.2' cy='52.2' r='0.8'/%3E%3Ccircle cx='52.2' cy='52.2' r='0.8'/%3E%3C/g%3E %3C/svg%3E") 14 round;
    pointer-events: none;
}

/* ---- The eye that follows you (horror.js): bottom right, where the main view has room ---- */
.cbh-watcher {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 24px;
    transition: transform 0.12s ease-in;
    filter: drop-shadow(0 0 4px rgba(255, 30, 0, 0.45));
}

.cbh-watcher svg,
.cbh-visitor svg,
.cbh-hand svg {
    width: 100%;
    height: 100%;
}

.cbh-iris {
    transition: transform 0.25s ease-out;
}

.cbh-watcher.cbh-blink,
.cbh-watcher.cbh-shut {
    transform: scaleY(0.08);
}

/* ---- The occasional visitor ---- */
.cbh-visitor {
    position: absolute;
    bottom: 0;
    aspect-ratio: 120 / 300;
    opacity: 0;
    animation: cbh-visit 7s ease-in-out forwards;
}

@keyframes cbh-visit {
    0% { opacity: 0; }
    25%, 70% { opacity: 0.9; }
    100% { opacity: 0; }
}

/* ---- Corrupted headings: false words over a real heading, for a moment ---- */
.cbh-corrupt {
    position: absolute;
    white-space: nowrap;
    color: #ff1a1a;
    animation: cbh-glitch 0.32s steps(1) forwards;
}

@keyframes cbh-glitch {
    0% { transform: translateX(-3px); opacity: 1; }
    20% { transform: translateX(2px); }
    45% { transform: translateX(-1px) skewX(-8deg); }
    70% { transform: translateX(3px); }
    90% { transform: none; opacity: 1; }
    100% { opacity: 0; }
}

/* ---- Whispers ---- */
.cbh-whisper {
    position: absolute;
    max-width: 80vw;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(225, 205, 205, 0.85);
    text-shadow: 0 0 6px rgba(160, 0, 0, 0.8);
    opacity: 0;
    animation: cbh-whisper 6s ease-in-out forwards;
}

@keyframes cbh-whisper {
    0% { opacity: 0; transform: translateY(8px); }
    35%, 65% { opacity: 0.8; }
    100% { opacity: 0; transform: translateY(-8px); }
}

/* ---- Handprints on the glass ---- */
.cbh-hand {
    position: absolute;
    opacity: 0;
    transform: rotate(var(--tilt));
    animation: cbh-hand 8s ease-out forwards;
}

@keyframes cbh-hand {
    0% { opacity: 0; transform: rotate(var(--tilt)) scale(1.06); }
    4% { opacity: 0.9; transform: rotate(var(--tilt)) scale(1); }
    55% { opacity: 0.75; }
    100% { opacity: 0; transform: rotate(var(--tilt)) scale(1); }
}

/* Reduced motion: the still decorations stay; nothing moves or jumps (horror.js skips the
   creatures and scares). */
@media (prefers-reduced-motion: reduce) {
    .cbh-drip,
    .cbh-drop,
    .cbh-eye-glow,
    .cb-loader-horror .cbh-splash-bird,
    .cbh-overlay::before {
        animation: none;
    }

    .cbh-drop {
        display: none;
    }
}