/* ============================
   REPRODUCTOR DE VERTIGO
   Efecto de imagenes a alta velocidad
   con sensacion de desorientacion controlada
   ============================ */

.vertigo-player {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: #0a0a0a;
}

/* Capa base permanente - siempre visible, muy tenue */
.vertigo-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: none;
    will-change: opacity, transform;
}

.vertigo-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(100%) contrast(1.1);
}

/* Cada capa tiene su propia animacion de opacidad ciclica */
/* Los timings estan escalonados para nunca sincronizarse */

/* Capa 0: Fondo permanente, opacidad baja, pulso lento */
.vertigo-layer-0 {
    animation: vertigoPulse1 8s ease-in-out infinite;
    animation-delay: 0s;
}

/* Capa 1: Destellos rapidos */
.vertigo-layer-1 {
    animation: vertigoFlash 4s ease-in-out infinite;
    animation-delay: 0.7s;
}

/* Capa 2: Apariciones breves */
.vertigo-layer-2 {
    animation: vertigoGhost 5s ease-in-out infinite;
    animation-delay: 1.4s;
}

/* Capa 3: Presencia media */
.vertigo-layer-3 {
    animation: vertigoPulse2 6s ease-in-out infinite;
    animation-delay: 2.1s;
}

/* Capa 4: Destellos cortos */
.vertigo-layer-4 {
    animation: vertigoFlash 3.5s ease-in-out infinite;
    animation-delay: 2.8s;
}

/* Capa 5: Fantasma lento */
.vertigo-layer-5 {
    animation: vertigoGhost 7s ease-in-out infinite;
    animation-delay: 0.3s;
}

/* Capa 6: Pulso intenso */
.vertigo-layer-6 {
    animation: vertigoPulse3 4.5s ease-in-out infinite;
    animation-delay: 1.1s;
}

/* Capa 7: Flash muy rapido */
.vertigo-layer-7 {
    animation: vertigoFlashFast 2.8s ease-in-out infinite;
    animation-delay: 1.8s;
}

/* Keyframes - cada uno con patron unico de opacidad */

/* Pulse1: Lento, presencia constante baja */
@keyframes vertigoPulse1 {
    0%   { opacity: 0.15; transform: scale(1); }
    25%  { opacity: 0.35; transform: scale(1.03); }
    50%  { opacity: 0.2; transform: scale(1.01); }
    75%  { opacity: 0.4; transform: scale(1.04); }
    100% { opacity: 0.15; transform: scale(1); }
}

/* Pulse2: Medio, ondulante */
@keyframes vertigoPulse2 {
    0%   { opacity: 0; transform: scale(1.05); }
    15%  { opacity: 0.5; transform: scale(1.02); }
    40%  { opacity: 0.15; transform: scale(1.04); }
    60%  { opacity: 0.6; transform: scale(1.01); }
    80%  { opacity: 0.2; transform: scale(1.03); }
    100% { opacity: 0; transform: scale(1.05); }
}

/* Pulse3: Intenso, breve */
@keyframes vertigoPulse3 {
    0%   { opacity: 0; transform: scale(1); }
    10%  { opacity: 0; transform: scale(1.02); }
    30%  { opacity: 0.7; transform: scale(1.06); }
    50%  { opacity: 0.3; transform: scale(1.03); }
    70%  { opacity: 0.8; transform: scale(1.05); }
    90%  { opacity: 0.1; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1); }
}

/* Flash: Destellos cortos y fuertes */
@keyframes vertigoFlash {
    0%   { opacity: 0; }
    5%   { opacity: 0; }
    20%  { opacity: 0.85; transform: scale(1.04); }
    35%  { opacity: 0.1; }
    50%  { opacity: 0; }
    65%  { opacity: 0.6; transform: scale(1.02); }
    80%  { opacity: 0; }
    100% { opacity: 0; }
}

/* FlashFast: Destellos muy rapidos */
@keyframes vertigoFlashFast {
    0%   { opacity: 0; }
    8%   { opacity: 0.9; transform: scale(1.05); }
    20%  { opacity: 0; }
    35%  { opacity: 0; }
    45%  { opacity: 0.5; transform: scale(1.03); }
    55%  { opacity: 0; }
    70%  { opacity: 0; }
    82%  { opacity: 0.7; transform: scale(1.04); }
    92%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Ghost: Aparicion y desvanecimiento lento */
@keyframes vertigoGhost {
    0%   { opacity: 0; filter: grayscale(100%) blur(0px); }
    20%  { opacity: 0.3; filter: grayscale(100%) blur(0px); }
    40%  { opacity: 0.65; filter: grayscale(100%) blur(0px); transform: scale(1.03); }
    60%  { opacity: 0.25; filter: grayscale(100%) blur(1px); }
    80%  { opacity: 0.5; filter: grayscale(100%) blur(0px); transform: scale(1.01); }
    100% { opacity: 0; filter: grayscale(100%) blur(0px); }
}

/* Overlay de vignette oscuro para dar profundidad */
.vertigo-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 30%,
        rgba(0,0,0,0.4) 70%,
        rgba(0,0,0,0.8) 100%
    );
    z-index: 50;
    pointer-events: none;
}

/* Overlay de grano para textura */
.vertigo-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.04;
    z-index: 51;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Texto superpuesto en el vertigo */
.vertigo-content {
    position: absolute;
    bottom: 8vh;
    left: 0;
    right: 0;
    z-index: 60;
    text-align: center;
    color: #fff;
    pointer-events: none;
}

.vertigo-label {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 1rem;
}

.vertigo-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 400;
    line-height: 1.1;
    opacity: 0.95;
    text-shadow: 0 4px 30px rgba(0,0,0,0.5);
}

.vertigo-subtitle {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    opacity: 0.7;
    margin-top: 1.5rem;
}

/* Scroll indicator */
.vertigo-scroll {
    position: absolute;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    color: rgba(255,255,255,0.4);
    animation: vertigoBounce 2.5s ease-in-out infinite;
}

@keyframes vertigoBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; }
    50% { transform: translateX(-50%) translateY(12px); opacity: 0.8; }
}

/* Responsive */
@media (max-width: 768px) {
    .vertigo-player {
        min-height: 100svh;
    }
    .vertigo-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
    }
    .vertigo-layer img {
        object-position: center 20%;
    }
}