/* Cinematic home-page reveal with traced rigid plates and a calibrated camera. */
.homepage-intro[hidden] {
    display: none !important;
}

.homepage-intro {
    --intro-duration: 4.6s;
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    place-items: center;
    color: #e8fbff;
    background: #050610;
    opacity: 1;
    visibility: visible;
    transition: opacity 680ms ease, visibility 680ms ease;
}

.homepage-intro.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Rigid cutout plates are composited in the canvas without mesh deformation. */
.homepage-intro__scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--intro-image) center / cover no-repeat;
    /* Keep the static end-frame hidden while the first dolly frame is prepared. */
    opacity: 0;
}

.homepage-intro.is-playing .homepage-intro__scene {
    opacity: 1;
}
.homepage-intro__camera,
.homepage-intro__shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.homepage-intro__shade {
    background: linear-gradient(180deg,
        rgba(10, 10, 26, .7) 0%,
        rgba(26, 10, 46, .5) 50%,
        rgba(10, 10, 26, .9) 100%);
}

.homepage-intro__copy {
    position: absolute;
    left: clamp(22px, 6vw, 88px);
    bottom: clamp(36px, 9vh, 96px);
    z-index: 2;
    max-width: min(76vw, 680px);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .88);
    opacity: 0;
    transform: translateY(18px);
}

.homepage-intro.is-playing .homepage-intro__copy {
    animation: intro-copy-reveal var(--intro-duration) ease both;
}

.homepage-intro__eyebrow,
.homepage-intro__caption {
    font: 500 clamp(.62rem, 1vw, .8rem)/1.5 var(--font-display, monospace);
    letter-spacing: .19em;
}

.homepage-intro__eyebrow {
    color: #9af9f2;
}

.homepage-intro__eyebrow span {
    color: #ff6ec7;
    padding: 0 .4em;
}

.homepage-intro__title {
    margin: 9px 0 7px;
    color: #f8fbff;
    font: clamp(1.35rem, 3vw, 2.7rem)/1.1 var(--font-heading, sans-serif);
    letter-spacing: .035em;
    text-shadow: 0 0 22px rgba(0, 255, 255, .25), 0 3px 20px rgba(0, 0, 0, .95);
}

.homepage-intro__caption {
    color: rgba(232, 251, 255, .77);
    font-size: clamp(.5rem, .82vw, .68rem);
}

.homepage-intro__skip {
    position: absolute;
    z-index: 3;
    top: max(18px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(117, 241, 235, .6);
    border-radius: 2px;
    color: #dffdfb;
    background: rgba(4, 12, 23, .62);
    box-shadow: 3px 3px 0 rgba(255, 0, 255, .5);
    font: .7rem var(--font-display, monospace);
    letter-spacing: .1em;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.homepage-intro__skip span:last-child {
    color: #74f5ef;
    font-size: 1rem;
}

.homepage-intro__skip:hover,
.homepage-intro__skip:focus-visible {
    color: #051015;
    background: #8bfaf2;
    outline: 2px solid #ff77dc;
    outline-offset: 3px;
    transform: translate(-2px, -2px);
}

.homepage-intro__progress {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    height: 2px;
    overflow: hidden;
    background: rgba(223, 255, 251, .12);
}

.homepage-intro__progress span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(var(--intro-progress, 0));
    transform-origin: left;
    background: linear-gradient(90deg, #71f5ed, #ff64d6);
}

.homepage-intro.is-playing .homepage-intro__progress span {
    transform: scaleX(var(--intro-progress, 0));
}

.home-page.home-intro-pending {
    overflow: hidden;
}

.home-page.home-intro-pending .hero .hero-content,
.home-page.home-intro-pending .hero .scroll-indicator {
    opacity: 0;
    visibility: hidden;
}

.home-page.home-intro-revealing .hero .hero-content {
    animation: intro-hero-arrive 900ms cubic-bezier(.2, .75, .2, 1) both;
}

.home-page.home-intro-revealing .hero .scroll-indicator {
    animation: intro-hero-arrive 900ms 140ms ease both;
}

@keyframes intro-copy-reveal {
    0%, 15% { opacity: 0; transform: translateY(18px); }
    28%, 70% { opacity: 1; transform: translateY(0); }
    88%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes intro-hero-arrive {
    from { opacity: 0; visibility: visible; transform: translateY(18px); }
    to { opacity: 1; visibility: visible; transform: translateY(0); }
}

@media (max-width: 768px) {
    .homepage-intro__copy { bottom: max(48px, calc(env(safe-area-inset-bottom) + 40px)); max-width: 78vw; }
    .homepage-intro__skip { min-height: 44px; gap: 8px; font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
    .home-page.home-intro-revealing .hero .hero-content,
    .home-page.home-intro-revealing .hero .scroll-indicator {
        animation: none;
    }

    .homepage-intro {
        display: none !important;
        transition: none;
    }

    .home-page.home-intro-pending {
        overflow: auto;
    }

    .home-page.home-intro-pending .hero .hero-content,
    .home-page.home-intro-pending .hero .scroll-indicator {
        opacity: 1;
        visibility: visible;
    }
}