.pixel-transition {
    position: fixed;
    inset: 0;
    z-index: 160;
    pointer-events: none;
}

.pixel-transition canvas,
.intro-pixels {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pixel-transition[data-phase="out"] {
    pointer-events: auto;
    cursor: progress;
}

html[data-pixel-arrival]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 160;
    pointer-events: none;
    background: #070e24;
    animation: pixel-cover-failsafe 1.8s step-end forwards;
}

.pixel-fallback {
    background: repeating-linear-gradient(90deg, #070e24 0 22px, #162347 22px 24px);
    animation: pixel-fallback var(--pixel-duration, 1000ms) steps(12, end) both;
}

.pixel-fallback[data-phase="in"] {
    animation-direction: reverse;
}

.intro-active { overflow: hidden; }

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 170;
    overflow: hidden;
    isolation: isolate;
    color: #edfbff;
    background: #070e24;
}

.intro-active .intro-overlay {
    display: grid;
    place-items: center;
    background: #070e24;
    animation: pixel-intro-exit 4s linear both;
}

.intro-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 26% 27%, #143a80a8, transparent 55%),
        radial-gradient(ellipse at 77% 66%, #9e341974, transparent 58%),
        radial-gradient(ellipse at 50% 80%, #3e237c77, transparent 46%),
        #070e24;
    animation: none;
}

.intro-pixels {
    pointer-events: none;
    opacity: .84;
}

.intro-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(450px, 77vw, 69vh);
    aspect-ratio: 1;
    isolation: isolate;
}

.intro-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #659ded3d;
    box-shadow: inset 0 0 40px #1083d329, 0 0 36px #2a87e72b;
    background:
        linear-gradient(#5fefff, #5fefff) top left / 22% 4px,
        linear-gradient(#5fefff, #5fefff) top left / 4px 16%,
        linear-gradient(#ffac55, #ffac55) bottom right / 22% 4px,
        linear-gradient(#ffac55, #ffac55) bottom right / 4px 16%,
        linear-gradient(#fc7fbe, #fc7fbe) top right / 12% 3px,
        linear-gradient(#fc7fbe, #fc7fbe) top right / 3px 12%,
        linear-gradient(#526cde, #526cde) bottom left / 12% 3px,
        linear-gradient(#526cde, #526cde) bottom left / 3px 12%,
        linear-gradient(135deg, #122650c7, #101a30b8 68%, #5923189e);
    background-repeat: no-repeat;
    animation: intro-stage-on 720ms steps(10, end) both;
}

.intro-stage::after {
    content: "";
    position: absolute;
    inset: 10% -7% auto;
    height: max(4px, .85%);
    z-index: 2;
    background: repeating-linear-gradient(90deg, #8aeaff 0 14px, #3d6ef0 14px 22px, #ffba61 22px 30px, #ff7eb4 30px 37px);
    box-shadow: 0 0 15px #4adaff, 0 0 46px #3d6ef09c;
    opacity: 0;
    animation: intro-layer-scan 2300ms 240ms steps(28, end) both;
}

.intro-grid {
    position: absolute;
    inset: 7%;
    background:
        repeating-linear-gradient(0deg, #5b92f826 0 1px, transparent 1px 7.7%),
        repeating-linear-gradient(90deg, #5b92f826 0 1px, transparent 1px 7.7%);
    mask-image: radial-gradient(circle, transparent 21%, #000 78%);
    opacity: .75;
}

.intro-logo-frame {
    position: relative;
    width: 59%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.intro-logo-frame::before {
    position: absolute;
    content: "";
    z-index: -1;
    inset: -11%;
    background: conic-gradient(from -24deg, #13acfa09, #39d9fadb 23%, transparent 36%, #ff965eed 52%, #fa58ba1a 74%, #738bf873);
    opacity: .65;
    filter: blur(32px);
    animation: intro-pulse 1500ms 950ms ease-in-out 2 alternate both;
}

.intro-logo-frame img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 17px #42dcfd74) drop-shadow(0 0 30px #ff8f5342);
    animation: intro-logo-print 1750ms 260ms steps(23, end) both;
}

.intro-skip {
    position: absolute;
    right: max(22px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: 7px;
    z-index: 3;
    min-height: 44px;
    padding: 7px 16px;
    border: 1px solid #61dbea93;
    border-radius: 4px;
    background: #101a34;
    color: #edfbff;
}

.intro-skip:hover,
.intro-skip:focus-visible {
    background: #1a3157;
    outline-color: #76e5fc;
}

@keyframes pixel-cover-failsafe {
    to { visibility: hidden; }
}

@keyframes pixel-fallback {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
}

@keyframes pixel-intro-exit {
    0%, 91% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes intro-stage-on {
    from { opacity: .42; scale: .93; }
    to { opacity: 1; scale: 1; }
}

@keyframes intro-logo-print {
    0% { clip-path: inset(100% 0 0); opacity: .66; }
    88%, 100% { clip-path: inset(0); opacity: 1; }
}

@keyframes intro-layer-scan {
    0% { top: 87%; opacity: 0; }
    7% { opacity: .9; }
    83% { opacity: .95; }
    100% { top: 8%; opacity: 0; }
}

@keyframes intro-pulse {
    from { opacity: .35; scale: .88; }
    to { opacity: .78; scale: 1.13; }
}

@media (prefers-reduced-motion: reduce) {
    .pixel-transition,
    html[data-pixel-arrival]::after,
    .intro-active .intro-overlay { display: none; }
    .intro-active { overflow: auto; }
}