html { overflow-x: hidden; }
html, body { font-family: 'Lato', sans-serif; scroll-behavior: smooth; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, .serif-font { font-family: 'Cinzel', serif; }
.history-title { font-family: 'Playfair Display', serif; }

/* Focus visibile per accessibilità da tastiera */
[role="button"]:focus-visible, a:focus-visible, button:focus-visible {
    outline: 2px solid #B49B6A;
    outline-offset: 3px;
}

.hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('img/background.webp');
    background-size: cover; background-position: center;
}
.rock-bg {
    background-image: linear-gradient(rgba(250, 248, 245, 0.95), rgba(250, 248, 245, 0.95)), url('img/rockroma.webp');
    background-size: cover; background-position: center;
}

.fade-in { animation: fadeIn 1s ease-out forwards; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- SCROLL ANIMATIONS --- */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1), transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}
.scroll-animate.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* FOOTSTEP ANIMATION */
@keyframes stepIn {
    0%   { opacity: 0; transform: scale(0.5); }
    50%  { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0.7; transform: scale(1); }
}
.animate-visible .step-1 { animation: stepIn 0.4s ease-out 0.3s forwards; }
.animate-visible .step-2 { animation: stepIn 0.4s ease-out 0.6s forwards; }
.animate-visible .step-3 { animation: stepIn 0.4s ease-out 0.9s forwards; }
.animate-visible .step-4 { animation: stepIn 0.4s ease-out 1.2s forwards; }
.animate-visible .step-5 { animation: stepIn 0.4s ease-out 1.5s forwards; }
.animate-visible .step-6 { animation: stepIn 0.4s ease-out 1.8s forwards; }

/* MARQUEE ANIMATIONS */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 45s linear infinite;
}
.animate-film-strip {
    display: flex;
    width: max-content;
    animation: marquee 60s linear infinite;
}
.animate-marquee:hover {
    animation-play-state: paused;
}

/* PREMIUM FRAME */
.premium-frame {
    border-radius: 12px;
    box-shadow: 0 15px 35px -5px rgba(139, 30, 47, 0.08), 0 10px 15px -5px rgba(0, 0, 0, 0.04);
    position: relative;
    transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.premium-frame:hover {
    box-shadow: 0 25px 45px -10px rgba(139, 30, 47, 0.15);
    transform: translateY(-6px);
}
.premium-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(180, 155, 106, 0.4);
    border-radius: 12px;
    pointer-events: none;
}

.history-text-box {
    background: #FAF8F5;
    border: 1px solid rgba(180, 155, 106, 0.3);
    padding: 3rem;
    position: relative;
    z-index: 10;
}

/* SCROLL PROGRESS BAR */
#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(to right, #B49B6A, #968156, #B49B6A);
    z-index: 9999;
    pointer-events: none;
    transition: width 0.08s linear;
}

/* LIGHTBOX */
#lightbox { display: none; }
#lightbox.lb-open { display: flex; }
#lightbox-img { transition: opacity 0.25s ease; }

/* BOOKING POPUP */
@keyframes popupIn {
    from { opacity: 0; transform: scale(0.92) translateY(24px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.popup-card {
    animation: popupIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* PULSE RING ON PHONE BUTTON */
.pulse-ring::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    background: #B49B6A;
    opacity: 0.5;
    animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
    0%   { transform: scale(1);   opacity: 0.5; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}