/* --- animations/intro.css --- */

html, body {
    background-color: #000000;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
    perspective: 1400px;
    transition: background-color 0.5s ease-in-out;
}

/* SALIDA SUAVE hacia el home (la agrega home.js):
   el fondo pasa a negro enseguida y después todo el overlay se desvanece,
   así no hay corte brusco ni "pantallazo" entre la intro y el home. */
.intro-overlay.is-leaving {
    background-color: #000000;
    opacity: 0;
    pointer-events: none;
    transition: background-color 0.35s ease-out,
                opacity 1s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}

.intro-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body, sans-serif);
    font-size: clamp(2.6rem, 7vw, 3.9rem);
    letter-spacing: 0.1em;
    color: #000000;
    text-transform: uppercase;
    transform-style: preserve-3d;
    transform: scale(1);
    transition: transform 3.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.intro-container.subtle-zoom {
    transform: scale(1.14);
}

.intro-letter {
    display: inline-block;
    width: 1.35em;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- ASTERISCO / EMOJIS DEL SCRAMBLING --- */
.intro-asset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55em;
    height: 1.50em;
    vertical-align: middle;
    position: relative;
    /* rotate(0deg) explícito para que la transición hacia rotate(180deg) sea limpia */
    transform: translateY(-0.25em) translateX(-0.05em) scale(1) rotate(0deg);

    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-asset::before {
    content: '';
    position: absolute;
    width: 0.9em;
    height: 0.9em;
    background-color: #ffffff;
    border-radius: 50%;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.intro-asset img {
    width: 1.55em;
    height: 1.50em;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 2;
}

/* ==========================================================
   FUSIÓN: el asterisco crece en el centro de la pantalla y
   F, C y K se meten por detrás (las anima intro.js).
   Variables que calcula intro.js:
     --star-dx   : cuánto se corre el asterisco para quedar centrado
     --star-k    : cuánto crece
     --grow-time : duración del crecimiento
   ========================================================== */
.intro-letter {
    position: relative;
    z-index: 1;                    /* las letras quedan por detrás del asterisco */
}

.intro-container .intro-asset {
    z-index: 3;
}

.intro-container.merge-stage .intro-asset {
    transform: translateY(-0.25em)
               translateX(calc(-0.05em + var(--star-dx, 0px)))
               scale(var(--star-k, 2.4))
               rotate(180deg);
    transition: transform var(--grow-time, 900ms) cubic-bezier(0.16, 1, 0.3, 1);
}

/* "Golpe" suave cuando las letras terminan de entrar */
.intro-container.merged .intro-asset img {
    animation: starAbsorb 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes starAbsorb {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* Mientras espera que termine de cargar la página: respira y gira apenas */
.intro-asset.is-waiting img {
    animation: starBreath 1.6s ease-in-out infinite;
}

@keyframes starBreath {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.07) rotate(12deg); }
}

/* ==========================================================
   ZOOM FINAL: copia fija del asterisco
   intro.js la coloca exactamente donde quedó el original
   (--sx, --sy, --ss), cambia al SVG y la hace girar + crecer.
   ========================================================== */
.intro-zoom {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;
    width: 1.55em;
    height: 1.5em;
    font-size: clamp(2.6rem, 7vw, 3.9rem);   /* igual que .intro-container */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translate(-50%, -50%)
               translate(var(--sx, 0px), var(--sy, 0px))
               scale(var(--ss, 1))
               rotate(180deg);
    transform-origin: center center;
}

.intro-zoom img {
    display: block;
    width: 1.55em;
    height: 1.5em;
    object-fit: contain;
    transform-origin: center center;
    /* Sin will-change: rompe la nitidez del SVG al hacer zoom */
}

/* Si la intro ya se vio en esta pestaña, no se muestra (lo decide intro-gate.js) */
html.skip-intro .intro-overlay {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .intro-asset.is-waiting img,
    .intro-container.merged .intro-asset img {
        animation: none;
    }
}