/* ============================================================================
 * ultra-pro-2.css v1.0 — Capa visual "VANGUARD X" (v44)
 * ----------------------------------------------------------------------------
 * Acompaña a js/ultra-pro-2.js:
 *  • Cursor personalizado (punto + anillo con inercia)
 *  • Film grain cinematográfico
 *  • Toasts premium
 *  • Modal de atajos de teclado
 *  • Canvas de confetti
 * Respeta prefers-reduced-motion, pointer:coarse y modo día.
 * ========================================================================= */

/* ===================== A. CURSOR PERSONALIZADO — nave triangular 🛸 ===================== */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    html.up2-cursor-on,
    html.up2-cursor-on body,
    html.up2-cursor-on a,
    html.up2-cursor-on button {
        cursor: none;
    }
    /* Inputs conservan cursor de texto para no confundir */
    html.up2-cursor-on input,
    html.up2-cursor-on textarea,
    html.up2-cursor-on select {
        cursor: auto;
    }
}

/* Nave triangular extraterrestre que sigue el mouse y rota hacia donde vuela */
.up2-cursor-ship {
    position: fixed;
    top: 0; left: 0;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 100000;
    opacity: 0;
    transition: opacity .2s ease;
    will-change: transform;
    filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.85))
            drop-shadow(0 0 14px rgba(167, 139, 250, 0.45));
}
.up2-cursor-ship.up2-cursor-visible { opacity: 1; }

/* Núcleo de energía pulsante */
.up2-cursor-ship .up2-ship-core {
    animation: up2CorePulse 1.6s ease-in-out infinite;
    transform-origin: 16px 15px;
}
@keyframes up2CorePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(1.25); }
}

/* Luces de navegación parpadeantes (punta, ala izq., ala der.) */
.up2-cursor-ship .up2-ship-light { animation: up2LightBlink 1.1s ease-in-out infinite; }
.up2-cursor-ship .up2-l1 { animation-delay: 0s; }
.up2-cursor-ship .up2-l2 { animation-delay: .35s; }
.up2-cursor-ship .up2-l3 { animation-delay: .7s; }
@keyframes up2LightBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.15; }
}

/* Sobre elementos interactivos: la nave crece y brilla más intensamente */
.up2-cursor-ship.up2-cursor-hover svg {
    scale: 1.35;
    transition: scale .18s ease;
}
.up2-cursor-ship.up2-cursor-hover {
    filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.95))
            drop-shadow(0 0 22px rgba(167, 139, 250, 0.65));
}
.up2-cursor-ship svg {
    display: block;
    transition: scale .18s ease;
}
.up2-cursor-ship.up2-cursor-down svg { scale: 0.8; }

/* Estela de luces: chispas que se difuminan y encogen al desaparecer */
.up2-cursor-trail {
    position: fixed;
    top: 0; left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    animation: up2TrailFade .75s ease-out forwards;
    will-change: transform, opacity;
}
@keyframes up2TrailFade {
    0%   { opacity: 0.95; transform: scale(1); filter: blur(0); }
    60%  { opacity: 0.45; }
    100% { opacity: 0; transform: scale(0.15); filter: blur(3px); }
}

body.day-mode .up2-cursor-ship {
    filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.7))
            drop-shadow(0 0 12px rgba(14, 116, 144, 0.4));
}

/* En táctil/móvil jamás se muestra */
@media (pointer: coarse) {
    .up2-cursor-ship, .up2-cursor-trail { display: none !important; }
}

/* ===================== B. FILM GRAIN ===================== */
.up2-grain {
    position: fixed;
    inset: -100%;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    animation: up2GrainShift 0.9s steps(4) infinite;
    will-change: transform;
}
@keyframes up2GrainShift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2%, 3%); }
    50%  { transform: translate(3%, -2%); }
    75%  { transform: translate(-3%, -3%); }
    100% { transform: translate(2%, 2%); }
}
body.day-mode .up2-grain { opacity: 0.028; }
@media (prefers-reduced-motion: reduce) {
    .up2-grain { animation: none; opacity: 0.03; }
}

/* ===================== F. TOASTS ===================== */
.up2-toast-host {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 100001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.up2-toast {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 20px;
    border-radius: 14px;
    background: rgba(16, 20, 34, 0.94);
    border: 1px solid rgba(232, 199, 102, 0.30);
    color: #F5F1E8;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(232, 199, 102, 0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(16px) scale(0.95);
    transition: opacity .32s cubic-bezier(.22, 1, .36, 1),
                transform .32s cubic-bezier(.22, 1, .36, 1);
    max-width: min(92vw, 460px);
}
.up2-toast.up2-toast-in {
    opacity: 1;
    transform: none;
}
.up2-toast i {
    color: #E8C766;
    font-size: 15px;
    flex-shrink: 0;
}
.up2-toast-warn { border-color: rgba(249, 115, 22, 0.45); }
.up2-toast-warn i { color: #FB923C; }

body.day-mode .up2-toast {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(37, 99, 235, 0.25);
    color: #0F172A;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}
body.day-mode .up2-toast i { color: #2563EB; }

@media (max-width: 640px) {
    .up2-toast-host { bottom: 96px; } /* sobre el audio player */
}

/* ===================== G. MODAL DE ATAJOS ===================== */
.up2-help-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(4, 6, 12, 0.66);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.up2-help-overlay.up2-help-open {
    opacity: 1;
    pointer-events: all;
}
.up2-help {
    width: 100%;
    max-width: 460px;
    border-radius: 18px;
    background: rgba(16, 20, 34, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.55),
        0 0 60px rgba(168, 85, 247, 0.10);
    overflow: hidden;
    transform: translateY(12px) scale(0.97);
    transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
.up2-help-open .up2-help { transform: none; }

.up2-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.up2-help-head h3 {
    margin: 0;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    color: #F5F1E8;
    display: flex;
    align-items: center;
    gap: 10px;
}
.up2-help-head h3 i { color: #E8C766; }
.up2-help-close {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    color: #9aa0b4;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s ease, border-color .2s ease;
}
.up2-help-close:hover { color: #F5F1E8; border-color: rgba(255, 255, 255, 0.25); }

.up2-help-list {
    list-style: none;
    margin: 0;
    padding: 10px 8px 14px;
}
.up2-help-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #C6CBDA;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
}
.up2-help-list li:hover { background: rgba(255, 255, 255, 0.04); }
.up2-help-list kbd {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #E8C766;
    background: rgba(232, 199, 102, 0.08);
    border: 1px solid rgba(232, 199, 102, 0.28);
    border-radius: 6px;
    padding: 3px 8px;
    line-height: 1;
}

body.day-mode .up2-help {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.10);
}
body.day-mode .up2-help-head { border-color: rgba(15, 23, 42, 0.08); }
body.day-mode .up2-help-head h3 { color: #0F172A; }
body.day-mode .up2-help-list li { color: #334155; }
body.day-mode .up2-help-list li:hover { background: rgba(15, 23, 42, 0.04); }
body.day-mode .up2-help-list kbd {
    color: #2563EB;
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.25);
}

/* ===================== I. CONFETTI ===================== */
.up2-confetti {
    position: fixed;
    inset: 0;
    z-index: 100002;
    pointer-events: none;
}

/* ===================== ACCESIBILIDAD ===================== */
@media (prefers-reduced-motion: reduce) {
    .up2-toast { transition: opacity .15s ease; transform: none; }
    .up2-help { transition: none; transform: none; }
}