/* ================================= */
/* 1. VISIBILIDAD */
/* ================================= */

html, body { height: 100%; overflow: hidden; background: #000; }   /* página completa de bienvenida, sin scroll */

/* ================================= */
/* 2. CAPA, CANVAS Y LUCES */
/* ================================= */

.intro {
    position: fixed;
    inset: 0;
    z-index: 10000;                         /* por encima de todo */
    background: #000;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    outline: none;
    --mx: 0;                                /* posición del mouse de -1 a 1 (la mueve bienvenida.js) */
    --my: 0;
}

.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Luces grandes y desenfocadas en los bordes. Se desplazan con el mouse (parallax) */
.intro-luces { position: absolute; inset: 0; pointer-events: none; }

.luz {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    mix-blend-mode: screen;
    opacity: 0;
    translate: calc(var(--mx) * var(--k) * 1px) calc(var(--my) * var(--k) * 1px);
    animation: luzEntra 1.8s ease forwards, luzRespira 5s ease-in-out infinite alternate;
}

.luz.l1 { --k: -50; width: 52vmax; height: 52vmax; left: -22vmax; top: -24vmax; background: radial-gradient(circle, #ff1f6d 0%, transparent 66%); }
.luz.l2 { --k: 40;  width: 44vmax; height: 44vmax; right: -24vmax; top: 18%; background: radial-gradient(circle, #ffb000 0%, transparent 66%); animation-delay: 0.3s, 0s; }
.luz.l3 { --k: -36; width: 48vmax; height: 48vmax; left: -18vmax; bottom: -26vmax; background: radial-gradient(circle, #19ff7a 0%, transparent 66%); animation-delay: 0.6s, -2s; }
.luz.l4 { --k: 56;  width: 40vmax; height: 40vmax; right: 8%; bottom: -26vmax; background: radial-gradient(circle, #8a3dff 0%, transparent 66%); animation-delay: 0.9s, -3.5s; }

@keyframes luzEntra { to { opacity: 0.9; } }

@keyframes luzRespira {
    from { transform: scale(0.9); }
    to   { transform: scale(1.18); }
}

/* Halo que sigue al cursor */
.intro-cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(60, 255, 150, 0.32), rgba(255, 40, 120, 0.12) 45%, transparent 70%);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    will-change: transform;
}

.intro.con-cursor .intro-cursor { opacity: 1; }

/* ================================= */
/* 3. TEXTO */
/* ================================= */

.intro-centro {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    pointer-events: none;
    will-change: transform;
}

.intro-pre {
    font-family: var(--sans);
    font-size: clamp(14px, 2.2vw, 22px);
    letter-spacing: 0.45em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 14px;
    min-height: 1.2em;
}

.intro-marca {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(76px, 19vw, 240px);
    line-height: 1;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
    perspective: 900px;
}

/* Cada letra: .l entra con animación, .li reacciona al mouse (lo mueve bienvenida.js) */
.l {
    display: inline-block;
    opacity: 0;
    transform: translateY(70px) rotateX(-80deg);
    filter: blur(14px);
    animation: letraEntra 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--i) * 0.085s + var(--d, 0.2s));
}

.intro-marca .l { --d: 0.9s; }

.li {
    display: inline-block;
    will-change: transform;
    text-shadow: 0 0 14px rgba(60, 255, 150, 0.28);
}

.intro-marca .li { text-shadow: 0 0 26px rgba(60, 255, 150, 0.4), 0 0 80px rgba(255, 40, 120, 0.25); }

@keyframes letraEntra { to { opacity: 1; transform: none; filter: blur(0); } }

.intro-sub {
    font-size: clamp(13px, 1.8vw, 18px);
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.08em;
    opacity: 0;
    transform: translateY(14px);
    animation: subEntra 1s 2.4s ease forwards;
}

.intro-sub::before,
.intro-sub::after {
    content: "";
    display: inline-block;
    width: clamp(30px, 6vw, 70px);
    height: 1px;
    margin: 0 14px;
    vertical-align: middle;
    background: linear-gradient(90deg, transparent, #3dff96);
    box-shadow: 0 0 10px #3dff96;
}

.intro-sub::after { background: linear-gradient(270deg, transparent, #3dff96); }

@keyframes subEntra { to { opacity: 1; transform: none; } }

/* ================================= */
/* 4. PISTA, PROGRESO Y ONDA */
/* ================================= */

.intro-pista {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    opacity: 0;
    animation: pistaEntra 1s 3s ease forwards, pistaLatido 2.2s 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pistaEntra { to { opacity: 1; } }
@keyframes pistaLatido { 50% { opacity: 0.35; } }

/* Barra que se llena mientras llega la entrada automática */
.intro-progreso { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.08); pointer-events: none; }

.intro-progreso i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #19ff7a, #ff1f6d);
    box-shadow: 0 0 14px #19ff7a;
    animation: progresoLleno 8.5s linear forwards;
}

@keyframes progresoLleno { to { width: 100%; } }

/* ================================= */
/* 5. SALIDA Y REVELADO */
/* ================================= */

/* El texto crece y se desenfoca mientras la luz se expande */
.intro.saliendo .intro-centro {
    transition: transform 1s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.7s ease, filter 0.7s ease;
    transform: scale(1.5) !important;      /* !important para ganar al tilt que pone el JS */
    opacity: 0;
    filter: blur(16px);
}

.intro.saliendo .intro-pista,
.intro.saliendo .intro-progreso { opacity: 0; transition: opacity 0.3s ease; animation: none; }

.intro.saliendo .luz { filter: blur(60px) brightness(1.9); transition: filter 0.5s ease; }

/* ================================= */
/* 6. RESPONSIVE */
/* ================================= */

@media (max-width: 720px) {
    .intro-pre { letter-spacing: 0.28em; }
    .intro-pista { bottom: 30px; letter-spacing: 0.16em; font-size: 12px; }
    .intro-cursor { width: 200px; height: 200px; }
}