/* ============================================================================
   Ajwebx — Movimiento R6.1
   Archivo: css/shell/motion-v-1.0.css
   Creado:  2026-11-02
   Carga:   al final, después de los CSS de componentes.
   Alcance: shell de la BASE (los iframes de apps no se tocan).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Entrada del menú de aplicaciones
   ---------------------------------------------------------------------------- */
@keyframes aj-overlay-in
{
    from {opacity: 0;}
    to   {opacity: 1;}
}

@keyframes aj-menu-in
{
    from
    {
        opacity: 0;
        transform: perspective(1200px) rotateX(2deg) translateY(16px) scale(.97);
    }
    to
    {
        opacity: 1;
        transform: none;
    }
}

@keyframes aj-tile-in
{
    from
    {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
    to
    {
        opacity: 1;
        transform: none;
    }
}

#main-app-menu
{
    animation: aj-overlay-in var(--aj-t2, 180ms) var(--aj-ease, ease) both;
}

@media screen and (min-width: 901px)
{
    #cont-menu-apps
    {
        animation: aj-menu-in var(--aj-t3, 240ms) var(--aj-spring, ease) both;
        transform-origin: 50% 0;
    }
}

@media screen and (max-width: 900px)
{
    #cont-menu-apps
    {
        animation: aj-overlay-in var(--aj-t2, 180ms) var(--aj-ease, ease) both;
    }
}

/* Tarjetas escalonadas */
#cont-menu-apps .btn-app,
#cont-menu-apps .resultado-app
{
    animation: aj-tile-in .26s var(--aj-ease, ease) both;
}

#cont-menu-apps .btn-app:nth-child(1),
#cont-menu-apps .resultado-app:nth-child(1)  {animation-delay: 0ms;}
#cont-menu-apps .btn-app:nth-child(2),
#cont-menu-apps .resultado-app:nth-child(2)  {animation-delay: 22ms;}
#cont-menu-apps .btn-app:nth-child(3),
#cont-menu-apps .resultado-app:nth-child(3)  {animation-delay: 44ms;}
#cont-menu-apps .btn-app:nth-child(4),
#cont-menu-apps .resultado-app:nth-child(4)  {animation-delay: 66ms;}
#cont-menu-apps .btn-app:nth-child(5),
#cont-menu-apps .resultado-app:nth-child(5)  {animation-delay: 88ms;}
#cont-menu-apps .btn-app:nth-child(6),
#cont-menu-apps .resultado-app:nth-child(6)  {animation-delay: 110ms;}
#cont-menu-apps .btn-app:nth-child(7),
#cont-menu-apps .resultado-app:nth-child(7)  {animation-delay: 132ms;}
#cont-menu-apps .btn-app:nth-child(8),
#cont-menu-apps .resultado-app:nth-child(8)  {animation-delay: 154ms;}
#cont-menu-apps .btn-app:nth-child(9),
#cont-menu-apps .resultado-app:nth-child(9)  {animation-delay: 176ms;}
#cont-menu-apps .btn-app:nth-child(10),
#cont-menu-apps .resultado-app:nth-child(10) {animation-delay: 198ms;}
#cont-menu-apps .btn-app:nth-child(11),
#cont-menu-apps .resultado-app:nth-child(11) {animation-delay: 220ms;}
#cont-menu-apps .btn-app:nth-child(12),
#cont-menu-apps .resultado-app:nth-child(12) {animation-delay: 242ms;}

/* ----------------------------------------------------------------------------
   Microinteracciones del shell
   ---------------------------------------------------------------------------- */
#cont-menu-apps .btn-app
{
    transition:
        transform var(--aj-t1, 120ms) var(--aj-ease, ease),
        box-shadow var(--aj-t1, 120ms) var(--aj-ease, ease),
        border-color var(--aj-t1, 120ms) var(--aj-ease, ease);
}

#lista-apps-en-uso .item-btn
{
    transition:
        transform var(--aj-t1, 120ms) var(--aj-ease, ease),
        background-color var(--aj-t1, 120ms) var(--aj-ease, ease);
}

#header-ajwebx .link-logo-principal svg
{
    transition: transform var(--aj-t2, 180ms) var(--aj-spring, ease);
}

.cubierta-ventana-modal > div > button
{
    transition: transform var(--aj-t1, 120ms) var(--aj-ease, ease),
                background-color var(--aj-t1, 120ms) var(--aj-ease, ease);
}

@media (hover: hover) and (pointer: fine)
{
    #cont-menu-apps .btn-app:hover
    {
        transform: translateY(-3px);
        box-shadow: var(--aj-sh2, 0 8px 24px rgba(2, 32, 71, .08));
    }

    #lista-apps-en-uso .item-btn:hover
    {
        transform: translateY(-1px);
    }

    #header-ajwebx .link-logo-principal:hover svg
    {
        transform: rotate(-6deg) scale(1.04);
    }

    .cubierta-ventana-modal > div > button:hover
    {
        transform: scale(1.08);
    }
}

.btn:active,
.btn-null:active,
.item-btn:active
{
    transform: translateY(1px) scale(.98);
}

/* ----------------------------------------------------------------------------
   Guía de inicio: tilt 3D muy leve + brillo que sigue al puntero
   ---------------------------------------------------------------------------- */
#inicio-instructivo .inicio-tarjeta
{
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transform:
        perspective(900px)
        rotateX(var(--aj-tilt-x, 0deg))
        rotateY(var(--aj-tilt-y, 0deg));
    transition: transform 120ms var(--aj-ease, ease);
}

#inicio-instructivo .inicio-tarjeta::after
{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        420px circle at var(--aj-gx, 50%) var(--aj-gy, 50%),
        rgba(255, 255, 255, .32),
        transparent 45%);
    opacity: 0;
    transition: opacity var(--aj-t1, 120ms) var(--aj-ease, ease);
}

@media (hover: hover) and (pointer: fine)
{
    #inicio-instructivo .inicio-tarjeta:hover::after
    {
        opacity: 1;
    }
}

/* ----------------------------------------------------------------------------
   Ventana de app: apertura y cierre con profundidad
   ---------------------------------------------------------------------------- */
@keyframes aj-app-in
{
    from
    {
        opacity: 0;
        transform: translateY(10px) scale(.985);
    }
    to
    {
        opacity: 1;
        transform: none;
    }
}

@keyframes aj-app-out
{
    from
    {
        opacity: 1;
        transform: none;
    }
    to
    {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }
}

.fondo-app
{
    animation: aj-app-in .26s var(--aj-ease, ease) backwards;
    transform-origin: 50% 0;
}

.fondo-app.app-saliendo
{
    animation: aj-app-out .18s ease-in both;
    pointer-events: none;
}

@media screen and (max-width: 900px)
{
    .fondo-app
    {
        animation: aj-overlay-in var(--aj-t2, 180ms) var(--aj-ease, ease) backwards;
    }
}

/* ----------------------------------------------------------------------------
   Movimiento reducido: sin 3D ni animaciones de shell
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce)
{
    *,
    *::before,
    *::after
    {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    #main-app-menu,
    #cont-menu-apps,
    #cont-menu-apps .btn-app,
    #cont-menu-apps .resultado-app,
    .fondo-app
    {
        animation: none !important;
    }

    #cont-menu-apps,
    #inicio-instructivo .inicio-tarjeta
    {
        transform: none !important;
    }

    #inicio-instructivo .inicio-tarjeta::after
    {
        display: none;
    }
}