html.acintro-lock,
body.acintro-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.acintro {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: var(--acintro-overlay, rgba(7, 20, 29, .88));
    color: var(--acintro-text, #fff);
    font-family: var(--acintro-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    backdrop-filter: blur(var(--acintro-blur, 8px)) saturate(.88);
    -webkit-backdrop-filter: blur(var(--acintro-blur, 8px)) saturate(.88);
    transition: opacity 260ms ease, visibility 260ms ease;
    isolation: isolate;
}

.acintro[hidden] { display: none !important; }

.acintro.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.acintro.is-leaving {
    opacity: 0;
    pointer-events: none;
    transition-duration: var(--acintro-exit, 700ms);
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.acintro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.055), transparent 42%),
        linear-gradient(125deg, rgba(255,255,255,.025), transparent 35%, rgba(255,255,255,.018));
}

.acintro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    box-shadow: inset 0 0 140px rgba(0,0,0,.24);
}

.acintro__ambient {
    position: absolute;
    width: min(62vw, 760px);
    height: min(62vw, 760px);
    border-radius: 999px;
    filter: blur(90px);
    opacity: .13;
    background: var(--acintro-accent, #62c7d8);
    z-index: -1;
    animation: acintro-float 7s ease-in-out infinite alternate;
}

.acintro__ambient--one { top: -28%; right: -16%; }
.acintro__ambient--two { bottom: -38%; left: -18%; opacity: .08; animation-delay: -2s; }

.acintro__grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .085;
    background-image:
        linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(circle at center, #000, transparent 74%);
    -webkit-mask-image: radial-gradient(circle at center, #000, transparent 74%);
}

.acintro__brand {
    position: absolute;
    top: clamp(24px, 4vw, 48px);
    left: clamp(24px, 5vw, 72px);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    opacity: .68;
}

.acintro__brand-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--acintro-accent, #62c7d8);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--acintro-accent, #62c7d8) 15%, transparent);
}

.acintro__stage {
    position: relative;
    width: min(1120px, 88vw);
    min-height: min(420px, 52vh);
    display: grid;
    place-items: center;
    text-align: center;
}

.acintro__profession-wrap,
.acintro__final {
    grid-area: 1 / 1;
    width: 100%;
}

.acintro__profession-wrap {
    opacity: 1;
    transition: opacity 320ms ease, transform 450ms cubic-bezier(.22,1,.36,1);
}

.acintro.show-final .acintro__profession-wrap {
    opacity: 0;
    transform: translateY(-12px) scale(.985);
}

.acintro__eyebrow {
    margin-bottom: clamp(14px, 2vw, 22px);
    color: var(--acintro-accent, #62c7d8);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    opacity: .9;
}

.acintro__profession {
    min-height: 1.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 2vw;
    font-size: clamp(32px, 4.8vw, var(--acintro-profession-desktop, 54px));
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.035em;
    text-wrap: balance;
    opacity: 0;
    transform: translateY(24px) scale(.975);
    filter: blur(8px);
    transition:
        opacity var(--acintro-word-transition, 260ms) cubic-bezier(.22,1,.36,1),
        transform var(--acintro-word-transition, 260ms) cubic-bezier(.22,1,.36,1),
        filter var(--acintro-word-transition, 260ms) ease;
    will-change: opacity, transform, filter;
}

.acintro__profession.is-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.acintro__profession.is-out {
    opacity: 0;
    transform: translateY(-18px) scale(1.015);
    filter: blur(7px);
}

.acintro__rule {
    width: min(280px, 44vw);
    height: 1px;
    margin: clamp(26px, 4vw, 42px) auto 0;
    overflow: hidden;
    background: rgba(255,255,255,.18);
}

.acintro__rule span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--acintro-accent, #62c7d8);
    transition: transform 280ms cubic-bezier(.22,1,.36,1);
}

.acintro__final {
    opacity: 0;
    transform: translateY(18px) scale(.985);
    pointer-events: none;
    transition: opacity 650ms cubic-bezier(.22,1,.36,1), transform 800ms cubic-bezier(.22,1,.36,1);
}

.acintro.show-final .acintro__final {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.acintro__final-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto clamp(22px, 3.2vw, 34px);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 0;
    transform: translateY(14px) scale(.985);
    transition: opacity 700ms cubic-bezier(.22,1,.36,1), transform 800ms cubic-bezier(.22,1,.36,1);
}

.acintro.show-final .acintro__final-logo-wrap {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.acintro__final-logo {
    display: block;
    width: min(56vw, 560px);
    max-width: 100%;
    height: auto;
    max-height: 120px;
    object-fit: contain;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,.18));
}

.acintro__final-small {
    margin-bottom: clamp(8px, 1.2vw, 14px);
    font-size: clamp(14px, 1.5vw, 20px);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
}

.acintro__final-large {
    font-size: clamp(44px, 7.4vw, var(--acintro-headline-desktop, 86px));
    line-height: .94;
    font-weight: 800;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.acintro__final-medium {
    margin-top: clamp(8px, 1.4vw, 16px);
    color: var(--acintro-accent, #62c7d8);
    font-size: clamp(24px, 3.6vw, 46px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.035em;
}

.acintro__final-mark {
    width: 42px;
    height: 3px;
    margin: clamp(24px, 3vw, 36px) auto 0;
    border-radius: 99px;
    background: var(--acintro-accent, #62c7d8);
    transform: scaleX(.3);
    opacity: 0;
    transition: transform 650ms 260ms cubic-bezier(.22,1,.36,1), opacity 500ms 260ms ease;
}

.acintro.show-final .acintro__final-mark {
    transform: scaleX(1);
    opacity: 1;
}

.acintro__skip {
    position: absolute;
    right: clamp(22px, 4vw, 52px);
    bottom: clamp(20px, 3.5vw, 42px);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--acintro-text, #fff);
    font: 600 12px/1 var(--acintro-font, sans-serif);
    letter-spacing: .08em;
    opacity: .56;
    cursor: pointer;
    transition: opacity 180ms ease, background 180ms ease, transform 180ms ease;
}

.acintro__skip:hover,
.acintro__skip:focus-visible {
    opacity: 1;
    background: rgba(255,255,255,.08);
    transform: translateX(2px);
    outline: none;
}

.acintro__skip svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.acintro__corner {
    position: absolute;
    width: 42px;
    height: 42px;
    opacity: .23;
}

.acintro__corner--tl {
    top: 24px;
    right: 24px;
    border-top: 1px solid var(--acintro-accent, #62c7d8);
    border-right: 1px solid var(--acintro-accent, #62c7d8);
}

.acintro__corner--br {
    left: 24px;
    bottom: 24px;
    border-left: 1px solid var(--acintro-accent, #62c7d8);
    border-bottom: 1px solid var(--acintro-accent, #62c7d8);
}

@keyframes acintro-float {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(-4%,5%,0) scale(1.08); }
}

@media (max-width: 782px) {
    .acintro__brand {
        top: 22px;
        left: 22px;
        max-width: calc(100vw - 92px);
        font-size: 9px;
        letter-spacing: .18em;
    }

    .acintro__grid { background-size: 38px 38px; }

    .acintro__stage {
        width: 92vw;
        min-height: 46vh;
    }

    .acintro__profession {
        padding: 0 3vw;
        font-size: min(10vw, var(--acintro-profession-mobile, 30px));
        line-height: 1.08;
    }

    .acintro__final-logo-wrap {
        margin-bottom: 18px;
        padding: 0 4vw;
    }

    .acintro__final-logo {
        width: min(72vw, 320px);
        max-height: 78px;
    }

    .acintro__final-small {
        font-size: 12px;
        letter-spacing: .12em;
    }

    .acintro__final-large {
        padding: 0 2vw;
        font-size: min(13vw, var(--acintro-headline-mobile, 48px));
        line-height: .96;
    }

    .acintro__final-medium {
        padding: 0 3vw;
        font-size: clamp(22px, 7.2vw, 34px);
        line-height: 1.04;
    }

    .acintro__skip {
        right: 16px;
        bottom: 14px;
    }

    .acintro__corner--tl { top: 16px; right: 16px; }
    .acintro__corner--br { left: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .acintro__ambient,
    .acintro * {
        animation: none !important;
    }
}

@supports not (backdrop-filter: blur(1px)) {
    .acintro { background: rgba(7,20,29,.96); }
}
