/**
 * Hero Section — ADGO Studio style
 */

.hero-headline [data-brand-rect],
.hero-headline [data-fg-rect] {
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hero-headline [data-line-inner] {
    opacity: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hero-headline [data-line].is-line-revealed [data-line-inner],
.hero-headline.is-revealed [data-line-inner] {
    opacity: 1;
    visibility: visible;
}

.hero-headline.is-revealed [data-brand-rect],
.hero-headline.is-revealed [data-fg-rect] {
    visibility: hidden;
    will-change: auto;
}

/* Keep headline paint stable when hero media blur/parallax layers update */
.hero-content-col {
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hero-subtext .split-line-wrap {
    overflow: hidden;
    display: block;
}

.hero-subtext .split-line {
    display: block;
    will-change: transform;
}

.hero-text-link .underline-line-1,
.hero-text-link .underline-line-2 {
    transition-timing-function: cubic-bezier(0.625, 0.05, 0, 1);
}

.hero-cta-group {
    opacity: 0;
}

.hero-trust-label {
    opacity: 0;
}

.hero-logo {
    transition: color 300ms ease, opacity 300ms ease;
    cursor: default;
}

.hero-logo:hover {
    color: var(--color-foreground);
}

/* ── Hero media — full bleed, centered video band, edge blur fade ── */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
}

.hero-media__stage {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgb(0 0 0 / 0.18) 10%,
        rgb(0 0 0 / 0.55) 20%,
        #000 32%,
        #000 68%,
        rgb(0 0 0 / 0.55) 80%,
        rgb(0 0 0 / 0.18) 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgb(0 0 0 / 0.18) 10%,
        rgb(0 0 0 / 0.55) 20%,
        #000 32%,
        #000 68%,
        rgb(0 0 0 / 0.55) 80%,
        rgb(0 0 0 / 0.18) 90%,
        transparent 100%
    );
}

.hero-media__ambient {
    position: absolute;
    inset: -15%;
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, rgb(0 242 255 / 0.18) 0%, transparent 62%),
        radial-gradient(ellipse 55% 65% at 58% 82%, rgb(0 242 255 / 0.1) 0%, transparent 58%),
        radial-gradient(ellipse 45% 40% at 42% 68%, rgb(255 255 255 / 0.04) 0%, transparent 55%),
        linear-gradient(145deg, #1a1a2e 0%, #141314 48%, #0d1117 100%);
    animation: hero-ambient-shift 14s ease-in-out infinite alternate;
    will-change: transform;
    transition: opacity 0.55s var(--ease-power3-out, ease);
}

.hero.is-entering .hero-media__ambient {
    opacity: 0.72;
    animation-play-state: paused;
}

.hero-media__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transform: scale(1.06);
    filter: saturate(1.12);
    transition: opacity 1.5s ease-in-out;
    will-change: opacity;
}

.hero-media__video.is-active {
    opacity: 0.4;
}

.hero-media.is-poster-first .hero-media__video:not(.is-active),
.hero-media:not(.has-video):not(.is-static):not(.is-poster-first) .hero-media__video {
    opacity: 0;
}

.hero-media.is-static .hero-media__video:not(.is-active) {
    display: none;
}

/* Left readability + soft vignette around centered video */
.hero-media__fade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 62% 78% at 50% 48%,
            transparent 0%,
            rgb(20 19 20 / 0.12) 42%,
            rgb(20 19 20 / 0.48) 68%,
            var(--color-background, #141314) 100%
        ),
        linear-gradient(
            to right,
            var(--color-background, #141314) 0%,
            var(--color-background, #141314) 18%,
            rgb(20 19 20 / 0.94) 28%,
            rgb(20 19 20 / 0.52) 40%,
            transparent 54%
        );
    pointer-events: none;
}

/* Blur bridge between left content and centered video */
.hero-media__blur-bridge {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 22%;
    width: 22%;
    background: rgb(20 19 20 / 0.08);
    -webkit-backdrop-filter: blur(28px) saturate(1.1);
    backdrop-filter: blur(28px) saturate(1.1);
    transition:
        -webkit-backdrop-filter 0.55s var(--ease-power3-out, ease),
        backdrop-filter 0.55s var(--ease-power3-out, ease);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgb(0 0 0 / 0.55) 22%,
        #000 50%,
        rgb(0 0 0 / 0.55) 78%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgb(0 0 0 / 0.55) 22%,
        #000 50%,
        rgb(0 0 0 / 0.55) 78%,
        transparent 100%
    );
    pointer-events: none;
}

.hero-media__tint {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        rgb(0 242 255 / 0.04) 0%,
        transparent 42%,
        rgb(0 242 255 / 0.06) 100%
    );
    mix-blend-mode: screen;
    pointer-events: none;
}

.hero-media__grain {
    position: absolute;
    inset: 0;
    opacity: 0.32;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    mix-blend-mode: overlay;
    pointer-events: none;
}

@keyframes hero-ambient-shift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-2%, -1.5%) scale(1.04);
    }
}

@media (min-width: 1024px) {
    .hero-media__stage {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgb(0 0 0 / 0.15) 12%,
            rgb(0 0 0 / 0.5) 22%,
            #000 34%,
            #000 66%,
            rgb(0 0 0 / 0.5) 78%,
            rgb(0 0 0 / 0.15) 88%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgb(0 0 0 / 0.15) 12%,
            rgb(0 0 0 / 0.5) 22%,
            #000 34%,
            #000 66%,
            rgb(0 0 0 / 0.5) 78%,
            rgb(0 0 0 / 0.15) 88%,
            transparent 100%
        );
    }

    .hero-media__fade {
        background:
            radial-gradient(
                ellipse 58% 74% at 52% 48%,
                transparent 0%,
                rgb(20 19 20 / 0.1) 44%,
                rgb(20 19 20 / 0.42) 70%,
                var(--color-background, #141314) 100%
            ),
            linear-gradient(
                to right,
                var(--color-background, #141314) 0%,
                var(--color-background, #141314) 24%,
                rgb(20 19 20 / 0.92) 34%,
                rgb(20 19 20 / 0.45) 46%,
                transparent 56%
            );
    }

    .hero-media__blur-bridge {
        left: 26%;
        width: 20%;
        -webkit-backdrop-filter: blur(22px) saturate(1.15);
        backdrop-filter: blur(22px) saturate(1.15);
    }
}

@media (max-width: 1023px) {
    .hero-media__stage {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgb(0 0 0 / 0.22) 8%,
            rgb(0 0 0 / 0.62) 18%,
            #000 30%,
            #000 70%,
            rgb(0 0 0 / 0.62) 82%,
            rgb(0 0 0 / 0.22) 92%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            transparent 0%,
            rgb(0 0 0 / 0.22) 8%,
            rgb(0 0 0 / 0.62) 18%,
            #000 30%,
            #000 70%,
            rgb(0 0 0 / 0.62) 82%,
            rgb(0 0 0 / 0.22) 92%,
            transparent 100%
        );
    }

    .hero-media__fade {
        background:
            radial-gradient(
                ellipse 68% 82% at 50% 46%,
                transparent 0%,
                rgb(20 19 20 / 0.18) 40%,
                rgb(20 19 20 / 0.55) 68%,
                var(--color-background, #141314) 100%
            ),
            linear-gradient(
                to right,
                var(--color-background, #141314) 0%,
                rgb(20 19 20 / 0.98) 26%,
                rgb(20 19 20 / 0.72) 38%,
                transparent 54%
            );
    }

    .hero-media__blur-bridge {
        left: 18%;
        width: 28%;
        -webkit-backdrop-filter: blur(32px) saturate(1.05);
        backdrop-filter: blur(32px) saturate(1.05);
    }
}

@media (max-width: 767px) {
    .hero {
        min-height: 100svh;
    }

    .hero-scroll-push,
    .hero-scroll-push > .grid-layout {
        min-height: calc(100svh - var(--spacing-header));
    }

    .hero-content-col {
        min-height: calc(100svh - var(--spacing-header));
        align-items: center;
        text-align: center;
        justify-content: space-between;
        padding-bottom: clamp(24px, 7svh, 56px);
    }

    .hero-content-col > div:first-child {
        padding-top: clamp(34px, 9svh, 82px);
        gap: clamp(18px, 4.8vw, 26px);
        align-items: center;
        text-align: center;
    }

    .hero-headline {
        width: 100%;
        max-width: calc(100vw - 64px);
        font-size: clamp(2.55rem, 12vw, 3.55rem);
        line-height: 0.92;
        text-align: center;
    }

    .hero-headline [data-line] {
        display: block;
        max-width: 100%;
    }

    .hero-headline br {
        display: none;
    }

    .hero-headline [data-line-inner] {
        white-space: normal !important;
        text-wrap: balance;
    }

    .hero-subtext {
        width: 100%;
        max-width: calc(100vw - 64px);
        color: rgb(238 238 238 / 0.84);
    }

    .hero-cta-group {
        align-items: center;
        text-align: center;
    }

    .hero-content-col > div:last-child {
        align-items: center;
        text-align: center;
        margin-top: 1.5rem;
    }

    .hero-logo {
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .hero-media__stage {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .hero-media__video {
        object-position: 58% center;
        transform: scale(1.01);
        filter: saturate(1.06);
    }

    .hero-media__fade,
    .hero-media__blur-bridge {
        display: none;
    }

    .hero-media__ambient {
        opacity: 0.42;
        animation: none;
    }

    .hero-media__tint {
        opacity: 0.48;
    }

    .hero-media__grain {
        opacity: 0.18;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-headline [data-line-inner] {
        opacity: 1;
    }

    .hero-headline [data-brand-rect],
    .hero-headline [data-fg-rect] {
        display: none;
    }

    .hero-subtext {
        visibility: visible !important;
    }

    .hero-subtext .split-line {
        transform: none !important;
    }

    .hero-logo {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-cta-group {
        opacity: 1;
        transform: none;
    }

    .hero-cta-link {
        opacity: 1;
        transform: none;
    }

    .hero-trust-label {
        opacity: 1;
        transform: none;
    }

    .hero-media {
        opacity: 1;
    }

    .hero-media__ambient {
        animation: none;
    }
}