.page-hero.atmosfera {
    background-image: linear-gradient(115deg, rgba(8, 9, 16, .92), rgba(8, 9, 16, .28)), url('assets/images/interno-4k.jpg')
}

.page-hero.menu {
    background-image: linear-gradient(115deg, rgba(8, 9, 16, .92), rgba(8, 9, 16, .28)), url('assets/images/roll-2-4k.jpg')
}

.page-hero.social {
    background-image: linear-gradient(115deg, rgba(8, 9, 16, .92), rgba(8, 9, 16, .28)), url('assets/images/roll-1-4k.jpg')
}

.counter {
    display: inline-block;
    transform-origin: center;
    will-change: transform, opacity
}

.counter.is-counting {
    animation: counterTurn .7s cubic-bezier(.16, 1, .3, 1)
}

@keyframes counterTurn {
    0% {
        opacity: .2;
        transform: perspective(240px) rotateX(-60deg) translateY(-5px)
    }

    60% {
        opacity: 1;
        transform: perspective(240px) rotateX(5deg) translateY(1px)
    }

    100% {
        opacity: 1;
        transform: perspective(240px) rotateX(0) translateY(0)
    }
}

/* ==========================================================================
   CINEMATIC MOTION SYSTEM
   Signature: a slow gold "brush-stroke" reveal (accent-line draw + staggered
   fade-up) paired with a soft ambient gold halo bleeding across section
   seams, so the page reads as one continuous, unhurried scene rather than a
   stack of hard-cut blocks.
   ========================================================================== */

/* Kill the old on-load section animation: sections now reveal on scroll */
.intro,
.dark-section,
.page-hero,
.content {
    animation: none
}

/* Soft gold halo bleeding across section borders, smoothing the seams */
.intro {
    box-shadow: inset 0 1px 0 rgba(200, 162, 75, .12), inset 0 -1px 0 rgba(21, 38, 79, .08), 0 0 70px rgba(200, 162, 75, .07)
}

.dark-section {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 -1px 0 rgba(200, 162, 75, .14), 0 0 70px rgba(200, 162, 75, .07)
}

.content {
    box-shadow: inset 0 1px 0 rgba(200, 162, 75, .12), inset 0 -1px 0 rgba(18, 32, 63, .08), 0 0 70px rgba(200, 162, 75, .07)
}

/* ---- Hero: cinematic arrival ---- */

.hero-photo {
    animation: heroKenBurns 9s cubic-bezier(.16, 1, .3, 1) both;
    transform-origin: center;
    will-change: transform, opacity
}

@keyframes heroKenBurns {
    0% {
        opacity: 0;
        transform: scale(1.12)
    }

    14% {
        opacity: .92
    }

    100% {
        opacity: .92;
        transform: scale(1)
    }
}

.hero-content .eyebrow,
.hero-content h1,
.hero-content .lead,
.hero-content .button,
.hero-content .hero-details {
    opacity: 0;
    animation: heroItemIn 1s cubic-bezier(.16, 1, .3, 1) both
}

.hero-content .eyebrow {
    animation-delay: .5s
}

.hero-content h1 {
    animation-delay: .68s
}

.hero-content .lead {
    animation-delay: .9s
}

.hero-content .button {
    animation-delay: 1.08s
}

.hero-content .hero-details {
    animation-delay: 1.26s
}

@keyframes heroItemIn {
    from {
        opacity: 0;
        transform: translateY(22px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ---- Scroll-triggered reveals ---- */

.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1), transform 1.1s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--reveal-delay, 0s)
}

.reveal.is-visible {
    opacity: 1;
    transform: none
}

/* Accent-line draws in like a brush stroke once its section is revealed */
.accent-line {
    width: 0;
    transition: width .8s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--reveal-delay, 0s) + .25s)
}

.reveal.is-visible .accent-line {
    width: 50px
}

/* Grouped children (gallery, menu cards, stats, social cards) stagger in */
.reveal-group>* {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .95s cubic-bezier(.16, 1, .3, 1), transform .95s cubic-bezier(.16, 1, .3, 1)
}

.reveal-group.is-visible>* {
    opacity: 1;
    transform: none
}

.reveal-group.is-visible>*:nth-child(1) {
    transition-delay: .05s
}

.reveal-group.is-visible>*:nth-child(2) {
    transition-delay: .18s
}

.reveal-group.is-visible>*:nth-child(3) {
    transition-delay: .31s
}

.reveal-group.is-visible>*:nth-child(4) {
    transition-delay: .44s
}

/* ---- Micro-interactions ---- */

.button,
.nav-cta {
    transition: background .3s ease, color .3s ease, box-shadow .5s cubic-bezier(.16, 1, .3, 1), letter-spacing .35s ease
}

.button:hover,
.nav-cta:hover {
    box-shadow: 0 0 26px rgba(200, 162, 75, .5);
    letter-spacing: .22em
}

.image-frame img {
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), filter 1.2s ease
}

.image-frame:hover img {
    transform: scale(1.045);
    filter: saturate(1) contrast(1.08)
}

.social-card,
.menu-card {
    transition: transform .6s cubic-bezier(.16, 1, .3, 1), border-color .6s ease, box-shadow .6s ease
}

.social-card:hover,
.menu-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .35)
}

@media(prefers-reduced-motion:reduce) {

    .counter.is-counting,
    .hero-photo,
    .hero-content .eyebrow,
    .hero-content h1,
    .hero-content .lead,
    .hero-content .button,
    .hero-content .hero-details,
    .reveal,
    .reveal-group>*,
    .social-card,
    .menu-card,
    .image-frame img {
        animation: none;
        transition: none
    }

    .hero-photo {
        opacity: .92;
        transform: none
    }

    .reveal,
    .reveal-group>* {
        opacity: 1;
        transform: none
    }

    .accent-line {
        transition: none;
        width: 50px
    }
}