/*
 * Microinteracciones inspiradas en patrones Uiverse.
 * No altera la identidad: comunica carga, foco, jerarquía y resultado.
 */

:root {
    --ui-motion-fast: 160ms;
    --ui-motion-normal: 360ms;
    --ui-motion-slow: 620ms;
    --ui-motion-ease: cubic-bezier(.2, .78, .2, 1);
}

.ui-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity var(--ui-motion-slow) var(--ui-motion-ease),
        transform var(--ui-motion-slow) var(--ui-motion-ease);
    transition-delay: var(--ui-reveal-delay, 0ms);
}

.ui-reveal.ui-visible {
    opacity: 1;
    transform: translateY(0);
}

.ui-reveal[data-ui-direction="left"] {
    transform: translateX(-24px);
}

.ui-reveal[data-ui-direction="right"] {
    transform: translateX(24px);
}

.ui-reveal[data-ui-direction="left"].ui-visible,
.ui-reveal[data-ui-direction="right"].ui-visible {
    transform: translateX(0);
}

.ui-stagger > .ui-reveal:nth-child(2) {
    --ui-reveal-delay: 60ms;
}

.ui-stagger > .ui-reveal:nth-child(3) {
    --ui-reveal-delay: 120ms;
}

.ui-stagger > .ui-reveal:nth-child(4) {
    --ui-reveal-delay: 180ms;
}

.ui-stagger > .ui-reveal:nth-child(5) {
    --ui-reveal-delay: 240ms;
}

.ui-stagger > .ui-reveal:nth-child(6) {
    --ui-reveal-delay: 300ms;
}

.ui-stagger > .ui-reveal:nth-child(7) {
    --ui-reveal-delay: 360ms;
}

.ui-stagger > .ui-reveal:nth-child(8) {
    --ui-reveal-delay: 420ms;
}

/* Destello contenido para CTA, basado en botones Uiverse. */
.ui-action {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.ui-action::before {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -42%;
    z-index: -1;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-18deg) translateX(-180%);
    transition: transform 580ms ease;
    pointer-events: none;
}

.ui-action:hover::before,
.ui-action:focus-visible::before {
    transform: skewX(-18deg) translateX(620%);
}

.ui-ripple {
    position: absolute;
    z-index: 5;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    opacity: .18;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: uiRipple 560ms ease-out forwards;
}

@keyframes uiRipple {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(22);
    }
}

/* Elevación ligera de tarjetas, sin inclinaciones agresivas. */
.ui-interactive-card {
    transform-origin: center;
    will-change: transform;
}

.ui-interactive-card:hover {
    transform: translateY(-4px);
}

.ui-interactive-card:focus-within {
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--sky-dark, #315ee7) 15%, transparent),
        0 18px 40px rgba(30, 30, 70, .12) !important;
}

/* Estado ocupado visible y accesible. */
.ui-busy {
    position: relative;
    cursor: progress !important;
    color: transparent !important;
    pointer-events: none;
}

.ui-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: #fff;
    animation: uiSpin 680ms linear infinite;
}

@keyframes uiSpin {
    to {
        transform: rotate(1turn);
    }
}

/* Apertura de diálogos: rápida, clara y sin rebote. */
.ui-modal-enter {
    animation: uiBackdropIn 180ms ease both;
}

.ui-modal-enter > [role="dialog"],
.ui-modal-enter .admin-editor-sheet,
.ui-modal-enter .email-mass-send-dialog,
.ui-modal-enter .resend-template-form,
.ui-modal-enter .subscribe-modal {
    transform-origin: 50% 20%;
    animation: uiDialogIn 300ms var(--ui-motion-ease) both;
}

@keyframes uiBackdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes uiDialogIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.975);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Confirmación visual de guardado sin introducir mensajes falsos. */
.ui-saved-pulse {
    animation: uiSavedPulse 720ms ease;
}

@keyframes uiSavedPulse {
    0%,
    100% {
        box-shadow: inherit;
    }

    40% {
        box-shadow: 0 0 0 5px rgba(17, 156, 83, .16);
    }
}

/* Indicador de pestaña activo. */
.admin-body .admin-tab.active > span:first-child,
.admin-body .email-studio-tabs button.active {
    animation: uiActiveControl 300ms var(--ui-motion-ease);
}

@keyframes uiActiveControl {
    from {
        opacity: .6;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Portada principal: entrada editorial coordinada. */
body[data-page="inicio"] .hero-copy {
    animation: uiHeroCopyIn 680ms var(--ui-motion-ease) both;
}

body[data-page="inicio"] .featured-magazine {
    animation: uiHeroMagazineIn 760ms 80ms var(--ui-motion-ease) both;
}

@keyframes uiHeroCopyIn {
    from {
        opacity: 0;
        transform: translateX(-26px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes uiHeroMagazineIn {
    from {
        opacity: 0;
        transform: translateX(28px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Señal visual discreta para portada clickeable. */
.featured-magazine .cover-click::after,
.magazine-card .magazine-cover-button::after {
    transition:
        opacity var(--ui-motion-fast) ease,
        transform var(--ui-motion-normal) var(--ui-motion-ease);
}

.featured-magazine .cover-click:hover::after,
.featured-magazine .cover-click:focus-visible::after,
.magazine-card .magazine-cover-button:hover::after,
.magazine-card .magazine-cover-button:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Tooltips nativos mejorados para iconos con title. */
.admin-body button[title],
.admin-body a[title] {
    position: relative;
}

.admin-body button[title]:hover,
.admin-body a[title]:hover {
    z-index: 6;
}

/* Menús desplegables aparecen sin salto. */
.desktop-login-menu:not([hidden]),
.header-profile-menu:not([hidden]),
.mobile-menu.open,
.admin-body [role="menu"]:not([hidden]) {
    animation: uiMenuIn 220ms var(--ui-motion-ease) both;
    transform-origin: top right;
}

@keyframes uiMenuIn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Barra de avance para flujos de correo. */
.email-flow-progress {
    --email-progress: 33.333%;
    position: relative;
    height: 4px;
    margin: .65rem 0 1rem;
    border-radius: 99px;
    background: rgba(49, 94, 231, .1);
    overflow: hidden;
}

.email-flow-progress::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--email-progress);
    border-radius: inherit;
    background: linear-gradient(90deg, #1e1e46, #4c7dff);
    transition: width 420ms var(--ui-motion-ease);
}

/* Reduce motion conserva toda la funcionalidad. */
@media (prefers-reduced-motion: reduce) {
    .ui-reveal,
    .ui-reveal[data-ui-direction],
    .ui-reveal.ui-visible,
    .ui-modal-enter,
    .ui-modal-enter > [role="dialog"],
    .ui-modal-enter .admin-editor-sheet,
    .ui-modal-enter .email-mass-send-dialog,
    .ui-modal-enter .resend-template-form,
    body[data-page="inicio"] .hero-copy,
    body[data-page="inicio"] .featured-magazine {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .ui-ripple {
        display: none;
    }
}