/* Splash container - hidden by default, shown via JS only when splash should play */
#gcSplash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
}
#gcSplash.active { display: block !important; pointer-events: auto; }

/* Hide the WHOLE SVG by default. Plain CSS, applied on first paint.
   No race condition possible - GSAP reveals it once timeline is ready. */
#gcLogoSvg { opacity: 0; }

/* While splash is active, hide the real header beneath so it doesn't peek through */
body.gc-splash-active header { opacity: 0; }
/* And dim the rest of the page so it can fade up when splash dissolves */
body.gc-splash-active { overflow: hidden; }
body.gc-splash-active form > *:not(#gcSplash) { opacity: 0; }

.gc-splash-bg {
    position: fixed;
    inset: 0;
    background: var(--lightest-grey, #f5f5f5);
    z-index: 1;
}

.gc-splash-stage {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-logo-wrap {
    height: min(420px, 60vh);
    aspect-ratio: 182 / 260;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, top, left, width, height;
}
@media (max-width: 600px) {
    .gc-logo-wrap {
        height: min(280px, 45vh);
    }
}

.gc-logo-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Each animated part starts invisible - GSAP brings them in */
#gcLogoSvg .gc-anim-part { opacity: 0; }

/* Wordmark - hidden until JS positions and fades it in at arrival */
.gc-wordmark-wrap {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}
.gc-wordmark-wrap svg { width: 100%; height: 100%; display: block; }

/* Header logo - inline SVGs that match the splash exactly so the
   animated SVG hands off to identical static geometry (no aspect or
   subpixel mismatch). */
header .logo .logo-icon-svg { max-width: 4.5rem; height: auto; display: block; transition: max-width 350ms ease-out; }
header .logo .logo-wordmark-svg { max-width: 24rem; height: auto; display: block; transition: max-width 350ms ease-out; }
@media (min-width: 768px) {
    header.header-scrolled .logo .logo-icon-svg { max-width: 3.025rem; }
    header.header-scrolled .logo .logo-wordmark-svg { max-width: 15.73rem; }
}
@media (max-width: 768px) {
    header .logo .logo-icon-svg { max-width: 3.5rem; }
    header .logo .logo-wordmark-svg { max-width: 18rem; }
}