/* ==================================================================
   halloween.css - the site-wide Halloween colors, on top of either of
   Bootstrap's color modes. App.razor renders data-holiday="halloween"
   on <html> next to data-bs-theme while the Halloween switch is on
   (never for users on the GrinchList, HolidayCheer), so it holds
   through enhanced navigation; the layouts that take no holiday
   (travelers, PDFs) take it off. Light pages turn bone/pumpkin, dark
   pages turn purple night; the brand blue becomes night purple,
   headers and headings go orange.
   Nothing here touches the production board's row colors: they carry
   production meaning. The production board's own skin
   (AnyProductionBoard.razor.css) adds the table frame and cobweb on
   top of this.
   ================================================================== */

[data-holiday="halloween"] {
    --FRONTENDCOLOR: #2a1740; /* navbar, table heads, packer/shipping headers */
    --hw-orange: #ff8a1f;
    --hw-orange-light: #ffa340;
    --hw-orange-deep: #b34c00; /* orange that reads on light backgrounds (5.3:1 on white) */
    --hw-accent: var(--hw-orange-deep);
}

/* ---- Light mode: bone paper with a pumpkin warmth -------------------- */
[data-holiday="halloween"]:not([data-bs-theme="dark"]) {
    --bs-body-bg: #f8f1e7;
    --bs-body-bg-rgb: 248, 241, 231;
    --bs-tertiary-bg: #f1e5d3;
    --bs-tertiary-bg-rgb: 241, 229, 211;
    --bs-secondary-bg: #e9d9c2;
    --bs-secondary-bg-rgb: 233, 217, 194;
    --bs-border-color: #cdb79b;
    --bs-link-color: #b34c00;
    --bs-link-color-rgb: 179, 76, 0;
    --bs-link-hover-color: #8f3c00;
    --bs-link-hover-color-rgb: 143, 60, 0;
}

/* ---- Dark mode: purple night --------------------------------------- */
[data-holiday="halloween"][data-bs-theme="dark"] {
    --hw-accent: var(--hw-orange-light);
    --bs-body-bg: #140d1c;
    --bs-body-bg-rgb: 20, 13, 28;
    --bs-tertiary-bg: #24162f;
    --bs-tertiary-bg-rgb: 36, 22, 47;
    --bs-secondary-bg: #2e1c3d;
    --bs-secondary-bg-rgb: 46, 28, 61;
    --bs-border-color: #4a2d5e;
    --bs-link-color: #ffa340;
    --bs-link-color-rgb: 255, 163, 64;
    --bs-link-hover-color: #ffc27a;
    --bs-link-hover-color-rgb: 255, 194, 122;
}

/* ---- Accents ------------------------------------------------------- */

/* table heads are already night purple through --FRONTENDCOLOR (app.css) */
[data-holiday="halloween"] thead {
    color: var(--hw-orange);
}

[data-holiday="halloween"] h1, [data-holiday="halloween"] h2, [data-holiday="halloween"] h3, [data-holiday="halloween"] h4 {
    color: var(--hw-accent);
}

[data-holiday="halloween"] .btn-primary {
    --bs-btn-bg: var(--hw-orange);
    --bs-btn-border-color: var(--hw-orange);
    --bs-btn-color: #000;
    --bs-btn-hover-bg: var(--hw-orange-light);
    --bs-btn-hover-border-color: var(--hw-orange-light);
    --bs-btn-hover-color: #000;
    --bs-btn-active-bg: #e67300;
    --bs-btn-active-border-color: #e67300;
    --bs-btn-active-color: #000;
    --bs-btn-disabled-bg: var(--hw-orange);
    --bs-btn-disabled-border-color: var(--hw-orange);
    --bs-btn-disabled-color: #000;
    --bs-btn-focus-shadow-rgb: 255, 138, 31;
}

[data-holiday="halloween"] .btn-warning {
    --bs-btn-bg: var(--hw-orange);
    --bs-btn-border-color: var(--hw-orange);
    --bs-btn-hover-bg: var(--hw-orange-light);
    --bs-btn-hover-border-color: var(--hw-orange-light);
    --bs-btn-active-bg: #e67300;
    --bs-btn-active-border-color: #e67300;
    --bs-btn-disabled-bg: var(--hw-orange);
    --bs-btn-disabled-border-color: var(--hw-orange);
    --bs-btn-focus-shadow-rgb: 255, 138, 31;
}

[data-holiday="halloween"] .form-control:focus,
[data-holiday="halloween"] .form-select:focus,
[data-holiday="halloween"] .form-check-input:focus,
[data-holiday="halloween"] .btn:focus-visible {
    border-color: var(--hw-orange);
    box-shadow: 0 0 0 0.25rem rgba(255, 138, 31, 0.45);
}

[data-holiday="halloween"] .form-check-input:checked {
    background-color: var(--hw-orange);
    border-color: var(--hw-orange);
}

[data-holiday="halloween"] .modal-header,
[data-holiday="halloween"] .card-header {
    background-color: var(--FRONTENDCOLOR);
    color: var(--hw-orange);
}

    [data-holiday="halloween"] .modal-header .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

[data-holiday="halloween"] .accordion-button:not(.collapsed) {
    background-color: var(--FRONTENDCOLOR);
    color: var(--hw-orange);
}

/* ==================================================================
   BATS - HalloweenVeil.razor.js makes these on a click, a swarm at a
   time (none while one is still in the air). Global because the
   elements are made in JS, outside any component's scoped CSS.
   A bat is a paper cut-out (the script draws it; docs/paper-bat.html
   shows the drawing): a flat body between two seams and, either side,
   a wing that is a chain of hinged pieces, shoulder (the seam) > elbow
   crease > wrist crease > finger fold. Each hinge is a box the size of
   the wing turned in 3D about a line through it (--ax/--ay its
   direction, the origin a point on it, --amt the fold at the top of
   the beat, --lag its delay behind the shoulder); the pieces beyond
   the hinge ride inside it. A folded piece lightens (--lit), like paper
   turned to the light. The left wing is the right one in a mirror.
   --w is the wingspan at distance 1; the flight scales it; --flap is
   the beat.
   ================================================================== */

.hw-bat-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1060; /* over the modals, they are only in the air a few seconds */
}

.hw-bat {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--w, 40px);
    height: calc(var(--w, 40px) * 0.3846);                                     /* 260 x 100 units */
    margin: calc(var(--w, 40px) * -0.1923) 0 0 calc(var(--w, 40px) * -0.5);   /* centered on its point */
    perspective: calc(var(--w, 40px) * 3);
    transform-style: preserve-3d;
    will-change: transform;
}

    .hw-bat .hw-body {
        position: absolute;
        left: 42.308%;                /* units 80..120 of 260 */
        top: 0;
        width: 15.385%;
        height: 100%;
        overflow: visible;
        animation: hw-bob var(--flap, 0.18s) ease-in-out infinite alternate;
    }

    .hw-bat .hw-wing {
        position: absolute;
        top: 0;
        width: 42.308%;               /* 110 units: the seam to the furthest tip */
        height: 100%;
        transform-style: preserve-3d;
    }

    .hw-bat .hw-wing.r {
        left: 57.692%;
    }

    .hw-bat .hw-wing.l {
        left: 0;
        transform: scaleX(-1);
    }

    .hw-bat .hw-hinge {
        position: absolute;
        inset: 0;
        display: block;
        transform-style: preserve-3d;
        animation: hw-hinge var(--flap, 0.18s) ease-in-out infinite alternate;
        animation-delay: calc(var(--flap, 0.18s) * var(--lag, 0) * -1);
    }

        .hw-bat .hw-hinge > svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
        }

/* flat against the beat's bottom, folded toward the viewer at its top */
@keyframes hw-hinge {
    from { transform: rotate3d(var(--ax), var(--ay), 0, 0deg); filter: brightness(1); }
    to   { transform: rotate3d(var(--ax), var(--ay), 0, var(--amt)); filter: brightness(var(--lit, 1)); }
}

@keyframes hw-bob {
    from { transform: translateY(-6%); }
    to   { transform: translateY(6%); }
}