/*
 * Twinkle Lights: the light strands drawn by js/lights.js (home page only).
 *
 * A strand element holds one SVG wire and absolutely placed .bulb anchors. Each anchor sits on
 * the wire, turned so its local "down" points into the shape; the socket and the glass hang
 * from it. The glass shows its unlit color; its ::before (the lit glass) and ::after (the
 * halo) fade together to twinkle. Twinkling runs only with prefers-reduced-motion:
 * no-preference; otherwise every bulb stays lit and still.
 *
 * Sizes per strand: --bulb-length (socket to tip, px) and --bulb-spacing (multiple of it).
 */

[data-strand] {
    --bulb-length: 24px;
    --bulb-spacing: 2;
    pointer-events: none;
    overflow: visible;
}

.wire { position: absolute; inset: 0; overflow: visible; }
.wire path {
    fill: none;
    stroke: #2C6B3F;
    stroke-width: calc(var(--bulb-length) * 0.11);
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* =========================================================================
   One bulb: anchor, socket, glass, glow
   ========================================================================= */

.bulb {
    --c: var(--bulb-yellow);
    position: absolute; left: 0; top: 0; width: 0; height: 0;
}
.bulb.c-0 { --c: var(--bulb-red); }
.bulb.c-1 { --c: var(--bulb-green); }
.bulb.c-2 { --c: var(--bulb-blue); }
.bulb.c-3 { --c: var(--bulb-yellow); }
.bulb.c-4 { --c: var(--bulb-orange); }

/* The socket: a small green cylinder clipped onto the wire. */
.bulb::before {
    content: "";
    position: absolute;
    left: calc(var(--bulb-length) * -0.13);
    top: calc(var(--bulb-length) * -0.04);
    width: calc(var(--bulb-length) * 0.26);
    height: calc(var(--bulb-length) * 0.3);
    border-radius: 2px 2px 1px 1px;
    background: linear-gradient(to right, #1E4D2B, #3A8550 45%, #1E4D2B);
}

/* The glass, unlit: a darker shade of the bulb's color, narrow at the socket, round at the tip. */
.glass {
    position: absolute;
    left: calc(var(--bulb-length) * -0.22);
    top: calc(var(--bulb-length) * 0.24);
    width: calc(var(--bulb-length) * 0.44);
    height: calc(var(--bulb-length) * 0.76);
    border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
    background: color-mix(in srgb, var(--c) 45%, #0B1426);
}

/* Lit glass with a highlight, and the soft halo around it. */
.glass::before,
.glass::after {
    content: "";
    position: absolute;
}
.glass::before {
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(ellipse 30% 22% at 36% 32%, rgb(255 255 255 / 0.85), transparent),
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 70%);
}
.glass::after {
    left: 50%; top: 55%;
    z-index: -1;               /* behind the glass and socket, inside the bulb's stacking context */
    width: calc(var(--bulb-length) * 2.4);
    height: calc(var(--bulb-length) * 2.4);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent), transparent 65%);
}

/* =========================================================================
   Twinkle: seven timings, mixed along the strand by lights.js
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
    .glass::before,
    .glass::after {
        animation: twinkle var(--tw-time, 3s) ease-in-out var(--tw-delay, 0s) infinite;
    }
    .tw-0 { --tw-time: 2.6s; --tw-delay: -0.4s; }
    .tw-1 { --tw-time: 3.4s; --tw-delay: -2.1s; }
    .tw-2 { --tw-time: 4.2s; --tw-delay: -1.3s; }
    .tw-3 { --tw-time: 3.0s; --tw-delay: -2.7s; }
    .tw-4 { --tw-time: 5.0s; --tw-delay: -3.6s; }
    .tw-5 { --tw-time: 3.8s; --tw-delay: -0.9s; }
    .tw-6 { --tw-time: 4.6s; --tw-delay: -4.1s; }

    .lights-paused .glass::before,
    .lights-paused .glass::after { animation-play-state: paused; }
}

@keyframes twinkle {
    0%, 100% { opacity: 1; }
    45%      { opacity: 1; }
    65%      { opacity: 0.18; }
    80%      { opacity: 0.9; }
}