/*
 * Bar Bonsoir — neon dividers, modelled on the Bar Bonsoir sign.
 *
 * Variants (class on <hr>/<div role="separator">, or the Separator block styles):
 *
 *   .divider-neon-lips    gold scroll tubes + red neon lips + "shh" finger   (is-style-nbb-neon-lips)
 *                         Default for every plain separator in Bar Bonsoir content.
 *   .divider-neon-scroll  gold scroll tubes + three red bulbs                 (is-style-nbb-neon-scroll)
 *   .divider-marquee      chasing marquee bulbs from the sign's border        (is-style-nbb-marquee)
 *
 * Layers: ::before = unlit glass tubes (always there), ::after = lit neon.
 * The lit layer ignites when scrolled into view and flickers now and then,
 * briefly exposing the dark glass underneath, like a real tube.
 *
 * Tones: lit on dark / charcoal / velvet. On parchment the sign is
 * "switched off" (unlit glass only), which keeps contrast on cream paper.
 * Force either with .is-lit / .is-off.
 *
 * Modifiers: .is-narrow, .is-full, .is-compact
 */

:is(.divider-neon-lips, .is-style-nbb-neon-lips, .is-style-nbb-neon-sign,
    .divider-neon-scroll, .is-style-nbb-neon-scroll,
    .divider-marquee, .is-style-nbb-marquee),
body.nbb-bar-bonsoir hr:not([class*="divider-"], [class*="is-style-nbb-"], .is-style-dots, .fluentform hr) {
    --nbb-div-max: 720px;
    --nbb-neon-lit: url("../svg/neon-lips-lit.svg");
    --nbb-neon-off: url("../svg/neon-lips-off.svg");
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    max-width: var(--nbb-div-max) !important;
    height: auto;
    aspect-ratio: 10 / 1;
    min-height: 34px;
    margin: var(--nbb-space-7) auto !important;
    padding: 0;
    border: 0 !important;
    background: none !important;
    opacity: 1 !important;
    overflow: visible;
}

:is(.divider-neon-scroll, .is-style-nbb-neon-scroll) {
    --nbb-neon-lit: url("../svg/neon-scroll-lit.svg");
    --nbb-neon-off: url("../svg/neon-scroll-off.svg");
}

:is(.divider-neon-lips, .is-style-nbb-neon-lips, .is-style-nbb-neon-sign,
    .divider-neon-scroll, .is-style-nbb-neon-scroll)::before,
:is(.divider-neon-lips, .is-style-nbb-neon-lips, .is-style-nbb-neon-sign,
    .divider-neon-scroll, .is-style-nbb-neon-scroll)::after,
body.nbb-bar-bonsoir hr:not([class*="divider-"], [class*="is-style-nbb-"], .is-style-dots, .fluentform hr)::before,
body.nbb-bar-bonsoir hr:not([class*="divider-"], [class*="is-style-nbb-"], .is-style-dots, .fluentform hr)::after {
    content: "";
    position: absolute;
    inset: -8% 0;
    background: var(--nbb-neon-off) center / contain no-repeat;
    pointer-events: none;
}

:is(.divider-neon-lips, .is-style-nbb-neon-lips, .is-style-nbb-neon-sign,
    .divider-neon-scroll, .is-style-nbb-neon-scroll)::after,
body.nbb-bar-bonsoir hr:not([class*="divider-"], [class*="is-style-nbb-"], .is-style-dots, .fluentform hr)::after {
    background-image: var(--nbb-neon-lit);
    animation: nbb-neon-flicker 11s linear 2s infinite;
}

/* Irregular, mostly-on flicker. Opacity only: compositor-friendly. */
@keyframes nbb-neon-flicker {
    0%, 81%, 83.5%, 86%, 100% { opacity: 1; }
    82% { opacity: 0.25; }
    83% { opacity: 0.85; }
    85% { opacity: 0.4; }
}

@keyframes nbb-neon-ignite {
    0% { opacity: 0; }
    12% { opacity: 0.8; }
    18% { opacity: 0.1; }
    30% { opacity: 0.9; }
    36% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* -------------------------------------------------------------------------- */
/* Marquee: chasing sign bulbs (pure CSS)                                     */
/* -------------------------------------------------------------------------- */

:is(.divider-marquee, .is-style-nbb-marquee) {
    --nbb-bulb: #ff3b4e;
    --nbb-bulb-core: #ffe1e4;
    --nbb-bulb-gap: 22px;
    aspect-ratio: auto;
    height: 18px;
    min-height: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

:is(.divider-marquee, .is-style-nbb-marquee)::before,
:is(.divider-marquee, .is-style-nbb-marquee)::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle, var(--nbb-bulb-core) 0 1.4px, var(--nbb-bulb) 2px 3.2px, rgba(255, 59, 78, 0.35) 4px, transparent 7px)
        0 50% / var(--nbb-bulb-gap) 100% repeat-x;
    pointer-events: none;
}

:is(.divider-marquee, .is-style-nbb-marquee)::after {
    background-position: calc(var(--nbb-bulb-gap) / 2) 50%;
    animation: nbb-marquee-chase 1.4s steps(1) infinite;
}

:is(.divider-marquee, .is-style-nbb-marquee)::before {
    animation: nbb-marquee-chase 1.4s steps(1) -0.7s infinite;
}

@keyframes nbb-marquee-chase {
    0% { opacity: 1; }
    50% { opacity: 0.22; }
}

/* -------------------------------------------------------------------------- */
/* Tones                                                                      */
/* -------------------------------------------------------------------------- */

/* Parchment: the sign is off. Glass tubes only, bulbs unlit. */
:is(.nbb-tone-parchment, .is-style-nbb-section-parchment, .nbb-pattern-letter) :is(.divider-neon-lips, .is-style-nbb-neon-lips, .is-style-nbb-neon-sign, .divider-neon-scroll, .is-style-nbb-neon-scroll, hr:not([class*="divider-"], [class*="is-style-nbb-"]))::after,
:is(.divider-neon-lips, .is-style-nbb-neon-lips, .is-style-nbb-neon-sign, .divider-neon-scroll, .is-style-nbb-neon-scroll).is-off::after {
    content: none;
}

:is(.nbb-tone-parchment, .is-style-nbb-section-parchment, .nbb-pattern-letter) :is(.divider-marquee, .is-style-nbb-marquee),
:is(.divider-marquee, .is-style-nbb-marquee).is-off {
    --nbb-bulb: #7a2a33;
    --nbb-bulb-core: #a85d66;
}

:is(.nbb-tone-parchment, .is-style-nbb-section-parchment, .nbb-pattern-letter) :is(.divider-marquee, .is-style-nbb-marquee)::after,
:is(.nbb-tone-parchment, .is-style-nbb-section-parchment, .nbb-pattern-letter) :is(.divider-marquee, .is-style-nbb-marquee)::before,
:is(.divider-marquee, .is-style-nbb-marquee).is-off::before,
:is(.divider-marquee, .is-style-nbb-marquee).is-off::after {
    animation: none;
    opacity: 1;
}

/* Force lit inside a parchment section. */
:is(.nbb-tone-parchment, .is-style-nbb-section-parchment) :is(.divider-neon-lips, .is-style-nbb-neon-lips, .divider-neon-scroll, .is-style-nbb-neon-scroll).is-lit::after {
    content: "";
}

/* -------------------------------------------------------------------------- */
/* Modifiers                                                                  */
/* -------------------------------------------------------------------------- */

:is([class*="divider-"], [class*="is-style-nbb-"]).is-narrow { --nbb-div-max: 340px; }
:is([class*="divider-"], [class*="is-style-nbb-"]).is-full   { --nbb-div-max: 100%; }
:is([class*="divider-"], [class*="is-style-nbb-"]).is-compact { margin-block: var(--nbb-space-5) !important; }

/* -------------------------------------------------------------------------- */
/* Scroll ignition (atmosphere.js adds html.nbb-io + .is-inview)              */
/* -------------------------------------------------------------------------- */

html.nbb-io [data-nbb-reveal]:not(.is-inview)::after {
    opacity: 0;
    animation: none;
}

html.nbb-io [data-nbb-reveal].is-inview:not(.divider-marquee, .is-style-nbb-marquee)::after {
    animation: nbb-neon-ignite 1.1s linear both, nbb-neon-flicker 11s linear 4s infinite;
}

/* -------------------------------------------------------------------------- */
/* Responsive & motion                                                        */
/* -------------------------------------------------------------------------- */

@media (max-width: 600px) {
    :is(.divider-neon-lips, .is-style-nbb-neon-lips, .is-style-nbb-neon-sign,
        .divider-neon-scroll, .is-style-nbb-neon-scroll, .divider-marquee, .is-style-nbb-marquee),
    body.nbb-bar-bonsoir hr:not([class*="divider-"], [class*="is-style-nbb-"], .is-style-dots, .fluentform hr) {
        margin-block: var(--nbb-space-6) !important;
    }

    /* Keep the lips readable on phones: crop the outer tube ends instead of shrinking. */
    :is(.divider-neon-lips, .is-style-nbb-neon-lips, .is-style-nbb-neon-sign, .divider-neon-scroll, .is-style-nbb-neon-scroll)::before,
    :is(.divider-neon-lips, .is-style-nbb-neon-lips, .is-style-nbb-neon-sign, .divider-neon-scroll, .is-style-nbb-neon-scroll)::after,
    body.nbb-bar-bonsoir hr:not([class*="divider-"], [class*="is-style-nbb-"], .is-style-dots, .fluentform hr)::before,
    body.nbb-bar-bonsoir hr:not([class*="divider-"], [class*="is-style-nbb-"], .is-style-dots, .fluentform hr)::after {
        background-size: auto 100%;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }

    :is(.divider-neon-lips, .is-style-nbb-neon-lips, .is-style-nbb-neon-sign, .divider-neon-scroll, .is-style-nbb-neon-scroll),
    body.nbb-bar-bonsoir hr:not([class*="divider-"], [class*="is-style-nbb-"], .is-style-dots, .fluentform hr) {
        aspect-ratio: auto;
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is([class*="divider-"], [class*="is-style-nbb-"])::before,
    :is([class*="divider-"], [class*="is-style-nbb-"])::after,
    body.nbb-bar-bonsoir hr::after {
        animation: none !important;
        opacity: 1 !important;
    }
}