@charset "utf-8";

/* ============================================================
   Site intro — logo construction animation
   Plays once per session on the home page.
   ============================================================ */

.site_intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background:
        radial-gradient(circle at 50% 45%, rgba(0, 168, 212, 0.28), transparent 55%),
        radial-gradient(circle at 30% 70%, rgba(96, 215, 255, 0.12), transparent 50%),
        linear-gradient(180deg, #050a1c 0%, #0a1430 50%, #14213d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    animation: introFade 0.9s 4.6s forwards;
}

/* Subtle ambient grid */
.site_intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(96, 215, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 215, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    opacity: 0;
    animation: introGridFade 0.8s 0.1s ease-out forwards;
}

@keyframes introGridFade {
    to { opacity: 1; }
}

/* Skip hint */
.intro_skip {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    opacity: 0;
    animation: introSkipFade 0.6s 3s ease-out forwards;
    pointer-events: none;
}

@keyframes introSkipFade {
    to { opacity: 1; }
}

.intro_logo {
    width: clamp(220px, 32vw, 360px);
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 0 0 rgba(0, 168, 212, 0));
    animation: introGlowPulse 1s 3.2s ease-in-out;
}

@keyframes introGlowPulse {
    0%   { filter: drop-shadow(0 0 8px rgba(0, 168, 212, 0.3)); transform: scale(1); }
    50%  { filter: drop-shadow(0 0 40px rgba(96, 215, 255, 0.85)); transform: scale(1.06); }
    100% { filter: drop-shadow(0 0 18px rgba(96, 215, 255, 0.55)); transform: scale(1); }
}

/* --- Outer hex stroke --- */
.intro_hex {
    stroke-dasharray: 720;
    stroke-dashoffset: 720;
    animation: introDrawHex 1.4s 0.55s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes introDrawHex {
    to { stroke-dashoffset: 0; }
}

/* --- Inner star (filled) --- */
.intro_star {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.4) rotate(-30deg);
    animation: introStar 1s 1.5s cubic-bezier(0.25, 1.4, 0.5, 1) forwards;
}

@keyframes introStar {
    0%   { opacity: 0; transform: scale(0.4) rotate(-30deg); }
    60%  { opacity: 1; transform: scale(1.08) rotate(4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --- White crossing lines --- */
.intro_cross {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: introDrawCross 1.1s 2.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes introDrawCross {
    to { stroke-dashoffset: 0; }
}

/* --- Corner dots — each pops in scaled from 0 --- */
.intro_dot {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
}

.intro_dot_1 { animation: introDot 0.55s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.intro_dot_2 { animation: introDot 0.55s 0.13s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.intro_dot_3 { animation: introDot 0.55s 0.21s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.intro_dot_4 { animation: introDot 0.55s 0.29s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.intro_dot_5 { animation: introDot 0.55s 0.37s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.intro_dot_6 { animation: introDot 0.55s 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

@keyframes introDot {
    0%   { opacity: 0; transform: scale(0); }
    70%  { opacity: 1; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes introFade {
    0%   { opacity: 1; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Skip-on-click state — collapse immediately */
.site_intro.intro_dismissing {
    animation: introFade 0.4s forwards;
}

/* Respect prefers-reduced-motion — skip animation, just show static then fade fast */
@media (prefers-reduced-motion: reduce) {
    .intro_hex,
    .intro_star,
    .intro_cross,
    .intro_dot,
    .intro_logo {
        animation: none !important;
    }

    .intro_hex { stroke-dashoffset: 0; }
    .intro_cross { stroke-dashoffset: 0; }
    .intro_star { opacity: 1; transform: none; }
    .intro_dot { opacity: 1; transform: scale(1); }

    .site_intro {
        animation: introFade 0.5s 1.4s forwards;
    }
}

@media (max-width: 520px) {
    .intro_logo {
        width: 70vw;
    }
}