/* Movimiento "premium" del sitio (ver PROYECTO-SOUNDLAB.md 8ee).
   Se carga SIN bloquear el render (preload + onload) porque nada de esto
   hace falta para pintar la primera pantalla. Todo es opcional: si este
   archivo o js/premium.js fallan, el sitio se ve y funciona igual.
   Colores: solo el fucsia de acento (el morado de marca es invisible
   sobre fondo oscuro — ver DESIGN.md). */

/* 1. Barra de progreso de lectura (arriba del todo) */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1100;
    pointer-events: none;
}

.scroll-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #E5007E, #ff5cab);
    transform-origin: 0 0;
    transform: scaleX(0);
}

/* 2. Aparición al hacer scroll. Solo se oculta algo si el JS puso la
   clase "has-reveal" en <html>: sin JS, todo se ve normal. */
html.has-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--rd, 0s),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--rd, 0s);
}

html.has-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

/* 3. Malla de luz animada detrás del hero del home (morado + fucsia de
   marca, muy tenue para no restar contraste al texto blanco). */
.hero.hero-no-image {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero.hero-no-image::before {
    content: "";
    position: absolute;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 50% at 22% 42%, rgba(229, 0, 126, 0.26), transparent 70%),
        radial-gradient(45% 55% at 78% 58%, rgba(49, 39, 130, 0.7), transparent 70%);
    filter: blur(36px);
    animation: premiumMesh 20s ease-in-out infinite alternate;
}

@keyframes premiumMesh {
    from { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
    to   { transform: translate3d(4%, 3%, 0) rotate(9deg) scale(1.1); }
}

@media (max-width: 768px) {
    .hero.hero-no-image::before { filter: blur(24px); }
}

/* 4. Tarjetas con inclinación 3D suave + resplandor fucsia (escritorio). */
.card.has-tilt,
.review-card.has-tilt {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s, border-color 0.3s;
    will-change: transform;
}

.card.has-tilt:hover,
.review-card.has-tilt:hover {
    transition-duration: 0.12s, 0.3s, 0.3s;
    box-shadow: 0 22px 50px -16px rgba(229, 0, 126, 0.45), 0 0 0 1px var(--color-accent);
}

/* Botones: se hunden un poco al presionarlos */
.btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* Quien tiene "reducir movimiento" activado (Windows lo trae a veces
   encendido): se queda lo suave (aparecer con fundido) y se quita lo que
   se mueve de verdad. */
@media (prefers-reduced-motion: reduce) {
    html.has-reveal [data-reveal] {
        transform: none;
        transition: opacity 0.4s;
    }

    .hero.hero-no-image::before { animation: none; }

    .card.has-tilt,
    .review-card.has-tilt { transform: none; }
}