/**
 * Blackline Travel Madeira - VIP Cursor & Brand Mascot
 * Exclusively for public landing page (index.php)
 */

:root {
    --vip-cursor-cyan: #0cb2db;
    --vip-cursor-cyan-glow: rgba(12, 178, 219, 0.45);
    --vip-cursor-gold: #e5b54f;
    --vip-cursor-dark: #06090e;
}

/* Solo ocultar el cursor del sistema cuando está en MODO RATÓN y NO hay modales activos */
body.is-mouse-mode:not(.modal-open):not(.has-modal):not(.vip-cursor-hidden) * {
    cursor: none !important;
}

/* En MODO TÁCTIL o CUANDO HAY MODALES/PANELES: Cursor 100% nativo y libre */
body.is-touch-mode *,
body.modal-open *,
body.has-modal *,
body.vip-cursor-hidden *,
.tour-details-modal *,
.tour-services-aux-modal *,
.logistics-table-modal *,
.blackline-video-modal *,
.index-image-zoom *,
dialog * {
    cursor: auto !important;
}
body.is-touch-mode #vip-cursor-container,
body.is-touch-mode #trail-canvas {
    display: block !important;
    pointer-events: none !important;
}
body.is-touch-mode #vip-car-cursor {
    opacity: 0.95;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8)) drop-shadow(0 0 10px rgba(12, 178, 219, 0.5));
}

/* Fallback por hardware media query */
@media (hover: hover) and (pointer: fine) {
    body:not(.is-touch-mode):not(.modal-open):not(.has-modal):not(.vip-cursor-hidden) * {
        cursor: none !important;
    }
}
@media (hover: none) or (pointer: coarse) {
    body:not(.is-mouse-mode) * {
        cursor: auto !important;
    }
}

/* CONTAINER & CURSOR ELEMENT */
#vip-cursor-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999990;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

#vip-car-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 52px;
    margin-left: -16px;
    margin-top: -26px;
    pointer-events: none;
    z-index: 999999;
    will-change: transform;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
    transition: filter 0.2s ease, transform 0.05s linear;
}

/* HAZ DE FAROS / HEADLIGHTS - Centrado geométrico perfecto en el eje del vehículo */
.car-headlights {
    position: absolute;
    bottom: calc(100% - 2px);
    left: 50%;
    transform: translateX(-50%);
    width: 250%;
    height: 95px;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 100%, rgba(12, 178, 219, 0.48) 0%, rgba(12, 178, 219, 0.18) 45%, transparent 75%);
    clip-path: polygon(32% 100%, 0% 0%, 100% 0%, 68% 100%);
    opacity: 0.88;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 12px rgba(12, 178, 219, 0.65));
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Haz personalizado para Mercedes Van VIP (tonalidad dorada cálida acorde a sus faros amarillos) */
#vip-car-cursor[data-model="van"] .car-headlights {
    background: radial-gradient(ellipse at 50% 100%, rgba(254, 240, 138, 0.55) 0%, rgba(229, 181, 79, 0.22) 45%, transparent 75%);
    filter: drop-shadow(0 0 14px rgba(229, 181, 79, 0.7));
}

/* SVG MODELOS */
.car-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Insignia BL en el techo */
.roof-insignia {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 8px;
    font-weight: 900;
    fill: #0cb2db;
    letter-spacing: 0.5px;
    text-shadow: 0 0 4px rgba(12, 178, 219, 0.8);
}

/* PULSO TÁCTIL / RIPPLE */
.vip-touch-ripple {
    position: fixed;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    margin-top: -14px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(12, 178, 219, 0.7) 0%, rgba(12, 178, 219, 0) 75%);
    pointer-events: none;
    z-index: 999995;
    animation: vipTouchPulse 0.45s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes vipTouchPulse {
    0% { transform: scale(0.6); opacity: 0.95; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* BOCADILLO MENSAJES "¡RESERVA YA!" */
.cursor-cta-bubble {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(8, 14, 26, 0.94);
    border: 1px solid rgba(12, 178, 219, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #e0f2fe;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7), 0 0 14px rgba(12, 178, 219, 0.45);
    opacity: 0;
    transform: translate3d(var(--bubble-shift-x, 24px), var(--bubble-shift-y, -36px), 0) scale(0.85);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000000;
    will-change: transform, opacity;
}

.cursor-cta-bubble.is-visible {
    opacity: 1;
    transform: translate3d(var(--bubble-shift-x, 24px), var(--bubble-shift-y, -36px), 0) scale(1);
}

.cta-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0cb2db;
    box-shadow: 0 0 8px #0cb2db, 0 0 12px #0cb2db;
    animation: vipPulseDot 1.2s infinite alternate;
}

@keyframes vipPulseDot {
    0% { opacity: 0.4; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.3); }
}

/* CANVAS DE ESTELA */
#trail-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999988;
}

/* ESTADOS DE INTERACCIÓN EN DESKTOP */
body.is-hovering #vip-car-cursor {
    filter: brightness(1.25) drop-shadow(0 0 12px rgba(12, 178, 219, 0.6));
}
body.is-hovering .car-headlights {
    opacity: 0.95;
    filter: drop-shadow(0 0 18px rgba(12, 178, 219, 0.9));
    background: radial-gradient(ellipse at 50% 100%, rgba(12, 178, 219, 0.65) 0%, rgba(12, 178, 219, 0.25) 45%, transparent 85%);
}
body.is-clicking #vip-car-cursor {
    transform: scale(0.92);
}

/* AISLAMIENTO TOTAL DE MODALES Y PANELES */
/* Cuando se abre un modal, popup o panel, el cursor y estela se ocultan inmediatamente */
body.modal-open #vip-cursor-container,
body.modal-open #trail-canvas,
body.has-modal #vip-cursor-container,
body.has-modal #trail-canvas,
body.vip-cursor-hidden #vip-cursor-container,
body.vip-cursor-hidden #trail-canvas,
body.vip-cursor-hidden .cursor-cta-bubble,
.tour-details-modal:not([hidden]) ~ #vip-cursor-container,
.tour-details-modal:not([hidden]) ~ #trail-canvas,
.tour-services-aux-modal:not([hidden]) ~ #vip-cursor-container,
.tour-services-aux-modal:not([hidden]) ~ #trail-canvas,
.logistics-table-modal:not([hidden]) ~ #vip-cursor-container,
.logistics-table-modal:not([hidden]) ~ #trail-canvas,
.blackline-video-modal:not([hidden]) ~ #vip-cursor-container,
.blackline-video-modal:not([hidden]) ~ #trail-canvas,
.index-image-zoom:not([aria-hidden="true"]) ~ #vip-cursor-container,
.index-image-zoom:not([aria-hidden="true"]) ~ #trail-canvas,
dialog[open] ~ #vip-cursor-container,
dialog[open] ~ #trail-canvas {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}