/* Scroll media expansion hero — pattern 21st.dev (scroll-expansion-hero) */

.scroll-expand-hero {
    --expand-progress: 0;
    --media-inset: 14%;
    --media-radius: 28px;
    --content-opacity: 1;
    --hint-opacity: 1;
    --veil-opacity: 0.35;
    position: relative;
    z-index: 2;
}

.scroll-expand-hero__track {
    height: 200vh;
    position: relative;
}

/* Marquee agganciato al fondo viewport — niente buco nero */
.scroll-expand-hero .text-scroll-one {
    margin-top: -100vh;
    padding-top: 0;
    position: relative;
    z-index: 6;
}

.scroll-expand-hero__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 520px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(5rem + 48px) clamp(1rem, 4vw, 2.5rem) 0;
}

.scroll-expand-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.08);
    filter: blur(6px) saturate(0.85) brightness(0.45);
}

.scroll-expand-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 0%, rgba(3, 3, 3, 0.75) 100%);
}

.scroll-expand-hero__media {
    position: absolute;
    z-index: 1;
    top: var(--media-inset);
    right: var(--media-inset);
    bottom: var(--media-inset);
    left: var(--media-inset);
    border-radius: var(--media-radius);
    overflow: hidden;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08);
    will-change: top, right, bottom, left, border-radius;
}

.scroll-expand-hero__media video,
.scroll-expand-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(calc(1.06 - var(--expand-progress) * 0.04));
    filter: saturate(1.08) contrast(1.05);
}

.scroll-expand-hero__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(3, 3, 3, calc(var(--veil-opacity) * 0.5)) 0%,
        rgba(3, 3, 3, var(--veil-opacity)) 55%,
        rgba(3, 3, 3, calc(var(--veil-opacity) + 0.25)) 100%
    );
    pointer-events: none;
}

.scroll-expand-hero__content {
    position: relative;
    z-index: 3;
    width: min(92%, 52rem);
    margin: 0 auto;
    align-self: flex-end;
    opacity: var(--content-opacity);
    transform: translateY(calc(var(--expand-progress) * -24px));
    pointer-events: none;
    padding-bottom: clamp(1.25rem, 4vh, 2rem);
}

.scroll-expand-hero__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    font-family: 'Syne', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    opacity: var(--hint-opacity);
}

.scroll-expand-hero__hint svg {
    width: 14px;
    height: 14px;
    animation: scroll-expand-bounce 1.8s ease-in-out infinite;
}

@keyframes scroll-expand-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

.scroll-expand-hero__ghost {
    font-family: 'Urban Shadow', Impact, sans-serif;
    font-size: clamp(4rem, 18vw, 12rem);
    line-height: 0.82;
    margin: 0;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
    user-select: none;
    pointer-events: none;
}

.scroll-expand-hero__title {
    font-family: 'Urban Shadow', Impact, sans-serif;
    font-size: clamp(2.8rem, 12vw, 8.5rem);
    line-height: 0.9;
    margin: -0.12em 0 0;
}

.scroll-expand-hero__title--split .lv2-t-w {
    color: #fff;
}

.scroll-expand-hero__title--split .lv2-t-o {
    color: var(--primary-color, #ee764c);
}

.scroll-expand-hero__meta {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1.5rem;
    max-width: 36ch;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.scroll-expand-hero__pin {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--primary-color, #ee764c);
}

.scroll-expand-hero__meta-main {
    margin: 0;
    font-family: 'Syne', sans-serif;
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    font-weight: 600;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.95);
}

.scroll-expand-hero__meta-sub {
    margin: 0.35rem 0 0;
    font-family: 'Syne', sans-serif;
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 768px) {
    .scroll-expand-hero__track {
        height: 180vh;
    }

    .scroll-expand-hero .text-scroll-one {
        margin-top: -80vh;
    }

    .scroll-expand-hero__ghost {
        display: none;
    }

    .scroll-expand-hero__sticky {
        padding-top: calc(4.5rem + 48px);
    }

    .scroll-expand-hero__content {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-expand-hero__track {
        height: auto;
        min-height: 100vh;
    }

    .scroll-expand-hero .text-scroll-one {
        margin-top: 0;
        padding-top: clamp(2rem, 5vh, 3rem);
    }

    .scroll-expand-hero__sticky {
        position: relative;
        min-height: 100vh;
    }

    .scroll-expand-hero__media {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }

    .scroll-expand-hero__hint {
        display: none;
    }

    .scroll-expand-hero__hint svg {
        animation: none;
    }
}