/* ============================================================ transitions.css — Mirai AI PWA Native Feel Incluir en el de TODAS las páginas, DESPUÉS de styles.css ============================================================ */ /* ─── 1. PÁGINA INVISIBLE AL ARRANCAR ─────────────────────── El script del ya aplicó colores y tema. Ocultamos el contenido hasta que JS confirme que está listo. */ html { opacity: 0; } /* ─── 2. PÁGINA VISIBLE — agregada por transitions.js ───────*/ html.page-ready { opacity: 1; transition: opacity 0.3s var(--ease-smooth, cubic-bezier(0.05, 0.7, 0.1, 1)); } /* ─── 3. SALIDA — clic en link ───────────────────────────────*/ html.page-exit { opacity: 0; transition: opacity 0.18s var(--ease-elastic, cubic-bezier(0.2, 0, 0, 1)); pointer-events: none; } /* ─── 4. OVERLAY ───────────────────────────────────────────── Usa --bg-primary y --accent-color de tu sistema de colores. El script del ya los aplicó antes de que esto cargue, así que el overlay siempre tiene el color correcto del usuario. */ #transition-overlay { position: fixed; inset: 0; z-index: 99999; /* Usa el fondo del sistema — nunca un color hardcodeado */ background-color: var(--bg-primary); background-image: var(--bg-gradient); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.18s var(--ease-smooth, cubic-bezier(0.05, 0.7, 0.1, 1)); will-change: opacity; } #transition-overlay.overlay-visible { opacity: 1; pointer-events: all; } /* ─── 5. SPINNER ───────────────────────────────────────────── Toma --accent-color directamente — cambia con el tema del usuario */ #transition-overlay .t-spinner { width: 32px; height: 32px; border-radius: 50%; /* Track translúcido del acento */ border: 2.5px solid var(--accent-glow, rgba(103, 80, 164, 0.2)); /* Arco activo en el acento completo */ border-top-color: var(--accent-color, #6750A4); border-right-color: var(--accent-color, #6750A4); animation: t-spin 0.65s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite; will-change: transform; } @keyframes t-spin { to { transform: rotate(360deg); } } /* ─── 6. SKELETON ──────────────────────────────────────────── Usa colores del sistema para el efecto shimmer */ .skeleton-line, .skeleton-card { background: linear-gradient( 90deg, var(--glass-border, rgba(103,80,164,0.08)) 25%, var(--secondary-container, #E8DEF8) 50%, var(--glass-border, rgba(103,80,164,0.08)) 75% ); background-size: 200% 100%; border-radius: var(--border-radius-sm, 12px); animation: t-shimmer 1.4s ease infinite; } .skeleton-line { height: 14px; margin-bottom: 10px; } .skeleton-card { height: 120px; border-radius: var(--border-radius-md, 16px); } @keyframes t-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── 7. REDUCED MOTION ────────────────────────────────────── Dos bloques separados: uno para la media query del sistema, otro para la clase .reduce-motion que añade tu settings.js */ @media (prefers-reduced-motion: reduce) { html, html.page-ready, html.page-exit, #transition-overlay, .skeleton-line, .skeleton-card { transition: none !important; animation: none !important; } } /* Clase aplicada por tu sistema cuando el usuario lo activa en Settings */ .reduce-motion, .reduce-motion html, .reduce-motion html.page-ready, .reduce-motion html.page-exit, .reduce-motion #transition-overlay, .reduce-motion .skeleton-line, .reduce-motion .skeleton-card { transition: none !important; animation: none !important; }