/* =====================================================
   CUARTO DE MILLA — SPLASH "IGNITION" 
   Pantalla de carga con secuencia de motor encendiendo
   ===================================================== */

:root {
    --cdm-gold: #d4af37;
    --cdm-gold-light: #f5d76e;
    --cdm-red: #8b1a1a;
}

/* --- Contenedor principal --- */
.splash-screen.ignition {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    background: #000;
    transition: transform 0.9s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.9s ease;
}

.splash-screen.ignition:not(.active-section) {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* --- Imagen del poster con zoom lento (Ken Burns) --- */
.splash-bg {
    position: absolute;
    inset: 0;
    background: url('../img/splash.jpg') center 20% / cover no-repeat;
    animation: kenburns 14s ease-in-out infinite alternate;
    filter: brightness(0.55) saturate(1.1);
}

@keyframes kenburns {
    0%   { transform: scale(1) translateY(0); }
    100% { transform: scale(1.08) translateY(-1.5%); }
}

/* Encendido de faros: la imagen "despierta" al cargar */
.splash-screen.ignition.engine-on .splash-bg {
    animation: headlights 1.6s ease-out forwards, kenburns 14s 1.6s ease-in-out infinite alternate;
}

@keyframes headlights {
    0%   { filter: brightness(0.1) saturate(0.3); }
    15%  { filter: brightness(0.7) saturate(1); }   /* chispazo */
    25%  { filter: brightness(0.2) saturate(0.5); } /* falla */
    45%  { filter: brightness(0.8) saturate(1.1); } /* segundo intento */
    60%  { filter: brightness(0.35) saturate(0.8); }
    100% { filter: brightness(0.55) saturate(1.1); } /* motor estable */
}

/* Viñeta + degradado inferior para legibilidad */
.splash-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.75) 100%),
        linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 30%, transparent 55%);
    pointer-events: none;
}

/* --- Vibración sutil del motor al encender --- */
.splash-screen.ignition.engine-on { animation: engine-shake 0.5s 0.9s ease-in-out; }
@keyframes engine-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, -1px); }
    80% { transform: translate(1px, 1px); }
}

/* --- Contenido inferior --- */
.splash-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
    padding: 0 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

/* --- Tacómetro (RPM) --- */
.tacho-wrap { width: 190px; height: 105px; position: relative; }
.tacho-wrap svg { width: 100%; height: 100%; overflow: visible; }

.tacho-arc {
    fill: none;
    stroke: rgba(212, 175, 55, 0.25);
    stroke-width: 7;
    stroke-linecap: round;
}
.tacho-arc-red {
    fill: none;
    stroke: rgba(255, 60, 60, 0.55);
    stroke-width: 7;
    stroke-linecap: round;
}
.tacho-progress {
    fill: none;
    stroke: var(--cdm-gold);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.8));
    transition: stroke-dashoffset 0.3s ease-out;
}

.tacho-needle {
    stroke: #ff3c3c;
    stroke-width: 3.5;
    stroke-linecap: round;
    transform-origin: 95px 95px;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 4px rgba(255, 60, 60, 0.9));
}

/* Aguja revolucionando mientras carga (cranking) */
.cranking .tacho-needle { animation: rev-crank 1.1s ease-in-out infinite; }
@keyframes rev-crank {
    0%   { transform: rotate(-90deg); }
    45%  { transform: rotate(15deg); }
    60%  { transform: rotate(-30deg); }
    100% { transform: rotate(-90deg); }
}

/* Rev final al encender: acelerón a fondo y baja a ralentí */
.engine-on .tacho-needle { animation: rev-ignite 1.5s cubic-bezier(0.6, 0, 0.3, 1.4) forwards; }
@keyframes rev-ignite {
    0%   { transform: rotate(-90deg); }
    40%  { transform: rotate(88deg); }   /* ¡a fondo! */
    65%  { transform: rotate(60deg); }
    100% { transform: rotate(-62deg); }  /* ralentí */
}

.tacho-center {
    fill: #111;
    stroke: var(--cdm-gold);
    stroke-width: 2;
}
.tacho-label {
    fill: var(--cdm-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-anchor: middle;
    font-family: 'Outfit', sans-serif;
}

/* --- Texto de estado de carga --- */
.splash-status {
    font-family: 'Outfit', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cdm-gold-light);
    min-height: 1.2em;
    opacity: 0.9;
}
.splash-status::after {
    content: '';
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: dots 1.2s steps(4) infinite;
}
@keyframes dots {
    0%   { content: ''; }
    25%  { content: '.'; }
    50%  { content: '..'; }
    75%  { content: '...'; }
}
.engine-on .splash-status::after { content: '' !important; animation: none; }

/* --- Botón principal: oculto hasta que el motor enciende --- */
.splash-cta {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.6s ease 1.4s, transform 0.6s ease 1.4s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
.engine-on .splash-cta {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.btn-ignition {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 340px;
    padding: 1.05rem 2rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: #000;
    background: linear-gradient(135deg, var(--cdm-gold-light), var(--cdm-gold) 55%, #a8842a);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(212, 175, 55, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-ignition:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.5); }
.btn-ignition:active { transform: translateY(1px) scale(0.98); }

/* Barrido de luz tipo faro sobre el botón */
.btn-ignition::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: light-sweep 2.8s ease-in-out infinite;
}
@keyframes light-sweep {
    0%, 55% { left: -80%; }
    85%, 100% { left: 130%; }
}

.splash-access-note {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
}

/* --- Líneas de velocidad decorativas al encender --- */
.speed-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}
.engine-on .speed-lines { animation: lines-flash 1.2s 0.5s ease-out; }
@keyframes lines-flash { 0% {opacity:0;} 30% {opacity:1;} 100% {opacity:0;} }
.speed-lines span {
    position: absolute;
    height: 2px;
    width: 140px;
    background: linear-gradient(90deg, transparent, var(--cdm-gold));
    border-radius: 2px;
}
.speed-lines span:nth-child(1) { top: 30%; left: -140px; animation: line-move 0.7s 0.5s ease-out forwards; }
.speed-lines span:nth-child(2) { top: 45%; left: -140px; width: 200px; animation: line-move 0.8s 0.6s ease-out forwards; }
.speed-lines span:nth-child(3) { top: 62%; left: -140px; animation: line-move 0.65s 0.55s ease-out forwards; }
.speed-lines span:nth-child(4) { top: 38%; right: -140px; left: auto; transform: scaleX(-1); animation: line-move-r 0.75s 0.58s ease-out forwards; }
.speed-lines span:nth-child(5) { top: 55%; right: -140px; left: auto; width: 180px; transform: scaleX(-1); animation: line-move-r 0.7s 0.52s ease-out forwards; }
@keyframes line-move  { to { left: 110%; } }
@keyframes line-move-r { to { right: 110%; } }

/* Respeto a usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .splash-bg, .tacho-needle, .btn-ignition::after, .speed-lines span { animation: none !important; }
    .splash-cta { transition: none; opacity: 1; transform: none; pointer-events: auto; }
}

/* =====================================================
   FIX MÓVIL: poster cuadrado + botón visible
   ===================================================== */
/* Altura real del viewport en móviles (barra de Safari incluida) */
.splash-screen.ignition { height: 100vh; height: 100dvh; }

@media (max-width: 768px) {
    /* El poster se muestra COMPLETO arriba (sin zoom), abajo queda
       espacio negro limpio para el tacómetro y el botón */
    .splash-bg {
        background-size: contain;
        background-position: center top;
        background-color: #000;
        animation: none;
        filter: brightness(0.85) saturate(1.05);
    }
    .splash-screen.ignition.engine-on .splash-bg {
        animation: headlights 1.6s ease-out forwards;
    }
    .splash-vignette {
        background: linear-gradient(to top, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.55) 22%, transparent 45%);
    }

    /* Panel compacto que SIEMPRE cabe en pantalla */
    .splash-panel {
        padding: 0 1.2rem calc(1.2rem + env(safe-area-inset-bottom, 12px));
        gap: 0.7rem;
    }
    .tacho-wrap { width: 140px; height: 80px; }
    .splash-status { font-size: 0.66rem; letter-spacing: 2px; }
    .btn-ignition {
        padding: 0.9rem 1.2rem;
        font-size: 0.92rem;
        letter-spacing: 2px;
        max-width: 100%;
    }
    .splash-access-note { font-size: 0.6rem; letter-spacing: 1px; }
    .splash-cta { gap: 0.5rem; }
}

/* Pantallas muy cortas (SE / landscape): reducir aún más */
@media (max-height: 640px) {
    .tacho-wrap { display: none; }
    .splash-panel { gap: 0.5rem; }
}