/* =========================================================
   cafesweets.bar v2 — Neon Honeycomb Speakeasy
   Palette:
     #0A0612 Velvet Void
     #1C0E2E Plum Shadow
     #FF2BB8 Neon Hot Pink
     #39E8FF Electric Cyan
     #FFD13F Candle Amber
     #9A3FEC Ultra-Violet
     #F2E8D6 Champagne Cream
   Fonts: Oswald (display/condensed), Cormorant Garamond (italic body)
   ========================================================= */

:root {
    --void: #0A0612;
    --plum: #1C0E2E;
    --pink: #FF2BB8;
    --cyan: #39E8FF;
    --amber: #FFD13F;
    --violet: #9A3FEC;
    --cream: #F2E8D6;
    --letterbox-h: 6vh;
    --hex-size: 280px;
    --hex-half: 140px;
    --hex-three-quarter: 210px;
    --hex-quarter: 70px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: var(--void);
    color: var(--cream);
    font-family: 'Cormorant Garamond', Georgia, serif;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    position: relative;
    cursor: crosshair;
}

/* Velvet room ambient texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 10%, rgba(154, 63, 236, 0.18), transparent 70%),
        radial-gradient(ellipse 60% 40% at 90% 80%, rgba(255, 43, 184, 0.12), transparent 70%),
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(57, 232, 255, 0.06), transparent 80%);
    pointer-events: none;
    z-index: 1;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(242, 232, 214, 0.025) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 1;
}

/* ========================================================
   Cinematic letterbox bars (persistent)
   ======================================================== */
.letterbox {
    position: fixed;
    left: 0;
    right: 0;
    height: var(--letterbox-h);
    background: #000;
    z-index: 90;
    overflow: hidden;
    border-color: #000;
    transform: translateY(-100%);
    transition: height 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.letterbox.is-loaded {
    animation: letterbox-slide 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.letterbox-top {
    top: 0;
    border-bottom: 1px solid rgba(154, 63, 236, 0.3);
}
.letterbox-bottom {
    bottom: 0;
    border-top: 1px solid rgba(154, 63, 236, 0.3);
    transform: translateY(100%);
}
.letterbox-bottom.is-loaded {
    animation: letterbox-slide-bottom 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes letterbox-slide {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
@keyframes letterbox-slide-bottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.letterbox.section-pour-active {
    height: 12vh;
}

.timecode {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: rgba(242, 232, 214, 0.36);
    text-transform: uppercase;
}

.timecode-line {
    display: inline-block;
    padding-left: 100%;
    animation: timecode-scroll 80s linear infinite;
}

@keyframes timecode-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* ========================================================
   Cursor bubble layer
   ======================================================== */
.bubble-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 80;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(57, 232, 255, 0.7);
    background: radial-gradient(circle at 30% 30%, rgba(242, 232, 214, 0.4), rgba(57, 232, 255, 0.08) 60%, transparent 80%);
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes bubble-rise {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.75;
    }
    50% {
        opacity: 0.55;
    }
    100% {
        transform: translate(var(--bx, 0), -180px) scale(0.6);
        opacity: 0;
    }
}

/* ========================================================
   Main film reel container
   ======================================================== */
.film-reel {
    position: relative;
    z-index: 5;
    padding-top: var(--letterbox-h);
    padding-bottom: var(--letterbox-h);
}

/* ========================================================
   Section markers
   ======================================================== */
.section-marker {
    position: absolute;
    top: 32px;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(242, 232, 214, 0.55);
    z-index: 10;
}
.marker-num {
    color: var(--pink);
    text-shadow: 0 0 8px rgba(255, 43, 184, 0.7);
}
.marker-sep {
    color: rgba(154, 63, 236, 0.6);
}
.marker-label {
    color: var(--cream);
}

/* ========================================================
   Section 0: Title Card
   ======================================================== */
.section-title {
    min-height: calc(100vh - 2 * var(--letterbox-h));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4vh 4vw;
}

.title-hex-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    position: relative;
}

.title-hex {
    width: clamp(360px, 64vmin, 720px);
    aspect-ratio: 1 / 1.1547;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    position: relative;
    background: linear-gradient(180deg, rgba(28, 14, 46, 0.95), rgba(10, 6, 18, 0.95));
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 43, 184, 0.4),
        0 0 60px rgba(255, 43, 184, 0.35),
        0 0 120px rgba(154, 63, 236, 0.3),
        inset 0 0 80px rgba(57, 232, 255, 0.08);
    opacity: 0;
    transform: scale(1.04);
}

.title-hex.is-loaded {
    animation: title-hex-in 1600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes title-hex-in {
    0% { opacity: 0; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}

.title-hex::before {
    content: '';
    position: absolute;
    inset: 6px;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: linear-gradient(135deg, rgba(154, 63, 236, 0.15), rgba(28, 14, 46, 0.85));
    pointer-events: none;
}

.title-hex-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12% 10%;
    gap: 18px;
}

.neon-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.neon-reflection {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.85;
    filter: blur(6px);
}

.title-sign {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--cream);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.title-line-1 {
    font-size: clamp(28px, 5.4vw, 76px);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--cream);
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
}

.title-line-1 .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    color: var(--cream);
    text-shadow:
        0 0 8px rgba(255, 43, 184, 0.9),
        0 0 22px rgba(255, 43, 184, 0.55),
        0 0 40px rgba(154, 63, 236, 0.5);
}

.title-line-1 .letter.lit {
    animation: letter-flicker 60ms steps(2) forwards;
    opacity: 1;
    transform: translateY(0);
}

.title-line-1 .letter.stuck {
    animation: letter-stuck 280ms steps(4) forwards;
}

@keyframes letter-flicker {
    0% { opacity: 0; }
    40% { opacity: 0.4; }
    60% { opacity: 1; }
    80% { opacity: 0.6; }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes letter-stuck {
    0% { opacity: 1; }
    20% { opacity: 0.1; }
    40% { opacity: 0.9; }
    55% { opacity: 0.15; }
    75% { opacity: 1; }
    100% { opacity: 1; }
}

.title-line-2 {
    font-family: 'Oswald', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(13px, 1.5vw, 19px);
    letter-spacing: 0.32em;
    color: rgba(242, 232, 214, 0.78);
    text-transform: lowercase;
    opacity: 0;
    transition: opacity 600ms ease 1200ms;
}

.title-line-3 {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(12px, 1.2vw, 17px);
    color: rgba(57, 232, 255, 0.75);
    letter-spacing: 0.08em;
    text-transform: none;
    opacity: 0;
    transition: opacity 600ms ease 1500ms;
    text-shadow: 0 0 6px rgba(57, 232, 255, 0.45);
}

.title-hex.is-loaded .title-line-2,
.title-hex.is-loaded .title-line-3 {
    opacity: 1;
}

.title-candle {
    position: absolute;
    bottom: 14%;
    right: 14%;
    width: 40px;
    height: 70px;
    z-index: 3;
    transform: scale(0);
    transform-origin: bottom center;
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 800ms;
}

.title-hex.is-loaded .title-candle {
    transform: scale(1);
}

.candle {
    width: 100%;
    height: 100%;
    display: block;
}

.flame {
    transform-origin: center bottom;
    transform-box: fill-box;
    animation: flame-flicker 110ms ease-in-out infinite alternate;
    filter:
        drop-shadow(0 -2px 6px rgba(255, 209, 63, 0.95))
        drop-shadow(0 0 18px rgba(255, 43, 184, 0.55));
}

.flame-core {
    transform-origin: center bottom;
    transform-box: fill-box;
    animation: flame-core-flicker 90ms ease-in-out infinite alternate;
}

.candle-halo {
    animation: halo-pulse 2.4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes flame-flicker {
    0% { transform: scaleY(0.96) scaleX(1) skewX(-1deg); opacity: 1; }
    50% { transform: scaleY(1.05) scaleX(0.98) skewX(2deg); opacity: 0.92; }
    100% { transform: scaleY(1.02) scaleX(1.02) skewX(-2deg); opacity: 1; }
}

@keyframes flame-core-flicker {
    0% { transform: scaleY(0.94) skewX(2deg); }
    100% { transform: scaleY(1.06) skewX(-2deg); }
}

@keyframes halo-pulse {
    0%, 100% { opacity: 0.18; transform: scale(1); }
    50% { opacity: 0.32; transform: scale(1.08); }
}

.wax-drip {
    opacity: 0;
}

.candle.dripping .wax-drip {
    animation: wax-drip 3000ms ease-in forwards;
}

@keyframes wax-drip {
    0% { opacity: 0; stroke-dasharray: 0 100; }
    20% { opacity: 0.8; }
    100% { opacity: 0.6; stroke-dasharray: 100 0; }
}

.title-bottom-label {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 3;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(242, 232, 214, 0.7);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 600ms ease 1700ms;
}

.title-hex.is-loaded .title-bottom-label {
    opacity: 1;
}

.caption-time {
    color: var(--cyan);
    text-shadow: 0 0 6px rgba(57, 232, 255, 0.6);
}
.caption-sep {
    color: rgba(154, 63, 236, 0.7);
}
.caption-status {
    color: var(--pink);
    text-shadow: 0 0 6px rgba(255, 43, 184, 0.7);
    animation: status-pulse 2.2s ease-in-out infinite;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 6px rgba(255, 43, 184, 0.7); }
    50% { opacity: 0.7; text-shadow: 0 0 14px rgba(255, 43, 184, 1); }
}

.title-tagline {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px, 1.4vw, 19px);
    color: rgba(242, 232, 214, 0.78);
    text-align: center;
    line-height: 1.6;
    max-width: 540px;
    opacity: 0;
    transition: opacity 800ms ease 2000ms;
}

.title-hex.is-loaded ~ .title-tagline {
    opacity: 1;
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    opacity: 0;
    transition: opacity 800ms ease 2400ms;
}

.title-hex.is-loaded ~ .scroll-indicator {
    opacity: 0.7;
}

.scroll-label {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    letter-spacing: 0.32em;
    color: rgba(242, 232, 214, 0.5);
    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, var(--cyan), transparent);
    animation: scroll-line 2.4s ease-in-out infinite;
}

@keyframes scroll-line {
    0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* ========================================================
   Section 1: Honeycomb
   ======================================================== */
.section-honeycomb {
    padding: 120px 4vw 80px;
    position: relative;
}

.honeycomb {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.comb-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.comb-row-even {
    margin-top: -68px;
    margin-bottom: -68px;
    margin-left: var(--hex-half);
}

.comb-row-odd + .comb-row-even {
    margin-top: -78px;
}

/* Hex cells */
.hex {
    width: var(--hex-size);
    aspect-ratio: 1 / 1.1547;
    position: relative;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms ease, transform 700ms ease;
    will-change: opacity, transform;
}

.hex.in-view {
    opacity: 1;
    transform: translateY(0);
}

.hex-shape {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--plum);
    overflow: hidden;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

.hex-cocktail .hex-shape {
    cursor: pointer;
}

.hex-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(255, 43, 184, 0.4),
        inset 0 0 40px rgba(255, 43, 184, 0.15),
        inset 0 0 80px rgba(154, 63, 236, 0.18);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    transition: box-shadow 240ms ease;
}

.hex-cocktail:hover .hex-shape {
    transform: perspective(800px) rotateY(8deg) rotateX(-4deg) scale(1.04);
    z-index: 5;
}

.hex-cocktail:hover .hex-glow {
    box-shadow:
        inset 0 0 0 1.5px rgba(255, 43, 184, 0.85),
        inset 0 0 60px rgba(255, 43, 184, 0.4),
        inset 0 0 110px rgba(154, 63, 236, 0.4);
}

.hex-cocktail:hover {
    filter: drop-shadow(0 0 24px rgba(255, 43, 184, 0.6))
            drop-shadow(0 0 60px rgba(154, 63, 236, 0.45));
}

.hex-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: translateZ(0);
}

.hex-art-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 80%, transparent 30%, rgba(10, 6, 18, 0.85) 90%),
        linear-gradient(180deg, rgba(28, 14, 46, 0.1), rgba(10, 6, 18, 0.4));
    pointer-events: none;
}

.hex-cocktail-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-6deg) scale(0.85);
    transition: transform 240ms ease;
    filter: drop-shadow(0 8px 18px rgba(10, 6, 18, 0.6));
}

.hex-cocktail:hover .hex-cocktail-svg {
    transform: rotate(-4deg) scale(0.92);
}

.hex-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18% 14% 14%;
    pointer-events: none;
    z-index: 3;
}

.hex-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(15px, 1.5vw, 19px);
    color: var(--cream);
    line-height: 1.04;
    text-shadow:
        0 0 8px rgba(10, 6, 18, 0.95),
        0 0 16px rgba(255, 43, 184, 0.4);
    margin-bottom: 8px;
}

.hex-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 220ms ease, max-height 240ms ease;
}

.hex-cocktail:hover .hex-meta {
    opacity: 1;
    max-height: 200px;
}

.meta-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 9px;
    line-height: 1.3;
}

.meta-key {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-variant: small-caps;
    letter-spacing: 0.18em;
    color: var(--cyan);
    text-shadow: 0 0 4px rgba(57, 232, 255, 0.55);
    flex-shrink: 0;
}

.meta-val {
    font-family: 'Oswald', sans-serif;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: rgba(242, 232, 214, 0.85);
}

.meta-price {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--amber);
    text-shadow: 0 0 6px rgba(255, 209, 63, 0.6);
}

.hex-desc {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(11px, 0.9vw, 13px);
    line-height: 1.55;
    color: rgba(242, 232, 214, 0.86);
    margin-top: 6px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 220ms ease 60ms, transform 220ms ease 60ms;
    text-shadow: 0 1px 4px rgba(10, 6, 18, 0.9);
}

.hex-cocktail:hover .hex-desc {
    opacity: 1;
    transform: translateY(0);
}

.hex-candle {
    position: absolute;
    bottom: 22%;
    left: 14%;
    width: 18px;
    height: 28px;
    z-index: 4;
    transition: transform 240ms ease;
}

.hex-cocktail:hover .hex-candle .flame {
    animation: flame-flicker-fast 70ms ease-in-out infinite alternate;
}

@keyframes flame-flicker-fast {
    0% { transform: scaleY(0.9) skewX(-3deg); }
    100% { transform: scaleY(1.08) skewX(3deg); }
}

/* Atmospheric hexes */
.hex-atmos .hex-shape {
    cursor: default;
    animation: hex-breathe 5s ease-in-out infinite;
}

@keyframes hex-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.hex-atmos:hover .hex-shape {
    animation: hex-breathe-deep 2.4s ease-in-out infinite;
}

@keyframes hex-breathe-deep {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.hex-still-caption {
    position: absolute;
    bottom: 24%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Oswald', sans-serif;
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(242, 232, 214, 0.5);
    z-index: 4;
    white-space: nowrap;
    pointer-events: none;
}

.rising-bubble {
    transform-origin: center;
    animation: bubble-svg-rise 4.5s ease-in infinite;
}
.rising-bubble:nth-child(2) { animation-delay: 0.6s; animation-duration: 5.2s; }
.rising-bubble:nth-child(3) { animation-delay: 1.4s; animation-duration: 3.8s; }
.rising-bubble:nth-child(4) { animation-delay: 2.2s; animation-duration: 6.1s; }
.rising-bubble:nth-child(5) { animation-delay: 0.3s; animation-duration: 4.7s; }
.rising-bubble:nth-child(6) { animation-delay: 1.8s; animation-duration: 5.5s; }

@keyframes bubble-svg-rise {
    0% {
        transform: translateY(60px) scale(0.4);
        opacity: 0;
    }
    20% {
        opacity: 0.7;
    }
    100% {
        transform: translateY(-60px) scale(1);
        opacity: 0;
    }
}

.bubbles-still { width: 100%; height: 100%; display: block; }

/* Neon sign hex */
.neon-sign {
    width: 100%;
    height: 100%;
    display: block;
}

.neon-text, .neon-text-sub {
    filter:
        drop-shadow(0 0 4px rgba(255, 43, 184, 0.9))
        drop-shadow(0 0 12px rgba(255, 43, 184, 0.6))
        drop-shadow(0 0 24px rgba(154, 63, 236, 0.5));
    animation: neon-flicker 12s steps(120, end) infinite;
}

.neon-text-sub {
    filter:
        drop-shadow(0 0 4px rgba(57, 232, 255, 0.9))
        drop-shadow(0 0 12px rgba(57, 232, 255, 0.6))
        drop-shadow(0 0 24px rgba(154, 63, 236, 0.4));
    animation: neon-flicker 12s steps(120, end) infinite 3s;
}

@keyframes neon-flicker {
    0%, 95%, 100% { opacity: 1; }
    96% { opacity: 0.3; }
    97% { opacity: 1; }
    97.5% { opacity: 0.5; }
    98% { opacity: 1; }
}

/* Big candle still */
.candle-halo.big {
    animation: halo-pulse 3s ease-in-out infinite;
}
.flame.big-flame {
    animation: flame-flicker 130ms ease-in-out infinite alternate;
    transform-origin: center bottom;
    transform-box: fill-box;
}
.flame-core.big-flame {
    animation: flame-core-flicker 100ms ease-in-out infinite alternate;
    transform-origin: center bottom;
    transform-box: fill-box;
}
.wax-drip.big-drip {
    opacity: 0.6;
    animation: big-drip 5s ease-in infinite;
}
@keyframes big-drip {
    0%, 80%, 100% { stroke-dasharray: 0 100; opacity: 0; }
    20% { stroke-dasharray: 50 50; opacity: 0.6; }
    60% { stroke-dasharray: 100 0; opacity: 0.6; }
}

/* Poetry between rows */
.comb-poetry {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 1.4vw, 21px);
    line-height: 1.78;
    color: rgba(242, 232, 214, 0.66);
    text-align: center;
    margin: 60px auto;
    max-width: 620px;
    padding: 0 24px;
}

.comb-poetry em {
    color: var(--cyan);
    font-style: italic;
    text-shadow: 0 0 8px rgba(57, 232, 255, 0.45);
}

/* ========================================================
   Section 2: The Long Pour
   ======================================================== */
.section-pour {
    padding: 120px 0 100px;
    position: relative;
}

.pour-cinema {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.pour-frame {
    width: 100%;
    aspect-ratio: 2.4 / 1;
    background: var(--void);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 43, 184, 0.18);
    border-bottom: 1px solid rgba(154, 63, 236, 0.22);
    box-shadow:
        0 0 80px rgba(255, 43, 184, 0.15),
        inset 0 0 200px rgba(10, 6, 18, 0.6);
}

.pour-scene {
    position: absolute;
    inset: 0;
}

.pour-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pour-bottle {
    transform-origin: 60px 0;
    animation: bottle-tilt 6s ease-in-out infinite;
}

@keyframes bottle-tilt {
    0%, 100% { transform: translate(360px, 30px) rotate(-26deg); }
    50% { transform: translate(360px, 30px) rotate(-32deg); }
}

.pour-stream {
    stroke-dasharray: 6 8;
    animation: stream-flow 1.8s linear infinite;
}

@keyframes stream-flow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -56; }
}

.pour-coupe {
    animation: coupe-fill-pulse 6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes coupe-fill-pulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 209, 63, 0.5)); }
    50% { filter: drop-shadow(0 0 30px rgba(255, 209, 63, 0.85)); }
}

.pour-letterbox {
    position: absolute;
    left: 0;
    right: 0;
    height: 8%;
    background: #000;
    z-index: 4;
}
.pour-letterbox-top { top: 0; border-bottom: 1px solid rgba(255, 43, 184, 0.2); }
.pour-letterbox-bottom { bottom: 0; border-top: 1px solid rgba(57, 232, 255, 0.18); }

.pour-poetry {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.7;
    color: rgba(242, 232, 214, 0.92);
    text-align: center;
    max-width: 760px;
    padding: 0 24px;
    letter-spacing: 0.01em;
}

.poetry-word {
    display: inline-block;
    margin-right: 0.32em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 320ms ease, transform 320ms ease;
}

.poetry-word.visible {
    opacity: 1;
    transform: translateY(0);
}

.poetry-word:nth-child(8) {
    color: var(--pink);
    text-shadow: 0 0 8px rgba(255, 43, 184, 0.6);
}

/* ========================================================
   Section 3: The Hours
   ======================================================== */
.section-hours {
    padding: 140px 4vw 100px;
    position: relative;
}

.hours-comb {
    max-width: 980px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: end;
    justify-items: center;
}

.hour-hex {
    width: 100%;
    max-width: 130px;
    aspect-ratio: 1 / 1.1547;
    position: relative;
    background: var(--plum);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    border: 1px solid rgba(154, 63, 236, 0.4);
    transition: transform 320ms ease;
}

.hour-hex:nth-child(even) {
    transform: translateY(28px);
}

.hour-hex-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14%;
    text-align: center;
}

.hour-day {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: clamp(11px, 1.2vw, 15px);
    letter-spacing: 0.18em;
    color: var(--cream);
    text-transform: uppercase;
}

.hour-status {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--cyan);
    text-shadow: 0 0 6px rgba(57, 232, 255, 0.6);
    text-transform: uppercase;
}

.hour-status.closed {
    color: rgba(242, 232, 214, 0.3);
    text-shadow: none;
}

.hour-time {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(9px, 0.9vw, 11px);
    color: rgba(242, 232, 214, 0.66);
    line-height: 1.2;
}

.hour-hex.current {
    background: linear-gradient(180deg, rgba(255, 43, 184, 0.32), rgba(28, 14, 46, 0.92));
    border-color: var(--pink);
    animation: hour-pulse 2.6s ease-in-out infinite;
}

.hour-hex.current .hour-day {
    color: var(--pink);
    text-shadow: 0 0 8px rgba(255, 43, 184, 0.75);
}

.hour-hex.current .hour-status {
    color: var(--amber);
    text-shadow: 0 0 8px rgba(255, 209, 63, 0.7);
}

@keyframes hour-pulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(255, 43, 184, 0.45),
            inset 0 0 30px rgba(255, 43, 184, 0.2);
    }
    50% {
        box-shadow:
            0 0 40px rgba(255, 43, 184, 0.7),
            inset 0 0 50px rgba(255, 43, 184, 0.3);
    }
}

.hours-note {
    margin: 60px auto 0;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: rgba(242, 232, 214, 0.6);
    font-size: clamp(14px, 1.2vw, 17px);
}

/* ========================================================
   Section 4: The Brass Bell
   ======================================================== */
.section-bell {
    padding: 140px 4vw 160px;
    position: relative;
    text-align: center;
}

.bell-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.bell-hex {
    width: clamp(280px, 40vmin, 460px);
    aspect-ratio: 1 / 1.1547;
    position: relative;
    background: radial-gradient(ellipse at 50% 65%, rgba(154, 63, 236, 0.35), rgba(28, 14, 46, 0.95) 70%, var(--void) 100%);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    overflow: hidden;
    box-shadow:
        inset 0 0 80px rgba(255, 209, 63, 0.18),
        inset 0 0 160px rgba(154, 63, 236, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bell-hex::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 209, 63, 0.4);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    pointer-events: none;
}

.bell-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 55%, rgba(255, 209, 63, 0.25), transparent 60%);
    pointer-events: none;
}

.bell-ripple {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.ripple-hex {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    aspect-ratio: 1 / 1.1547;
    transform: translate(-50%, -50%) scale(0.4);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    border: 1.5px solid var(--amber);
    background: transparent;
    pointer-events: none;
    opacity: 0.85;
    animation: ripple-out 1.6s ease-out forwards;
}

@keyframes ripple-out {
    0% {
        transform: translate(-50%, -50%) scale(0.4);
        opacity: 0.9;
        border-color: var(--amber);
    }
    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
        border-color: var(--pink);
    }
}

.bell-button {
    position: relative;
    width: 60%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 4;
    transform-origin: top center;
}

.bell-button:hover {
    filter: brightness(1.08);
}

.bell-button .bell-body {
    transform-origin: 120px 12px;
    transform-box: fill-box;
}

.bell-button.ringing .bell-body {
    animation: bell-vibrate 800ms cubic-bezier(0.36, 0, 0.66, -0.56);
}

@keyframes bell-vibrate {
    0% { transform: rotate(0); }
    10% { transform: rotate(3deg); }
    25% { transform: rotate(-2.5deg); }
    40% { transform: rotate(2deg); }
    55% { transform: rotate(-1.5deg); }
    70% { transform: rotate(1deg); }
    85% { transform: rotate(-0.5deg); }
    100% { transform: rotate(0); }
}

.brass-bell {
    width: 100%;
    height: auto;
    display: block;
    filter:
        drop-shadow(0 8px 20px rgba(255, 209, 63, 0.45))
        drop-shadow(0 0 30px rgba(154, 63, 236, 0.45));
}

.bell-candle {
    position: absolute;
    bottom: 16%;
    right: 18%;
    width: 32px;
    height: 64px;
    z-index: 4;
}

.bell-candle .bell-flame,
.bell-candle .bell-flame-core,
.bell-candle .bell-halo {
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center bottom;
    transform-box: fill-box;
}

.bell-candle.swell .bell-flame { transform: scale(1.4); }
.bell-candle.swell .bell-flame-core { transform: scale(1.3); }
.bell-candle.swell .bell-halo { transform: scale(1.5); opacity: 0.55; }

.bell-tagline {
    font-family: 'Oswald', sans-serif;
    font-style: italic;
    font-size: clamp(16px, 1.6vw, 22px);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    color: rgba(242, 232, 214, 0.86);
    text-shadow: 0 0 8px rgba(255, 209, 63, 0.35);
}

.bell-cta {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(13px, 1.1vw, 16px);
    color: rgba(242, 232, 214, 0.5);
    letter-spacing: 0.06em;
}

#bellHint.rung {
    color: var(--amber);
    text-shadow: 0 0 6px rgba(255, 209, 63, 0.55);
}

/* ========================================================
   Footer
   ======================================================== */
.site-foot {
    padding: 40px 4vw 60px;
    text-align: center;
}

.foot-row {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(242, 232, 214, 0.42);
}

.foot-mark {
    color: var(--pink);
    text-shadow: 0 0 6px rgba(255, 43, 184, 0.55);
}
.foot-sep { color: rgba(154, 63, 236, 0.7); }
.foot-reel { color: var(--cyan); }

/* ========================================================
   Responsive
   ======================================================== */
@media (max-width: 980px) {
    :root {
        --hex-size: 220px;
        --hex-half: 110px;
    }
    .comb-row-even { margin-left: 110px; margin-top: -52px; margin-bottom: -52px; }
    .section-honeycomb { padding: 100px 2vw 60px; }
    .hours-comb { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 680px) {
    :root {
        --hex-size: 160px;
        --hex-half: 80px;
        --letterbox-h: 4vh;
    }
    .comb-row { gap: 6px; }
    .comb-row-even { margin-left: 80px; margin-top: -38px; margin-bottom: -38px; }
    .section-marker { top: 22px; left: 18px; font-size: 9px; }
    .hex-meta { display: none; }
    .hex-cocktail:hover .hex-meta { display: flex; }
    .hours-comb { grid-template-columns: repeat(3, 1fr); }
    .pour-frame { aspect-ratio: 1.6 / 1; }
}

@media (max-width: 480px) {
    :root {
        --hex-size: 140px;
        --hex-half: 70px;
    }
    .hours-comb { grid-template-columns: repeat(2, 1fr); }
    .title-tagline { font-size: 14px; }
}