/* ============================================================
   BRAINFLOOD "TAVERN KIT" — the warm identity layer
   ============================================================
   Loaded LAST on every marketing page (after per-page inline
   styles) so its typography assignments win the cascade.

   Contents:
   1. Typography assignment (Anton display / Rubik body /
      Courier Prime utility) + selection color
   2. Paper-grain texture overlay (theme-tuned)
   3. String-lights divider (the signature element)
   4. Round tags (typewriter eyebrows)
   5. Marker underline + chalk circle accents
   6. Stamp badges
   7. Coaster cards
   8. Ticket buttons
   9. Chalkboard (physical object — stays dark in every theme)
   10. Paper note (physical object — stays cream in every theme)
   ============================================================ */

/* ------------------------------------------------------------
   1. TYPOGRAPHY
   ------------------------------------------------------------ */
body {
    font-family: 'Rubik', system-ui, sans-serif;
    letter-spacing: 0.005em;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Anton', 'Rubik', system-ui, sans-serif;
    font-weight: 400;
    /* Anton ships one weight — never synthesize a fake bold */
    font-synthesis: none;
    letter-spacing: 0.015em;
}

/* Small headings inside cards read better in Rubik */
.bf-body-heading {
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 600;
    letter-spacing: 0;
}

.bf-slab {
    font-family: 'Alfa Slab One', 'Anton', serif;
    font-weight: 400;
    font-synthesis: none;
}

.bf-type {
    font-family: 'Courier Prime', 'Courier New', monospace;
}

::selection {
    background: rgba(var(--accent-rgb), 0.35);
    color: var(--text-primary);
}

/* ------------------------------------------------------------
   1b. NO DUAL-COLOR HEADLINES
   A heading is one voice, one ink. Accent spans and gradient
   clips inside h1-h3 inherit the heading color; emphasis is
   carried by the marker underline where a page opts in.
   ------------------------------------------------------------ */
h1 .lit, h2 .lit, h3 .lit,
h1 .acc, h2 .acc, h3 .acc,
h1 .grad, h2 .grad, h3 .grad,
h1 .text-brand-300, h2 .text-brand-300, h3 .text-brand-300,
h1 .text-brand-400, h2 .text-brand-400, h3 .text-brand-400,
h1 .text-electric-cyan, h2 .text-electric-cyan, h3 .text-electric-cyan,
h1 .text-electric-pink, h2 .text-electric-pink, h3 .text-electric-pink,
h1 .text-electric-yellow, h2 .text-electric-yellow, h3 .text-electric-yellow,
h1 .text-electric-green, h2 .text-electric-green, h3 .text-electric-green,
h1 .text-transparent, h2 .text-transparent, h3 .text-transparent {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

/* liquid-skin.css re-tints gradient brand text at `html body
   .bg-clip-text.text-transparent` (0,2,2), which out-weighs the rule
   above for background-image alone. The clip and the ink got reset but
   the ramp kept painting, so every legacy gradient headline rendered as
   a solid accent block behind cream text. Match that weight and finish
   the job: a heading is one voice. */
html body h1 .bg-clip-text.text-transparent,
html body h2 .bg-clip-text.text-transparent,
html body h3 .bg-clip-text.text-transparent {
    background-image: none !important;
}

/* ------------------------------------------------------------
   2. PAPER-GRAIN TEXTURE
   A fixed feTurbulence tile over everything, barely-there.
   Dark themes: lifts the flatness like a dim room.
   Light theme: reads as paper stock.
   ------------------------------------------------------------ */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2147480000;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: 0.05;
    mix-blend-mode: overlay;
}

[data-theme="daylight"] body::after,
[data-theme="arctic"] body::after,
[data-theme="ivory"] body::after,
[data-theme="rose"] body::after,
[data-theme="sage"] body::after,
[data-theme="sandstone"] body::after,
[data-theme="linen"] body::after {
    opacity: 0.16;
    mix-blend-mode: multiply;
    /* multiply of near-white noise = faint paper tooth */
    filter: invert(1);
}

/* ------------------------------------------------------------
   3. STRING LIGHTS — the signature divider
   Inline SVG component; see index.html for markup. Bulbs are
   lit (amber, glowing, twinkling) in Taproom + Snug, and hang
   as unlit glass in Daylight. FX governor can pause them via
   [data-fx-loop] / html.bf-anim-paused.
   ------------------------------------------------------------ */
.bf-lights {
    line-height: 0;
    overflow: hidden;
}
.bf-lights svg {
    width: 100%;
    height: 64px;
    display: block;
}
.bf-lights .wire {
    fill: none;
    stroke: rgba(var(--glass-overlay-color), 0.28);
    stroke-width: 2;
}
.bf-lights .stem {
    stroke: rgba(var(--glass-overlay-color), 0.32);
    stroke-width: 2;
}
.bf-lights .bulb {
    fill: var(--accent);
    filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.8));
    animation: bf-twinkle 5.5s ease-in-out infinite;
}
.bf-lights .bulb:nth-of-type(3n)   { animation-delay: -1.8s; }
.bf-lights .bulb:nth-of-type(3n+1) { animation-delay: -3.7s; }
.bf-lights .bulb:nth-of-type(4n)   { animation-duration: 7s; }

@keyframes bf-twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.72; }
}

/* Daylight: the lights are off, the glass still hangs there */
[data-theme="daylight"] .bf-lights .bulb,
[data-theme="arctic"] .bf-lights .bulb,
[data-theme="ivory"] .bf-lights .bulb,
[data-theme="rose"] .bf-lights .bulb,
[data-theme="sage"] .bf-lights .bulb,
[data-theme="sandstone"] .bf-lights .bulb,
[data-theme="linen"] .bf-lights .bulb {
    fill: rgba(var(--glass-overlay-color), 0.14);
    stroke: rgba(var(--glass-overlay-color), 0.35);
    stroke-width: 1.5;
    filter: none;
    animation: none;
}

/* FX governor + reduced motion */
html.bf-anim-paused .bf-lights .bulb,
.bf-lights.bf-anim-rest .bulb {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .bf-lights .bulb { animation: none; }
}

/* ------------------------------------------------------------
   4. ROUND TAGS — the run-of-show eyebrow
   "ROUND 3 · EIGHT MODES, ONE NIGHT" in typewriter caps.
   ------------------------------------------------------------ */
.bf-round-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-secondary);
    margin-bottom: 0.9rem;
}
.bf-round-tag::before {
    content: '';
    width: 2.25rem;
    height: 2px;
    background: var(--color-secondary);
    opacity: 0.65;
    flex-shrink: 0;
}

/* ------------------------------------------------------------
   5. MARKER UNDERLINE + CHALK CIRCLE
   Slightly wonky by construction — uneven radii + a tilt.
   ------------------------------------------------------------ */
.bf-mark {
    position: relative;
    display: inline-block;
}
.bf-mark::after {
    content: '';
    position: absolute;
    left: -0.06em;
    right: -0.08em;
    bottom: -0.02em;
    height: 0.13em;
    background: var(--accent);
    border-radius: 3px 7px 4px 6px / 6px 3px 7px 4px;
    transform: rotate(-0.7deg);
    opacity: 0.9;
}

/* Chalk circle — for "circling" the special on the board */
.bf-chalk-circle {
    position: relative;
    display: inline-block;
}
.bf-chalk-circle::before {
    content: '';
    position: absolute;
    inset: -0.35em -0.55em -0.3em;
    border: 2.5px solid var(--accent);
    border-radius: 47% 53% 46% 54% / 58% 44% 56% 42%;
    transform: rotate(-2.2deg);
    opacity: 0.85;
    pointer-events: none;
}

/* ------------------------------------------------------------
   6. STAMP BADGES — rubber-stamp ink
   ------------------------------------------------------------ */
.bf-stamp {
    display: inline-block;
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-secondary);
    border: 2px solid currentColor;
    border-radius: 5px 8px 6px 9px / 9px 5px 8px 6px;
    padding: 0.3rem 0.65rem;
    transform: rotate(-3deg);
    opacity: 0.92;
    white-space: nowrap;
}
.bf-stamp--gold { color: var(--accent); }
.bf-stamp--green { color: var(--color-success); }
.bf-stamp--tilt-r { transform: rotate(2.5deg); }

/* ------------------------------------------------------------
   7. COASTER CARDS — for the mode grid
   Rounded-square drink coasters with a printed double ring,
   dealt onto the table at slightly different angles.
   ------------------------------------------------------------ */
.bf-coaster {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-decoration: none;
    color: inherit;
    background: var(--card-bg);
    border: 1.5px solid rgba(var(--mode-rgb, var(--accent-rgb)), 0.32);
    border-radius: 20px;
    padding: 1.4rem 1.25rem 1.25rem;
    transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
                border-color 0.22s ease, background 0.22s ease,
                box-shadow 0.22s ease;
}
/* printed inner ring */
.bf-coaster::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1.5px dashed rgba(var(--mode-rgb, var(--accent-rgb)), 0.24);
    border-radius: 14px;
    pointer-events: none;
}
/* the deal: alternating tilt */
.bf-coaster:nth-child(4n+1) { transform: rotate(-1.1deg); }
.bf-coaster:nth-child(4n+2) { transform: rotate(0.9deg); }
.bf-coaster:nth-child(4n+3) { transform: rotate(-0.5deg); }
.bf-coaster:nth-child(4n)   { transform: rotate(1.3deg); }

.bf-coaster:hover,
.bf-coaster:focus-visible {
    transform: rotate(0deg) translateY(-5px);
    background: var(--card-hover-bg);
    border-color: rgba(var(--mode-rgb, var(--accent-rgb)), 0.65);
    box-shadow: 0 14px 30px rgba(var(--glass-overlay-color-inv), 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .bf-coaster { transition: none; }
    .bf-coaster:hover { transform: none; }
}

/* ------------------------------------------------------------
   8. TICKET BUTTONS
   Rectangular stubs with punched notches and a tear line.
   No pills anywhere in this house.
   ------------------------------------------------------------ */
.bf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.35rem;
    border-radius: 10px;
    font-family: 'Rubik', system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease,
                background 0.18s ease, border-color 0.18s ease;
}

.bf-btn-primary {
    position: relative;
    background: var(--accent);
    color: var(--btn-accent-text);
    box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.32);
    /* punched ticket notches */
    -webkit-mask-image:
        radial-gradient(circle 6px at 0 50%, transparent 97%, #000),
        radial-gradient(circle 6px at 100% 50%, transparent 97%, #000);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle 6px at 0 50%, transparent 97%, #000),
        radial-gradient(circle 6px at 100% 50%, transparent 97%, #000);
    mask-composite: intersect;
    padding-left: 1.55rem;
    padding-right: 1.35rem;
}
.bf-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.42);
    background: var(--accent-light);
}
[data-theme="daylight"] .bf-btn-primary:hover,
[data-theme="arctic"] .bf-btn-primary:hover,
[data-theme="ivory"] .bf-btn-primary:hover,
[data-theme="rose"] .bf-btn-primary:hover,
[data-theme="sage"] .bf-btn-primary:hover,
[data-theme="sandstone"] .bf-btn-primary:hover,
[data-theme="linen"] .bf-btn-primary:hover {
    background: var(--accent-dark);
}

/* the tear line before the arrow */
.bf-btn-primary .arrow {
    border-left: 2px dashed rgba(0, 0, 0, 0.28);
    padding-left: 0.65rem;
    margin-left: 0.05rem;
    transition: transform 0.18s ease;
}
[data-theme="daylight"] .bf-btn-primary .arrow,
[data-theme="arctic"] .bf-btn-primary .arrow,
[data-theme="ivory"] .bf-btn-primary .arrow,
[data-theme="rose"] .bf-btn-primary .arrow,
[data-theme="sage"] .bf-btn-primary .arrow,
[data-theme="sandstone"] .bf-btn-primary .arrow,
[data-theme="linen"] .bf-btn-primary .arrow {
    border-left-color: rgba(255, 246, 229, 0.4);
}
.bf-btn:hover .arrow { transform: translateX(3px); }

.bf-btn-ghost {
    background: transparent;
    border: 1.5px solid rgba(var(--glass-overlay-color), 0.22);
    color: var(--text-primary);
}
.bf-btn-ghost:hover {
    background: rgba(var(--glass-overlay-color), 0.07);
    border-color: rgba(var(--accent-rgb), 0.55);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   9. CHALKBOARD — a physical object: dark in every theme
   ------------------------------------------------------------ */
.bf-chalkboard {
    position: relative;
    background:
        radial-gradient(ellipse 90% 70% at 50% 10%, rgba(255, 255, 255, 0.045), transparent 65%),
        #252b21;
    border: 7px solid #6d4a2c;
    border-radius: 10px;
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.55),
        0 16px 44px rgba(0, 0, 0, 0.35);
    color: #f0ead9;
}
.bf-chalkboard .chalk-rule {
    border: none;
    border-top: 2px dashed rgba(240, 234, 217, 0.28);
    margin: 0.4rem 0 1rem;
}
/* On the board, tokens don't apply — chalk does */
.bf-chalkboard .bf-round-tag { color: #e8b04b; }
.bf-chalkboard .bf-round-tag::before { background: #e8b04b; }
.bf-chalk-head {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #e8b04b;
}
.bf-chalkboard .bf-chalk-circle::before { border-color: #e8b04b; }

/* ------------------------------------------------------------
   10. PAPER NOTE — a physical object: cream in every theme
   ------------------------------------------------------------ */
.bf-paper {
    position: relative;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 27px,
            rgba(58, 98, 132, 0.18) 27px,
            rgba(58, 98, 132, 0.18) 28px
        ),
        #f9f1de;
    color: #33291b;
    border-radius: 3px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.18),
        0 10px 26px rgba(0, 0, 0, 0.24);
    font-family: 'Courier Prime', 'Courier New', monospace;
    line-height: 28px;
    padding: 1.1rem 1.3rem 1.1rem 2.4rem;
}
/* red margin rule */
.bf-paper::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.7rem;
    width: 1.5px;
    background: rgba(184, 67, 44, 0.4);
}
.bf-paper a { color: #8f5708; }
/* Ticket buttons keep their own ink even inside a paper note - the paper
   link color above otherwise wins on specificity and disappears against
   the accent fill (daylight: #8f5708 on #9a5d07). */
.bf-paper a.bf-btn-primary,
.bf-paper .bf-btn-primary { color: var(--btn-accent-text); }

/* A piece of tape holding the paper up */
.bf-tape {
    position: absolute;
    top: -12px;
    left: 50%;
    width: 92px;
    height: 24px;
    transform: translateX(-50%) rotate(-1.5deg);
    background: rgba(var(--glass-overlay-color), 0.14);
    border-left: 1px dotted rgba(var(--glass-overlay-color-inv), 0.2);
    border-right: 1px dotted rgba(var(--glass-overlay-color-inv), 0.2);
    pointer-events: none;
}

/* ------------------------------------------------------------
   9. BRAND ART — "The Local" house marks (brand/ library)
   Theme pairing: -dark art for taproom/snug, -light for daylight.
   The utilities only ever HIDE, so each mark keeps its own
   display value. Single-variant marks need no classes.
   ------------------------------------------------------------ */
.brand-art-light { display: none !important; }
[data-theme="daylight"] .brand-art-dark,
[data-theme="sandstone"] .brand-art-dark,
[data-theme="linen"] .brand-art-dark { display: none !important; }
[data-theme="daylight"] .brand-art-light,
[data-theme="sandstone"] .brand-art-light,
[data-theme="linen"] .brand-art-light { display: block !important; }

/* Mode-page crest: house art above the hero eyebrow */
.bf-mode-crest {
    display: block;
    width: clamp(92px, 10vw, 132px);
    height: auto;
    margin: 0 auto 1.5rem;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.3));
}
.bf-mode-crest-left { margin: 0 0 1.4rem; }
[data-theme="daylight"] .bf-mode-crest { filter: drop-shadow(0 10px 22px rgba(62, 42, 20, 0.22)); }

/* Footer sign-off: one-ink coaster stamp + the slogan. The stamp is a
   background so only the active theme's file is fetched. */
.bf-footer-signoff {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.2rem 1.25rem 2rem;
    text-align: center;
}
.bf-footer-stamp {
    width: 96px;
    height: 96px;
    background: url('/img/brand/coaster-stamp-cream.svg') no-repeat center / contain;
    opacity: 0.85;
}
[data-theme="daylight"] .bf-footer-stamp {
    background-image: url('/img/brand/coaster-stamp-espresso.svg');
    opacity: 0.8;
}
.bf-footer-slogan {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}