/* reusable ornaments: stepped frames, corner roundels, dividers, sunburst rays. */

/*
 * A framed surface with stepped corners and no border radius.
 * The brass rim is the element's own background; ::before paints the dark
 * fill 1px inside it, so the rim follows every step of the corner.
 * Direct children are lifted above that fill.
 */
.deco-frame {
    position: relative;
    border-radius: 0;
    background-color: var(--brass-line);
    clip-path: var(--deco-corners);
    filter: drop-shadow(0 20px 44px rgba(var(--shadow), 0.7));
}

.deco-frame::before {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: 0;
    clip-path: var(--deco-corners);
    background-color: var(--charcoal);
    background-image:
        repeating-conic-gradient(from 0deg at 50% 22%,
            rgba(245, 242, 234, 0.015) 0deg 2.4deg, transparent 2.4deg 8deg),
        radial-gradient(ellipse 90% 70% at 50% 0%, var(--charcoal-raised) 0%, transparent 70%),
        linear-gradient(170deg, rgba(245, 242, 234, 0.02) 0%, transparent 45%);
}

/*
 * Inner hairline, square inside the stepped outer frame, carrying a
 * concentric roundel at each corner
 */
.deco-frame::after {
    content: '';
    position: absolute;
    inset: 9px;
    z-index: 0;
    border: 1px solid var(--brass-faint);
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: top left, top right, bottom left, bottom right;
    background-image: var(--roundel), var(--roundel), var(--roundel), var(--roundel);
}

.deco-frame>* {
    position: relative;
    z-index: 1;
}

/*
 * marquee bulbs ring
 * ::after is offset half a tile and runs half a cycle behind, so they alternate.
 */
.marquee-lights {
    position: relative;
}

.marquee-lights::before,
.marquee-lights::after {
    content: '';
    position: absolute;
    inset: -19px;
    z-index: 2;
    pointer-events: none;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 26px 9px, 26px 9px, 9px 26px, 9px 26px;
    background-image:
        radial-gradient(circle 2.6px at 13px 4.5px, var(--bulb) 0 42%, rgba(240, 220, 168, 0) 64%),
        radial-gradient(circle 2.6px at 13px 4.5px, var(--bulb) 0 42%, rgba(240, 220, 168, 0) 64%),
        radial-gradient(circle 2.6px at 4.5px 13px, var(--bulb) 0 42%, rgba(240, 220, 168, 0) 64%),
        radial-gradient(circle 2.6px at 4.5px 13px, var(--bulb) 0 42%, rgba(240, 220, 168, 0) 64%);
    filter: drop-shadow(0 0 4px var(--bulb)) drop-shadow(0 0 11px var(--brass-glow));
    animation: marquee-bulbs 1.1s linear infinite;
}

.marquee-lights::before {
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.marquee-lights::after {
    background-position: 13px 0, 13px 100%, 0 13px, 100% 13px;
    animation-delay: 0.55s;
}

@keyframes marquee-bulbs {
    0%, 49.9% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0.16;
    }
}


/*
 * individually lightable bulbs, built in JS
 * sits outside .deco-frame's clip-path so nothing trims the ring
 */
.marquee {
    position: absolute;
    inset: -19px;
    z-index: 3;
    pointer-events: none;
}

.bulb {
    position: absolute;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background-color: rgba(240, 220, 168, 0.12);
    transition: background-color 80ms linear, box-shadow 80ms linear;
}

.bulb.is-lit {
    background-color: var(--bulb);
    box-shadow: 0 0 5px var(--bulb), 0 0 13px var(--brass-glow);
}


/* tapered rule with a centred diamond */
.deco-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: min(320px, 72%);
    margin: 1.6rem auto;
}

.deco-rule::before,
.deco-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(198, 166, 100, 0.62), transparent);
}

.deco-rule__gem {
    width: 5px;
    height: 5px;
    flex: none;
    background-color: var(--brass);
    transform: rotate(45deg);
}

@media only screen and (max-width: 600px) {
    :root {
        --step: 6px;
        --step-2: 12px;
    }

    .deco-frame::after {
        inset: 7px;
        background-size: 22px 22px;
    }

    .marquee-lights::before,
    .marquee-lights::after,
    .marquee {
        inset: -15px;
    }
}