/* Arrival scene. Counterpart to PortalTransitionOverlay.razor.css — EDIT THE TWO TOGETHER.
   The route is already drawn and the destination card already lit, so the two documents read as
   one continuous scene. Not scoped CSS: painted by a plain script before Blazor exists. */

.pa-scene {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #eaf1ff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* No fade in: the departing app left this picture on screen, so anything easing in would
       flash between the two documents. Opaque from the first frame because on this origin the
       image is always a fresh cache miss. */
    background-color: #0b1220;
}

.pa-backdrop {
    position: absolute;
    inset: 0;
    background-color: #0b1220;
    background-image: var(--portal-transition-image,
        url("../img/portal-transition-bg.webp"));
    background-size: cover;
    background-position: center;
    /* Picks the drift up where the departing scene left it. */
    transform: scale(1.12);
    animation: pa-drift 26s ease-out forwards;
}

.pa-veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(6, 14, 30, .34) 0%, rgba(6, 14, 30, .72) 70%),
        linear-gradient(180deg, rgba(6, 14, 30, .62) 0%, rgba(6, 14, 30, .38) 45%, rgba(6, 14, 30, .78) 100%);
}

.pa-content {
    position: relative;
    width: min(1100px, 92vw);
    text-align: center;
}

/* ---- masthead ---------------------------------------------------------- */

.pa-helm {
    width: 54px;
    height: 54px;
    fill: none;
    stroke: var(--portal-transition-accent, #5b8def);
    stroke-width: 1.6;
    filter: drop-shadow(0 0 10px rgba(91, 141, 239, .55));
    animation: pa-helm-turn 22s linear infinite;
}

.pa-helm-hub {
    fill: var(--portal-transition-accent, #5b8def);
    stroke: none;
}

.pa-title {
    margin: .35rem 0 0;
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.pa-kicker {
    margin: .2rem 0 0;
    font-size: clamp(.72rem, 1.5vw, .95rem);
    font-weight: 500;
    letter-spacing: .42em;
    text-indent: .42em;
    text-transform: uppercase;
    color: #9dc0ff;
}

.pa-tagline {
    margin: .9rem 0 0;
    font-size: clamp(.86rem, 1.7vw, 1.05rem);
    color: rgba(234, 241, 255, .82);
}

/* ---- route ------------------------------------------------------------- */

.pa-route {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.5rem, 2vw, 1.5rem);
    margin-top: clamp(1.2rem, 3.5vh, 2.6rem);
}

.pa-card {
    flex: 0 0 auto;
    width: clamp(120px, 17vw, 200px);
    padding: clamp(.8rem, 2vw, 1.4rem) .6rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Arrived: the destination is lit from the first frame. */
.pa-to-right .pa-card-right,
.pa-to-left .pa-card-left {
    border-color: rgba(143, 194, 255, .85);
    background: rgba(91, 141, 239, .18);
    box-shadow: 0 0 26px rgba(91, 141, 239, .45);
}

.pa-card-icon {
    width: clamp(28px, 4vw, 40px);
    height: clamp(28px, 4vw, 40px);
    fill: none;
    stroke: #eaf1ff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pa-card-label {
    display: block;
    margin-top: .55rem;
    font-size: clamp(.78rem, 1.5vw, .98rem);
    color: #eaf1ff;
}

.pa-track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: clamp(120px, 17vw, 190px);
}

.pa-compass {
    position: absolute;
    inset: 50% auto auto 50%;
    width: clamp(120px, 17vw, 190px);
    height: clamp(120px, 17vw, 190px);
    transform: translate(-50%, -50%);
    fill: none;
    stroke: rgba(210, 228, 255, .3);
    stroke-width: 1;
}

.pa-compass-ring {
    transform-origin: 100px 100px;
    animation: pa-compass-turn 34s linear infinite;
}

.pa-compass-inner {
    stroke-opacity: .5;
}

.pa-needle {
    fill: rgba(233, 240, 255, .75);
    stroke: none;
}

.pa-rose-letter {
    fill: rgba(210, 228, 255, .7);
    stroke: none;
    font-size: 15px;
    text-anchor: middle;
    font-family: inherit;
}

.pa-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Already drawn; it only breathes, so the picture is alive while the app loads. */
.pa-path {
    fill: none;
    stroke: var(--portal-transition-accent, #5b8def);
    stroke-width: 1.6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px rgba(91, 141, 239, .65));
    animation: pa-pulse 3.2s ease-in-out infinite;
}

.pa-vessel {
    position: absolute;
    inset: 50% auto auto 50%;
    width: clamp(46px, 6.5vw, 74px);
    height: auto;
    transform: translate(-50%, -50%);
    fill: none;
    stroke: var(--portal-transition-accent, #7fb0ff);
    stroke-width: 1.8;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px rgba(91, 141, 239, .8));
    animation: pa-vessel-bob 4.2s ease-in-out infinite;
}

/* ---- footer ------------------------------------------------------------ */

.pa-progress {
    width: min(420px, 60vw);
    height: 6px;
    margin: clamp(1.2rem, 3.5vh, 2.4rem) auto 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}

/* Blazor's own loader. Nothing invents a number: before the runtime reports, width is zero. */
.pa-progress-fill {
    width: var(--blazor-load-percentage, 0%);
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #4f8bf0, #8fc2ff);
    box-shadow: 0 0 12px rgba(91, 141, 239, .8);
    transition: width .3s ease-in-out;
}

.pa-caption {
    margin: .9rem 0 0;
    font-size: clamp(.68rem, 1.4vw, .82rem);
    font-weight: 500;
    letter-spacing: .3em;
    text-indent: .3em;
    text-transform: uppercase;
    color: rgba(234, 241, 255, .72);
}

/* ---- keyframes --------------------------------------------------------- */

@keyframes pa-drift {
    to {
        transform: scale(1.2);
    }
}

@keyframes pa-helm-turn {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pa-compass-turn {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pa-pulse {
    0%, 100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }
}

@keyframes pa-vessel-bob {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -4px;
    }
}

/* ---- narrow screens ---------------------------------------------------- */

@media (max-width: 620px) {
    .pa-route {
        gap: .35rem;
    }

    .pa-card {
        width: clamp(88px, 26vw, 130px);
        padding: .7rem .4rem;
    }

    .pa-tagline {
        display: none;
    }

    .pa-track {
        height: 110px;
    }
}

/* ---- reduced motion ---------------------------------------------------- */

/* Class from the script; the media query covers the case where that check could not run. */
.pa-reduced .pa-backdrop,
.pa-reduced .pa-helm,
.pa-reduced .pa-compass-ring,
.pa-reduced .pa-path,
.pa-reduced .pa-vessel {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .pa-backdrop,
    .pa-helm,
    .pa-compass-ring,
    .pa-path,
    .pa-vessel {
        animation: none;
    }

    .pa-progress-fill {
        transition: none;
    }
}