/* =========================================================
   🎬 Synaris — Motion layer
   ---------------------------------------------------------
   Animaciones de entrada, scroll y micro-interacciones.
   Regla de oro: si el JS no corre, NADA queda invisible
   (los estados iniciales solo aplican con .motion-ready).
   Todo se apaga con prefers-reduced-motion.
   ========================================================= */

:root {
    --ease-out: cubic-bezier(.16, .84, .28, 1);
    --ease-soft: cubic-bezier(.2, .8, .2, 1);
    --ease-back: cubic-bezier(.34, 1.42, .48, 1);
}

/* =========================================================
   1) Reveal on scroll
   ========================================================= */
html.motion-ready [data-reveal] {
    opacity: 0;
    will-change: opacity, transform;
}

html.motion-ready [data-reveal="up"] {
    transform: translate3d(0, 30px, 0);
}

html.motion-ready [data-reveal="down"] {
    transform: translate3d(0, -26px, 0);
}

html.motion-ready [data-reveal="left"] {
    transform: translate3d(-34px, 0, 0);
}

html.motion-ready [data-reveal="right"] {
    transform: translate3d(34px, 0, 0);
}

html.motion-ready [data-reveal="zoom"] {
    transform: scale(.93);
}

html.motion-ready [data-reveal="rise"] {
    transform: translate3d(0, 44px, 0) scale(.97);
}

html.motion-ready [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition:
        opacity .72s var(--ease-out) var(--rd, 0ms),
        transform .86s var(--ease-out) var(--rd, 0ms);
}

/* Al salir por arriba no se re-oculta: el reveal es de una sola vía. */

/* =========================================================
   2) Entrada del hero (sin esperar scroll)
   ========================================================= */
@keyframes snRise {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes snRiseSoft {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes snFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

html.motion-ready [data-enter] {
    opacity: 0;
    animation: snRise .82s var(--ease-out) forwards;
    animation-delay: var(--ed, 0ms);
}

html.motion-ready [data-enter="soft"] {
    animation-name: snRiseSoft;
    animation-duration: 1s;
}

html.motion-ready [data-enter="fade"] {
    animation-name: snFadeIn;
}

/* =========================================================
   3) Barra de progreso de lectura
   ========================================================= */
.snProgress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 60;
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    transform: scaleX(var(--p, 0));
    transform-origin: 0 50%;
    pointer-events: none;
    opacity: .95;
    transition: transform .12s linear;
}

/* =========================================================
   4) Header con estado al hacer scroll
   ========================================================= */
header:not([class]) {
    transition: box-shadow .3s ease, background .3s ease, border-color .3s ease;
}

header:not([class]).is-scrolled {
    box-shadow: var(--shadow-sm);
    border-bottom-color: var(--border);
}

/* =========================================================
   5) Micro-interacciones
   ========================================================= */

/* Botón primario con destello al pasar el cursor */
.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.btn-primary:hover::after {
    animation: snSweep .75s var(--ease-out);
}

@keyframes snSweep {
    from {
        left: -60%;
        opacity: 1;
    }

    to {
        left: 130%;
        opacity: 0;
    }
}

/* Enlaces de navegación con subrayado animado */
.navlinks a {
    position: relative;
}

.navlinks a::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .3s var(--ease-out);
}

.navlinks a:hover::after {
    transform: scaleX(1);
}

/* Marquee: se detiene al pasar el cursor */
.snMarquee:hover .snMarqueeTrack {
    animation-play-state: paused;
}

/* Íconos que reaccionan dentro de tarjetas */
.snApp:hover .snAppIcon,
.snSrv:hover .snSrvIcon,
.snTrack:hover .snTrackIcon {
    transform: translateY(-3px) scale(1.06) rotate(-3deg);
}

.snAppIcon,
.snSrvIcon,
.snTrackIcon {
    transition: transform .45s var(--ease-back);
}

/* Contadores del hero */
.snCount {
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   6) Accesibilidad: sin movimiento
   ========================================================= */
@media (prefers-reduced-motion: reduce) {

    html.motion-ready [data-reveal],
    html.motion-ready [data-enter] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .snProgress {
        display: none;
    }

    .btn-primary:hover::after {
        animation: none;
    }

    * {
        scroll-behavior: auto !important;
    }
}