/* ===================================
   TÉCNICAS DE ECLIPSE - ANIMACIONES
   =================================== */

/* Rotación del plasma solar */
@keyframes plasma-spin {
    from { transform: rotate(0deg) translateZ(0); }
    to { transform: rotate(360deg) translateZ(0); }
}

/* Deformación orgánica muy contenida */
@keyframes plasma-morph {
    0%, 100% { border-radius: 48% 52% 55% 45% / 48% 50% 55% 50%; }
    50% { border-radius: 52% 48% 45% 55% / 52% 45% 55% 48%; }
}

/* Parpadeo inestable (Flicker atmosférico rápido) */
@keyframes corona-flicker {
    0%   { opacity: 0.75; transform: scale(1) translateZ(0); filter: brightness(1); }
    15%  { opacity: 0.95; transform: scale(1.005) translateZ(0); filter: brightness(1.15); }
    30%  { opacity: 0.70; transform: scale(0.995) translateZ(0); filter: brightness(0.95); }
    45%  { opacity: 0.85; transform: scale(1.002) translateZ(0); filter: brightness(1.05); }
    60%  { opacity: 0.65; transform: scale(0.998) translateZ(0); filter: brightness(0.90); }
    75%  { opacity: 0.95; transform: scale(1.008) translateZ(0); filter: brightness(1.10); }
    100% { opacity: 0.75; transform: scale(1) translateZ(0); filter: brightness(1); }
}

/* Línea de trayectoria solar (Visor) */
@keyframes dash {
    to { stroke-dashoffset: -100; }
}

/* Flechas de guiado direccional - izquierda */
@keyframes point-left {
    0%, 100% { transform: translateX(0) translateZ(0); }
    50% { transform: translateX(-6px) translateZ(0); }
}

/* Flechas de guiado direccional - derecha */
@keyframes point-right {
    0%, 100% { transform: translateX(0) translateZ(0); }
    50% { transform: translateX(6px) translateZ(0); }
}

/* ===================================
   ANIMACIONES MODAL CALIBRACIÓN (Migradas de JS)
   =================================== */

@keyframes progress-fill { 
    from { width: 0%; } 
    to { width: 100%; } 
}

@keyframes spin-infinite { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}

@keyframes pulse-opacity { 
    0%, 100% { opacity: 0.8; } 
    50% { opacity: 1; } 
}

/* ===================================
   CLASES BASE & RENDIMIENTO GPU
   =================================== */

   
/* Prevenir highlight táctil nativo para look 100% app */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Base para las llamaradas PEGADAS al botón */
.flare {
    position: absolute;
    filter: blur(12px); /* Mantenemos el desenfoque elegante */
    will-change: transform, opacity, border-radius; 
    pointer-events: none; 
}

/* NUEVO AJUSTE DE ESCALA RESPONSIVO:
   El botón principal mide 7rem (w-28) en móviles pequeños y 9rem (w-36) en sm+.
   Escalamos las llamaradas en consonancia para que asomen perfectamente en ambos.
*/
.flare-inner {
    width: 7.2rem; 
    height: 7.2rem;
    background: #FEF3C7;
    border-radius: 50%;
    animation: corona-flicker 1.8s infinite;
}

.flare-1 {
    width: 7.5rem; 
    height: 7.5rem;
    background: linear-gradient(45deg, #F59E0B, #EF4444);
    animation: plasma-spin 10s linear infinite, plasma-morph 5s ease-in-out infinite alternate, corona-flicker 2.5s infinite;
    opacity: 0.85; 
}

.flare-2 {
    width: 7.8rem; 
    height: 7.8rem;
    background: linear-gradient(to right, #FCD34D, #D97706);
    animation: plasma-spin 15s linear infinite reverse, plasma-morph 6s ease-in-out infinite alternate;
    opacity: 0.65; 
}

/* Ajuste Tailwind 'sm' (min-width: 640px) para restaurar el tamaño original */
@media (min-width: 640px) {
    .flare-inner { width: 9.2rem; height: 9.2rem; }
    .flare-1 { width: 9.5rem; height: 9.5rem; }
    .flare-2 { width: 9.8rem; height: 9.8rem; }
}

/* Parpadeo de la corona solar (Visor) */
.animate-flicker {
    animation: corona-flicker 0.2s infinite;
    will-change: transform, opacity;
}

/* Línea de trayectoria solar (Visor) */
.solar-path {
    stroke-dasharray: 8;
    animation: dash 20s linear infinite;
}

/* Animaciones para las flechas de guiado direccional (Visor) */
.animate-point-left {
    animation: point-left 1s ease-in-out infinite;
    will-change: transform;
}

.animate-point-right {
    animation: point-right 1s ease-in-out infinite;
    will-change: transform;
}

/* ===================================
   UTILIDADES GLOBALES PARA WEBAPP (PWA)
   =================================== */

:root {
    /* Fallback por si JS tarda en cargar */
    --vh: 1vh; 
    height: 100%;
}

html, body {
    /* Fallback de seguridad */
    height: 100%; 
    
    /* Conecta con la variable inteligente calculada en index.html */
    height: var(--app-height, 100dvh); 
}


.pb-safe {
    /* Usamos un padding más generoso para evitar los botones de Android 
       cuando no se reporta safe-area-inset */
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

@media (display-mode: standalone) {
    .pb-safe {
        /* En modo App instalada, añadimos un extra de seguridad */
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
}

/* ===================================
   ANIMACIÓN CINEMÁTICA DEL BOTÓN (ECLIPSE)
   =================================== */

/* 1. Definir el Anillo de Diamantes (El Destello en la esquina superior derecha) */
#btn-start-ar::after {
    content: '';
    position: absolute;
    top: 6px; 
    right: 6px;
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 20px 8px white, 0 0 35px 15px #FCD34D;
    opacity: 0;
    transform: scale(0);
    will-change: opacity, transform;
    animation: diamond-ring-flash 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    z-index: 5;
    pointer-events: none;
}

/* 2. Keyframes para el Anillo de Diamantes (Clímax) */
@keyframes diamond-ring-flash {
    0%, 74% { opacity: 0; transform: scale(0); }
    75% { opacity: 1; transform: scale(1.4); }   
    77% { opacity: 0; transform: scale(1); }     
    100% { opacity: 0; }
}

/* 3. Keyframes para el borde del Botón (La Luna cubriendo el Sol poco a poco) */
@keyframes eclipse-border-cycle {
    0%, 15% {
        border-color: rgba(252, 211, 77, 0.9);
        box-shadow: 0 0 15px 2px rgba(252, 211, 77, 0.5);
    }
    
    /* Atenuación del contorno suave */
    40% {
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.05);
    }

    /* Totalidad estricta */
    45%, 74% {
        border-color: rgba(255, 255, 255, 0.02);
        box-shadow: 0 0 0px 0px rgba(0,0,0,0);
    }

    80%, 100% {
        border-color: rgba(252, 211, 77, 0.9);
        box-shadow: 0 0 15px 2px rgba(252, 211, 77, 0.5);
    }
}