/* ==========================================================================
   Site entrance animation (logo intro)
   Plays once per browser session on the first page visited:
     1. the logo icon rolls in from the left and fades in
     2. the logo text slides out from behind the icon and fades in
     3. the overlay fades away to reveal the page
   Hidden unless the inline <head> script adds html.intro-play, so without JS
   (or with prefers-reduced-motion, or on later pages) nothing is shown.
   ========================================================================== */

.site-intro { display: none; }

html.intro-play,
html.intro-play body { overflow: hidden; }

html.intro-play .site-intro {
    --intro-h: clamp(40px, 6.5vw, 76px);              /* logo height */
    --intro-icon-w: calc(var(--intro-h) * 297 / 305); /* icon image ratio */
    --intro-gap: calc(var(--intro-h) * 50 / 305);     /* original icon–text gap */

    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(40% 35% at 50% 50%, rgba(67, 165, 254, 0.14), transparent 70%),
        var(--DarkBg, #05051e);
    cursor: pointer;
    animation: intro-out 0.6s ease 2.45s forwards;
}

.site-intro__logo {
    display: flex;
    align-items: center;
    max-width: 92vw;
}

.site-intro__icon {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: var(--intro-icon-w);
    height: var(--intro-h);
    opacity: 0;
    animation: intro-roll 1.15s cubic-bezier(0.2, 0.75, 0.25, 1) 0.2s forwards;
}

/* The clip box starts under the middle of the icon, so the text appears to
   slide out from behind it */
.site-intro__text-clip {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    margin-left: calc(var(--intro-icon-w) * -0.5);
    padding-left: calc(var(--intro-icon-w) * 0.5 + var(--intro-gap));
}

.site-intro__text {
    display: block;
    width: auto;
    height: var(--intro-h);
    max-width: none;
    opacity: 0;
    animation: intro-text 0.85s cubic-bezier(0.2, 0.8, 0.25, 1) 1.2s forwards;
}

@keyframes intro-roll {
    0%   { opacity: 0; transform: translateX(-38vw) rotate(-720deg); }
    30%  { opacity: 1; }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@keyframes intro-text {
    0%   { opacity: 0; transform: translateX(-55%); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes intro-out {
    to { opacity: 0; visibility: hidden; }
}

/* Click / key press skips straight to the fade-out */
html.intro-play .site-intro.is-skipping {
    animation: intro-out 0.3s ease forwards;
}