/* ════════════════════════════════════════════════════
   STEFANO DRAGONE — L'Intrattenitore del Cuore
   Main Stylesheet — Teatro Vibes ✨
   ════════════════════════════════════════════════════ */

/* ── ROOT VARIABLES ── */
:root {
    --red:        #CE2B37;
    --red-dark:   #8B1C25;
    --red-light:  #E84D5A;
    --gold:       #D4AF37;
    --gold-light: #F5D873;
    --gold-dark:  #A0802A;
    --black:      #0A0A0A;
    --dark:       #111111;
    --dark2:      #1A0A0A;
    --dark3:      #1C0505;
    --cream:      #F5ECD7;
    --white:      #FAFAFA;
    --gray:       #888888;
    --gray-light: #CCCCCC;

    --font-display:  'Cinzel Decorative', 'Cinzel', serif;
    --font-serif:    'Playfair Display', serif;
    --font-script:   'Dancing Script', cursive;
    --font-sans:     'Montserrat', sans-serif;

    --curtain-red: #8B0000;
    --shadow-gold: 0 0 40px rgba(212,175,55,0.4);
    --shadow-red:  0 0 40px rgba(206,43,55,0.4);
    --glow-gold:   0 0 20px rgba(212,175,55,0.6), 0 0 40px rgba(212,175,55,0.3);
    --glow-red:    0 0 20px rgba(206,43,55,0.6),  0 0 40px rgba(206,43,55,0.3);

    --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET & BASE ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-sans);
    background: var(--black);
    color: var(--white);
    overflow-x: hidden;
    line-height: 1.6;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }

.hidden { display: none !important; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

/* ── NOISE OVERLAY ── */
.noise-overlay {
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
    opacity: 0.35;
    mix-blend-mode: overlay;
}

/* ════════════════════════════════════════════════════
   CURTAIN INTRO
   ════════════════════════════════════════════════════ */
#curtainIntro {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip; /* clip taglia solo i figli position:absolute, non il testo */
    background: #000;
}

.curtain-left, .curtain-right {
    position: absolute;
    top: 0; bottom: 0;
    width: 52%;
    background: linear-gradient(135deg, #6B0000 0%, #8B0000 30%, #A80000 60%, #7a0000 100%);
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 2;
}

.curtain-left {
    left: 0;
    background: linear-gradient(to right, #4a0000 0%, #8B0000 40%, #c00000 100%);
    box-shadow: inset -20px 0 60px rgba(0,0,0,0.6);
}

.curtain-right {
    right: 0;
    background: linear-gradient(to left, #4a0000 0%, #8B0000 40%, #c00000 100%);
    box-shadow: inset 20px 0 60px rgba(0,0,0,0.6);
}

/* Curtain fabric folds */
.curtain-left::before, .curtain-right::before,
.curtain-left::after, .curtain-right::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 12px;
    background: rgba(0,0,0,0.25);
    border-radius: 50%;
}
.curtain-left::before  { right: 25%; }
.curtain-left::after   { right: 55%; }
.curtain-right::before { left: 25%; }
.curtain-right::after  { left: 55%; }

.curtain-left.open  { transform: translateX(-100%); }
.curtain-right.open { transform: translateX(100%); }

.curtain-center-content {
    position: relative;
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    padding: 0 5vw;
    box-sizing: border-box;
}

.spotlight-beam {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 600px;
    background: conic-gradient(from 0deg at 50% 0%, transparent 80deg, rgba(255,215,0,0.15) 90deg, rgba(255,215,0,0.08) 100deg, transparent 110deg, transparent);
    pointer-events: none;
    animation: spotPulse 2s ease-in-out infinite;
}

@keyframes spotPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.intro-presents {
    font-family: var(--font-script);
    font-size: clamp(1rem, 3vw, 1.4rem);
    color: rgba(212,175,55,0.8);
    letter-spacing: 4px;
    animation: fadeInScale 0.8s ease-out 0.3s both;
    white-space: nowrap;
}

.intro-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    line-height: 1;
    animation: fadeInScale 0.8s ease-out 0.6s both;
    width: 100%;
}

/* Riga 1: STEFANO */
.intro-name-line1 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 6.5vw, 4.5rem);
    font-weight: 900;
    letter-spacing: clamp(4px, 1.5vw, 18px);
    white-space: nowrap;
    background: linear-gradient(180deg, #fff 0%, #F5ECD7 60%, rgba(212,175,55,0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    width: 100%;
    text-align: center;
}

/* Riga 2: DRAGONE — più grande, oro/rosso */
.intro-name-line2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 10vw, 7rem);
    font-weight: 900;
    letter-spacing: clamp(3px, 1vw, 12px);
    white-space: nowrap;
    background: linear-gradient(45deg, #D4AF37, #F5D873, #D4AF37, #CE2B37, #D4AF37);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerAnim 3s ease-in-out infinite 1s;
    display: block;
    width: 100%;
    text-align: center;
}

.intro-sub {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: rgba(212,175,55,0.9);
    letter-spacing: 3px;
    font-style: italic;
    animation: fadeInScale 0.8s ease-out 0.9s both;
}

.intro-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 3rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #000;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    font-family: var(--font-sans);
    transition: var(--transition-bounce);
    animation: fadeInScale 0.8s ease-out 1.2s both;
    box-shadow: 0 10px 40px rgba(212,175,55,0.4);
    margin-top: 1rem;
}

.intro-btn:hover {
    transform: scale(1.08) translateY(-4px);
    box-shadow: 0 20px 60px rgba(212,175,55,0.6);
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.7) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════ */
#navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 0;
    transition: var(--transition);
}

#navbar.scrolled {
    background: rgba(10,10,10,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(212,175,55,0.4);
    box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 0 60px rgba(212,175,55,0.05);
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
}

.logo-sd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--gold));
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    box-shadow: var(--glow-gold);
    transition: var(--transition-bounce);
}

.nav-logo:hover .logo-sd {
    transform: rotate(15deg) scale(1.15);
}

.logo-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 0.3rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    border-radius: 6px;
    transition: var(--transition);
    white-space: nowrap;
}

.nav-link i { font-size: 0.75rem; }

.nav-link:hover, .nav-link.active {
    color: var(--gold);
    background: rgba(212,175,55,0.08);
}

.nav-actions { display: flex; align-items: center; gap: 1rem; }

.nav-ticket-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 6px;
    transition: var(--transition-bounce);
    box-shadow: 0 4px 20px rgba(206,43,55,0.4);
    white-space: nowrap;
}

.nav-ticket-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 35px rgba(206,43,55,0.6);
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transition: var(--transition);
}

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

/* ════════════════════════════════════════════════════
   HERO SECTION
   ════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 7rem 2rem 6rem;
    overflow: clip; /* clip instead of hidden — allows large text without cutting it */
    background: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(139,0,0,0.4) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 20% 100%, rgba(212,175,55,0.12) 0%, transparent 50%),
                linear-gradient(180deg, #0a0a0a 0%, #1a0505 50%, #0d0000 100%);
}

/* Stage floor */
.stage-floor {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 35%;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(50,15,5,0.4) 40%,
        rgba(30,10,0,0.6) 100%
    );
    transform-origin: bottom;
    transform: perspective(800px) rotateX(8deg);
    pointer-events: none;
}

.stage-floor::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.6), transparent);
}

/* Spotlights */
.spotlight {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(80px);
    animation: spotlightDrift 8s ease-in-out infinite;
}

.spot-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(206,43,55,0.25) 0%, transparent 70%);
    top: -10%; right: -5%;
    animation-delay: 0s;
}

.spot-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(212,175,55,0.2) 0%, transparent 70%);
    top: 20%; left: -10%;
    animation-delay: -3s;
}

.spot-3 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(139,47,57,0.15) 0%, transparent 70%);
    bottom: -20%; left: 30%;
    animation-delay: -6s;
}

@keyframes spotlightDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -40px) scale(1.1); }
    66%       { transform: translate(-20px, 30px) scale(0.9); }
}

/* Curtains */
.hero-curtain-left, .hero-curtain-right {
    position: absolute;
    top: 0; bottom: 0;
    width: 140px;
    pointer-events: none;
}

.hero-curtain-left {
    left: 0;
    background: linear-gradient(to right, rgba(100,0,0,0.7) 0%, rgba(80,0,0,0.4) 60%, transparent 100%);
}

.hero-curtain-right {
    right: 0;
    background: linear-gradient(to left, rgba(100,0,0,0.7) 0%, rgba(80,0,0,0.4) 60%, transparent 100%);
}

/* Confetti container */
#confettiContainer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 2px;
    animation: confettiFall linear infinite;
    opacity: 0;
}

@keyframes confettiFall {
    0%   { opacity: 1; transform: translateY(-20px) rotate(0deg); }
    100% { opacity: 0; transform: translateY(110vh) rotate(720deg); }
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 5;
    max-width: min(1400px, 98vw);
    width: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.4);
    border-radius: 50px;
    padding: 0.5rem 2rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 2rem;
}

.badge-star { font-size: 0.7rem; color: var(--gold); }

.hero-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 1.8rem;
    line-height: 0.95;
}

.title-line-1 {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 8vw, 8rem);
    font-weight: 900;
    letter-spacing: clamp(4px, 1.5vw, 16px);
    background: linear-gradient(180deg, #fff 0%, var(--cream) 50%, var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(212,175,55,0.4));
    white-space: nowrap;
}

.title-line-2 {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 7vw, 6.5rem);
    font-weight: 900;
    letter-spacing: clamp(3px, 1.2vw, 14px);
    background: linear-gradient(180deg, var(--red-light) 0%, var(--red) 50%, var(--red-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px rgba(206,43,55,0.5));
    white-space: nowrap;
}

.hero-roles {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.role-chip {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(212,175,55,0.85);
    padding: 0.4rem 1.2rem;
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 50px;
    background: rgba(212,175,55,0.05);
    transition: var(--transition);
}

.role-chip:hover {
    background: rgba(212,175,55,0.15);
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-2px);
}

.role-sep {
    color: rgba(255,255,255,0.3);
    font-size: 0.9rem;
}

.hero-tagline {
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    font-style: italic;
    color: var(--gold-light);
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.tagline-heart {
    color: var(--red-light);
    animation: heartbeat 1.5s ease-in-out infinite;
    font-style: normal;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.25); }
}

.hero-desc {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    max-width: 650px;
    margin: 0 auto 2.5rem;
    line-height: 1.8;
}

.hero-desc strong { color: var(--gold); font-weight: 700; }

/* CTA Buttons */
.hero-cta {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3.5rem;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.1rem 2.8rem;
    background: linear-gradient(135deg, var(--red), #a01020);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 6px;
    transition: var(--transition-bounce);
    box-shadow: 0 8px 30px rgba(206,43,55,0.4);
    position: relative;
    overflow: hidden;
}

.btn-hero-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s;
}

.btn-hero-primary:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 50px rgba(206,43,55,0.6);
}

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

.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.1rem 2.8rem;
    background: transparent;
    color: var(--gold);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 2px solid rgba(212,175,55,0.5);
    border-radius: 6px;
    transition: var(--transition-bounce);
}

.btn-hero-secondary:hover {
    background: rgba(212,175,55,0.1);
    border-color: var(--gold);
    box-shadow: 0 10px 30px rgba(212,175,55,0.3);
    transform: translateY(-5px);
}

/* Hero Stats */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.stat-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.2rem 2rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    transition: var(--transition-bounce);
    cursor: default;
}

.stat-bubble:hover {
    border-color: var(--gold);
    background: rgba(212,175,55,0.08);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 15px 40px rgba(212,175,55,0.2);
}

.stat-num {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-plus {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
    vertical-align: super;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}

/* Scroll down */
.scroll-down {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition);
    z-index: 5;
}

.scroll-down:hover { opacity: 1; }

.scroll-down span {
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
}

.scroll-mouse {
    width: 24px; height: 38px;
    border: 2px solid rgba(212,175,55,0.6);
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5px;
}

.scroll-wheel {
    width: 4px; height: 8px;
    background: var(--gold);
    border-radius: 2px;
    animation: scrollWheel 2s ease-in-out infinite;
}

@keyframes scrollWheel {
    0%   { transform: translateY(0); opacity: 1; }
    50%  { transform: translateY(10px); opacity: 0.3; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Animate-in classes */
.animate-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════
   TICKER / MARQUEE
   ════════════════════════════════════════════════════ */
.ticker-wrap {
    background: linear-gradient(135deg, var(--red-dark), #500010);
    border-top: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    overflow: hidden;
    padding: 0.7rem 0;
    position: relative;
    z-index: 10;
}

.ticker-wrap::before, .ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.ticker-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--red-dark), transparent);
}

.ticker-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--red-dark), transparent);
}

.ticker-track {
    display: flex;
    gap: 3rem;
    white-space: nowrap;
    animation: tickerScroll 30s linear infinite;
    will-change: transform;
}

.ticker-track span {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    flex-shrink: 0;
}

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ticker-track:hover { animation-play-state: paused; }

/* ════════════════════════════════════════════════════
   SECTION COMMONS
   ════════════════════════════════════════════════════ */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
    padding-top: 1rem;
}

.section-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--red-light);
    margin-bottom: 0.8rem;
    padding: 0.3rem 1.2rem;
    border: 1px solid rgba(206,43,55,0.3);
    border-radius: 50px;
    background: rgba(206,43,55,0.07);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 4px;
    margin-bottom: 1.2rem;
}

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 0.5rem 0 1rem;
}

.section-divider::before, .section-divider::after {
    content: '';
    width: 80px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.divider-mask { font-size: 1.3rem; }

.section-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.55);
    max-width: 600px;
    margin: 0 auto;
    font-style: italic;
}

/* Reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}

.reveal-delay.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ════════════════════════════════════════════════════
   BIO SECTION
   ════════════════════════════════════════════════════ */
.bio-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, #111 0%, #1a0a0a 50%, #111 100%);
    position: relative;
    overflow: hidden;
}

.section-bg-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.deco-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
}

.deco-1 {
    width: 600px; height: 600px;
    background: var(--red);
    top: -200px; right: -200px;
}

.deco-2 {
    width: 500px; height: 500px;
    background: var(--gold);
    bottom: -200px; left: -200px;
}

.bio-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 5rem;
    align-items: start;
}

/* Photo Theater Frame */
.photo-theater-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 80px rgba(206,43,55,0.3), 0 0 40px rgba(0,0,0,0.5);
}

.frame-curtains {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.frame-curtain-l, .frame-curtain-r {
    position: absolute;
    top: 0; bottom: 0;
    width: 50px;
}

.frame-curtain-l {
    left: 0;
    background: linear-gradient(to right, rgba(80,0,0,0.5), transparent);
}

.frame-curtain-r {
    right: 0;
    background: linear-gradient(to left, rgba(80,0,0,0.5), transparent);
}

.photo-main {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #1a0505;
}

.bio-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.photo-theater-frame:hover .bio-photo-img {
    transform: scale(1.05);
}

.frame-valance {
    width: 100%;
    height: 20px;
    background: linear-gradient(180deg, #8B0000, #6B0000);
    position: absolute;
    top: 0; left: 0;
    z-index: 3;
    border-bottom: 3px solid var(--gold);
}

.photo-theater-lights {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-around;
    padding: 3px 20px;
    z-index: 4;
}

.plight {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold), 0 0 20px rgba(212,175,55,0.5);
    animation: plightBlink 2s ease-in-out infinite;
}

.plight:nth-child(2) { animation-delay: 0.3s; }
.plight:nth-child(3) { animation-delay: 0.6s; }
.plight:nth-child(4) { animation-delay: 0.9s; }
.plight:nth-child(5) { animation-delay: 1.2s; }

@keyframes plightBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Photo Switcher */
.photo-switcher {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: center;
}

.psw-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    background: none;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.5rem;
    transition: var(--transition);
    flex: 1;
}

.psw-btn.active, .psw-btn:hover {
    border-color: var(--gold);
    background: rgba(212,175,55,0.08);
}

.psw-thumb {
    width: 70px; height: 70px;
    border-radius: 8px;
    overflow: hidden;
}

.psw-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.psw-btn span {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}

.psw-btn.active span, .psw-btn:hover span {
    color: var(--gold);
}

/* Identity Card */
.id-card {
    margin-top: 1.5rem;
    background: linear-gradient(135deg, rgba(212,175,55,0.06), rgba(206,43,55,0.04));
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 16px;
    padding: 1.8rem;
}

.id-card-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(212,175,55,0.2);
}

.id-row {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 0.9rem;
}

.id-row:last-child { border-bottom: none; }

.id-key {
    color: rgba(212,175,55,0.8);
    font-weight: 700;
    min-width: 90px;
    flex-shrink: 0;
}

.id-val {
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
}

/* Bio Text Area */
.bio-text-col { display: flex; flex-direction: column; gap: 0; padding-top: 0.5rem; }

.bio-block { margin-bottom: 2.5rem; }

.bio-h3 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 1rem;
}

.bio-h3 i { color: var(--red-light); font-size: 1.2rem; }

.bio-block p {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.9;
}

.bio-block p strong { color: var(--gold-light); font-weight: 700; }

/* Theatrical Quote */
.quote-theatrical {
    position: relative;
    background: linear-gradient(135deg, rgba(139,0,0,0.2), rgba(212,175,55,0.06));
    border-radius: 16px;
    overflow: hidden;
    padding: 3rem 3rem 2.5rem;
    margin: 1rem 0 2.5rem;
    border: 1px solid rgba(212,175,55,0.2);
}

.quote-curtain-l, .quote-curtain-r {
    position: absolute;
    top: 0; bottom: 0;
    width: 12px;
}

.quote-curtain-l {
    left: 0;
    background: linear-gradient(to right, rgba(80,0,0,0.6), transparent);
}

.quote-curtain-r {
    right: 0;
    background: linear-gradient(to left, rgba(80,0,0,0.6), transparent);
}

.quote-spotlight {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(212,175,55,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.quote-marks {
    position: absolute;
    top: 0; left: 2rem;
    font-family: var(--font-serif);
    font-size: 6rem;
    color: var(--gold);
    opacity: 0.25;
    line-height: 1;
}

.quote-theatrical blockquote {
    position: relative;
    z-index: 2;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--cream);
    line-height: 1.9;
    margin-bottom: 1rem;
}

.quote-theatrical cite {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
}

/* Timeline */
.timeline { margin-bottom: 1rem; }

.timeline-track {
    position: relative;
    padding-left: 2rem;
    margin-top: 1.5rem;
}

.timeline-track::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--red), var(--gold));
}

.tl-item {
    position: relative;
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.tl-dot {
    position: absolute;
    left: -28px;
    top: 4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--dark);
    border: 2px solid var(--red);
    flex-shrink: 0;
    transition: var(--transition);
}

.tl-dot.active {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: var(--glow-gold);
}

.tl-content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tl-year {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
}

.tl-text {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════
   SPETTACOLI SECTION
   ════════════════════════════════════════════════════ */
.spettacoli-section {
    padding: 6rem 0;
    background: var(--black);
    position: relative;
    overflow: hidden;
}

.theater-bg-pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(212,175,55,0.08), transparent),
        radial-gradient(2px 2px at 80px 70px, rgba(206,43,55,0.06), transparent),
        radial-gradient(1px 1px at 50px 50px, rgba(255,255,255,0.03), transparent);
    background-size: 120px 120px;
    pointer-events: none;
}

/* Showcase layout */
.spettacolo-showcase {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 5rem;
    align-items: center;
    margin-bottom: 4rem;
}

.spettacolo-showcase.reverse {
    grid-template-columns: 1fr 400px;
}

.spettacolo-showcase.reverse .showcase-poster { order: 2; }
.spettacolo-showcase.reverse .showcase-info   { order: 1; }

/* Poster */
.showcase-poster {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.poster-frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid rgba(212,175,55,0.4);
    box-shadow: 0 0 60px rgba(206,43,55,0.3), 0 0 30px rgba(0,0,0,0.5);
    transition: var(--transition-bounce);
}

.poster-frame:hover {
    transform: translateY(-10px) rotate(-1deg);
    box-shadow: 0 30px 80px rgba(206,43,55,0.5), 0 0 50px rgba(212,175,55,0.3);
    border-color: var(--gold);
}

.poster-img {
    width: 100%;
    display: block;
    max-height: 550px;
    object-fit: contain;
    background: #1a0505;
}

.poster-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(206,43,55,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.poster-glow.gold {
    background: radial-gradient(circle at 50% 50%, rgba(212,175,55,0.1) 0%, transparent 70%);
}

.poster-lights {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
}

.pbl {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--red-light);
    box-shadow: 0 0 10px var(--red-light);
    animation: plightBlink 1.5s ease-in-out infinite;
}

.poster-lights.gold .pbl {
    background: var(--gold);
    box-shadow: 0 0 10px var(--gold);
}

.pbl:nth-child(2) { animation-delay: 0.25s; }
.pbl:nth-child(3) { animation-delay: 0.5s; }
.pbl:nth-child(4) { animation-delay: 0.75s; }
.pbl:nth-child(5) { animation-delay: 1s; }

/* Showcase info */
.show-tag-wrap {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.show-genre-tag {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.3rem 0.9rem;
    border-radius: 50px;
    background: rgba(206,43,55,0.15);
    color: rgba(232,100,100,0.9);
    border: 1px solid rgba(206,43,55,0.25);
}

.show-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    margin-bottom: 0.8rem;
    line-height: 1.1;
}

.show-subtitle-italic {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(212,175,55,0.7);
    margin-bottom: 1rem;
}

.show-milestone {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(206,43,55,0.15);
    border: 1px solid rgba(206,43,55,0.35);
    border-radius: 8px;
    padding: 0.7rem 1.3rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--red-light);
    margin-bottom: 1.5rem;
}

.show-milestone.gold {
    background: rgba(212,175,55,0.1);
    border-color: rgba(212,175,55,0.35);
    color: var(--gold-light);
}

.show-milestone i { font-size: 1rem; }

.show-desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.9;
    margin-bottom: 1rem;
}

.show-desc strong { color: var(--gold-light); }

/* Show credits */
.show-credits {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.credit-row {
    display: flex;
    gap: 0.8rem;
    font-size: 0.85rem;
}

.cr-label {
    color: rgba(212,175,55,0.7);
    font-weight: 700;
    min-width: 110px;
    flex-shrink: 0;
}

.cr-val {
    color: rgba(255,255,255,0.65);
}

/* Show button */
.btn-show {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 2rem;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 6px;
    transition: var(--transition-bounce);
    box-shadow: 0 6px 25px rgba(206,43,55,0.35);
    cursor: pointer;
    border: none;
}

.btn-show:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 15px 40px rgba(206,43,55,0.55);
}

.btn-show.gold {
    background: linear-gradient(135deg, var(--gold-dark), var(--gold));
    color: #000;
    box-shadow: 0 6px 25px rgba(212,175,55,0.35);
}

.btn-show.gold:hover {
    box-shadow: 0 15px 40px rgba(212,175,55,0.55);
}

/* Separator */
.spettacoli-separator {
    text-align: center;
    padding: 2rem 0;
}

.sep-ornament {
    font-size: 1.2rem;
    color: rgba(212,175,55,0.4);
    letter-spacing: 8px;
}

/* Small card */
.spettacolo-card-small {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 2.5rem;
    align-items: start;
    background: linear-gradient(135deg, rgba(212,175,55,0.06), rgba(206,43,55,0.04));
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 20px;
    padding: 3rem;
    margin-top: 1rem;
    transition: var(--transition);
}

.spettacolo-card-small:hover {
    border-color: rgba(212,175,55,0.5);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.small-card-icon {
    width: 100px; height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    background: rgba(212,175,55,0.08);
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.2);
    flex-shrink: 0;
}

.show-title-small {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.8rem;
}

.small-card-content p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.8;
    margin-bottom: 0.8rem;
}

/* ════════════════════════════════════════════════════
   RECENSIONI SECTION
   ════════════════════════════════════════════════════ */
.recensioni-section {
    padding: 7rem 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #1a0505 0%, #0d0000 100%);
}

.rec-bg-theater {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.rec-curtain-l, .rec-curtain-r {
    position: absolute;
    top: 0; bottom: 0;
    width: 180px;
}

.rec-curtain-l {
    left: 0;
    background: linear-gradient(to right, rgba(80,0,0,0.6), transparent);
}

.rec-curtain-r {
    right: 0;
    background: linear-gradient(to left, rgba(80,0,0,0.6), transparent);
}

.rec-spotlight {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 600px;
    background: conic-gradient(from 0deg at 50% 0%, transparent 75deg, rgba(212,175,55,0.08) 90deg, rgba(212,175,55,0.04) 100deg, transparent 115deg);
    animation: spotPulse 3s ease-in-out infinite;
}

/* Carousel */
.rec-carousel {
    max-width: 800px;
    margin: 0 auto 2.5rem;
    position: relative;
    min-height: 280px;
}

.rec-slide {
    display: none;
    text-align: center;
    padding: 3rem 2rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 20px;
    animation: fadeSlide 0.5s ease;
}

.rec-slide.active { display: block; }

@keyframes fadeSlide {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rec-stars {
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 1.5rem;
    letter-spacing: 4px;
}

.rec-quote {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-style: italic;
    color: rgba(255,255,255,0.82);
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.rec-quote strong { color: var(--gold-light); font-style: normal; }

.rec-source {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 1px;
    border-top: 1px solid rgba(212,175,55,0.2);
    padding-top: 1rem;
}

/* Controls */
.rec-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.rec-prev, .rec-next {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(212,175,55,0.4);
    background: rgba(212,175,55,0.08);
    color: var(--gold);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-bounce);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rec-prev:hover, .rec-next:hover {
    background: rgba(212,175,55,0.2);
    border-color: var(--gold);
    transform: scale(1.1);
}

.rec-dots { display: flex; gap: 0.6rem; }

.rec-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(212,175,55,0.25);
    cursor: pointer;
    transition: var(--transition);
}

.rec-dot.active {
    background: var(--gold);
    transform: scale(1.4);
}

/* ════════════════════════════════════════════════════
   CINEMA SECTION
   ════════════════════════════════════════════════════ */
.cinema-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, #0d0000 0%, #111 100%);
}

.cinema-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 4rem;
    align-items: start;
}

.cinema-photo-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(212,175,55,0.3);
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    aspect-ratio: 3/4;
}

.cinema-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    filter: contrast(1.1) brightness(0.9);
    transition: transform 0.8s ease;
}

.cinema-photo-frame:hover .cinema-photo-img { transform: scale(1.05); }

.cinema-photo-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 80%);
    padding: 2rem 1.5rem 1.5rem;
    font-style: italic;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
    text-align: center;
}

.cinema-cards-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cinema-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 16px;
    padding: 1.8rem;
    transition: var(--transition-bounce);
}

.cinema-card:hover {
    border-color: rgba(212,175,55,0.4);
    background: rgba(212,175,55,0.05);
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.cinema-card.gold {
    background: rgba(212,175,55,0.05);
    border-color: rgba(212,175,55,0.25);
}

.cinema-card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.cinema-icon { font-size: 1.5rem; }

.cinema-card-header h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 0.5px;
}

.cinema-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cinema-list li {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex;
    gap: 0.5rem;
    line-height: 1.4;
}

.cinema-list li::before {
    content: '▸';
    color: var(--red-light);
    flex-shrink: 0;
    margin-top: 1px;
}

.cinema-list li:last-child { border-bottom: none; }

.cinema-list li strong { color: rgba(255,255,255,0.9); }

/* ════════════════════════════════════════════════════
   VIDEO SECTION
   ════════════════════════════════════════════════════ */
.video-section {
    padding: 6rem 0;
    background: #0d0d0d;
    position: relative;
    overflow: hidden;
}

.video-bg-lights {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vlight {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.12;
}

.v1 { width: 400px; height: 400px; background: var(--red); top: -10%; left: 10%; }
.v2 { width: 350px; height: 350px; background: var(--gold); top: 30%; right: 5%; }
.v3 { width: 300px; height: 300px; background: var(--red); bottom: -10%; left: 40%; }

.video-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.video-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition-bounce);
}

.video-card:hover {
    border-color: rgba(212,175,55,0.4);
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}

.video-frame-outer {
    background: #000;
    border-bottom: 1px solid rgba(212,175,55,0.1);
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

.video-card-info {
    padding: 1.5rem;
}

.video-card-info h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 0.5rem;
}

.video-card-info p {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
}

/* Social card */
.social-card {
    display: flex;
    flex-direction: column;
}

.social-video-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(24,119,242,0.1), rgba(206,43,55,0.08));
    text-align: center;
}

.social-icon-big {
    font-size: 3.5rem;
    color: #1877f2;
    line-height: 1;
}

.social-video-inner h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold);
}

.social-video-inner p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}

.social-vid-links {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
}

.social-vid-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: var(--transition);
    background: rgba(24,119,242,0.15);
    color: #6aabff;
    border: 1px solid rgba(24,119,242,0.3);
}

.social-vid-btn:hover {
    background: rgba(24,119,242,0.3);
    transform: translateY(-2px);
}

.social-vid-btn.insta {
    background: rgba(225,48,108,0.12);
    color: #f58ea0;
    border-color: rgba(225,48,108,0.25);
}

.social-vid-btn.insta:hover { background: rgba(225,48,108,0.25); }

/* ════════════════════════════════════════════════════
   GALLERY SECTION
   ════════════════════════════════════════════════════ */
.gallery-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, #111 0%, #1a0505 50%, #0d0000 100%);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 1.5rem;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(212,175,55,0.15);
    cursor: pointer;
    transition: var(--transition-bounce);
    aspect-ratio: 3/4;
    background: #1a0505;
}

.gallery-item.large {
    grid-row: span 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-item:hover {
    border-color: var(--gold);
    transform: scale(1.03);
    box-shadow: 0 20px 50px rgba(212,175,55,0.25);
    z-index: 2;
}

.gallery-item:hover img { transform: scale(1.08); }

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 1.5rem;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.4s;
}

.gallery-item:hover .gallery-overlay { opacity: 1; }

.gallery-overlay i {
    font-size: 1.8rem;
    color: var(--gold);
    margin-bottom: 0.3rem;
}

.gallery-overlay span {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    text-align: center;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.95);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn 0.3s ease;
}

.lightbox.hidden { display: none !important; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.lb-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.lb-content img {
    max-height: 80vh;
    max-width: 90vw;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid rgba(212,175,55,0.3);
}

.lb-caption {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
    text-align: center;
    letter-spacing: 0.5px;
}

.lb-close, .lb-prev, .lb-next {
    position: fixed;
    z-index: 9001;
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.lb-close { top: 1.5rem; right: 1.5rem; }
.lb-prev  { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lb-next  { right: 1.5rem; top: 50%; transform: translateY(-50%); }

.lb-close:hover, .lb-prev:hover, .lb-next:hover {
    background: rgba(212,175,55,0.3);
    border-color: var(--gold);
    color: var(--gold);
}

/* ════════════════════════════════════════════════════
   CONTATTI SECTION
   ════════════════════════════════════════════════════ */
.contatti-section {
    padding: 6rem 0;
    position: relative;
    background: linear-gradient(180deg, #0d0000 0%, #111 100%);
    overflow: hidden;
}

.contatti-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.contatti-spotlight {
    position: absolute;
    top: -100px; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 60%);
}

.contatti-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
}

/* Contact Cards */
.contatti-info-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contatti-card {
    display: flex;
    gap: 1.3rem;
    align-items: flex-start;
    padding: 1.5rem 2rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    transition: var(--transition-bounce);
}

.contatti-card:hover {
    border-color: rgba(212,175,55,0.35);
    background: rgba(212,175,55,0.04);
    transform: translateX(8px);
}

.cc-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--red-dark), var(--red));
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-red);
}

.cc-content {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.cc-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(212,175,55,0.7);
}

.cc-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    transition: var(--transition);
}

.cc-value.big {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--gold);
}

.cc-value:hover { color: var(--gold); }

.cc-hint {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.5;
}

/* Social Grid */
.social-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--gold);
    margin-bottom: 1.5rem;
}

.social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.social-card-big {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.5rem;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: var(--transition-bounce);
    cursor: pointer;
}

.social-card-big:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.social-card-big i { font-size: 2rem; margin-bottom: 0.3rem; }

.social-card-big .sc-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

.social-card-big .sc-handle {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
}

.social-card-big .sc-action {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 0.3rem;
}

.social-card-big.facebook {
    background: rgba(24,119,242,0.1);
    border-color: rgba(24,119,242,0.25);
    color: #4a9eff;
}

.social-card-big.facebook:hover {
    background: rgba(24,119,242,0.2);
    border-color: rgba(24,119,242,0.5);
}

.social-card-big.facebook-alt {
    background: rgba(24,119,242,0.07);
    border-color: rgba(24,119,242,0.18);
    color: #4a9eff;
}

.social-card-big.facebook-alt:hover {
    background: rgba(24,119,242,0.15);
    border-color: rgba(24,119,242,0.4);
}

.social-card-big.instagram {
    background: rgba(225,48,108,0.08);
    border-color: rgba(225,48,108,0.2);
    color: #f06090;
}

.social-card-big.instagram:hover {
    background: rgba(225,48,108,0.18);
    border-color: rgba(225,48,108,0.45);
}

.social-card-big.website {
    background: rgba(212,175,55,0.08);
    border-color: rgba(212,175,55,0.2);
    color: var(--gold);
}

.social-card-big.website:hover {
    background: rgba(212,175,55,0.18);
    border-color: var(--gold);
}

/* Easter Egg */
.easter-egg-area { text-align: center; }

.easter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 2.5rem;
    background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(206,43,55,0.08));
    border: 2px dashed rgba(212,175,55,0.4);
    border-radius: 50px;
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-bounce);
    font-family: var(--font-sans);
}

.easter-btn:hover {
    border-color: var(--gold);
    background: rgba(212,175,55,0.15);
    transform: scale(1.05) rotate(-1deg);
    box-shadow: 0 10px 30px rgba(212,175,55,0.3);
}

/* ════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════ */
.main-footer {
    position: relative;
    background: #050505;
    border-top: 3px solid var(--gold);
    overflow: hidden;
    padding: 3rem 0 2rem;
}

.footer-curtain {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: repeating-linear-gradient(
        90deg,
        var(--gold) 0px, var(--gold) 20px,
        var(--red) 20px, var(--red) 40px
    );
    opacity: 0.6;
}

.footer-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0 2rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.fl-sd {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    box-shadow: var(--glow-gold);
}

.fl-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 900;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerAnim 4s ease-in-out infinite;
    letter-spacing: 4px;
}

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

.footer-tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: rgba(212,175,55,0.7);
    letter-spacing: 1px;
}

.footer-sub {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
}

.footer-info {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.25);
}

.footer-info a {
    color: rgba(212,175,55,0.5);
    transition: var(--transition);
}

.footer-info a:hover { color: var(--gold); }

.footer-copy {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.2);
    margin-top: 0.5rem;
}

/* ════════════════════════════════════════════════════
   BACK TO TOP
   ════════════════════════════════════════════════════ */
.back-top {
    position: fixed;
    bottom: 2.5rem;
    right: 2.5rem;
    z-index: 900;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--gold-dark));
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-bounce);
    box-shadow: 0 8px 25px rgba(206,43,55,0.4);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

.back-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.back-top:hover {
    transform: scale(1.15) translateY(-4px);
    box-shadow: 0 15px 40px rgba(206,43,55,0.6);
}

/* ════════════════════════════════════════════════════
   MAGIC MODAL (Easter Egg)
   ════════════════════════════════════════════════════ */
.magic-modal {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(0,0,0,0.92);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn 0.3s ease;
}

.magic-modal.hidden { display: none !important; }

.magic-modal-inner {
    position: relative;
    background: linear-gradient(135deg, #1a0505, #111);
    border: 2px solid var(--gold);
    border-radius: 24px;
    padding: 4rem 3rem;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 100px rgba(212,175,55,0.3), 0 0 50px rgba(206,43,55,0.2);
    animation: magicAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes magicAppear {
    from { transform: scale(0.5) rotate(-10deg); opacity: 0; }
    to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

.magic-close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.magic-close:hover {
    background: rgba(206,43,55,0.2);
    border-color: var(--red);
    color: #fff;
}

.magic-rabbit {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: rabbitPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes rabbitPop {
    from { transform: translateY(20px) scale(0); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

.magic-content h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 1.5rem;
}

.magic-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.9;
    margin-bottom: 0.8rem;
}

.magic-sig {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 1.5rem;
}

.magic-stars {
    font-size: 1.5rem;
    letter-spacing: 6px;
    margin-bottom: 2rem;
}

.btn-magic {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 2.5rem;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 8px;
    transition: var(--transition-bounce);
    box-shadow: 0 8px 25px rgba(206,43,55,0.4);
}

.btn-magic:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 15px 40px rgba(206,43,55,0.6);
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .bio-layout { grid-template-columns: 320px 1fr; gap: 3rem; }
    .spettacolo-showcase { grid-template-columns: 320px 1fr; gap: 3rem; }
    .spettacolo-showcase.reverse { grid-template-columns: 1fr 320px; }
    .cinema-layout { grid-template-columns: 260px 1fr; gap: 3rem; }
    .video-grid { grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; }
    .social-card { grid-column: span 1; }
}

@media (max-width: 900px) {
    .hamburger { display: flex; }

    .nav-links {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(5,5,5,0.98);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        z-index: 999;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .nav-links.open { transform: translateX(0); }

    .nav-link {
        font-size: 1.1rem;
        padding: 0.8rem 2rem;
    }

    .logo-name { display: none; }

    .bio-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    .bio-photo-col { max-width: 400px; margin: 0 auto; }

    .spettacolo-showcase,
    .spettacolo-showcase.reverse {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .spettacolo-showcase.reverse .showcase-poster { order: 0; }
    .spettacolo-showcase.reverse .showcase-info   { order: 0; }

    .cinema-layout { grid-template-columns: 1fr; }
    .cinema-photo-col { max-width: 300px; margin: 0 auto; }
    .cinema-cards-col { grid-template-columns: 1fr; }

    .video-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }

    .gallery-grid { grid-template-columns: 1fr 1fr; }

    .contatti-layout { grid-template-columns: 1fr; gap: 3rem; }
    .social-grid { grid-template-columns: 1fr 1fr; }

    .hero-stats { gap: 1rem; }
    .stat-bubble { padding: 1rem 1.2rem; }

    .spettacolo-card-small {
        grid-template-columns: 80px 1fr;
        gap: 1.5rem;
        padding: 2rem;
    }

    .small-card-icon {
        width: 80px; height: 80px;
        font-size: 2.5rem;
    }
}

@media (max-width: 600px) {
    .container { padding: 0 1.2rem; }

    /* ── Curtain intro mobile fix ── */
    .curtain-center-content { padding: 0 4vw; }
    .intro-name-line1 {
        font-size: clamp(1.2rem, 8vw, 2.5rem) !important;
        letter-spacing: 3px !important;
    }
    .intro-name-line2 {
        font-size: clamp(1.8rem, 12vw, 4rem) !important;
        letter-spacing: 2px !important;
    }
    .intro-presents {
        font-size: 1rem !important;
        letter-spacing: 2px !important;
    }
    .intro-sub { font-size: 0.95rem !important; }

    .hero { padding: 6rem 1.2rem 4rem; }
    .title-line-1 { font-size: clamp(1.8rem, 7vw, 3.5rem) !important; letter-spacing: 2px !important; }
    .title-line-2 { font-size: clamp(1.6rem, 6.5vw, 3rem) !important; letter-spacing: 2px !important; }

    .hero-roles { gap: 0.3rem; }
    .role-sep { display: none; }

    .hero-cta { flex-direction: column; align-items: center; }
    .btn-hero-primary, .btn-hero-secondary { width: 100%; max-width: 300px; justify-content: center; }

    .hero-stats { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
    .stat-bubble { padding: 0.8rem 1rem; flex: 1; min-width: 120px; }

    .gallery-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .video-grid { grid-template-columns: 1fr; gap: 1rem; }

    .social-grid { grid-template-columns: 1fr; }

    .magic-modal-inner { padding: 3rem 2rem; }

    .rec-carousel { min-height: 320px; }
    .rec-slide { padding: 2rem 1.5rem; }

    .spettacolo-card-small { grid-template-columns: 1fr; text-align: center; }
    .small-card-icon { margin: 0 auto; }

    .show-credits { display: none; }
    .btn-show { width: 100%; justify-content: center; }

    .section-title { letter-spacing: 2px; }
}

/* ════════════════════════════════════════════════════
   HERO THEATER TITLE — Stile Teatrale Scenografico
   ════════════════════════════════════════════════════ */
.hero-theater-title {
    position: relative;
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 1rem 0;
}

/* Ornamento superiore — linee e diamante */
.htt-top-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.htt-line {
    display: block;
    width: clamp(40px, 8vw, 120px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.htt-diamond {
    color: var(--gold);
    font-size: 1rem;
    animation: htt-pulse 2s ease-in-out infinite;
    text-shadow: 0 0 12px rgba(212,175,55,0.8);
}

@keyframes htt-pulse {
    0%, 100% { opacity: 1; transform: scale(1); text-shadow: 0 0 12px rgba(212,175,55,0.8); }
    50% { opacity: 0.7; transform: scale(1.3); text-shadow: 0 0 24px rgba(212,175,55,1); }
}

/* Contenitore del nome h1 */
.htt-name {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 0.9;
    margin-bottom: 1.2rem;
    overflow: visible;
}

/* Spotlight animato dietro il nome */
.htt-spotlight {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 200%;
    background: radial-gradient(ellipse 60% 50% at 50% 50%,
        rgba(212,175,55,0.12) 0%,
        rgba(206,43,55,0.06) 50%,
        transparent 100%);
    pointer-events: none;
    animation: htt-spot-breathe 4s ease-in-out infinite;
    z-index: 0;
}

@keyframes htt-spot-breathe {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

/* Singole parole */
.htt-word {
    position: relative;
    z-index: 1;
    display: block;
    font-family: var(--font-display);
    font-weight: 900;
    white-space: nowrap;
    letter-spacing: clamp(1px, 0.5vw, 8px);
    line-height: 1;
    overflow: visible;
    /* Garantisce che il testo non trabocchi mai dal viewport */
    max-width: 96vw;
    text-align: center;
}

/* STEFANO — bianco/crema, più piccolo, leggero */
.htt-stefano {
    font-size: clamp(1.2rem, 4.5vw, 4.5rem);
    background: linear-gradient(180deg,
        #ffffff 0%,
        var(--cream) 60%,
        rgba(212,175,55,0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 20px rgba(255,255,255,0.25));
    animation: htt-stefano-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.3s;
}

/* DRAGONE — rosso/oro, più grande, dominante */
.htt-dragone {
    /* "DRAGONE" = 7 chars in Cinzel Decorative (circa 1.4em per char).
       Per stare in 90vw: fontSize = 90vw / (7 * 1.4) = 90vw/9.8 ≈ 9.18vw
       Usiamo 8.5vw per sicurezza, cap a 8rem */
    font-size: clamp(2rem, 8.5vw, 8rem);
    letter-spacing: clamp(1px, 0.4vw, 10px);
    background: linear-gradient(180deg,
        var(--gold-light) 0%,
        var(--gold) 35%,
        var(--red-light) 65%,
        var(--red) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 40px rgba(212,175,55,0.5))
            drop-shadow(0 4px 30px rgba(206,43,55,0.4));
    animation: htt-dragone-in 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.5s;
    letter-spacing: clamp(4px, 1.5vw, 18px);
}

/* Effetto glitch/shimmer su DRAGONE al hover */
.hero-theater-title:hover .htt-dragone {
    animation: htt-shimmer 0.6s ease forwards;
}

@keyframes htt-shimmer {
    0%   { filter: drop-shadow(0 0 40px rgba(212,175,55,0.5)) drop-shadow(0 4px 30px rgba(206,43,55,0.4)); }
    25%  { filter: drop-shadow(0 0 60px rgba(212,175,55,0.9)) drop-shadow(0 0 60px rgba(206,43,55,0.7)) brightness(1.3); }
    50%  { filter: drop-shadow(0 0 80px rgba(255,255,255,0.5)) drop-shadow(0 0 80px rgba(212,175,55,1)); }
    75%  { filter: drop-shadow(0 0 50px rgba(212,175,55,0.7)) drop-shadow(0 0 40px rgba(206,43,55,0.5)); }
    100% { filter: drop-shadow(0 0 40px rgba(212,175,55,0.5)) drop-shadow(0 4px 30px rgba(206,43,55,0.4)); }
}

@keyframes htt-stefano-in {
    0%   { opacity: 0; transform: translateY(-40px) scaleX(0.85); letter-spacing: 30px; }
    100% { opacity: 1; transform: translateY(0) scaleX(1); }
}

@keyframes htt-dragone-in {
    0%   { opacity: 0; transform: translateY(40px) scale(0.8); }
    60%  { transform: translateY(-6px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ornamento inferiore — data di nascita */
.htt-bottom-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.8rem;
}

.htt-born {
    font-family: var(--font-script);
    font-size: clamp(0.9rem, 2.5vw, 1.3rem);
    color: rgba(212,175,55,0.7);
    letter-spacing: 3px;
    font-style: italic;
}

/* ── Responsive HTT ── */
@media (max-width: 768px) {
    .htt-stefano {
        font-size: clamp(1.2rem, 5.5vw, 3rem);
        letter-spacing: 2px;
    }
    .htt-dragone {
        /* Cinzel Decorative: ~1.4em/char. 7 chars × 1.4 = 9.8em.
           Safe: fontSize ≤ 90vw / 9.8 → ~9.18vw. Usiamo 8vw */
        font-size: clamp(1.8rem, 8vw, 5rem);
        letter-spacing: 1px;
    }
    .htt-word { letter-spacing: 1px; }
    .htt-line { width: 30px; }
}

@media (max-width: 480px) {
    .htt-stefano {
        font-size: clamp(1rem, 6.5vw, 2.2rem);
        letter-spacing: 1px;
    }
    .htt-dragone {
        font-size: clamp(1.6rem, 9.5vw, 3.5rem);
        letter-spacing: 0px;
    }
    .htt-word { letter-spacing: 0px; }
    .htt-line { width: 20px; }
    .htt-born { font-size: 0.7rem; letter-spacing: 0.5px; }
}

/* ════════════════════════════════════════════════════
   PROSSIMI SPETTACOLI SECTION
   ════════════════════════════════════════════════════ */
.prossimi-section {
    position: relative;
    padding: 8rem 2rem;
    overflow: hidden;
    background: linear-gradient(180deg, var(--dark) 0%, #0d0205 50%, var(--dark) 100%);
}

.prossimi-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

/* Tende laterali decorative */
.prossimi-curtain-l,
.prossimi-curtain-r {
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(90deg, rgba(139,0,0,0.25), transparent);
}
.prossimi-curtain-l { left: 0; }
.prossimi-curtain-r {
    right: 0;
    background: linear-gradient(270deg, rgba(139,0,0,0.25), transparent);
}

/* Fasci di luce scenici */
.prossimi-lights {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.pl-beam {
    position: absolute;
    top: -20%;
    width: 2px;
    height: 70%;
    background: linear-gradient(180deg, rgba(212,175,55,0.15), transparent);
    transform-origin: top center;
    animation: pl-sway 6s ease-in-out infinite;
}
.pl-1 { left: 25%; animation-delay: 0s; transform: rotate(-10deg); }
.pl-2 { left: 50%; animation-delay: 2s; transform: rotate(0deg); }
.pl-3 { left: 75%; animation-delay: 4s; transform: rotate(10deg); }

@keyframes pl-sway {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Container contenuto */
.prossimi-section .container { position: relative; z-index: 1; }

/* "Coming soon" avviso */
.prossimi-coming-soon {
    background: rgba(212,175,55,0.04);
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    margin-bottom: 3rem;
    backdrop-filter: blur(4px);
}

.pcs-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: block;
    animation: pcs-float 3s ease-in-out infinite;
}

@keyframes pcs-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.prossimi-coming-soon h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--gold);
    letter-spacing: 3px;
    margin-bottom: 1rem;
}

.prossimi-coming-soon p {
    color: rgba(255,255,255,0.7);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 500px;
    margin: 0 auto 0.5rem;
}

.pcs-social-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.8rem;
}

.pcs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.8rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: var(--transition-bounce);
}

.pcs-btn.facebook {
    background: #1877F2;
    color: #fff;
    box-shadow: 0 4px 20px rgba(24,119,242,0.3);
}
.pcs-btn.facebook:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(24,119,242,0.5);
}

.pcs-btn.instagram {
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
    color: #fff;
    box-shadow: 0 4px 20px rgba(253,29,29,0.3);
}
.pcs-btn.instagram:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(253,29,29,0.5);
}

/* Griglia eventi */
.prossimi-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 3rem;
}

/* Card singolo evento */
.evento-card {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 1.8rem 2.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 16px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.evento-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold), var(--red));
    border-radius: 16px 0 0 16px;
}

.evento-card:hover {
    background: rgba(212,175,55,0.06);
    border-color: rgba(212,175,55,0.35);
    transform: translateX(4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* Box data */
.ev-date-box {
    text-align: center;
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 12px;
    padding: 0.8rem 0.5rem;
    min-width: 80px;
}

.ev-giorno {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
}

.ev-mese {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-top: 0.2rem;
}

/* Info evento */
.ev-spettacolo {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.4rem;
}

.ev-luogo,
.ev-orario {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.ev-luogo i, .ev-orario i {
    color: var(--gold);
    font-size: 0.75rem;
}

/* Azione / badge */
.ev-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.7rem;
}

.ev-badge {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ev-badge.annuncio {
    background: rgba(212,175,55,0.15);
    border: 1px solid rgba(212,175,55,0.4);
    color: var(--gold);
}

.ev-badge.sold-out {
    background: rgba(206,43,55,0.15);
    border: 1px solid rgba(206,43,55,0.4);
    color: var(--red-light);
}

.ev-badge.disponibile {
    background: rgba(46,160,67,0.15);
    border: 1px solid rgba(46,160,67,0.4);
    color: #5cb85c;
}

.ev-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.2rem;
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 8px;
    transition: var(--transition-bounce);
    box-shadow: 0 4px 15px rgba(206,43,55,0.3);
    white-space: nowrap;
}

.ev-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(206,43,55,0.5);
}

/* CTA inferiore */
.prossimi-cta {
    text-align: center;
    padding-top: 1rem;
}

.prossimi-cta p {
    color: rgba(255,255,255,0.6);
    font-size: 1rem;
}

/* ── Responsive Prossimi ── */
@media (max-width: 768px) {
    .evento-card {
        grid-template-columns: 70px 1fr;
        grid-template-rows: auto auto;
        gap: 1rem;
        padding: 1.5rem;
    }
    .ev-action {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .ev-giorno { font-size: 1.6rem; }
}

@media (max-width: 480px) {
    .evento-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ev-date-box { margin: 0 auto; width: fit-content; padding: 0.6rem 1.5rem; }
    .ev-action { justify-content: center; }
    .evento-card::before { top: 0; bottom: auto; left: 0; right: 0; width: 100%; height: 4px; border-radius: 16px 16px 0 0; }
}

/* ════════════════════════════════════════════════════
   RASSEGNA STAMPA SECTION
   ════════════════════════════════════════════════════ */
.rassegna-section {
    padding: 8rem 2rem;
    background: linear-gradient(180deg, #0d0205 0%, var(--dark) 100%);
    position: relative;
}

.rassegna-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
}

/* Card singola */
.rassegna-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212,175,55,0.15);
    border-radius: 20px;
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.rassegna-card:hover {
    border-color: rgba(212,175,55,0.4);
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(212,175,55,0.08);
}

/* Immagine */
.rassegna-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #0a0a0a;
}

.rassegna-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
    display: block;
}

.rassegna-card:hover .rassegna-img {
    transform: scale(1.04);
}

.rassegna-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
}

.rassegna-img-overlay i {
    font-size: 2rem;
    color: var(--gold);
}

.rassegna-card:hover .rassegna-img-overlay {
    opacity: 1;
}

/* Testo info */
.rassegna-info {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rassegna-testata {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
}

.rassegna-data {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.45);
    letter-spacing: 1px;
}

.rassegna-titolo {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.4;
    font-style: italic;
    margin: 0.3rem 0;
}

.rassegna-testo {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    flex: 1;
}

.rassegna-testo strong {
    color: rgba(255,255,255,0.9);
}

.rassegna-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.rassegna-tag-item {
    display: inline-block;
    padding: 0.25rem 0.8rem;
    background: rgba(212,175,55,0.08);
    border: 1px solid rgba(212,175,55,0.25);
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
}

/* Responsive */
@media (max-width: 900px) {
    .rassegna-grid { grid-template-columns: 1fr; gap: 2rem; }
    .rassegna-img-wrap { aspect-ratio: 16/9; }
}

@media (max-width: 600px) {
    .rassegna-section { padding: 5rem 1.2rem; }
    .rassegna-info { padding: 1.5rem; }
}

/* ════════════════════════════════════════════════════
   GALLERIA MANGIAFUOCO
   ════════════════════════════════════════════════════ */
.mangiafuoco-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.mgf-photo {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,0.2);
    transition: var(--transition);
}

.mgf-photo:hover {
    border-color: rgba(212,175,55,0.5);
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
}

.mgf-photo img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.mgf-photo:hover img {
    transform: scale(1.04);
}

.mgf-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    padding: 1.5rem 1rem 1rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    font-style: italic;
    letter-spacing: 0.5px;
}

@media (max-width: 600px) {
    .mangiafuoco-gallery { grid-template-columns: 1fr; }
    .mgf-photo img { height: 220px; }
}