/*
 * Pinned scroll-mask animation: .scroll-animation-wrapper is a 500vh scroll
 * buffer; .scroll-animation-stage stays pinned via native position:sticky
 * while it scrolls underneath. assets/js/main.js's pill-morph IIFE reads
 * scroll progress against the wrapper every frame and drives #testing-block's
 * inline width/height/top/left/border-radius directly (no CSS custom
 * properties involved).
 *
 * margin-top:-120px pulls the wrapper's natural flow position up by exactly
 * the header's height, so .scroll-animation-stage is ALREADY at its stuck
 * position (viewport top) on the very first frame — without this, the
 * stage starts 120px below the viewport top (its true natural position,
 * right after the header) and the user has to scroll ~120px before it
 * "catches up" and sticks, visible as hero jumping/settling right at the
 * start. This only shifts WHEN the stage engages, not WHERE it sits once
 * stuck — #testing-block's own fully-open state (top:0 relative to the
 * stage, height:100vh) is unaffected and still reaches the true viewport
 * edges, extending behind the header exactly as intended.
 */
.scroll-animation-wrapper {
    position: relative;
    margin-top: -120px;
    height: 500vh;
}

.scroll-animation-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.front-page {
    position: absolute;
    /* inset:120px 0 0 0, not inset:0 — hero (unlike testing-block) should
       stay clear of the header, not extend behind it, so its own visible
       box is exactly 100vh-120px tall. */
    inset: 120px 0 0 0;
    z-index: 1;
    box-sizing: border-box;
    overflow: hidden;
    background-image: url('../assets/images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .front-page {
        transition: none;
    }
}

.front-page__line {
    position: absolute;
    top: 0;
    right: 146px;
    height: 100%;
    width: auto;
}

.hero-title {
    position: absolute;
    left: 96px;
    top: 220px;
    width: 1231px;
    max-width: calc(100% - 192px);
    margin: 0;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 88px;
    line-height: 108%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

.hero-title__line {
    display: block;
    opacity: 0;
    animation: fade-in-up 0.8s ease-out forwards;
}

.hero-title__line:nth-child(1) {
    animation-delay: 0.2s;
}

.hero-title__line:nth-child(2) {
    animation-delay: 0.45s;
}

.hero-title__highlight {
    color: rgba(252, 169, 58, 1);
}

.hero-scroll-down {
    position: absolute;
    left: 50%;
    bottom: 64px;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    color: #FFFFFF;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.hero-scroll-down svg {
    transition: transform 0.3s ease;
}

.hero-scroll-down:hover {
    background: #FFFFFF;
    color: #023A85;
    border-color: #FFFFFF;
    transform: translateX(-50%) scale(1.08);
}

.hero-scroll-down:hover svg {
    animation: hero-scroll-down-bounce 0.8s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-down:hover svg {
        animation: none;
    }
}

@media (max-width: 768px) {
    .hero-title {
        left: 24px;
        top: 160px;
        font-size: 48px;
    }

    .front-page__line {
        display: none;
    }
}