/* ========================================
   Bombelaya - Luxury Events Website
   MOBILE-FIRST — Dark Theme, Champagne Gold
   ======================================== */

/* CSS Variables */
:root {
    /* Base Colors */
    --bg-primary: #080808;
    --bg-secondary: #0d0d0d;
    --bg-elevated: #141414;
    --bg-card: #111111;

    /* Text Colors */
    --text-primary: #f0ede6;
    --text-secondary: #b8b3ab;
    --text-tertiary: #6e6a65;
    --text-disabled: #3e3c3a;

    /* Gold Accent Colors */
    --gold: #c4a35a;
    --gold-light: #dfc78a;
    --gold-dim: rgba(196, 163, 90, 0.1);
    --gold-border: rgba(196, 163, 90, 0.22);

    /* Silver tones (btn-primary animation) */
    --silver-cool: #b8b8c8;
    --silver-plate: #d4d4e0;
    --silver-warm: #a09898;

    /* Legacy aliases */
    --neon-cyan: var(--gold);
    --neon-magenta: var(--gold-light);
    --neon-purple: var(--gold);
    --neon-pink: #c0392b;
    --neon-blue: var(--gold);

    /* Typography */
    --font-display: 'Cormorant Garamond', serif;
    --font-body: 'Inter', sans-serif;
    --font-script: 'Great Vibes', cursive;

    /* Spacing scale — mobile base, overridden for desktop */
    --space-xs: 0.5rem;    /*  8px */
    --space-sm: 1rem;      /* 16px */
    --space-md: 1.25rem;   /* 20px — mobile gutter */
    --space-lg: 3rem;      /* 48px */
    --space-xl: 5rem;      /* 80px */

    /* Touch target min */
    --touch-target: 44px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Desktop overrides */
@media (min-width: 769px) {
    :root {
        --space-md: 2rem;    /* 32px */
        --space-lg: 4rem;    /* 64px */
        --space-xl: 8rem;    /* 128px */
    }
}

/* ========================================
   Reset & Base
   ======================================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Prevent iOS font size adjustment */
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-primary);
    color: var(--text-secondary);
    line-height: 1.7;
    letter-spacing: 0.02em;
    overflow-x: hidden;
    font-size: 16px; /* Base font size - prevents iOS zoom */
}

/* Selection */
::selection {
    background: var(--gold);
    color: var(--bg-primary);
}

/* ========================================
   Disable heavy effects — keep hidden
   ======================================== */
.light-effects-container,
.laser-layer, .laser-beam,
.led-layer, .led,
.spotlight-layer, .spotlight,
.ceiling-rig {
    display: none !important;
}

/* ========================================
   Navigation
   ======================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* z-index must exceed the mobile menu overlay (1050) so the navbar bar,
       logo, and hamburger button always render above the open menu. */
    z-index: 1060;
    padding: 0.875rem 0;
    background: linear-gradient(to bottom, rgba(8, 8, 8, 0.92), transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Logo ── */
.logo {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    line-height: 1;
    /* Must exceed menu overlay (1050) and hamburger (1060) is fine
       since logo does not need to be above the hamburger, only above
       the menu background so it remains visible when menu is open */
    z-index: 1060;
}

.logo-swoosh {
    display: block;
    width: 100%;
    height: 12px;
    color: rgba(196, 163, 90, 0.55);
    margin-bottom: -4px;
    filter: drop-shadow(0 0 2px rgba(196, 163, 90, 0.25));
}

.logo-swoosh svg { width: 100%; height: 100%; }

.logo-script {
    font-family: var(--font-script);
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    color: var(--text-primary);
    text-shadow: 0 0 20px rgba(196, 163, 90, 0.15), 1px 1px 3px rgba(0,0,0,.6);
    letter-spacing: 0.02em;
    line-height: 1;
}

.logo-sub {
    font-family: var(--font-body);
    font-size: clamp(0.45rem, 1.2vw, 0.55rem);
    color: rgba(196, 163, 90, 0.65);
    letter-spacing: 0.45em;
    text-transform: uppercase;
    margin-top: 3px;
    font-weight: 300;
}

/* ── Nav links (desktop) ── */
.nav-links {
    display: flex;
    list-style: none;
    gap: var(--space-md);
    align-items: center;
}

.nav-links a {
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 300;
    transition: color var(--transition-medium);
    position: relative;
    padding: 0.4em 0; /* Easier tap on desktop too */
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width var(--transition-medium);
}

.nav-links a:hover { color: var(--text-primary); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
    background: transparent;
    border: 1px solid var(--gold-border);
    padding: 0.55rem 1.4rem !important;
    border-radius: 2px;
    color: var(--gold) !important;
    letter-spacing: 0.16em !important;
    transition: background var(--transition-medium),
                border-color var(--transition-medium),
                color var(--transition-medium);
}

.nav-cta:hover {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold-light) !important;
}

/* Kill the nav underline on this element */
.nav-cta::after { display: none; }

/* ── Language toggle (desktop nav) ── */
.nav-lang-item {
    display: flex;
    align-items: center;
}

.nav-lang-toggle {
    background: none;
    border: 1px solid rgba(196, 163, 90, 0.28);
    border-radius: 100px;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    color: rgba(196, 163, 90, 0.45);
    transition: border-color 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-lang-toggle:hover {
    background: rgba(196, 163, 90, 0.07);
    border-color: rgba(196, 163, 90, 0.5);
}

.nav-lang-toggle .nav-lang-sep {
    color: rgba(196, 163, 90, 0.25);
    font-weight: 300;
}

.nav-lang-toggle .nav-lang-active {
    color: #c4a35a;
}

/* ── Mobile menu button ── */
.mobile-menu-btn {
    display: none; /* hidden on desktop */
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    /* Above the mobile overlay (9000) and navbar (9100) */
    z-index: 9200;
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-btn span {
    width: 26px;
    height: 1px;
    background: var(--text-secondary);
    transition: var(--transition-medium);
    transform-origin: center;
    display: block;
}

.mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

html.menu-open {
    overflow: hidden;
}

body.menu-open {
    overflow: hidden;
}

/* Storia panel scroll lock — overflow:hidden on desktop (no reflow on close)
   position:fixed applied only on iOS via JS to prevent rubber-band scroll */
html.storia-lock {
    overflow: hidden;
}
html.storia-lock-ios body {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
}

/* ========================================
   Hero Section
   ======================================== */
.hero {
    position: relative;
    width: 100%;
    height: 100svh; /* Use small viewport height for mobile */
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Fallback for browsers without svh */
@supports not (height: 100svh) {
    .hero { height: 100vh; }
}

.video-container {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Desktop: side panels flanking the vertical video */
@media (min-width: 769px) {
    .video-container {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
}

/* Mobile-first: video frame fills the entire hero background */
.hero-video-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Desktop: natural 9:16 ratio centered between side panels */
@media (min-width: 769px) {
    .hero-video-frame {
        position: relative;
        inset: auto;
        flex-shrink: 0;
        width: calc(100vh * 0.5625); /* 9:16 = 0.5625 fallback */
        min-width: 300px;
        overflow: hidden;
        z-index: 1;
        /* Warm glow emanating from both sides of the video */
        box-shadow:
            -40px 0 120px rgba(196,163,90,0.05),
             40px 0 120px rgba(196,163,90,0.05);
    }
}

@supports (height: 100svh) {
    @media (min-width: 769px) {
        .hero-video-frame {
            width: calc(100svh * 0.5625);
        }
    }
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(0);
    will-change: transform;
}

.side-video {
    transform: translateZ(0);
}

/* Edge vignette mask — mobile top/bottom darkening */
@media (max-width: 768px) {
    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0.55) 0%,
            transparent 22%,
            transparent 78%,
            rgba(0,0,0,0.65) 100%
        );
        z-index: 1;
        pointer-events: none;
    }
}

/* Play button fallback */
.play-video-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(196, 163, 90, 0.45);
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: var(--gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-medium);
    opacity: 0;
    visibility: hidden;
}

.play-video-btn.visible { opacity: 1; visibility: visible; }

.play-video-btn svg { width: 28px; height: 28px; margin-left: 4px; }

.play-video-btn:hover {
    background: rgba(196, 163, 90, 0.15);
    border-color: var(--gold);
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8,8,8,0.15) 0%,
        rgba(8,8,8,0.05) 45%,
        rgba(8,8,8,0.55) 100%
    );
}

/* Hero content — positioned in lower third */
.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: var(--space-md);
    padding-top: clamp(50vh, 55vh, 60vh);
    max-width: 900px;
    width: 100%;
}

.hero-cta {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-disabled);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    z-index: 10;
    font-weight: 300;
}

.scroll-line {
    width: 1px;
    height: 44px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scroll-pulse 2.5s ease-in-out infinite;
}

@keyframes scroll-pulse {
    0%, 100% { opacity: 0.2; }
    50%       { opacity: 0.7; }
}

/* ========================================
   Buttons
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 400;
    text-decoration: none;
    border-radius: 2px;
    cursor: pointer;
    transition: transform var(--transition-medium),
                box-shadow var(--transition-medium);
    position: relative;
    overflow: hidden;
    min-height: var(--touch-target);
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(
        110deg,
        rgba(196,163,90,0.52)   0%,
        rgba(223,199,138,0.52)  15%,
        rgba(184,184,200,0.30)  30%,
        rgba(212,212,224,0.30)  45%,
        rgba(184,184,200,0.30)  55%,
        rgba(223,199,138,0.52)  70%,
        rgba(196,163,90,0.52)   85%,
        rgba(223,199,138,0.52)  100%
    );
    background-size: 300% 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--gold-light);
    border: 1px solid rgba(196,163,90,0.55);
    box-shadow: 0 2px 16px rgba(196, 163, 90, 0.15);
    text-shadow: 0 1px 10px rgba(0,0,0,0.7);
    animation: goldSilverDrift 8s linear infinite;
    animation-delay: 0.3s;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(196,163,90,0.15), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.btn-primary:hover::before { left: 160%; }

@media (hover: hover) {
    .btn-primary:hover {
        animation-play-state: paused;
        background: linear-gradient(
            110deg,
            rgba(196,163,90,0.60)   0%,
            rgba(223,199,138,0.60)  30%,
            rgba(212,212,224,0.45)  55%,
            rgba(223,199,138,0.60)  80%,
            rgba(196,163,90,0.60)   100%
        );
        background-size: 300% 100%;
        background-position: 75% 50%;
        border-color: rgba(196,163,90,0.80);
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(196, 163, 90, 0.30),
                    0 2px 8px  rgba(196, 163, 90, 0.18);
    }
}

.btn-primary:active {
    transform: translateY(0);
    animation-play-state: paused;
    box-shadow: 0 1px 6px rgba(196, 163, 90, 0.20);
}

.btn-primary:focus-visible {
    outline: 2px solid var(--silver-plate);
    outline-offset: 3px;
    animation-play-state: paused;
}

@keyframes goldSilverDrift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn-secondary {
    background: rgba(12,12,12,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-secondary);
    border: 1px solid rgba(196,163,90,0.28);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

.btn-secondary:hover {
    background: rgba(12,12,12,0.22);
    border-color: rgba(196,163,90,0.55);
    color: var(--gold-light);
    text-shadow: 0 0 12px rgba(196,163,90,0.25);
}

/* ========================================
   Sections
   ======================================== */
.section {
    position: relative;
    z-index: 5;
    padding: var(--space-xl) 0;
}

.container {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 6vw, 3rem);
    font-weight: 300;
    font-style: italic;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--space-lg);
    position: relative;
    display: inline-block;
    width: 100%;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.title-decoration {
    display: block;
    width: 36px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
    margin: 0 auto 1.2rem;
}

/* ========================================
   Scrolling Marquee Banner
   ======================================== */
.marquee-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--bg-primary);
    border-top: 1px solid rgba(196,163,90,0.07);
    border-bottom: 1px solid rgba(196,163,90,0.07);
    padding: 1rem 0;
    z-index: 5;
    /* Isola il banner dal resto del paint tree */
    contain: layout style;
}

.marquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    /* 4 set identici: translateX(-50%) scorre esattamente 2 set
       prima del reset seamless — funziona a qualsiasi larghezza schermo */
    animation: marquee-scroll 48s linear infinite;
    width: max-content;
    /* GPU compositing dedicato — zero jank e zero repaint */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* Pausa su hover (desktop) */
.marquee-banner:hover .marquee-track {
    animation-play-state: paused;
}

/* Stato pausa via JS (quando fuori viewport) */
.marquee-track.is-paused {
    animation-play-state: paused;
}

.marquee-item {
    font-family: var(--font-body);
    font-size: clamp(0.6rem, 2vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--text-disabled);
    padding: 0 1.5rem;
    flex-shrink: 0;
    font-weight: 300;
    user-select: none;
}

.marquee-separator {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.35;
    flex-shrink: 0;
}

@keyframes marquee-scroll {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* ========================================
   About Section
   ======================================== */
.about-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    content-visibility: auto;
    contain-intrinsic-size: 0 1200px;
}

.about-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(
        90deg, transparent 0%,
        rgba(196,163,90,0.15) 30%,
        rgba(196,163,90,0.25) 50%,
        rgba(196,163,90,0.15) 70%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
}

.about-text {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(0.95rem, 2.5vw, 1.05rem);
    line-height: 1.95;
    font-weight: 300;
    color: var(--text-secondary);
}

.about-text strong {
    color: var(--text-primary);
    font-weight: 400;
}

.about-media-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    max-width: 620px;
    margin: 1.4rem auto 0;
    padding: 0.9rem 1.1rem;
    background: rgba(196, 163, 90, 0.08);
    border: 1px solid rgba(196, 163, 90, 0.35);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.80rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 1.7;
    color: var(--text-secondary);
    text-align: left;
    box-shadow: 0 0 18px rgba(196, 163, 90, 0.07), inset 0 0 12px rgba(196, 163, 90, 0.04);
}

.about-media-note svg {
    color: var(--gold);
    opacity: 0.90;
    flex-shrink: 0;
    margin-top: 2px;
}

@media (max-width: 480px) {
    .about-media-note {
        font-size: 0.70rem;
        padding: 0.6rem 0.8rem;
    }
}

/* Luxury highlight — elegant italic gold */
.luxury-highlight {
    color: var(--gold);
    font-style: italic;
    font-family: var(--font-display);
    font-size: 1.1em;
    font-weight: 400;
}

.text-accent { color: var(--gold); }

/* Strobe text legacy alias */
.strobe-text {
    color: var(--gold);
    font-style: italic;
    font-family: var(--font-display);
    font-size: 1.05em;
}

/* ========================================
   Stage Projectors — theatrical fixtures
   ======================================== */

/* ── Keyframes ── */
@keyframes proj-sweep-1 {
    0%   { transform: rotate(-15deg); }
    50%  { transform: rotate(10deg);  }
    100% { transform: rotate(-15deg); }
}
@keyframes proj-sweep-2 {
    0%   { transform: rotate(12deg);  }
    50%  { transform: rotate(-14deg); }
    100% { transform: rotate(12deg);  }
}
@keyframes proj-sweep-3 {
    0%   { transform: rotate(-8deg);  }
    50%  { transform: rotate(16deg);  }
    100% { transform: rotate(-8deg);  }
}
@keyframes proj-sweep-4 {
    0%   { transform: rotate(14deg);  }
    50%  { transform: rotate(-10deg); }
    100% { transform: rotate(14deg);  }
}
@keyframes proj-sweep-5 {
    0%   { transform: rotate(-12deg); }
    50%  { transform: rotate(8deg);   }
    100% { transform: rotate(-12deg); }
}

@keyframes proj-lens-pulse {
    0%   { opacity: 0.82; }
    50%  { opacity: 1;    }
    100% { opacity: 0.82; }
}

/* ── Stage container ── */
.proj-stage {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 4%;
    /* Hide units 4 & 5 on mobile — shown only at 768px+ */
}

/* ── Individual projector unit ── */
.proj-unit {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* The unit sits at the bottom edge; arm hangs down, cone rises up */
    width: 28px;
    height: 90px;
    flex-shrink: 0;
    transform-origin: bottom center;
    /* GPU compositing — prevents subpixel jank on rotation */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* Hide units 4 and 5 on small screens */
.proj-unit--4,
.proj-unit--5 {
    display: none;
}

@media (min-width: 768px) {
    .proj-unit--4,
    .proj-unit--5 {
        display: flex;
    }
}

/* Animated sweeps — each unit gets a unique timing */
.proj-unit--1 {
    animation: proj-sweep-1 18s ease-in-out infinite;
    animation-delay: 0s;
}
.proj-unit--2 {
    animation: proj-sweep-2 14s ease-in-out infinite;
    animation-delay: -4.5s;
}
.proj-unit--3 {
    animation: proj-sweep-3 20s ease-in-out infinite;
    animation-delay: -9s;
}
.proj-unit--4 {
    animation: proj-sweep-4 16s ease-in-out infinite;
    animation-delay: -2.5s;
}
.proj-unit--5 {
    animation: proj-sweep-5 22s ease-in-out infinite;
    animation-delay: -11s;
}

/* ── Mounting arm — thin vertical bar from bottom rail ── */
.proj-arm {
    width: 2px;
    height: 26px;
    background: linear-gradient(
        to bottom,
        rgba(190, 190, 210, 0.55) 0%,
        rgba(160, 160, 185, 0.25) 100%
    );
    border-radius: 1px;
    flex-shrink: 0;
    order: 2; /* sits below body */
    /* Thin cross-bar detail at top of arm */
    position: relative;
}
.proj-arm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 2px;
    background: rgba(185, 185, 210, 0.45);
    border-radius: 1px;
}

/* ── Floor base / pedestal ── */
.proj-base {
    order: 3; /* sits below arm */
    position: relative;
    width: 20px;
    height: 5px;
    background: linear-gradient(
        to bottom,
        rgba(185, 185, 210, 0.50) 0%,
        rgba(155, 155, 185, 0.28) 100%
    );
    border-radius: 2px;
    flex-shrink: 0;
}
/* Small feet details on the base */
.proj-base::before,
.proj-base::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 3px;
    height: 3px;
    background: rgba(180, 180, 210, 0.45);
    border-radius: 0 0 1px 1px;
}
.proj-base::before { left: 1px; }
.proj-base::after  { right: 1px; }

/* ── Fixture body — trapezoidal housing ── */
.proj-body {
    order: 1; /* above arm */
    position: relative;
    width: 26px;
    height: 20px;
    background: linear-gradient(
        175deg,
        rgba(40, 36, 28, 0.95) 0%,
        rgba(20, 18, 12, 0.98) 100%
    );
    border: 1px solid rgba(190, 190, 220, 0.30);
    border-radius: 3px 3px 5px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 6px rgba(190, 190, 220, 0.08),
        inset 0 1px 0 rgba(210, 210, 240, 0.12);
    /* Side detail lines */
    clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
/* Top highlight edge of body */
.proj-body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(190, 190, 220, 0.55) 30%,
        rgba(210, 210, 240, 0.70) 50%,
        rgba(190, 190, 220, 0.55) 70%,
        transparent
    );
    border-radius: 1px;
}
/* Bottom yoke connector pin */
.proj-body::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 5px;
    background: rgba(180, 180, 210, 0.38);
    border-radius: 0 0 2px 2px;
}

/* ── Lens circle ── */
.proj-lens {
    position: relative;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 38% 35%,
        rgba(240, 240, 255, 0.95) 0%,
        rgba(200, 200, 230, 0.85) 30%,
        rgba(150, 150, 190, 0.75) 60%,
        rgba(80,  80, 120, 0.85) 100%
    );
    border: 1px solid rgba(210, 210, 240, 0.60);
    box-shadow:
        0 0 6px rgba(220, 220, 255, 0.70),
        0 0 16px rgba(200, 200, 240, 0.30),
        inset 0 0 4px rgba(255, 255, 255, 0.35);
    animation: proj-lens-pulse 4s ease-in-out infinite;
    /* Pulse timing offset per unit handled via parent's delay propagation */
}

/* ── Lens glint highlight ── */
.proj-lens-glint {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 4px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.90);
    filter: blur(0.5px);
    pointer-events: none;
}

/* ── Light cone ── */
/*
   The cone radiates upward from the lens position.
   It is wide at the top (illuminating the section) and
   narrows to a point at the bottom (at the lens).
   We achieve this with clip-path: polygon(narrow bottom → wide top).
   The element is positioned absolute relative to .proj-unit,
   extending upward beyond the projector bar into the full section.
*/
.proj-cone {
    position: absolute;
    /* Anchor at the bottom of the unit (lens position) */
    bottom: 44px; /* align cone base at approx lens height */
    left: 50%;
    transform: translateX(-50%);
    /* Thin beam, tall enough to reach section top */
    width: 200px;
    height: 300vh;
    /* Silver-white gradient: intense at base, visible all the way up */
    background: linear-gradient(
        to top,
        rgba(235, 235, 250, 0.50) 0%,
        rgba(228, 228, 246, 0.38) 8%,
        rgba(220, 220, 242, 0.26) 22%,
        rgba(212, 212, 238, 0.17) 40%,
        rgba(208, 208, 235, 0.11) 58%,
        rgba(204, 204, 232, 0.07) 74%,
        rgba(200, 200, 230, 0.04) 88%,
        rgba(196, 196, 228, 0.02) 100%
    );
    /* Triangle: narrow point at bottom (0%, 100%), wide fan at top (0%,0%) → (100%,0%) */
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    /* Sit behind the fixture hardware */
    z-index: -1;
    pointer-events: none;
}

/* ── Mobile projectors: silver light, 3 units, compact stage ── */
@media (max-width: 767px) {

    /* Extra bottom padding so projectors never overlap section text */
    #about {
        padding-bottom: 220px;
    }

    /* Stage strip: 4 unità su mobile */
    .proj-stage {
        height: 90px;
        padding: 0 4%;
    }

    /* Individual unit: smaller footprint */
    .proj-unit {
        width: 18px;
        height: 60px;
    }

    /* Mostra 4 proiettori su mobile */
    .proj-unit--3,
    .proj-unit--4 {
        display: flex;
    }

    /* Silver-white light cone — fascio allungato fino alla cima */
    .proj-cone {
        bottom: 0px;
        width: 160px;
        height: 500vh;
        opacity: 1;
        background: linear-gradient(
            to top,
            rgba(235, 235, 250, 0.58) 0%,
            rgba(230, 230, 248, 0.50) 10%,
            rgba(225, 225, 245, 0.42) 22%,
            rgba(220, 220, 242, 0.34) 35%,
            rgba(215, 215, 240, 0.27) 48%,
            rgba(210, 210, 238, 0.21) 60%,
            rgba(208, 208, 236, 0.16) 72%,
            rgba(205, 205, 234, 0.12) 83%,
            rgba(202, 202, 232, 0.08) 93%,
            rgba(200, 200, 230, 0.05) 100%
        );
    }

    /* Lens: silver-cool tones */
    .proj-lens {
        background: radial-gradient(
            circle at 38% 35%,
            rgba(240, 240, 255, 0.95) 0%,
            rgba(200, 200, 230, 0.85) 30%,
            rgba(150, 150, 190, 0.75) 60%,
            rgba(80,  80, 120, 0.85) 100%
        );
        border: 1px solid rgba(210, 210, 240, 0.60);
        box-shadow:
            0 0 6px rgba(220, 220, 255, 0.70),
            0 0 16px rgba(200, 200, 240, 0.30),
            inset 0 0 4px rgba(255, 255, 255, 0.35);
    }

    /* Arm: silver gradient */
    .proj-arm {
        background: linear-gradient(
            to bottom,
            rgba(190, 190, 210, 0.55) 0%,
            rgba(160, 160, 185, 0.25) 100%
        );
    }
    .proj-arm::before {
        background: rgba(185, 185, 210, 0.45);
    }

    /* Base: silver gradient */
    .proj-base {
        background: linear-gradient(
            to bottom,
            rgba(185, 185, 210, 0.50) 0%,
            rgba(155, 155, 185, 0.28) 100%
        );
    }
    .proj-base::before,
    .proj-base::after {
        background: rgba(180, 180, 210, 0.45);
    }

    /* Body: silver border and sheen */
    .proj-body {
        border: 1px solid rgba(190, 190, 220, 0.30);
        box-shadow:
            0 0 6px rgba(190, 190, 220, 0.08),
            inset 0 1px 0 rgba(210, 210, 240, 0.12);
    }
    .proj-body::before {
        background: linear-gradient(
            90deg,
            transparent,
            rgba(190, 190, 220, 0.55) 30%,
            rgba(210, 210, 240, 0.70) 50%,
            rgba(190, 190, 220, 0.55) 70%,
            transparent
        );
    }
    .proj-body::after {
        background: rgba(180, 180, 210, 0.38);
    }
}

/* ── prefers-reduced-motion: freeze everything, keep static cones ── */
@media (prefers-reduced-motion: reduce) {
    .proj-unit,
    .proj-unit--1,
    .proj-unit--2,
    .proj-unit--3,
    .proj-unit--4,
    .proj-unit--5 {
        animation: none !important;
        transform: rotate(0deg) !important;
    }
    .proj-lens {
        animation: none !important;
        opacity: 0.88;
    }
}

/* ========================================
   About Blog / Gallery sub-section
   ======================================== */
.about-blog { margin-top: 5rem; }

.about-blog-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 2rem;
}

.about-blog-label {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
}

.blog-label-line {
    flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, rgba(196,163,90,0.18));
}
.blog-label-line:last-child {
    background: linear-gradient(to left, transparent, rgba(196,163,90,0.18));
}

.blog-label-text {
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.65;
    white-space: nowrap;
    font-weight: 300;
}

/* ── Gallery CTA wrapper — centers and spaces the button below the label ── */
.blog-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 0;        /* sits immediately below the label row */
    margin-bottom: 2.8rem;
}

/* ── Base link — kept for any legacy selectors that may still reference it ── */
.blog-see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 300;
    color: var(--text-tertiary);
    text-decoration: none;
    border: 1px solid rgba(196,163,90,0.14);
    border-radius: 2px;
    padding: 0.65rem 1.6rem;
    min-height: var(--touch-target);
    background: transparent;
    transition: color var(--transition-medium),
                border-color var(--transition-medium),
                background var(--transition-medium);
}

/* =====================================================
   btn-gallery — luxury hero CTA for the Gallery link
   ===================================================== */
.btn-gallery {
    /* Reset from .blog-see-all base */
    position: relative;
    overflow: hidden;
    isolation: isolate;

    /* Sizing — substantial, not tiny */
    padding: 1.1rem 3rem;
    min-width: 280px;
    min-height: 58px;
    border-radius: 3px;

    /* Typography */
    font-size: 0.8rem;
    letter-spacing: 0.28em;
    font-weight: 400;
    color: var(--gold-light);

    /* Background: very dark frosted glass */
    background: rgba(8, 8, 8, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Border: visible gold, will be animated */
    border: 1px solid rgba(196, 163, 90, 0.45);

    /* Breathing glow — outer gold aureola */
    box-shadow:
        0 0  10px rgba(196, 163, 90, 0.08),
        0 0  28px rgba(196, 163, 90, 0.06),
        inset 0 0  24px rgba(196, 163, 90, 0.03);
    animation: gallery-btn-glow 3.2s ease-in-out infinite;

    /* Smooth transitions for hover state changes */
    transition: color var(--transition-medium),
                border-color var(--transition-medium),
                background var(--transition-medium),
                transform var(--transition-medium),
                box-shadow var(--transition-medium);
}

/* Shimmer sweep — light band moving left-to-right across the face */
.btn-gallery::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(220, 190, 110, 0.14) 50%,
        rgba(255, 230, 140, 0.08) 54%,
        transparent 72%
    );
    background-size: 250% 100%;
    background-position: 200% 0;
    animation: gallery-btn-shimmer 3.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

/* Animated border sweep — a bright travelling highlight around the perimeter */
.btn-gallery::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 60deg,
        rgba(220, 185, 95, 0.70) 90deg,
        rgba(255, 230, 130, 0.95) 110deg,
        rgba(220, 185, 95, 0.70) 130deg,
        transparent 160deg 360deg
    );
    animation: gallery-border-spin 4.5s linear infinite;
    z-index: -1;
    /* mask: only show the 1px border region */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    padding: 1px;
}

/* Inner content sits above pseudo-elements */
.btn-gallery__label,
.btn-gallery__arrow {
    position: relative;
    z-index: 2;
}

.btn-gallery__arrow {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    color: var(--gold);
    opacity: 0.75;
}

/* Hover state */
.btn-gallery:hover {
    color: #fff;
    background: rgba(14, 12, 8, 0.88);
    border-color: rgba(196, 163, 90, 0.70);
    box-shadow:
        0 0  16px rgba(196, 163, 90, 0.20),
        0 0  40px rgba(196, 163, 90, 0.12),
        0 0  80px rgba(196, 163, 90, 0.06),
        inset 0 0  30px rgba(196, 163, 90, 0.05);
    transform: translateY(-2px);
}

.btn-gallery:hover .btn-gallery__arrow {
    transform: translateX(6px);
    opacity: 1;
    color: var(--gold-light);
}

/* Keyframes ─────────────────────────────────────────── */

/* Breathing glow — syncs with card-led-breathe rhythm */
@keyframes gallery-btn-glow {
    0%, 100% {
        box-shadow:
            0 0  10px rgba(196, 163, 90, 0.08),
            0 0  28px rgba(196, 163, 90, 0.06),
            inset 0 0  24px rgba(196, 163, 90, 0.03);
    }
    50% {
        box-shadow:
            0 0  18px rgba(196, 163, 90, 0.22),
            0 0  48px rgba(196, 163, 90, 0.14),
            0 0  90px rgba(196, 163, 90, 0.06),
            inset 0 0  32px rgba(196, 163, 90, 0.06);
    }
}

/* Shimmer sweep */
@keyframes gallery-btn-shimmer {
    0%   { background-position: 200% 0; }
    60%  { background-position: -30% 0; }
    100% { background-position: -30% 0; }
}

/* Conic border rotation */
@keyframes gallery-border-spin {
    from { --angle: 0deg; transform: rotate(0deg); }
    to   { --angle: 360deg; transform: rotate(360deg); }
}

/* Mobile — effects adapted precisely for touch screens */
@media (max-width: 767px) {
    .blog-cta-wrap {
        margin-bottom: 2rem;
    }

    .btn-gallery {
        padding: 1rem 2.2rem;
        min-width: min(100%, 320px);
        min-height: 54px;
        font-size: 0.74rem;
        letter-spacing: 0.22em;

        /* Remove blur for GPU performance on mobile */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(8, 8, 6, 0.93);

        /* Slightly stronger glow baseline — easier to see on bright screens */
        box-shadow:
            0 0 12px rgba(196, 163, 90, 0.12),
            0 0 32px rgba(196, 163, 90, 0.08),
            inset 0 0 20px rgba(196, 163, 90, 0.04);

        /* Disable translateY on "hover" — finger taps don't have hover */
        transform: none !important;
    }

    /* Fix conic-gradient border: use inset:0 so overflow:hidden never clips it */
    .btn-gallery::after {
        inset: 0;
        padding: 1px; /* mask ring stays 1 px */
    }

    /* Touch active — immediate visual feedback on tap */
    .btn-gallery:active {
        color: #fff;
        background: rgba(14, 12, 8, 0.96);
        border-color: rgba(196, 163, 90, 0.75);
        box-shadow:
            0 0 18px rgba(196, 163, 90, 0.28),
            0 0 44px rgba(196, 163, 90, 0.14),
            inset 0 0 28px rgba(196, 163, 90, 0.07);
        transform: scale(0.97) !important;
        transition: transform 0.08s ease, box-shadow 0.12s ease;
    }

    .btn-gallery:active .btn-gallery__arrow {
        transform: translateX(5px);
        opacity: 1;
        color: var(--gold-light);
    }
}

@media (max-width: 480px) {
    .btn-gallery {
        padding: 1rem 1.6rem;
        min-width: calc(100% - 2rem);
        font-size: 0.7rem;
        letter-spacing: 0.18em;
    }
}

/* ── Blog grid ── */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: single column */
    gap: 1rem;
}

/* Tablet: 2 col */
@media (min-width: 600px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .blog-card-wrap:last-child {
        grid-column: span 2;
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
    }
}

/* Desktop: 3 col */
@media (min-width: 900px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
    .blog-card-wrap:last-child { grid-column: span 1; max-width: none; }
}

/* ── Perimeter beam — traveling light orbit around card border ──────────────────────
   Architecture: JS writes --beam-angle to :root via rAF each frame.
   All 3 ::before elements inherit the same computed value → frame-perfect sync.
   (CSS @property per-element animation has sub-frame start drift across elements;
    transform: rotate() on a rectangle creates a "propeller" visual, not border travel.
    Writing one value to :root from JS is the only approach that guarantees both
    visual correctness AND sync.)
   Color: gold ramp → near-white hot center → gold ramp (spotlight-on-lacquer metaphor).
   ─────────────────────────────────────────────────────────────────────────────────── */
@property --beam-angle {
    syntax: '<angle>';
    inherits: true;        /* all descendants share the same computed value */
    initial-value: 0deg;
}

.blog-card-wrap {
    position: relative;
    border-radius: 4px;
    display: flex;          /* allows .blog-card child to use height: 100% */
    flex-direction: column;
}

/* Layer 1 — the sharp beam edge, tightly exposed at the card border */
.blog-card-wrap::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 7px;
    background: conic-gradient(
        from var(--beam-angle),
        transparent              0%,
        transparent             52%,  /* wider arc — 48% of 360° = ~173° of travel */
        rgba(196,163,90,0.35)   59%,
        rgba(220,185,95,1.00)   68%,
        rgba(255,252,230,1.00)  74%,  /* near-white hot center */
        rgba(220,185,95,1.00)   80%,
        rgba(196,163,90,0.35)   87%,
        transparent            100%
    );
    z-index: 0;
    will-change: background;
    filter: blur(1px);
}

/* Layer 2 — soft glow halo around the beam, larger spread */
.blog-card-wrap::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 10px;
    background: conic-gradient(
        from var(--beam-angle),
        transparent              0%,
        transparent             52%,
        rgba(196,163,90,0.10)   57%,
        rgba(220,185,95,0.50)   67%,
        rgba(255,248,215,0.65)  74%,
        rgba(220,185,95,0.50)   81%,
        rgba(196,163,90,0.10)   91%,
        transparent            100%
    );
    z-index: 0;
    will-change: background;
    filter: blur(6px);
}

/* Card sits above the beam layer */
.blog-card {
    position: relative;
    z-index: 1;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid rgba(196,163,90,0.14);
    box-shadow:
        0 0 22px rgba(196,163,90,0.18),
        0 0 55px rgba(196,163,90,0.08),
        0 6px 24px rgba(0,0,0,0.55);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    cursor: pointer;
    /* Fill the wrapper so beam ring aligns with card edges on all cards */
    height: 100%;
    display: flex;
    flex-direction: column;
}


@media (hover: hover) {
    .blog-card-wrap:hover::before {
        animation-play-state: paused;
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    .blog-card:hover {
        transform: translateY(-4px);
        border-color: rgba(196,163,90,0.32);
        box-shadow:
            0 0 36px  rgba(196,163,90,0.32),
            0 0 80px  rgba(196,163,90,0.15),
            0 16px 40px rgba(0,0,0,0.60);
    }
}

@media (max-width: 768px) {
    /* Animated beam enabled on mobile — JS rAF loop runs on all devices.
       Remove the hardcoded background so var(--beam-angle) takes effect.
       Wider arc + brighter glow compensates for smaller physical card area. */
    .blog-card-wrap::before {
        inset: -3px;          /* match desktop — -2px was too thin to read during motion */
        border-radius: 7px;
        filter: blur(1.5px);  /* slightly more than desktop 1px for softer edge at small size */
        background: conic-gradient(
            from var(--beam-angle),
            transparent              0%,
            transparent             44%,  /* narrower dead zone vs 52% desktop = wider visible arc */
            rgba(196,163,90,0.45)   51%,  /* earlier fade-in, raised from 0.35 */
            rgba(220,185,95,1.00)   60%,
            rgba(255,252,230,1.00)  66%,  /* same hot-white center as desktop */
            rgba(220,185,95,1.00)   72%,
            rgba(196,163,90,0.45)   79%,  /* raised from 0.35, symmetric with entry */
            transparent            100%
        );
    }

    .blog-card-wrap::after {
        /* Re-enabled on mobile with tightened inset to respect the 1rem grid gap */
        display: block;
        inset: -4px;          /* desktop is -6px; -4px avoids horizontal bleed on tight padding */
        border-radius: 8px;
        filter: blur(5px);    /* desktop is 6px; slightly tighter for smaller card footprint */
        background: conic-gradient(
            from var(--beam-angle),
            transparent              0%,
            transparent             44%,  /* matches ::before dead zone for visual coherence */
            rgba(196,163,90,0.14)   50%,
            rgba(220,185,95,0.65)   60%,  /* raised from 0.50 desktop */
            rgba(255,248,215,0.80)  66%,  /* raised from 0.65 desktop — brighter halo center */
            rgba(220,185,95,0.65)   72%,  /* raised from 0.50 desktop */
            rgba(196,163,90,0.14)   81%,
            transparent            100%
        );
    }

    .blog-card {
        /* Slightly stronger ambient glow on mobile to give context when beam is at far arc */
        box-shadow:
            0 0 18px rgba(196,163,90,0.22),
            0 0 44px rgba(196,163,90,0.10),
            0 4px 16px rgba(0,0,0,0.50);
    }
}

.blog-card-img {
    position: relative;
    height: clamp(280px, 75vw, 420px); /* Mobile: taller for portrait 9:16 video on single column */
    overflow: hidden;
    contain: strict; /* Isolate repaint — prevents video reflow from affecting rest of page */
}

@media (min-width: 600px) {
    .blog-card-img { height: clamp(200px, 30vw, 300px); }
}

@media (min-width: 900px) {
    .blog-card-img { height: 420px; }
}

.blog-card-img--1 {
    background:
        radial-gradient(ellipse at 30% 60%, rgba(196,163,90,0.1) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(196,163,90,0.06) 0%, transparent 50%),
        linear-gradient(135deg, #0c0c0c 0%, #141414 100%);
}
.blog-card-img--2 {
    background:
        radial-gradient(ellipse at 70% 70%, rgba(196,163,90,0.08) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 30%, rgba(196,163,90,0.05) 0%, transparent 50%),
        linear-gradient(135deg, #0e0e0e 0%, #181818 100%);
}
.blog-card-img--3 {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(196,163,90,0.09) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 75%, rgba(196,163,90,0.04) 0%, transparent 50%),
        linear-gradient(135deg, #0a0a0a 0%, #111111 100%);
}

/* Video nelle blog card */
.blog-card-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    display: block;
    will-change: transform; /* GPU compositing layer — prevents jank on mobile scroll */
}

.blog-card-tag {
    position: absolute;
    top: 0.875rem; left: 0.875rem;
    z-index: 2;
    font-family: var(--font-body);
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--gold);
    background: rgba(8,8,8,0.72);
    border: 1px solid rgba(196,163,90,0.28);
    border-radius: 2px;
    padding: 0.28rem 0.65rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.blog-card-body {
    padding: 1.25rem 1.4rem 1.5rem;
    border-top: 1px solid rgba(196,163,90,0.05);
    flex: 1; /* expands to fill remaining card height when card is taller than content */
}

.blog-card-title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.5vw, 1.05rem);
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.blog-card-excerpt {
    font-size: clamp(0.82rem, 2vw, 0.88rem);
    color: var(--text-tertiary);
    line-height: 1.7;
    font-weight: 300;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .blog-card-wrap::before {
        background: linear-gradient(
            to bottom,
            rgba(196,163,90,0.28),
            rgba(196,163,90,0.14)
        );
    }
    .blog-card-wrap::after { display: none; }
    .blog-card { transition: none; }
}

/* ========================================
   Social Stage
   ======================================== */
.social-stage {
    position: relative;
    margin-top: 2.5rem;
    padding-bottom: 2.5rem;
    display: flex;
    flex-direction: column; /* Mobile: stack */
    align-items: center;
    gap: 0;
}

/* Desktop: horizontal */
@media (min-width: 641px) {
    .social-stage {
        flex-direction: row;
        align-items: stretch;
        margin-top: 3rem;
        padding-bottom: 3rem;
    }
}

.stage-bay {
    width: 100%;       /* Mobile: full width */
    max-width: 100%;   /* No overflow on 360px */
    display: flex;
    align-items: stretch;
    padding: 0.5rem 0;
    position: relative;
}

/* Desktop bay padding */
@media (min-width: 641px) {
    .stage-bay { flex: 1; padding: 0 1rem; }
    .stage-bay--left  { padding-left: 0; }
    .stage-bay--right { padding-right: 0; }
}

/* Horizontal divider on mobile */
.stage-bay--left::after,
.stage-bay--center::after {
    content: '';
    position: absolute;
    bottom: 0; left: 8%; right: 8%;
    width: auto; height: 1px;
    background: linear-gradient(
        90deg, transparent,
        rgba(196,163,90,0.12) 30%,
        rgba(196,163,90,0.12) 70%,
        transparent
    );
}

/* Vertical divider on desktop */
@media (min-width: 641px) {
    .stage-bay--left::after,
    .stage-bay--center::after {
        bottom: auto; left: auto;
        right: 0; top: 6%; width: 1px; height: 88%;
        background: linear-gradient(
            to bottom, transparent,
            rgba(196,163,90,0.14) 30%,
            rgba(196,163,90,0.22) 50%,
            rgba(196,163,90,0.14) 70%,
            transparent
        );
    }
}

.social-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    width: 100%;
    background: rgba(12,12,12,0.18);
    border-radius: 4px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    min-height: var(--touch-target);
}

.social-panel::before {
    content: '';
    position: absolute;
    top: 0; left: -120%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    transform: skewX(-12deg);
    transition: left 0.5s ease;
    pointer-events: none;
}

@media (hover: hover) {
    .social-panel:hover::before { left: 180%; }
    .social-panel:hover { transform: translateY(-3px); }
}

.sp-icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: box-shadow 0.3s ease;
}

.sp-text {
    display: flex; flex-direction: column;
    gap: 0.2rem; flex: 1; min-width: 0;
}

.sp-name {
    font-family: var(--font-body);
    font-size: 0.58rem; letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-secondary); font-weight: 300; white-space: nowrap;
}

.sp-cta {
    font-family: var(--font-body);
    font-size: clamp(0.88rem, 2.5vw, 0.95rem);
    font-weight: 400; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sp-arrow {
    color: var(--text-tertiary);
    transition: transform 0.25s ease, color 0.25s ease;
    flex-shrink: 0;
}

@media (hover: hover) {
    .social-panel:hover .sp-arrow {
        transform: translateX(4px);
        color: var(--text-tertiary);
    }
}

/* Instagram */
.social-panel--instagram {
    border: 1px solid rgba(225,48,108,0.35);
}
.social-panel--instagram .sp-icon {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
}
@media (hover: hover) {
    .social-panel--instagram:hover {
        border-color: rgba(225,48,108,0.38);
        box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    }
}

/* Facebook */
.social-panel--facebook { border: 1px solid rgba(24,119,242,0.35); }
.social-panel--facebook .sp-icon {
    background: linear-gradient(135deg, #0066ff, #1877f2, #4267b2);
    color: #fff;
}
@media (hover: hover) {
    .social-panel--facebook:hover {
        border-color: rgba(24,119,242,0.38);
        box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    }
}

/* Telefono */
.social-panel--phone { border: 1px solid rgba(196,163,90,0.18); }
.social-panel--phone .sp-icon {
    background: rgba(196,163,90,0.1);
    color: var(--gold);
    border: 1px solid rgba(196,163,90,0.25);
}
.social-panel--phone .sp-cta {
    color: var(--gold);
    font-size: clamp(0.82rem, 2.5vw, 0.9rem);
    letter-spacing: 0.02em;
}
@media (hover: hover) {
    .social-panel--phone:hover {
        border-color: rgba(196,163,90,0.38);
        box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    }
}

/* ========================================
   Responsive — Mobile-first
   ======================================== */

/* ── 768px and below ── */
@media (max-width: 768px) {

    /* Hero: overflow visible su mobile così il dropdown non viene tagliato.
       Il video-frame ha già il suo overflow:hidden, il clip visivo è preservato. */
    .hero { overflow: visible; }

    /* ── Navbar mobile layout ──
       Logo centered full-width; hamburger floats top-right */
    .nav-container {
        position: relative;
        justify-content: center;
    }

    /* Hide desktop nav links entirely on mobile */
    .nav-links {
        display: none !important;
    }

    /* Hamburger: absolute top-right, overlays the header */
    .mobile-menu-btn {
        display: flex;
        position: absolute;
        right: var(--space-md);
        top: 50%;
        transform: translateY(-50%);
        z-index: 9200;
    }

    /* Hero */
    .hero-content {
        padding: var(--space-md);
        padding-top: clamp(45vh, 50vh, 55vh);
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .btn {
        width: 100%;
        max-width: 280px;
        padding: 0.875rem 1.5rem;
    }

    .play-video-btn { width: 64px; height: 64px; }
    .play-video-btn svg { width: 24px; height: 24px; }

    .scroll-indicator { display: none; }

    /* Sections */
    .section { padding: var(--space-xl) 0; }

    /* About */
    .about-text { padding: 0; }
    .about-blog { margin-top: 3.5rem; }
    .about-blog-header { gap: 1rem; }

    /* Why Us */
    .why-us-tagline { max-width: 100%; margin: 0 auto 2rem; }
    .why-us-list { gap: 1.75rem; max-width: 100%; }

    /* ── Heading "Non Si Dimentica" — mobile ── */
    .wuh-line1 {
        font-size: clamp(0.65rem, 3.2vw, 0.80rem);
        letter-spacing: 0.22em; /* tracking ridotto per evitare overflow su schermi stretti */
    }
    .wuh-line2 {
        font-size: clamp(1.85rem, 8.5vw, 2.6rem); /* ridotto: "Non Si Dimentica" è lungo */
    }

    /* ── Card LED strip — meno invasiva su card piccole ── */
    .card-led-strip {
        height: 36px;
        box-shadow:
            0 0  3px rgba(196, 163, 90, 0.95),
            0 0  8px rgba(196, 163, 90, 0.70),
            0 0 18px rgba(196, 163, 90, 0.35),
            0 0 30px rgba(196, 163, 90, 0.15);
    }

    /* ── Side LED mobile — bordo assoluto, glow stretto ── */
    .side-led {
        display: flex;
        width: 3px !important;
        padding: 6% 0;
        align-items: center !important;
    }
    .side-led--left  { left: 0 !important; }
    .side-led--right { right: 0 !important; }

    /* Glow max 8px: non raggiunge il testo (container padding = 20px) */
    .side-bar {
        height: clamp(50px, 8%, 80px);
        box-shadow:
            0 0 4px rgba(196, 163, 90, 1.00),
            0 0 8px rgba(196, 163, 90, 0.65);
    }

    /* Tutte e 6 le barre visibili */
    .side-bar:nth-child(n+4) { display: block; }
}

/* ── 480px and below ── */
@media (max-width: 480px) {

    /* Stat grid: 1 colonna su telefoni stretti */
    .stat-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Heading ancora più compatto */
    .wuh-line2 {
        font-size: clamp(1.65rem, 8vw, 2.1rem);
    }

    /* Glow heading più leggero — evita artefatti su GPU mobile debole */
    @keyframes heading-glow {
        0%, 100% {
            filter: drop-shadow(0 0  5px rgba(196, 163, 90, 0.40))
                    drop-shadow(0 0 14px rgba(196, 163, 90, 0.15));
        }
        50% {
            filter: drop-shadow(0 0  9px rgba(220, 185, 100, 0.65))
                    drop-shadow(0 0 24px rgba(196, 163, 90, 0.28));
        }
    }

    .hero-content {
        padding: var(--space-sm);
        padding-top: clamp(42vh, 46vh, 50vh);
    }

    .btn {
        max-width: 260px;
        padding: 0.875rem 1.25rem;
        font-size: 0.72rem;
    }

    .play-video-btn { width: 56px; height: 56px; }
    .play-video-btn svg { width: 20px; height: 20px; margin-left: 3px; }

    .about-blog { margin-top: 3rem; }
}

/* ── 360px and below — small phones ── */
@media (max-width: 360px) {
    :root {
        --space-md: 1rem;
        --space-lg: 2.5rem;
        --space-xl: 4rem;
    }

    .hero-content {
        padding: 1rem;
        padding-top: 44vh;
    }

    .btn { max-width: 100%; }

    .social-panel { padding: 1rem; gap: 0.85rem; }
    .sp-icon { width: 42px; height: 42px; }

    .blog-card-body { padding: 1rem 1.1rem 1.25rem; }

    /* ── Side LED — schermi ≤360px ──
       A questa larghezza --space-md scende a 16px.
       Il testo inizia a 16px dal bordo sezione.
       Glow ridotto a max 6px: buffer testo = 16 - (3 + 6) = 7px — sicuro.
       Barre ancora visibili e decorative. */
    .side-bar {
        box-shadow:
            0 0 3px rgba(196, 163, 90, 1.00),
            0 0 6px rgba(196, 163, 90, 0.55);
    }
}

/* ── Landscape mobile ── */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: 100svh;
    }

    .hero-content {
        padding-top: 35vh;
        padding-bottom: 2rem;
    }

    .hero-cta {
        flex-direction: row;
        gap: var(--space-sm);
    }

    .btn {
        width: auto;
        max-width: none;
        padding: 0.625rem 1.5rem;
        min-height: 40px;
    }

    .scroll-indicator { display: none; }
}

/* ========================================
   Mobile Navigation Overlay — #mobile-nav-overlay
   Completely separate from desktop .nav-links.
   Only rendered on screens <= 768px.
   ======================================== */

#mobile-nav-overlay {
    display: none; /* hidden on desktop — shown via media query below */
}

@media (max-width: 768px) {
    #mobile-nav-overlay {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        height: 100svh;
        z-index: 9000;
        background: rgba(8, 8, 8, 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;

        /* Hidden state */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #mobile-nav-overlay.mno-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Inner container — padding-top clears the fixed navbar */
    .mno-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2.5rem;
        width: 100%;
        height: 100%;
        padding: 5rem 2rem 3rem;
        text-align: center;
    }

    /* Brand block hidden — logo in navbar (z-index 9100) is visible above overlay */
    .mno-brand {
        display: none;
    }

    /* Nav list */
    .mno-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
        max-width: 280px;
        border-top: 1px solid rgba(196, 163, 90, 0.15);
        border-bottom: 1px solid rgba(196, 163, 90, 0.15);
    }

    .mno-item {
        width: 100%;
        border-bottom: 1px solid rgba(196, 163, 90, 0.08);
        opacity: 0;
        transform: translateX(-16px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .mno-item:last-child {
        border-bottom: none;
    }

    /* Stagger animation delays */
    #mobile-nav-overlay.mno-open .mno-item:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.15s; }
    #mobile-nav-overlay.mno-open .mno-item:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.22s; }
    #mobile-nav-overlay.mno-open .mno-item:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.29s; }
    #mobile-nav-overlay.mno-open .mno-item:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.36s; }

    .mno-link {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(1.5rem, 6vw, 1.9rem);
        font-weight: 300;
        font-style: italic;
        color: rgba(240, 237, 230, 0.75);
        text-decoration: none;
        letter-spacing: 0.08em;
        padding: 1rem 1.5rem;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.25s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mno-link:active {
        color: #c4a35a;
    }

    @media (hover: hover) {
        .mno-link:hover {
            color: #dfc78a;
        }
    }

    /* CTA button */
    .mno-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem;
        font-weight: 400;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #c4a35a;
        text-decoration: none;
        border: 1px solid rgba(196, 163, 90, 0.4);
        padding: 0.9rem 2.4rem;
        min-height: 48px;
        -webkit-tap-highlight-color: transparent;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.4s ease 0.42s, transform 0.4s ease 0.42s,
                    background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    #mobile-nav-overlay.mno-open .mno-cta {
        opacity: 1;
        transform: translateY(0);
    }

    .mno-cta:active {
        background: rgba(196, 163, 90, 0.12);
        border-color: #c4a35a;
        color: #dfc78a;
    }

    @media (hover: hover) {
        .mno-cta:hover {
            background: rgba(196, 163, 90, 0.1);
            border-color: #c4a35a;
            color: #dfc78a;
        }
    }

    /* Tagline */
    .mno-tagline {
        font-family: 'Inter', sans-serif;
        font-size: 0.58rem;
        font-weight: 300;
        letter-spacing: 0.3em;
        color: rgba(240, 237, 230, 0.2);
        text-transform: uppercase;
        margin: 0;
        opacity: 0;
        transition: opacity 0.4s ease 0.5s;
    }

    #mobile-nav-overlay.mno-open .mno-tagline {
        opacity: 1;
    }
}

/* Raise navbar above the new overlay */
@media (max-width: 768px) {
    .navbar {
        z-index: 9100;
    }
}

/* Language toggle in mobile menu */
@media (max-width: 768px) {
    .mno-item--lang {
        display: flex;
        align-items: center;
        padding: 0 var(--space-lg, 1.5rem);
    }

    .mno-lang-toggle {
        background: none;
        border: 1px solid rgba(196, 163, 90, 0.28);
        border-radius: 100px;
        padding: 0.42rem 1.2rem;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        color: rgba(196, 163, 90, 0.45);
        transition: border-color 0.2s ease, background 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mno-lang-toggle:active {
        background: rgba(196, 163, 90, 0.08);
        border-color: #c4a35a;
    }

    .mno-lang-sep {
        color: rgba(196, 163, 90, 0.25);
        font-weight: 300;
    }

    .mno-lang-toggle .mno-lang-active {
        color: #c4a35a;
    }
}

/* Reduce motion — disable stagger, show immediately */
@media (prefers-reduced-motion: reduce) {
    #mobile-nav-overlay,
    .mno-brand,
    .mno-item,
    .mno-cta,
    .mno-tagline {
        transition: opacity 0.01s, visibility 0.01s !important;
        transform: none !important;
        transition-delay: 0s !important;
    }
}

/* ========================================
   Audio Button
   ======================================== */

/* Hide audio button while the mobile menu is open so it does not
   float above the overlay. Visibility-hidden preserves the layout
   space (irrelevant here since it's fixed) but avoids any
   animation-state interruption on the SC widget. */
body.menu-open .audio-btn {
    visibility: hidden;
    pointer-events: none;
}

.audio-btn {
    position: fixed;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    left: calc(1.25rem + env(safe-area-inset-left, 0px));
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.1rem;
    height: var(--touch-target);
    background: rgba(8,8,8,0.9);
    border: 1px solid rgba(196,163,90,0.18);
    border-radius: 50px;
    color: var(--text-tertiary);
    font-family: var(--font-body);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 300;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-tap-highlight-color: transparent;
    overflow: visible;
}

.audio-btn:hover {
    border-color: rgba(196,163,90,0.42);
    color: var(--gold);
}

.audio-icon {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

.audio-label { text-transform: uppercase; }

/* ── Bass bars — equalizer (nascosto di default) ── */
.bass-bars {
    display: none;
    align-items: flex-end;
    gap: 2.5px;
    height: 18px;
    flex-shrink: 0;
}

.bass-bars span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: var(--gold);
    transform-origin: bottom;
}

.bass-bars span:nth-child(1) { height: 8px;  animation-delay: 0.00s; }
.bass-bars span:nth-child(2) { height: 15px; animation-delay: 0.15s; }
.bass-bars span:nth-child(3) { height: 10px; animation-delay: 0.07s; }
.bass-bars span:nth-child(4) { height: 13px; animation-delay: 0.22s; }

/* ── Stato attivo ── */
.audio-btn.active {
    border-color: rgba(196,163,90,0.55);
    color: var(--gold);
}

/* Nascondi emoji, mostra barre */
.audio-btn.active .audio-icon { display: none; }
.audio-btn.active .bass-bars  {
    display: flex;
}
.audio-btn.active .bass-bars span {
    animation: bass-bar 0.55s ease-in-out infinite alternate;
}

/* Anello pulsante bass — livello 1 */
.audio-btn.active::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50px;
    border: 1px solid rgba(196,163,90,0.45);
    animation: bass-ring 0.75s ease-out infinite;
    pointer-events: none;
}

/* Anello pulsante bass — livello 2 */
.audio-btn.active::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50px;
    border: 1px solid rgba(196,163,90,0.20);
    animation: bass-ring 0.75s ease-out infinite 0.25s;
    pointer-events: none;
}

@keyframes bass-bar {
    0%   { transform: scaleY(0.25); opacity: 0.55; }
    100% { transform: scaleY(1.00); opacity: 1.00; }
}

@keyframes bass-ring {
    0%   { transform: scale(1.00); opacity: 0.9; }
    100% { transform: scale(1.45); opacity: 0.0; }
}

/* ── Nudge — vibrazione evidente ogni 20s quando inattivo ── */
@keyframes audio-nudge {
    0%        { transform: translate(0,    0)    scale(1.00) rotate(  0deg);
                box-shadow: none; }
    8%        { transform: translate(-8px,-3px)  scale(1.28) rotate(-6deg);
                box-shadow: 0 0 28px rgba(196,163,90,0.95), 0 0 55px rgba(196,163,90,0.45), 0 0 90px rgba(196,163,90,0.20);
                border-color: rgba(196,163,90,1.00); }
    18%       { transform: translate( 8px, 0)   scale(1.34) rotate( 6deg);
                box-shadow: 0 0 36px rgba(220,185,100,1.00), 0 0 70px rgba(196,163,90,0.55), 0 0 120px rgba(196,163,90,0.25);
                border-color: rgba(220,185,100,1.00); }
    28%       { transform: translate(-7px, 0)   scale(1.28) rotate(-5deg);
                box-shadow: 0 0 28px rgba(196,163,90,0.80), 0 0 55px rgba(196,163,90,0.38);
                border-color: rgba(196,163,90,0.90); }
    38%       { transform: translate( 6px, 0)   scale(1.16) rotate( 3deg);
                box-shadow: 0 0 18px rgba(196,163,90,0.55), 0 0 34px rgba(196,163,90,0.22);
                border-color: rgba(196,163,90,0.60); }
    50%       { transform: translate(-4px, 0)   scale(1.08) rotate(-2deg);
                box-shadow: 0 0  9px rgba(196,163,90,0.28); }
    62%       { transform: translate( 2px, 0)   scale(1.03) rotate( 1deg);
                box-shadow: none; }
    75%,100%  { transform: translate(0,    0)   scale(1.00) rotate(  0deg);
                box-shadow: none; }
}

.audio-btn.nudge {
    animation: audio-nudge 1.1s ease-in-out both;
}

/* ── Mobile — bottone circolare compatto ── */
@media (max-width: 768px) {
    .audio-btn {
        padding: 0;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        justify-content: center;
        gap: 0;
    }
    /* Nasconde la label testuale — solo icona/barre */
    .audio-label { display: none; }

    /* Bass bars leggermente più compatte */
    .bass-bars { height: 16px; gap: 2px; }
    .bass-bars span:nth-child(1) { height: 7px;  }
    .bass-bars span:nth-child(2) { height: 13px; }
    .bass-bars span:nth-child(3) { height: 9px;  }
    .bass-bars span:nth-child(4) { height: 11px; }

    /* Anelli bass scalati per bottone circolare */
    .audio-btn.active::before { inset: -4px; }
    .audio-btn.active::after  { inset: -4px; }

    /* Nudge mobile — scale più contenuto per non sforare lo schermo */
    @keyframes audio-nudge {
        0%        { transform: translate(0,    0)    scale(1.00) rotate(  0deg);
                    box-shadow: none; }
        8%        { transform: translate(-6px,-2px)  scale(1.38) rotate(-6deg);
                    box-shadow: 0 0 22px rgba(196,163,90,0.95), 0 0 44px rgba(196,163,90,0.45);
                    border-color: rgba(196,163,90,1.00); }
        18%       { transform: translate( 6px, 0)   scale(1.44) rotate( 6deg);
                    box-shadow: 0 0 30px rgba(220,185,100,1.00), 0 0 60px rgba(196,163,90,0.50);
                    border-color: rgba(220,185,100,1.00); }
        28%       { transform: translate(-5px, 0)   scale(1.36) rotate(-5deg);
                    box-shadow: 0 0 22px rgba(196,163,90,0.75), 0 0 44px rgba(196,163,90,0.32);
                    border-color: rgba(196,163,90,0.90); }
        38%       { transform: translate( 5px, 0)   scale(1.20) rotate( 3deg);
                    box-shadow: 0 0 14px rgba(196,163,90,0.50);
                    border-color: rgba(196,163,90,0.60); }
        52%       { transform: translate(-3px, 0)   scale(1.09) rotate(-2deg);
                    box-shadow: 0 0  7px rgba(196,163,90,0.25); }
        65%       { transform: translate( 2px, 0)   scale(1.03) rotate( 1deg);
                    box-shadow: none; }
        80%,100%  { transform: translate(0,    0)   scale(1.00) rotate(  0deg);
                    box-shadow: none; }
    }
}

/* Floating notes */
.floating-note {
    position: absolute;
    bottom: 50%; left: 50%;
    font-size: 1.1rem;
    pointer-events: none;
    animation: float-note 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 1001;
}

@keyframes float-note {
    0%   { opacity: 0.75; transform: translate(0,0) rotate(0deg) scale(1); }
    60%  { opacity: 0.5; }
    100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(0.5); }
}

/* ========================================
   Accessibility - Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .scroll-line,
    .marquee-track {
        animation: none;
    }
    .audio-btn.active { animation: none; }
    .audio-btn.active .audio-icon { animation: none; }
    .audio-btn.active .bass-bars span { animation: none; }
    .audio-btn.active::before,
    .audio-btn.active::after { animation: none; }
    .floating-note { display: none; }
    .btn:hover { transform: none; }
    .btn-primary {
        animation: none;
        background: rgba(196,163,90,0.38);
        background-size: 100% 100%;
    }
    .btn-primary::before { display: none; }
    /* Gallery button — freeze all animations, keep visual weight */
    .btn-gallery {
        animation: none;
        box-shadow:
            0 0 14px rgba(196, 163, 90, 0.14),
            inset 0 0 20px rgba(196, 163, 90, 0.04);
    }
    .btn-gallery::before { animation: none; background: none; }
    .btn-gallery::after  { animation: none; display: none; }
    .btn-gallery:hover   { transform: none; }
    .btn-gallery:hover .btn-gallery__arrow { transform: none; }
}

/* ========================================
   Services Dropdown
   ======================================== */
.services-dropdown-wrapper {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.services-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-arrow { transition: transform 0.3s ease; flex-shrink: 0; }
.services-dropdown-wrapper.open .dropdown-arrow { transform: rotate(180deg); }

.services-dropdown-menu {
    position: fixed;
    top: 200px;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    min-width: 210px;
    background: rgba(8,8,8,0.18);
    border: 1px solid rgba(196,163,90,0.18);
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.25s ease,
        visibility 0.25s ease;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.72);
    z-index: 99999;
}

.services-dropdown-menu.open {
    transform: translateX(-50%) scaleY(1);
    opacity: 1; visibility: visible;
}

.services-dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    min-height: var(--touch-target);
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 300;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-shadow: 0 1px 8px rgba(0,0,0,0.8);
    transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
    position: relative;
}

.services-dropdown-item:last-child { border-bottom: none; }

.services-dropdown-item::before {
    content: '';
    position: absolute; left: 0; top: 0;
    height: 100%; width: 1px;
    background: var(--gold);
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.services-dropdown-item:hover {
    color: var(--gold);
    background: var(--gold-dim);
    padding-left: 1.875rem;
}

.services-dropdown-item:hover::before { transform: scaleY(1); }

/* Mobile: full-width dropdown */
@media (max-width: 768px) {
    .services-dropdown-wrapper { width: 100%; max-width: 280px; }
    .services-dropdown-btn { width: 100%; justify-content: center; }
    .services-dropdown-menu {
        transform: translateX(-50%) scaleY(0);
        min-width: 240px;
    }
    .services-dropdown-menu.open {
        transform: translateX(-50%) scaleY(1);
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .services-dropdown-wrapper { width: auto; max-width: none; }
    .services-dropdown-btn { width: auto; }
    .services-dropdown-menu {
        left: 50%; right: auto;
        transform: translateX(-50%) scaleY(0);
        min-width: 210px;
    }
    .services-dropdown-menu.open {
        transform: translateX(-50%) scaleY(1);
    }
}

/* ========================================
   Contact Modal
   ======================================== */
body.modal-open { overflow: hidden; }

/* Backdrop */
.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end; /* Bottom sheet by default (mobile-first) */
    justify-content: center;
    padding: 0;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.contact-modal.open { opacity: 1; visibility: visible; }

/* Panel — bottom sheet on mobile */
.contact-panel {
    position: relative;
    width: 100%;
    max-height: 92svh;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(10,10,10,0.99);
    border: 1px solid rgba(196,163,90,0.18);
    border-bottom: none;
    border-left: none;
    border-right: none;
    border-radius: 14px 14px 0 0;
    padding: 0 var(--space-md) calc(2.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 40px rgba(0,0,0,0.8);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    scrollbar-width: thin;
    scrollbar-color: rgba(196,163,90,0.15) transparent;
}

.contact-panel::-webkit-scrollbar { width: 3px; }
.contact-panel::-webkit-scrollbar-track { background: transparent; }
.contact-panel::-webkit-scrollbar-thumb { background: rgba(196,163,90,0.15); border-radius: 2px; }

.contact-modal.open .contact-panel { transform: translateY(0); }

/* Drag handle */
.contact-panel::before {
    content: '';
    display: block;
    width: 36px; height: 3px;
    background: rgba(196,163,90,0.18);
    border-radius: 2px;
    margin: 1rem auto 1.25rem;
}

/* Desktop: centered dialog */
@media (min-width: 769px) {
    .contact-modal {
        align-items: center;
        padding: 1.5rem;
    }
    .contact-panel {
        max-width: 600px;
        max-height: 90vh;
        border-radius: 4px;
        border: 1px solid rgba(196,163,90,0.2);
        padding: 2.5rem;
        transform: translateY(32px) scale(0.97);
        /* Layered shadow: deep drop + faint gold halo */
        box-shadow:
            0 0 0 1px rgba(196,163,90,0.06),
            0 40px 80px rgba(0,0,0,0.92),
            0 0 60px rgba(196,163,90,0.04);
        transition: transform 0.55s cubic-bezier(0.22, 1.1, 0.36, 1),
                    box-shadow 0.55s ease;
    }
    .contact-panel::before { display: none; }
    .contact-modal.open .contact-panel {
        transform: translateY(0) scale(1);
        box-shadow:
            0 0 0 1px rgba(196,163,90,0.1),
            0 40px 80px rgba(0,0,0,0.92),
            0 0 80px rgba(196,163,90,0.06);
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .contact-modal {
        align-items: center;
        padding: 0.5rem;
    }
    .contact-panel {
        max-width: 600px;
        max-height: 96svh;
        max-height: 96dvh;
        border-radius: 4px;
        border: 1px solid rgba(196,163,90,0.18);
        padding: 1.5rem;
        transform: translateY(20px) scale(0.98);
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .contact-panel::before { display: none; }
    .contact-modal.open .contact-panel { transform: translateY(0) scale(1); }
}

/* Close button — min 44px touch target */
.contact-close {
    position: absolute;
    top: 1rem; right: 1rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 2px;
    width: 44px; height: 44px; /* touch target */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-disabled);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.contact-close:hover {
    border-color: rgba(196,163,90,0.3);
    color: var(--gold);
}

/* Header */
.contact-header {
    margin-bottom: 1.75rem;
    padding-right: 3rem;
}

.contact-pre {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.55;
    margin-bottom: 0.35rem;
    font-weight: 300;
}

.contact-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5vw, 2.5rem);
    color: var(--text-primary);
    letter-spacing: 0.02em;
    font-weight: 300;
    font-style: italic;
    line-height: 1.1;
}

.contact-modal.open .contact-title {
    animation: evento-shimmer 5s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes evento-shimmer {
    0%, 100% {
        color: var(--text-primary);
        text-shadow: none;
    }
    50% {
        color: var(--gold-light);
        text-shadow: 0 0 18px rgba(196, 163, 90, 0.25);
    }
}

/* Form layout — single col mobile, 2 col desktop */
.form-row {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 col */
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

@media (min-width: 640px) {
    .form-row {
        grid-template-columns: 1fr 1fr; /* Desktop: 2 col */
        gap: 1.2rem;
        margin-bottom: 1.2rem;
    }
}

.form-group { display: flex; flex-direction: column; gap: 0.45rem; }
.form-group--full { margin-bottom: 1.25rem; }

/* Labels */
.contact-form label {
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-disabled);
    font-weight: 300;
}

.contact-form label span { color: var(--gold); opacity: 0.7; }

.label-optional {
    color: var(--text-disabled) !important;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: lowercase;
}

/* Inputs — 16px to prevent iOS zoom */
.contact-form input,
.contact-form select,
.contact-form textarea {
    font-size: 16px; /* Prevent iOS zoom — always 16px */
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--text-primary);
    background: transparent;
    outline: none;
    width: 100%;
    transition: border-color 0.2s ease;
}

.contact-form input,
.contact-form select {
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding: 0.65rem 0;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

.contact-form input::placeholder { color: var(--text-disabled); font-weight: 300; }
.contact-form input:focus,
.contact-form select:focus { border-bottom-color: var(--gold); }

.contact-form select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6a65' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    background-size: 12px;
    padding-right: 1.8rem;
}

.contact-form select option { background: #0a0a0a; color: var(--text-primary); }

.contact-form textarea {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 2px;
    padding: 0.875rem;
    resize: vertical;
    min-height: 88px;
    line-height: 1.7;
}

.contact-form textarea::placeholder { color: var(--text-disabled); font-weight: 300; }
.contact-form textarea:focus { border-color: rgba(196,163,90,0.28); }

/* Submit */
.contact-submit { width: 100%; justify-content: center; margin-top: 0.25rem; }
.contact-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; animation: none !important; }

/* Success */
.contact-success {
    text-align: center;
    padding: 2rem 0.5rem;
    animation: contact-fade-up 0.5s ease;
}

.contact-success-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1px solid rgba(196,163,90,0.35);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--gold);
}

.contact-success h4 {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 300; font-style: italic;
    color: var(--text-primary); margin-bottom: 0.75rem;
}

.contact-success p { color: var(--text-tertiary); font-size: 0.9rem; line-height: 1.7; font-weight: 300; }

@keyframes contact-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Corner bracket marks (desktop only) ── */
/*
   Four decorative L-shaped corner marks are injected via JS as
   .contact-corner elements inside .contact-panel. CSS drives them.
   This keeps the HTML semantic and lets us animate them independently.
*/
.contact-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.contact-modal.open .contact-corner {
    animation: corner-appear 0.6s cubic-bezier(0.22, 1.1, 0.36, 1) forwards;
}
.contact-corner--tl { top: 10px; left: 10px; border-top: 1px solid rgba(196,163,90,0.55); border-left: 1px solid rgba(196,163,90,0.55); animation-delay: 0.35s !important; }
.contact-corner--tr { top: 10px; right: 10px; border-top: 1px solid rgba(196,163,90,0.55); border-right: 1px solid rgba(196,163,90,0.55); animation-delay: 0.42s !important; }
.contact-corner--bl { bottom: 10px; left: 10px; border-bottom: 1px solid rgba(196,163,90,0.55); border-left: 1px solid rgba(196,163,90,0.55); animation-delay: 0.49s !important; }
.contact-corner--br { bottom: 10px; right: 10px; border-bottom: 1px solid rgba(196,163,90,0.55); border-right: 1px solid rgba(196,163,90,0.55); animation-delay: 0.56s !important; }

@keyframes corner-appear {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

/* On mobile bottom-sheet, hide corners (they'd overlap the drag handle) */
@media (max-width: 768px) {
    .contact-corner { display: none; }
}

/* ── Ambient gold scan line — reads "precision" not "disco" ── */
/*
   A single horizontal gold gradient line that slowly drifts from top
   to bottom of the open panel, once, at 5 % opacity. Very subtle.
*/
.contact-panel::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(196, 163, 90, 0.0) 15%,
        rgba(196, 163, 90, 0.35) 50%,
        rgba(196, 163, 90, 0.0) 85%,
        transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}
.contact-modal.open .contact-panel::after {
    animation: panel-scan 3.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    animation-delay: 0.3s;
}

@keyframes panel-scan {
    0%   { top: 0;    opacity: 0; }
    5%   { opacity: 1; }
    90%  { opacity: 0.5; }
    100% { top: 100%; opacity: 0; }
}

/* On mobile, push the scan behind the drag handle */
@media (max-width: 768px) {
    .contact-panel::after {
        /* Still runs, but starts below the drag handle area */
        top: 2.5rem;
    }
}

/* ── Staggered form field reveal ── */
/*
   Each .form-group fades+slides up when the modal opens.
   JS adds the .contact-modal--animating class during open,
   CSS does the rest with nth-child delays.
   We use a single @keyframes and vary delay per child.
*/
.contact-header,
.contact-form .form-row,
.contact-form .form-group--full,
.contact-form .contact-submit,
.contact-form .contact-error-msg {
    opacity: 0;
    transform: translateY(12px);
    transition: none; /* JS class drives this */
}

.contact-modal.open .contact-header {
    animation: field-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.15s;
}
.contact-modal.open .contact-form .form-row:nth-of-type(1) {
    animation: field-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.28s;
}
.contact-modal.open .contact-form .form-row:nth-of-type(2) {
    animation: field-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.38s;
}
.contact-modal.open .contact-form .form-group--full {
    animation: field-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.48s;
}
.contact-modal.open .contact-form .contact-submit {
    animation: field-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.58s;
}

@keyframes field-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* When modal closes, reset stagger immediately so next open is clean */
.contact-modal:not(.open) .contact-header,
.contact-modal:not(.open) .contact-form .form-row,
.contact-modal:not(.open) .contact-form .form-group--full,
.contact-modal:not(.open) .contact-form .contact-submit {
    opacity: 0;
    transform: translateY(12px);
    animation: none;
}

/* ── Ambient interior glow — faint gold radial at the top of the panel ── */
/*
   A pseudo-element on the header creates a soft bloom that reads
   as warm, exclusive light rather than a harsh spotlight.
   Sits behind the text (z-index 0), uses only opacity + blur.
*/
.contact-header {
    position: relative;
    z-index: 1;
}
.contact-header::after {
    content: '';
    position: absolute;
    top: -1.5rem;
    left: -2.5rem;
    width: 260px;
    height: 120px;
    background: radial-gradient(
        ellipse at 35% 0%,
        rgba(196, 163, 90, 0.07) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: -1;
    /* Fade in slowly with the header */
    opacity: 0;
}
.contact-modal.open .contact-header::after {
    animation: header-bloom 1.2s ease forwards;
    animation-delay: 0.2s;
}
@keyframes header-bloom {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Reduced motion overrides ── */
@media (prefers-reduced-motion: reduce) {
    .contact-corner,
    .contact-panel::after,
    .contact-header,
    .contact-header::after,
    .contact-form .form-row,
    .contact-form .form-group--full,
    .contact-form .contact-submit {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Error */
.contact-error-msg {
    color: #c0392b;
    font-size: 0.78rem;
    text-align: center;
    margin-top: 0.75rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.contact-error-msg.visible { opacity: 1; }

/* ========================================
   Logo Signature Animation — plays once on load
   ======================================== */

/*
 * Phase 1 — SVG swoosh paths draw in (JS sets stroke-dasharray/offset,
 *            then removes them after the transition ends).
 * Phase 2 — Each .logo-letter fades + rises in (staggered via JS delay).
 * Phase 3 — .logo-sub fades in.
 * Phase 4 — .logo-script spins once on Y axis (one full 360° rotation).
 * Phase 5 — JS cleans up will-change and animation classes; logo is static.
 */

/* Initial hidden state for swoosh paths — JS overrides these */
.logo-swoosh path {
    stroke-dasharray: var(--logo-path-len, 300);
    stroke-dashoffset: var(--logo-path-len, 300);
    transition: stroke-dashoffset 0.55s cubic-bezier(0.22, 0.8, 0.28, 1),
                opacity 0.3s ease;
}

/* Initial hidden state for the sub-label — JS reveals it */
.logo-sub {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/*
 * Individual letter spans injected by JS.
 * display:inline-block is required for transform to work on inline elements.
 * Matching the parent font metrics so no layout shift occurs.
 */
.logo-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    /* Each letter's transition is driven by a JS-injected transition-delay */
    transition: opacity 0.35s cubic-bezier(0.22, 0.8, 0.28, 1),
                transform 0.35s cubic-bezier(0.22, 0.8, 0.28, 1);
    will-change: opacity, transform;
}

/* State class added by JS to reveal each letter */
.logo-letter.visible {
    opacity: 1;
    transform: translateY(0);
}

/*
 * Phase 4: Y-axis flip applied to the whole .logo-script container.
 * perspective on the parent (.logo) keeps the flip centred in place.
 * The animation runs once (forwards fill keeps the final frame static,
 * then JS removes the animation and resets transform to none).
 */
.logo { perspective: 400px; }

@keyframes logo-spin-y {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

.logo-script.spinning {
    will-change: transform;
    animation: logo-spin-y 0.65s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1 forwards;
}

/* ---- Reduced-motion: skip animation, show everything immediately ---- */
@media (prefers-reduced-motion: reduce) {
    .logo-swoosh path {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }
    .logo-letter {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .logo-sub {
        opacity: 0.65 !important;
        transform: none !important;
        transition: none !important;
    }
    .logo-script.spinning {
        animation: none !important;
        transform: none !important;
    }
}

/* ========================================
   Logo Intro Overlay — full-screen signature animation
   Creates a temporary fixed overlay that shows "Bombelaya" large at
   screen center, then JS flies it to the real navbar logo position.
   All rules here are display/layout only; timing is controlled by JS.
   ======================================== */

/*
 * Outer overlay: covers the full viewport, sits above the hero video
 * but below the navbar controls. pointer-events:none so the video and
 * hero CTAs are interactive if the user interacts early.
 * The dark veil (.logo-intro-veil) gives the script text legibility
 * against any bright video frame.
 */
#logo-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* safe-area per iPhone notch */
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
             env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* Veil adattivo: più esteso in portrait (mobile), più ellittico in landscape */
#logo-intro-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 80% 55% at 50% 50%,
        rgba(8, 8, 8, 0.88) 0%,
        rgba(8, 8, 8, 0.60) 50%,
        rgba(8, 8, 8, 0.0)  100%
    );
    pointer-events: none;
}

@media (min-width: 600px) {
    #logo-intro-overlay::before {
        background: radial-gradient(
            ellipse 60% 40% at 50% 50%,
            rgba(8, 8, 8, 0.82) 0%,
            rgba(8, 8, 8, 0.55) 55%,
            rgba(8, 8, 8, 0.0)  100%
        );
    }
}

#logo-intro-word {
    font-family: var(--font-script);
    /* Mobile-first: usa min(vw, svw) per stare dentro lo schermo.
       Su 360px → ~40px; su 480px → ~53px; su 768px+ → clamp a 8rem  */
    font-size: clamp(2rem, 11vw, 8rem);
    color: var(--text-primary);
    text-shadow:
        0 0 60px rgba(196, 163, 90, 0.35),
        0 0 20px rgba(196, 163, 90, 0.20),
        1px 2px 6px rgba(0, 0, 0, 0.75);
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    /* evita overflow orizzontale su schermi stretti */
    max-width: 92vw;
    will-change: transform, opacity;
    perspective: 600px;
}

/* Tablet e desktop: font più grande */
@media (min-width: 600px) {
    #logo-intro-word { font-size: clamp(4rem, 12vw, 8rem); }
}

.intro-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px) rotate(-2deg);
    transition: opacity 0.70s cubic-bezier(0.22, 0.8, 0.28, 1),
                transform 0.70s cubic-bezier(0.22, 0.8, 0.28, 1);
    will-change: opacity, transform;
}

/* Riduce la rotazione sugli schermi molto piccoli */
@media (max-width: 480px) {
    .intro-letter { transform: translateY(6px) rotate(-1deg); }
}

.intro-letter.visible {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

@keyframes intro-fly-spin {
    0%   { transform: var(--intro-fly-transform-start); }
    35%  { transform: var(--intro-fly-transform-mid);   }
    100% { transform: var(--intro-fly-transform-end);   }
}

#logo-intro-word.flying {
    animation: intro-fly-spin 1.10s cubic-bezier(0.55, 0.05, 0.28, 1) 1 forwards;
}

/* Landscape mobile: centra verticalmente escludendo la barra URL */
@media (max-height: 500px) and (orientation: landscape) {
    #logo-intro-word { font-size: clamp(1.8rem, 8vh, 4rem); }
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
    #logo-intro-overlay { display: none !important; }
}

/* ========================================
   Why Choose Us
   ======================================== */
.why-us-section {
    background: var(--bg-primary);
    border-top: 1px solid rgba(196,163,90,0.07);
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 0 900px;
}

.why-us-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Left column — now full width centered */
.why-us-left {
    width: 100%;
    max-width: 780px;
    text-align: center;
}

.why-us-heading {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 6vw, 3.2rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    align-items: center;
}

/* Line 1 — "L'Evento Che" — sottile, argento-ghiaccio, uppercase spaced */
.wuh-line1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.72rem, 1.8vw, 0.92rem);
    font-weight: 300;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(240, 237, 230, 0.45);
    display: block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}

/* Line 2 — "Non Si Dimentica" — grande, corsivo, gold shimmer + glow pulsante */
.wuh-line2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.4rem, 7vw, 4.2rem);
    font-style: italic;
    font-weight: 300;
    color: var(--text-primary);
    display: block;
    background: linear-gradient(
        90deg,
        #f0ede6 0%,
        #dfc78a 35%,
        #f5f0e8 50%,
        #c4a35a 65%,
        #f0ede6 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 6px rgba(196, 163, 90, 0.45))
            drop-shadow(0 0 20px rgba(196, 163, 90, 0.18));
    animation:
        heading-shimmer  4s linear       infinite,
        heading-glow     2.6s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.8s ease 0.35s;
}

/* Punto finale — oro pieno, leggermente più grande */
.wuh-dot {
    color: #c4a35a;
    -webkit-text-fill-color: #c4a35a;
    font-size: 1.15em;
    line-height: 0;
    vertical-align: -0.05em;
}

/* Shimmer continuo sul testo */
@keyframes heading-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position:   0% center; }
}

/* Disco glow pulse — aureola gold che respira attorno al testo */
@keyframes heading-glow {
    0%, 100% {
        filter: drop-shadow(0 0  6px rgba(196, 163, 90, 0.45))
                drop-shadow(0 0 20px rgba(196, 163, 90, 0.18));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(220, 185, 100, 0.80))
                drop-shadow(0 0 36px rgba(196, 163, 90, 0.40))
                drop-shadow(0 0 60px rgba(196, 163, 90, 0.18));
    }
}

/* Entrata — triggered da JS con classe .wuh-visible */
.why-us-heading.wuh-visible .wuh-line1 {
    opacity: 1;
    transform: translateY(0);
}
.why-us-heading.wuh-visible .wuh-line2 {
    opacity: 1;
}

/* Legacy — mantenuto per compatibilità con eventuale markup residuo */
.why-us-accent { font-style: italic; color: var(--gold); }

.why-us-tagline {
    font-size: clamp(0.88rem, 2.5vw, 0.95rem);
    font-weight: 300;
    color: var(--text-tertiary);
    line-height: 1.85;
    max-width: 520px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.why-us-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.why-us-item {
    display: flex;
    align-items: flex-start;
    position: relative;
    text-align: left;
}

.why-us-num {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 300;
    line-height: 1;
    color: var(--text-primary);
    opacity: 0.05;
    position: absolute;
    top: -0.4rem; left: -0.4rem;
    user-select: none; pointer-events: none;
    letter-spacing: -0.04em;
}

.why-us-content {
    padding-left: 1rem;
    border-left: 1px solid rgba(196,163,90,0.14);
    transition: border-color 0.3s ease;
    /* Offset from large ghost number */
    margin-left: 0.5rem;
}

@media (hover: hover) {
    .why-us-item:hover .why-us-content {
        border-left-color: rgba(196,163,90,0.42);
    }
}

.why-us-point-title {
    font-family: var(--font-body);
    font-size: clamp(0.7rem, 2vw, 0.75rem);
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

.why-us-point-desc {
    font-size: clamp(0.88rem, 2.2vw, 0.9rem);
    font-weight: 300;
    color: var(--text-tertiary);
    line-height: 1.82;
}

/* Right column — stat grid */
.why-us-right {
    margin-top: 3rem;
}

@media (min-width: 900px) {
    .why-us-right {
        position: sticky;
        top: 6rem;
        margin-top: 0;
    }
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 440px; /* Cap on mobile */
    margin: 0 auto;
}

@media (min-width: 900px) {
    .stat-grid { max-width: none; margin: 0; }
}

.stat-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 2px;
    padding: clamp(1.25rem, 4vw, 2rem) clamp(1rem, 3vw, 1.5rem);
    padding-top: clamp(1.6rem, 4.5vw, 2.4rem); /* extra top room for LED strip */
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* ── Card LED strip — uniform gold bar at top of each stat card ── */
.card-led-strip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;                          /* the physical LED tape */
    background: rgba(220, 185, 95, 0.95); /* solid gold, full width */
    box-shadow:
        0 0  4px rgba(196, 163, 90, 1.00),   /* tight core glow */
        0 0 10px rgba(196, 163, 90, 0.80),   /* near halo */
        0 0 22px rgba(196, 163, 90, 0.45),   /* mid spread */
        0 0 42px rgba(196, 163, 90, 0.20);   /* wide atmospheric bloom */
    pointer-events: none;
    animation: card-led-breathe 2.8s ease-in-out infinite;
}

/* Stagger so each card breathes slightly out of phase */
.stat-card:nth-child(1) .card-led-strip { animation-delay:  0s;   }
.stat-card:nth-child(2) .card-led-strip { animation-delay: -0.7s; }
.stat-card:nth-child(3) .card-led-strip { animation-delay: -1.4s; }
.stat-card:nth-child(4) .card-led-strip { animation-delay: -2.1s; }

@keyframes card-led-breathe {
    0%, 100% { opacity: 0.75; }
    50%       { opacity: 1;    }
}

/* Top gold stripe — now replaced by card-led-strip, keep for fallback */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.20;
}

/* Corner warm glow */
.stat-card::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 70px; height: 70px;
    background: radial-gradient(circle at top right, rgba(196,163,90,0.05), transparent 70%);
}

@media (hover: hover) {
    .stat-card:hover {
        transform: translateY(-3px);
        border-color: rgba(196,163,90,0.1);
    }
}

.stat-value {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.8rem);
    font-weight: 300;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.stat-label {
    font-size: clamp(0.6rem, 1.5vw, 0.65rem);
    font-weight: 300;
    color: var(--text-tertiary);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.5;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .stat-card, .why-us-content { transition: none; }
    .card-led-strip { animation: none; opacity: 0.85; }
}

/* ── Side LED Backlighting — 6 strips per side ── */

/* Elevate container above the LED strips */
.why-us-section .container {
    position: relative;
    z-index: 1;
}

/* Outer wrapper — full height, thin column at each edge */
.side-led {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 6% 0;
}

/* Desktop only — mobile override below uses !important */
@media (min-width: 769px) {
    .side-led--left  { left: 16px; }
    .side-led--right { right: 16px; }
}

/* ── Individual strip — same uniform bar style as card tops ── */
.side-bar {
    display: block;
    width: 3px;
    height: clamp(50px, 8%, 80px);
    background: rgba(220, 185, 95, 0.95);
    border-radius: 2px;
    box-shadow:
        0 0  4px rgba(196, 163, 90, 1.00),
        0 0 10px rgba(196, 163, 90, 0.80),
        0 0 22px rgba(196, 163, 90, 0.45),
        0 0 42px rgba(196, 163, 90, 0.20);
    animation: side-led-breathe 5s ease-in-out infinite;
}

/* Stagger each bar so they don't pulse simultaneously */
.side-bar:nth-child(1) { animation-delay:  0s;    }
.side-bar:nth-child(2) { animation-delay: -0.85s; }
.side-bar:nth-child(3) { animation-delay: -1.70s; }
.side-bar:nth-child(4) { animation-delay: -2.55s; }
.side-bar:nth-child(5) { animation-delay: -3.40s; }
.side-bar:nth-child(6) { animation-delay: -4.25s; }

/* Right side starts offset from left so they feel independent */
.side-led--right .side-bar:nth-child(1) { animation-delay: -2.10s; }
.side-led--right .side-bar:nth-child(2) { animation-delay: -2.95s; }
.side-led--right .side-bar:nth-child(3) { animation-delay: -3.80s; }
.side-led--right .side-bar:nth-child(4) { animation-delay: -0.45s; }
.side-led--right .side-bar:nth-child(5) { animation-delay: -1.30s; }
.side-led--right .side-bar:nth-child(6) { animation-delay: -4.65s; }

@keyframes side-led-breathe {
    0%, 100% { opacity: 0.70; }
    50%       { opacity: 1;    }
}

/* Mobile — handled by the 768px block above */

/* Reduced motion — freeze, keep visible */
@media (prefers-reduced-motion: reduce) {
    .side-bar { animation: none; opacity: 0.85; }
}

/* ========================================
   Hero Side Panels — Desktop Decoration
   ======================================== */

/* Hidden on mobile, shown as flex columns on desktop */
.hero-side {
    display: none;
    position: relative;
    overflow: hidden;
    background: var(--bg-primary);
}

@media (min-width: 769px) {
    .hero-side {
        display: block;
        flex: 1;
    }
}

/* Central video edge fade — desktop only */
@media (min-width: 769px) {
    .hero-video-frame::before,
    .hero-video-frame::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 220px;
        pointer-events: none;
        z-index: 4;
    }

    .hero-video-frame::before {
        left: 0;
        background: linear-gradient(to right,
            rgba(8,8,8,1.00) 0%,
            rgba(8,8,8,0.90) 20%,
            rgba(8,8,8,0.60) 50%,
            rgba(8,8,8,0.20) 80%,
            transparent 100%
        );
    }

    .hero-video-frame::after {
        right: 0;
        background: linear-gradient(to left,
            rgba(8,8,8,1.00) 0%,
            rgba(8,8,8,0.90) 20%,
            rgba(8,8,8,0.60) 50%,
            rgba(8,8,8,0.20) 80%,
            transparent 100%
        );
    }
}

/* Edge glow — warm shimmer where panel meets video */
@media (min-width: 769px) {
    .hero-side--left::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0;
        width: 90px;
        background: linear-gradient(to right, transparent, rgba(196,163,90,0.07));
        pointer-events: none;
        z-index: 5;
    }

    .hero-side--right::before {
        content: '';
        position: absolute;
        top: 0; left: 0; bottom: 0;
        width: 90px;
        background: linear-gradient(to left, transparent, rgba(196,163,90,0.07));
        pointer-events: none;
        z-index: 5;
    }
}

/* Side video overlay — riduce effetto pixel sui video compressi */
@media (min-width: 769px) {
    .hero-side--left::before,
    .hero-side--right::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(8, 8, 8, 0.52);
        pointer-events: none;
        z-index: 3;
    }
}

/* ── Canvas particle layer ── */
.side-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0.65;
}

/* ── Bokeh orbs ── */
.bokeh-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

/* ── Left panel orbs ── */
.hero-side--left .bokeh-orb--1 {
    width: 220px; height: 220px;
    top: 12%; left: -15%;
    background: radial-gradient(circle, rgba(196,163,90,0.16) 0%, rgba(196,163,90,0.04) 50%, transparent 70%);
    filter: blur(55px);
    animation: bokeh-drift-a 22s ease-in-out infinite;
}
.hero-side--left .bokeh-orb--2 {
    width: 150px; height: 150px;
    top: 50%; right: 8%;
    background: radial-gradient(circle, rgba(255,200,120,0.12) 0%, transparent 68%);
    filter: blur(45px);
    animation: bokeh-drift-b 28s ease-in-out infinite;
    animation-delay: -10s;
}
.hero-side--left .bokeh-orb--3 {
    width: 90px; height: 90px;
    bottom: 22%; left: 28%;
    background: radial-gradient(circle, rgba(255,230,150,0.18) 0%, transparent 65%);
    filter: blur(30px);
    animation: bokeh-drift-c 16s ease-in-out infinite;
    animation-delay: -5s;
}
.hero-side--left .bokeh-orb--4 {
    width: 190px; height: 190px;
    bottom: 5%; left: -10%;
    background: radial-gradient(circle, rgba(196,163,90,0.09) 0%, transparent 65%);
    filter: blur(65px);
    animation: bokeh-drift-d 32s ease-in-out infinite;
    animation-delay: -18s;
}
.hero-side--left .bokeh-orb--5 {
    width: 70px; height: 70px;
    top: 32%; right: 22%;
    background: radial-gradient(circle, rgba(255,220,140,0.2) 0%, transparent 70%);
    filter: blur(22px);
    animation: bokeh-drift-e 14s ease-in-out infinite;
    animation-delay: -7s;
}

/* ── Right panel orbs ── */
.hero-side--right .bokeh-orb--1 {
    width: 210px; height: 210px;
    bottom: 10%; right: -12%;
    background: radial-gradient(circle, rgba(196,163,90,0.14) 0%, rgba(196,163,90,0.04) 50%, transparent 70%);
    filter: blur(58px);
    animation: bokeh-drift-a 25s ease-in-out infinite;
    animation-delay: -14s;
}
.hero-side--right .bokeh-orb--2 {
    width: 130px; height: 130px;
    top: 18%; left: 12%;
    background: radial-gradient(circle, rgba(255,210,130,0.13) 0%, transparent 68%);
    filter: blur(42px);
    animation: bokeh-drift-c 20s ease-in-out infinite;
    animation-delay: -6s;
}
.hero-side--right .bokeh-orb--3 {
    width: 170px; height: 170px;
    top: 42%; right: 18%;
    background: radial-gradient(circle, rgba(196,163,90,0.11) 0%, transparent 65%);
    filter: blur(50px);
    animation: bokeh-drift-b 26s ease-in-out infinite;
    animation-delay: -9s;
}
.hero-side--right .bokeh-orb--4 {
    width: 80px; height: 80px;
    top: 60%; left: 18%;
    background: radial-gradient(circle, rgba(230,190,110,0.16) 0%, transparent 70%);
    filter: blur(28px);
    animation: bokeh-drift-e 18s ease-in-out infinite;
    animation-delay: -20s;
}
.hero-side--right .bokeh-orb--5 {
    width: 160px; height: 160px;
    top: 5%; right: -8%;
    background: radial-gradient(circle, rgba(196,163,90,0.1) 0%, transparent 68%);
    filter: blur(54px);
    animation: bokeh-drift-d 30s ease-in-out infinite;
    animation-delay: -3s;
}

/* ── Bokeh drift keyframes ── */
@keyframes bokeh-drift-a {
    0%   { transform: translate(0,    0)    scale(1);    }
    33%  { transform: translate(16px, -22px) scale(1.07); }
    66%  { transform: translate(-11px, 14px) scale(0.95); }
    100% { transform: translate(0,    0)    scale(1);    }
}
@keyframes bokeh-drift-b {
    0%   { transform: translate(0,    0);    opacity: 0.8; }
    40%  { transform: translate(-20px, 13px); opacity: 1;   }
    70%  { transform: translate(9px,  -18px); opacity: 0.7; }
    100% { transform: translate(0,    0);    opacity: 0.8; }
}
@keyframes bokeh-drift-c {
    0%   { transform: translate(0, 0)    scale(1);    }
    50%  { transform: translate(22px, 26px) scale(1.13); }
    100% { transform: translate(0, 0)    scale(1);    }
}
@keyframes bokeh-drift-d {
    0%   { transform: translate(0,    0);    }
    25%  { transform: translate(-14px, -20px); }
    50%  { transform: translate(11px,  9px);   }
    75%  { transform: translate(6px,  -13px);  }
    100% { transform: translate(0,    0);    }
}
@keyframes bokeh-drift-e {
    0%   { transform: translate(0, 0)    scale(1);    opacity: 0.9; }
    45%  { transform: translate(15px, -24px) scale(1.18); opacity: 0.55; }
    100% { transform: translate(0, 0)    scale(1);    opacity: 0.9; }
}


/* ── Side Videos — replace peacock wings ── */
.side-video {
    display: none;
    pointer-events: none;
}

@media (min-width: 769px) {
    .side-video {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        z-index: 1;
        opacity: 0;
        will-change: transform, opacity;
        animation-duration: 2.2s;
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
        animation-fill-mode: both;
        animation-iteration-count: 1;
    }

    .hero-side--left .side-video {
        animation-name: side-video-reveal;
        animation-delay: 0.5s;
    }

    .hero-side--right .side-video {
        animation-name: side-video-reveal;
        animation-delay: 0.58s;
    }

    @keyframes side-video-reveal {
        0%   { opacity: 0; filter: blur(6px) brightness(0.6); }
        40%  { filter: blur(1px) brightness(0.85); }
        100% { opacity: 1; filter: blur(0px) brightness(1); }
    }
}

/* Disable bokeh on reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .bokeh-orb { animation: none !important; }
    .side-canvas { display: none; }
.side-video { animation: none !important; opacity: 1 !important; }
}

/* ========================================
   Site Footer
   ======================================== */
.site-footer {
    background: #050505;
    border-top: 1px solid rgba(196, 163, 90, 0.12);
    padding: 0;
    position: relative;
    z-index: 10;
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem 1.5rem;
}

/* Top gold separator line */
.footer-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--gold) 30%,
        var(--gold-light) 50%,
        var(--gold) 70%,
        transparent
    );
    margin: 0 auto 2.2rem;
    opacity: 0.55;
}

/* Brand mark */
.footer-brand {
    text-align: center;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.footer-logo {
    font-family: var(--font-script);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--gold);
    letter-spacing: 0.01em;
    line-height: 1;
    opacity: 0.85;
}

.footer-sub {
    font-family: var(--font-body);
    font-size: 0.55rem;
    letter-spacing: 0.32em;
    color: var(--text-tertiary);
    font-weight: 400;
    text-transform: uppercase;
}

/* Three columns */
.footer-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .footer-cols {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

.footer-col-title {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.9rem;
    opacity: 0.75;
}

.footer-col--center {
    text-align: center;
}
.footer-col--right {
    text-align: right;
}

/* Mobile: tutti i footer-col centrati in single-column layout */
@media (max-width: 639px) {
    .footer-col,
    .footer-col--center,
    .footer-col--right {
        text-align: center;
    }
    .footer-address,
    .footer-nav,
    .footer-vat {
        align-items: center;
        justify-content: center;
    }
    .footer-nav {
        align-items: center;
    }
    .footer-inner {
        padding: 2.2rem 1.2rem 1.2rem;
    }
    .footer-brand {
        margin-bottom: 1.8rem;
    }
}

.footer-address {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    line-height: 1.9;
    font-weight: 300;
    letter-spacing: 0.03em;
}

.footer-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-link {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    text-decoration: none;
    font-weight: 300;
    letter-spacing: 0.04em;
    transition: color 0.25s ease;
}

@media (hover: hover) {
    .footer-link:hover {
        color: var(--gold-light);
    }
}

.footer-vat {
    font-size: 0.68rem;
    color: var(--text-disabled);
    letter-spacing: 0.06em;
    margin-top: 0.8rem;
    font-weight: 300;
}

/* Bottom bar */
.footer-bottom {
    border-top: 1px solid rgba(196, 163, 90, 0.07);
    padding-top: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}

@media (min-width: 640px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer-copy {
    font-size: 0.7rem;
    color: var(--text-disabled);
    letter-spacing: 0.04em;
    font-weight: 300;
}

.footer-made {
    font-size: 0.7rem;
    color: var(--text-disabled);
    letter-spacing: 0.08em;
    font-weight: 300;
    font-style: italic;
    font-family: var(--font-display);
}

/* ── Credit button — small song attribution in footer-bottom ── */
.credit-btn {
    position: relative;
    background: none;
    border: 1px solid rgba(196, 163, 90, 0.30);
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.10em;
    color: rgba(196, 163, 90, 0.70);
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    line-height: 1;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    align-self: center;
}

.credit-btn:hover,
.credit-btn.tooltip-open {
    color: var(--gold-light);
    border-color: rgba(196, 163, 90, 0.65);
    background: rgba(196, 163, 90, 0.07);
}

/* Tooltip panel */
.credit-tooltip {
    display: block;
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: max-content;
    max-width: min(340px, 88vw);
    padding: 0.8rem 1rem;
    background: rgba(8, 7, 6, 0.97);
    border: 1px solid rgba(196, 163, 90, 0.22);
    border-radius: 4px;
    font-size: 0.61rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-align: left;
    text-transform: none;
    font-style: normal;
    font-family: var(--font-body);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(196, 163, 90, 0.05);
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    z-index: 200;
    white-space: normal;
}

.credit-btn:hover .credit-tooltip,
.credit-btn.tooltip-open .credit-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile — centrato, si apre verso l'alto */
@media (max-width: 639px) {
    .credit-btn {
        font-size: 0.59rem;
        letter-spacing: 0.07em;
        padding: 0.35rem 0.8rem;
        margin-top: 0.5rem;
    }

    .credit-tooltip {
        right: auto;
        left: 50%;
        transform: translateX(-50%) translateY(5px);
        bottom: calc(100% + 8px);
        max-width: min(300px, 92vw);
        font-size: 0.59rem;
        line-height: 1.75;
    }

    .credit-btn:hover .credit-tooltip,
    .credit-btn.tooltip-open .credit-tooltip {
        transform: translateX(-50%) translateY(0);
    }
}

/* ========================================
   Btn Storia — "Scopri la nostra storia"
   ======================================== */
.storia-btn-wrap {
    display: flex;
    justify-content: center;
    margin: 2.2rem 0 2.6rem;
}

.btn-storia {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.8rem;
    background: transparent;
    border: 1px solid rgba(196, 163, 90, 0.45);
    border-radius: 3px;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: color 0.35s ease, border-color 0.35s ease, transform 0.25s ease;
    /* Shimmer sweep pseudo-element */
}

.btn-storia::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgba(196, 163, 90, 0.12) 50%,
        transparent 65%
    );
    background-size: 250% 100%;
    background-position: 120% 0;
    transition: background-position 0.55s ease;
}

.btn-storia:hover {
    color: var(--gold-light);
    border-color: rgba(196, 163, 90, 0.80);
    transform: translateY(-1px);
}

.btn-storia:hover::before {
    background-position: -30% 0;
}

.btn-storia:active {
    transform: translateY(0);
}

.storia-btn-icon {
    color: var(--gold);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.3s;
}

.btn-storia:hover .storia-btn-icon {
    opacity: 1;
}

.storia-btn-arrow {
    display: flex;
    align-items: center;
    color: var(--gold);
    opacity: 0.55;
    transform: translateX(0);
    transition: transform 0.3s ease, opacity 0.3s;
}

.btn-storia:hover .storia-btn-arrow {
    transform: translateX(4px);
    opacity: 0.9;
}

/* Mobile refinement */
@media (max-width: 480px) {
    .btn-storia {
        padding: 0.9rem 1.4rem;
        font-size: 0.72rem;
        letter-spacing: 0.16em;
        width: 100%;
        max-width: 340px;
        justify-content: center;
    }
}

/* ========================================
   Storia Panel — overlay + drawer
   ======================================== */
.storia-panel {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: flex-end;          /* mobile: drawer from bottom */
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
}

.storia-panel.sp-open {
    visibility: visible;
    pointer-events: auto;
}

/* --- Backdrop --- */
.storia-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 4, 4, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.storia-panel.sp-open .storia-backdrop {
    opacity: 1;
}

/* --- Drawer (mobile: bottom sheet) --- */
.storia-drawer {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: 88svh;
    background: #0d0d0d;
    border-top: 1px solid rgba(196, 163, 90, 0.28);
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    /* Safe area for iPhone home bar */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.storia-panel.sp-open .storia-drawer {
    transform: translateY(0);
}

/* Drag handle pill (mobile) */
.storia-drawer::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(196, 163, 90, 0.30);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
}

/* --- Header --- */
.storia-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.1rem 1.4rem 0.9rem;
    border-bottom: 1px solid rgba(196, 163, 90, 0.12);
    flex-shrink: 0;
}

.storia-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.75;
    margin-bottom: 0.25rem;
}

.storia-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 400;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
    background: linear-gradient(120deg, var(--gold-light) 0%, var(--gold) 60%, #a07840 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.storia-close {
    background: none;
    border: 1px solid rgba(196, 163, 90, 0.25);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 1rem;
    transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.storia-close:hover {
    border-color: rgba(196, 163, 90, 0.65);
    color: var(--gold-light);
    background: rgba(196, 163, 90, 0.08);
}

/* --- Body (scrollable) --- */
.storia-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1.4rem 1.4rem 2rem;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 163, 90, 0.25) transparent;
}

.storia-body::-webkit-scrollbar { width: 4px; }
.storia-body::-webkit-scrollbar-track { background: transparent; }
.storia-body::-webkit-scrollbar-thumb { background: rgba(196, 163, 90, 0.25); border-radius: 2px; }

/* --- Intro paragraph --- */
.storia-intro {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(0.95rem, 3vw, 1.1rem);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 2rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(196, 163, 90, 0.10);
}

/* --- Timeline --- */
.storia-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.storia-tl-item {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 0 1.1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

/* Vertical line connecting items */
.storia-tl-item::after {
    content: '';
    position: absolute;
    left: 31px;           /* center of year column */
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, rgba(196,163,90,0.0), rgba(196,163,90,0.20) 30%, rgba(196,163,90,0.20) 70%, rgba(196,163,90,0.0));
}

.storia-tl-item:last-child {
    border-bottom: none;
}

.storia-tl-year {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.10em;
    color: var(--gold);
    opacity: 0.80;
    text-transform: uppercase;
    padding-top: 0.15rem;
    text-align: right;
    padding-right: 0.3rem;
    position: relative;
    z-index: 1;
    line-height: 1.35;
    word-break: break-word;
    hyphens: auto;
}

/* Dot on the timeline */
.storia-tl-year::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 6px;
    width: 7px;
    height: 7px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0.6;
}

.storia-tl-item--oggi .storia-tl-year::after {
    opacity: 1;
    box-shadow: 0 0 8px rgba(196, 163, 90, 0.6);
}

.storia-tl-content h3 {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 0.45rem;
}

.storia-tl-content p {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0;
}

/* Oggi — evidenziato */
.storia-tl-item--oggi .storia-tl-content h3 {
    color: var(--gold-light);
}

/* --- Closing quote --- */
.storia-quote {
    margin: 2rem 0 0;
    padding: 1.4rem 1.2rem;
    border-left: 2px solid rgba(196, 163, 90, 0.45);
    background: rgba(196, 163, 90, 0.04);
    border-radius: 0 4px 4px 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(0.88rem, 2.8vw, 1rem);
    color: var(--text-secondary);
    line-height: 1.7;
    letter-spacing: 0.02em;
}

/* ========================================
   Storia Panel — Desktop (modal centered)
   ======================================== */
@media (min-width: 700px) {
    .storia-panel {
        align-items: center;
        padding: 1.5rem;
    }

    .storia-drawer {
        max-width: 640px;
        width: 100%;
        max-height: 80vh;
        border-radius: 8px;
        border: 1px solid rgba(196, 163, 90, 0.22);
        border-top: 1px solid rgba(196, 163, 90, 0.22);
        transform: translateY(18px) scale(0.97);
        opacity: 0;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.35s ease;
    }

    /* Hide drag handle on desktop */
    .storia-drawer::before { display: none; }

    .storia-panel.sp-open .storia-drawer {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    .storia-header {
        padding: 1.6rem 2rem 1.1rem;
    }

    .storia-body {
        padding: 1.6rem 2rem 2.2rem;
    }
}

@media (min-width: 900px) {
    .storia-tl-item {
        grid-template-columns: 88px 1fr;
    }
    .storia-tl-item::after { left: 41px; }
    .storia-tl-year { font-size: 0.70rem; }
    .storia-tl-content p { font-size: 0.86rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .storia-backdrop,
    .storia-drawer {
        transition: none !important;
    }
}

/* Visually hidden H1 in hero — readable by crawlers, invisible to users */
.hero-seo-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}