/*
 * ═══════════════════════════════════════════════════════════════
 *  MATCH CIGAR BAR — PREMIUM CSS ENHANCEMENTS
 *  Add this <link> before </head> after the inline <style> block,
 *  or paste the contents into the inline block at the bottom.
 * ═══════════════════════════════════════════════════════════════
 *
 *  TOKEN ADDITIONS (extend :root)
 *  --gold-glow:        rgba(201, 168, 76, 0.18)
 *  --gold-glow-deep:   rgba(201, 168, 76, 0.06)
 *  --amber-glow:       rgba(212, 136, 62, 0.12)
 *  --shimmer-angle:    110deg
 *
 *  SECTION INDEX
 *  1.  Token extensions
 *  2.  Nav link underline refinement
 *  3.  Button shimmer / sweep
 *  4.  Hero: warm light leak + vignette
 *  5.  Hero: smoke/fog wisps (pseudo-elements)
 *  6.  Section header ambient glow
 *  7.  Section ornament dividers
 *  8.  Drop caps on leading paragraphs
 *  9.  Typography refinements (display font)
 * 10.  Image warm overlay + hover warm-up (gallery, lounge, cocktail, events)
 * 11.  Gallery depth / parallax-like transform
 * 12.  Review card border glow
 * 13.  Card / section layered shadows
 * 14.  Form input gold-glow focus
 * 15.  Keyframes (shimmer, fog-drift, light-leak-pulse)
 * ═══════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════
   1. TOKEN EXTENSIONS
   ═══════════════════════════════════════ */
:root {
    --gold-glow:       rgba(201, 168, 76, 0.18);
    --gold-glow-deep:  rgba(201, 168, 76, 0.06);
    --amber-glow:      rgba(212, 136, 62, 0.12);
    --shimmer-start:   rgba(255, 235, 160, 0);
    --shimmer-mid:     rgba(255, 235, 160, 0.18);
    --shimmer-end:     rgba(255, 235, 160, 0);
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ═══════════════════════════════════════
   2. NAV LINK UNDERLINE — REFINED
   Replaces the existing ::after approach with a
   two-part gradient line that sweeps from the center
   outward for a more deliberate feel.
   ═══════════════════════════════════════ */
.nav-links a {
    /* tighten letter-spacing slightly for uppercase elegance */
    letter-spacing: 0.18em;
}

.nav-links a::after {
    /* Override: use gradient instead of flat gold */
    background: linear-gradient(
        90deg,
        transparent,
        var(--gold) 30%,
        var(--gold) 70%,
        transparent
    );
    height: 1px;
    /* Center-out sweep: start from middle width */
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.45s var(--transition-smooth),
                opacity 0.45s var(--transition-smooth);
    opacity: 0;
}

.nav-links a:hover::after {
    width: 100%;
    opacity: 1;
}


/* ═══════════════════════════════════════
   3. BUTTON SHIMMER SWEEP
   A diagonal highlight sweeps left-to-right
   on hover using a ::after pseudo-element.
   GPU-safe: opacity + transform only.
   ═══════════════════════════════════════ */
.btn {
    position: relative;
    overflow: hidden;
    /* Isolate the stacking context for the pseudo sweep */
    isolation: isolate;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    /* 45° shimmer stripe */
    background: linear-gradient(
        110deg,
        var(--shimmer-start)   0%,
        var(--shimmer-start)   30%,
        var(--shimmer-mid)     50%,
        var(--shimmer-end)     70%,
        var(--shimmer-end)     100%
    );
    /* Start far left, hidden */
    transform: translateX(-120%) skewX(-15deg);
    opacity: 1;
    transition: transform 0.6s var(--transition-smooth);
    pointer-events: none;
    border-radius: inherit;
}

.btn:hover::after {
    transform: translateX(120%) skewX(-15deg);
}

/* Gold button: shimmer is brighter against dark gold */
.btn-gold::after {
    --shimmer-mid: rgba(255, 255, 240, 0.28);
}

/* Outline button: shimmer is subtler */
.btn-outline::after {
    --shimmer-mid: rgba(201, 168, 76, 0.14);
}

/* Keep the existing nav-cta ::after suppression working
   by restoring display:none on that specific pseudo */
.nav-cta::after {
    display: none !important;
}


/* ═══════════════════════════════════════
   4. HERO: WARM LIGHT LEAK + VIGNETTE
   Light leak: a soft warm bloom top-left,
   mimicking a practical light source near camera.
   Vignette: deep inset box-shadow on the image wrapper.
   ═══════════════════════════════════════ */

/* Vignette sits above the image, below the gradient */
.hero-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    box-shadow:
        inset 0   0   120px 40px rgba(10, 10, 9, 0.7),
        inset 0 -60px  80px 20px rgba(10, 10, 9, 0.5),
        inset 0  60px  80px 20px rgba(10, 10, 9, 0.35);
    pointer-events: none;
}

/* Warm light leak: top-right bloom, amber-tinted */
.hero::before {
    content: '';
    position: absolute;
    top: -10%;
    right: 5%;
    width: 55%;
    height: 65%;
    z-index: 2;
    background: radial-gradient(
        ellipse 60% 50% at 75% 20%,
        rgba(212, 136, 62, 0.10) 0%,
        rgba(201, 168, 76, 0.06) 40%,
        transparent 75%
    );
    pointer-events: none;
    /* Subtle pulse keeps it alive without being distracting */
    animation: lightLeakPulse 8s ease-in-out infinite;
}


/* ═══════════════════════════════════════
   5. HERO: SMOKE / FOG WISPS
   Three layered pseudo fog bands using
   radial gradients, animated to drift slowly.
   Extremely subtle — opacity ceiling 0.06.
   ═══════════════════════════════════════ */

/* Fog layer 1 — lower third, drifts rightward */
.hero-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 80% 20% at 20% 80%,
            rgba(232, 220, 200, 0.055) 0%,
            transparent 70%
        ),
        radial-gradient(ellipse 60% 15% at 70% 70%,
            rgba(232, 220, 200, 0.04) 0%,
            transparent 70%
        );
    animation: fogDrift1 20s ease-in-out infinite alternate;
    pointer-events: none;
}

/* Fog layer 2 — mid section, drifts leftward, slower */
.hero-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 50% 12% at 55% 60%,
            rgba(240, 225, 200, 0.04) 0%,
            transparent 70%
        ),
        radial-gradient(ellipse 70% 10% at 10% 55%,
            rgba(240, 225, 200, 0.03) 0%,
            transparent 70%
        );
    animation: fogDrift2 28s ease-in-out infinite alternate;
    pointer-events: none;
}


/* ═══════════════════════════════════════
   6. SECTION HEADER AMBIENT GLOW
   A radial gold bloom sits behind section headings.
   Applied to section label + h2 wrappers.
   ═══════════════════════════════════════ */

/* Lounge section heading glow */
.lounge-text,
.cocktails-text,
.events-text,
.contact-left {
    position: relative;
}

.lounge-text::before,
.cocktails-text::before,
.events-text::before,
.contact-left::before {
    content: '';
    position: absolute;
    top: -2rem;
    left: -3rem;
    width: 320px;
    height: 280px;
    background: radial-gradient(
        ellipse 60% 50% at 35% 35%,
        var(--gold-glow) 0%,
        transparent 70%
    );
    z-index: 0;
    pointer-events: none;
    /* Keeps descendants above the glow */
}

.lounge-text > *,
.cocktails-text > *,
.events-text > *,
.contact-left > * {
    position: relative;
    z-index: 1;
}

/* Centered section headers (humidor, reviews) */
.humidor-header,
.reviews-header {
    position: relative;
}

.humidor-header::before,
.reviews-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(
        ellipse 70% 60% at 50% 50%,
        var(--gold-glow-deep) 0%,
        transparent 70%
    );
    z-index: 0;
    pointer-events: none;
}

.humidor-header > *,
.reviews-header > * {
    position: relative;
    z-index: 1;
}


/* ═══════════════════════════════════════
   7. SECTION ORNAMENT DIVIDERS
   A CSS-only decorative ornament rendered
   between major sections using a centered
   diamond and flanking ruled lines.
   Insert .section-ornament divs in HTML, or
   use the ::after of transition elements.
   These styles target a utility class you can
   drop anywhere: <div class="ornament-divider"></div>
   ═══════════════════════════════════════ */
.ornament-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 2px;
    position: relative;
    margin: 0;
    overflow: visible;
    pointer-events: none;
}

.ornament-divider::before,
.ornament-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201, 168, 76, 0.25) 40%,
        rgba(201, 168, 76, 0.35) 100%
    );
}

.ornament-divider::after {
    background: linear-gradient(
        90deg,
        rgba(201, 168, 76, 0.35),
        rgba(201, 168, 76, 0.25) 60%,
        transparent
    );
}

/* Diamond center gem */
.ornament-divider span {
    display: block;
    width: 7px;
    height: 7px;
    background: var(--gold);
    transform: rotate(45deg);
    margin: 0 1.4rem;
    flex-shrink: 0;
    box-shadow:
        0 0 0 1px rgba(201, 168, 76, 0.3),
        0 0 12px 2px rgba(201, 168, 76, 0.2);
}

/*
 * Between sections that adjoin (no explicit divider element),
 * use the atmosphere-strip's bottom border as a visual rest.
 */
.atmosphere-strip {
    border-bottom: 1px solid rgba(201, 168, 76, 0.08);
}

/* Decorative top rule on the humidor section */
.humidor {
    border-top: 1px solid rgba(201, 168, 76, 0.06);
}

/* Thin gold rule above the visit section */
.visit {
    border-top: 1px solid rgba(201, 168, 76, 0.07);
}


/* ═══════════════════════════════════════
   8. DROP CAPS ON LEADING PARAGRAPHS
   First <p> inside section text blocks
   gets an elegant Cormorant Garamond drop cap.
   ═══════════════════════════════════════ */
.lounge-text > p:first-of-type::first-letter,
.cocktails-text > p:first-of-type::first-letter,
.events-text > p:first-of-type::first-letter,
.contact-left > p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-size: 3.6em;
    font-weight: 400;
    font-style: italic;
    color: var(--gold);
    float: left;
    line-height: 0.78;
    margin-right: 0.1em;
    margin-top: 0.08em;
    /* Prevents the letter from clipping at top */
    padding-top: 0.05em;
}


/* ═══════════════════════════════════════
   9. TYPOGRAPHY REFINEMENTS
   Tighter display headline spacing,
   refined word-spacing, better baseline feel.
   ═══════════════════════════════════════ */

/* Section h2 display headings */
.lounge-text h2,
.cocktails-text h2,
.events-text h2,
.contact-left h2,
.humidor-header h2,
.reviews-header h2 {
    /* Cormorant benefits from negative tracking at large sizes */
    letter-spacing: -0.02em;
    word-spacing: 0.04em;
    /* Ensure optical alignment on cap-height */
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* Italic em spans inside headings — pull a hair tighter */
h2 em, h1 em {
    letter-spacing: -0.03em;
    word-spacing: 0;
}

/* Hero h1 — maximum refinement */
.hero h1 {
    letter-spacing: -0.025em;
    word-spacing: 0.02em;
    text-rendering: optimizeLegibility;
}

/* Section labels — refined caps spacing */
.section-label {
    letter-spacing: 0.38em;
    word-spacing: 0.1em;
}

/* Atmosphere card titles */
.atmo-title {
    letter-spacing: 0.01em;
    word-spacing: 0.05em;
}

/* Body copy — slightly looser for readability on dark */
.lounge-text p,
.cocktails-text p,
.events-text p {
    word-spacing: 0.03em;
    /* 8px baseline grid: line-height ~1.75 at 0.95rem ≈ 1.66rem ≈ 26.5px — near 24px grid */
    line-height: 1.78;
}


/* ═══════════════════════════════════════
   10. IMAGE WARM OVERLAY + HOVER WARM-UP
   All gallery / content images get:
   — A sepia-tinted CSS filter at rest
   — On hover: brightness up, saturation up,
     slight sepia reduction = "warming"
   All achieved via filter — GPU composited.
   ═══════════════════════════════════════ */

/* Gallery items (humidor) */
.humidor-gallery .gallery-item img {
    filter:
        brightness(0.82)
        sepia(0.22)
        saturate(0.9)
        contrast(1.05);
    transition:
        transform 0.8s var(--transition-smooth),
        filter  0.55s var(--transition-smooth);
}

.humidor-gallery .gallery-item:hover img {
    filter:
        brightness(1.0)
        sepia(0.08)
        saturate(1.2)
        contrast(1.08);
    transform: scale(1.05);
}

/* Lounge section image */
.lounge-image img {
    filter:
        brightness(0.88)
        sepia(0.18)
        saturate(0.95)
        contrast(1.04);
    transition:
        transform 0.8s var(--transition-smooth),
        filter  0.55s var(--transition-smooth);
}

.lounge-image:hover img {
    filter:
        brightness(1.0)
        sepia(0.06)
        saturate(1.18)
        contrast(1.06);
    transform: scale(1.03);
}

/* Cocktail image */
.cocktail-image img {
    filter:
        brightness(0.88)
        sepia(0.20)
        saturate(0.92)
        contrast(1.05);
    transition:
        transform 0.8s var(--transition-smooth),
        filter  0.55s var(--transition-smooth);
}

.cocktail-image:hover img {
    filter:
        brightness(1.0)
        sepia(0.06)
        saturate(1.18)
        contrast(1.06);
    transform: scale(1.03);
}

/* Events image */
.events-image img {
    filter:
        brightness(0.86)
        sepia(0.18)
        saturate(0.92)
        contrast(1.04);
    transition:
        transform 0.8s var(--transition-smooth),
        filter  0.55s var(--transition-smooth);
}

.events-image:hover img {
    filter:
        brightness(0.98)
        sepia(0.06)
        saturate(1.15)
        contrast(1.06);
}

/*
 * Warm amber color overlay using a pseudo-element
 * placed on top of images inside their positioned wrappers.
 * This is separate from the filter approach and adds
 * a genuine color-tinted cohesion at 8% amber opacity.
 */
.lounge-image::after,
.cocktail-image::after,
.events-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(180, 110, 40, 0.07);
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: opacity 0.55s var(--transition-smooth);
    z-index: 1;
}

.lounge-image:hover::after,
.cocktail-image:hover::after,
.events-image:hover::after {
    opacity: 0;
}

/* Gallery item warm overlay */
.humidor-gallery .gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(180, 110, 40, 0.08);
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: opacity 0.5s var(--transition-smooth);
    z-index: 1;
}

.humidor-gallery .gallery-item:hover::after {
    opacity: 0;
}


/* ═══════════════════════════════════════
   11. GALLERY DEPTH — PARALLAX-LIKE TRANSFORM
   Gallery items have slight perspective
   rotation at rest that flattens on hover,
   creating a subtle depth/lift effect.
   All transforms, fully GPU-accelerated.
   ═══════════════════════════════════════ */
.humidor-gallery {
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

.humidor-gallery .gallery-item {
    /* Subtle resting tilt */
    transform: perspective(800px) rotateY(0.4deg) rotateX(0.3deg) scale(1);
    transition:
        transform 0.7s var(--transition-smooth),
        box-shadow 0.7s var(--transition-smooth);
    /* Lift shadow at rest */
    box-shadow: 4px 8px 30px rgba(0, 0, 0, 0.4);
}

.humidor-gallery .gallery-item:hover {
    /* Flatten and lift forward */
    transform: perspective(800px) rotateY(0deg) rotateX(0deg) scale(1.015);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(201, 168, 76, 0.06);
}

/* Alternate tilt direction for non-first items */
.humidor-gallery .gallery-item:nth-child(even) {
    transform: perspective(800px) rotateY(-0.4deg) rotateX(0.3deg) scale(1);
}

.humidor-gallery .gallery-item:nth-child(even):hover {
    transform: perspective(800px) rotateY(0deg) rotateX(0deg) scale(1.015);
}


/* ═══════════════════════════════════════
   12. REVIEW CARD BORDER GLOW
   Layered box-shadow replaces the simple
   border-color change on hover.
   ═══════════════════════════════════════ */
.review-card {
    transition:
        border-color 0.5s var(--transition-smooth),
        box-shadow   0.5s var(--transition-smooth),
        transform    0.5s var(--transition-smooth);
    /* Resting shadow — subtle lift */
    box-shadow:
        0 2px 20px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.review-card:hover {
    border-color: rgba(201, 168, 76, 0.28);
    /* Warm border glow, inner glow, lift shadow */
    box-shadow:
        0 0 0 1px rgba(201, 168, 76, 0.12),
        0 0 30px rgba(201, 168, 76, 0.10),
        0 12px 40px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(201, 168, 76, 0.05);
    transform: translateY(-3px);
}


/* ═══════════════════════════════════════
   13. LAYERED SHADOWS — CARDS & SECTIONS
   Atmosphere cards, lounge/cocktail image
   wrappers, and the review cards all get
   multi-layer shadows for visual depth.
   ═══════════════════════════════════════ */

/* Atmosphere strip cards */
.atmo-card {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.02) inset,
        0 -1px 0 rgba(0, 0, 0, 0.3) inset;
    transition:
        background 0.5s var(--transition-smooth),
        box-shadow 0.5s var(--transition-smooth);
}

.atmo-card:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.03) inset,
        0 -1px 0 rgba(0, 0, 0, 0.3) inset,
        0 0 40px rgba(201, 168, 76, 0.05);
}

/* Lounge and cocktail image wrappers */
.lounge-image,
.cocktail-image,
.events-image {
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.5),
        0 2px 8px  rgba(0, 0, 0, 0.4);
    transition:
        box-shadow 0.7s var(--transition-smooth);
}

.lounge-image:hover,
.cocktail-image:hover,
.events-image:hover {
    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.65),
        0  4px 16px rgba(0, 0, 0, 0.45),
        0  0  50px rgba(201, 168, 76, 0.06);
}

/* Contact form section — subtle elevated surface */
.contact-form {
    background: rgba(255, 255, 255, 0.015);
    padding: 2.5rem;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 8px 40px rgba(0, 0, 0, 0.3);
}


/* ═══════════════════════════════════════
   14. FORM INPUT GOLD-GLOW FOCUS
   Replaces the plain border-color: gold
   with a layered glow system using
   box-shadow. No layout triggers.
   ═══════════════════════════════════════ */
.form-group input,
.form-group textarea,
.form-group select {
    transition:
        border-color 0.35s var(--transition-smooth),
        box-shadow   0.35s var(--transition-smooth),
        background   0.35s var(--transition-smooth);
    /* Subtle inner shadow at rest for depth */
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: rgba(201, 168, 76, 0.7);
    background: rgba(201, 168, 76, 0.03);
    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, 0.2),
        0 0 0 3px rgba(201, 168, 76, 0.09),
        0 0 20px rgba(201, 168, 76, 0.08);
    outline: none;
}

/* Label elevates in color on sibling focus */
.form-group:focus-within label {
    color: rgba(201, 168, 76, 0.75);
    transition: color 0.35s var(--transition-smooth);
}


/* ═══════════════════════════════════════
   15. KEYFRAMES
   ═══════════════════════════════════════ */

/* Hero warm light leak — slow ambient pulse */
@keyframes lightLeakPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1) translateX(0);
    }
    33% {
        opacity: 1;
        transform: scale(1.06) translateX(-1%);
    }
    66% {
        opacity: 0.85;
        transform: scale(0.97) translateX(1%);
    }
}

/* Fog drift layer 1 — rightward-biased wandering */
@keyframes fogDrift1 {
    0% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(3%) translateY(-1%) scale(1.04);
        opacity: 0.7;
    }
    100% {
        transform: translateX(-2%) translateY(1%) scale(0.97);
        opacity: 0.9;
    }
}

/* Fog drift layer 2 — leftward-biased, slower */
@keyframes fogDrift2 {
    0% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translateX(-4%) translateY(1.5%) scale(1.06);
        opacity: 0.6;
    }
    100% {
        transform: translateX(3%) translateY(-0.5%) scale(0.95);
        opacity: 1;
    }
}


/* ═══════════════════════════════════════
   16. IMAGE FRAMING — GALLERY-MATTED TREATMENT
   Every content image gets a layered frame:
   – Outer gold pinstripe border
   – Inner dark mat (padding acts as the mat)
   – Corner accent marks (::before / ::after on wrapper)
   – Subtle inner shadow for recessed "under glass" feel
   Makes photos look intentionally placed and curated,
   not drag-and-dropped into a template.
   ═══════════════════════════════════════ */

/* ── Shared frame base for single-image wrappers ── */
.lounge-image,
.cocktail-image,
.events-image {
    /* The mat: dark padding around the image */
    padding: 6px;
    background: linear-gradient(
        145deg,
        rgba(201, 168, 76, 0.15) 0%,
        rgba(201, 168, 76, 0.06) 50%,
        rgba(201, 168, 76, 0.12) 100%
    );
    /* Outer gold pinstripe */
    border: 1px solid rgba(201, 168, 76, 0.25);
    position: relative;
}

/* Inner recessed shadow — "under glass" depth */
.lounge-image img,
.cocktail-image img,
.events-image img {
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.5),
        inset 0 -1px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.4);
}

/* Corner accent marks — top-left */
.lounge-image::before,
.cocktail-image::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 28px;
    height: 28px;
    border-top: 2px solid var(--gold);
    border-left: 2px solid var(--gold);
    z-index: 3;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.5s var(--transition-smooth);
}

/* Override the warm-overlay ::after — move it inside the padding */
.lounge-image::after,
.cocktail-image::after,
.events-image::after {
    /* Inset by the padding so overlay only covers the image, not the mat */
    inset: 6px;
    z-index: 2;
}

/* Second corner — bottom-right via a wrapper child div */
/* Since ::after is taken, we use a box-shadow trick on the outer border */
.lounge-image,
.cocktail-image,
.events-image {
    outline: 1px solid transparent;
    outline-offset: 4px;
    transition:
        box-shadow 0.7s var(--transition-smooth),
        outline-color 0.7s var(--transition-smooth);
}

.lounge-image:hover,
.cocktail-image:hover,
.events-image:hover {
    outline-color: rgba(201, 168, 76, 0.12);
}

.lounge-image:hover::before,
.cocktail-image:hover::before {
    opacity: 0.8;
}

/* Events image: badge replaces corner accent, reposition for frame padding */
.events-badge {
    top: calc(6px + 1.2rem) !important;
    left: calc(6px + 1.2rem) !important;
}

/* Bottom-right corner accent mark */
.frame-corner-br {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 28px;
    height: 28px;
    border-bottom: 2px solid var(--gold);
    border-right: 2px solid var(--gold);
    z-index: 3;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.5s var(--transition-smooth);
}

.lounge-image:hover .frame-corner-br,
.cocktail-image:hover .frame-corner-br {
    opacity: 0.8;
}


/* ── Humidor gallery items — tighter frame for grid ── */
.humidor-gallery .gallery-item {
    padding: 4px;
    background: linear-gradient(
        135deg,
        rgba(201, 168, 76, 0.12) 0%,
        rgba(201, 168, 76, 0.04) 50%,
        rgba(201, 168, 76, 0.10) 100%
    );
    border: 1px solid rgba(201, 168, 76, 0.18);
}

.humidor-gallery .gallery-item img {
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.45),
        inset 0 -1px 3px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.35);
}

/* Gallery warm overlay — constrain to inside the frame padding */
.humidor-gallery .gallery-item::after {
    inset: 4px;
}

/* Gallery label — sits on the image, inside the frame */
.humidor-gallery .gallery-item .gallery-label {
    bottom: calc(4px + 1.2rem);
    left: calc(4px + 1.2rem);
}

/* Corner accents on first gallery item (hero-sized) */
.humidor-gallery .gallery-item:first-child {
    position: relative;
}

/* ── Image divider — cinematic letterbox frame ── */
.image-divider {
    border-top: 1px solid rgba(201, 168, 76, 0.15);
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
    /* Slight gold glow at the edges */
    box-shadow:
        inset 0 1px 0 rgba(201, 168, 76, 0.08),
        inset 0 -1px 0 rgba(201, 168, 76, 0.08),
        0 0 60px rgba(0, 0, 0, 0.5);
}


/* ═══════════════════════════════════════
   REDUCED MOTION — respect user preference
   ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero-gradient::before,
    .hero-gradient::after {
        animation: none;
    }

    .btn::after {
        transition: none;
    }

    .review-card,
    .humidor-gallery .gallery-item,
    .lounge-image img,
    .cocktail-image img,
    .events-image img,
    .humidor-gallery .gallery-item img {
        transition: none;
    }
}