/* ojo.css — Ojo interactivo unificado (About + Music) + estética snuff.
   Pareja de js/ojo.js. Reemplaza a ojo-central.css y ojo-musica.css. */

/* ============================================================ OJO EN REPOSO */
.ojo {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 100px;
    height: 80px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}
.ojo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
    /* Borde difuminado: el ojo emerge de la oscuridad en vez de un óvalo recortado. */
    -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 44%, transparent 78%);
            mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 44%, transparent 78%);
    user-select: none;
    pointer-events: none;
    filter: contrast(1.2) brightness(1.08) saturate(0.82);
    animation: ojoBlink 6s ease-in-out infinite;
}
.ojo:hover { animation: ojoShake 0.42s infinite; }
.ojo:focus-visible { outline: 2px dashed #7a1a1a; outline-offset: 4px; }
.ojo--watch .ojo-img { filter: saturate(1.1) contrast(1.2) brightness(1.1); }
.ojo--look-up .ojo-img { object-position: 48% 30%; }
.ojo--look-down .ojo-img { object-position: 48% 78%; }
.ojo--look-up .ojo-img,
.ojo--look-down .ojo-img { transition: object-position 0.25s ease; }

@keyframes ojoBlink {
    0%, 92%, 100% { clip-path: inset(0 0 0 0); }
    95%, 97%      { clip-path: inset(46% 0 46% 0); }
}
@keyframes ojoShake {
    0%   { transform: translate(0, 0) rotate(-1.5deg); }
    25%  { transform: translate(-2px, 1.5px) rotate(1.5deg); }
    50%  { transform: translate(2px, -1.5px) rotate(-1.5deg); }
    75%  { transform: translate(-1.5px, 2px) rotate(1.5deg); }
    100% { transform: translate(0, 0) rotate(0); }
}

/* ================================================================ OVERLAY */
.ojo-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    height: 100dvh;
    display: none;
    background: #000;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ojo-overlay--on { display: block; opacity: 1; }
/* Sacudida brusca (glitch violento) */
.ojo-overlay--jolt { animation: ojoJolt 0.18s steps(2) both; }
@keyframes ojoJolt {
    0%   { transform: translate(0, 0); filter: brightness(1); }
    50%  { transform: translate(-6px, 3px) scale(1.012); filter: brightness(1.8) contrast(1.4); }
    100% { transform: translate(4px, -2px); filter: brightness(1); }
}

/* --------------------------------------------------------------- CAPAS FX */
.ojo-fx { position: absolute; inset: 0; pointer-events: none; }
.ojo-fx > * { position: absolute; inset: 0; }

/* Grano de película (ruido animado, intenso) */
.ojo-fx-grain {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' 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");
    opacity: 0.09;
    animation: ojoGrain 0.4s steps(4) infinite;
}
@keyframes ojoGrain {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2%, 1%); }
    50% { transform: translate(1%, -2%); }
    75% { transform: translate(-1%, -1%); }
}

/* Scanlines + barra de tracking que baja */
.ojo-fx-scan {
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.35) 3px, rgba(0,0,0,0) 4px),
        linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.02));
    mix-blend-mode: overlay;
    animation: ojoTracking 7s linear infinite;
}
@keyframes ojoTracking {
    0%   { background-position: 0 0, 0 0; }
    100% { background-position: 0 -120px, 0 0; }
}

/* Viñeta que respira */
.ojo-fx-vignette {
    background: radial-gradient(ellipse at center, transparent 28%, rgba(0,0,0,0.85) 100%);
    box-shadow: inset 0 0 220px 40px rgba(122, 26, 26, 0.12);
    animation: ojoVignette 5s ease-in-out infinite;
}
@keyframes ojoVignette {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* Flash rojo ocasional, totalmente aleatorio */
.ojo-fx-flash {
    background: rgba(122, 26, 26, 0.5);
    opacity: 0;
    animation: ojoFlash 11s steps(1) infinite;
}
@keyframes ojoFlash {
    0%, 96.4%, 100% { opacity: 0; }
    96.5%, 96.9% { opacity: 0.22; }
    97%, 97.3% { opacity: 0; }
    97.4% { opacity: 0.16; }
}

/* ----------------------------------------------------------------- HUD CAM */
.ojo-hud {
    position: absolute;
    top: 18px; left: 20px; right: 20px;
    z-index: 2010;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.82rem;
    letter-spacing: 1px;
    color: #d8d8d8;
    text-shadow: 0 0 4px #000;
    pointer-events: none;
}
.ojo-hud-rec { display: inline-flex; align-items: center; gap: 6px; color: #ff4040; font-weight: bold; }
.ojo-hud-rec i {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #e01010;
    box-shadow: 0 0 8px #ff2020;
    animation: ojoRec 1.1s steps(1) infinite;
}
@keyframes ojoRec { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } }
.ojo-hud-time { margin-left: auto; }
.ojo-hud-cam { opacity: 0.7; }

/* ------------------------------------------------------------- CERRAR */
.ojo-close {
    position: absolute;
    top: 14px; right: 16px;
    z-index: 2020;
    width: 44px; height: 44px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.3s, color 0.3s;
}
.ojo-close:hover,
.ojo-close:focus-visible { opacity: 1; color: #7a1a1a; transform: rotate(90deg); outline: none; }

/* --------------------------------------------------------------- DIÁLOGO */
.ojo-stage {
    position: relative;
    z-index: 2005;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    padding: 4.5rem 1.25rem 2rem;
    box-sizing: border-box;
}

/* El ojo que te observa durante la conversación (ya no desaparece). */
.ojo-watcher {
    flex: 0 0 auto;
    width: clamp(150px, 30vw, 230px);
    aspect-ratio: 250 / 200;
    animation: ojoWatch 5s ease-in-out infinite;
}
.ojo-watcher img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
    -webkit-mask-image: radial-gradient(ellipse 64% 62% at 50% 50%, #000 42%, transparent 76%);
            mask-image: radial-gradient(ellipse 64% 62% at 50% 50%, #000 42%, transparent 76%);
    filter: contrast(1.28) brightness(1.06);
}
@keyframes ojoWatch {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 38px rgba(122, 26, 26, 0.32)); }
    50% { transform: scale(1.035); filter: drop-shadow(0 0 64px rgba(122, 26, 26, 0.55)); }
}
.ojo-overlay--jolt .ojo-watcher { animation: ojoWatchJolt 0.18s steps(2); }
@keyframes ojoWatchJolt {
    0% { transform: translate(0, 0); }
    50% { transform: translate(5px, -3px) scale(1.05); filter: brightness(1.6) contrast(1.5); }
    100% { transform: translate(-3px, 2px); }
}
.ojo-text {
    margin: 0;
    max-width: 640px;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    line-height: 1.6;
    text-align: center;
    letter-spacing: 0.5px;
    white-space: pre-line;
    text-shadow: 0 2px 10px #000, 0 0 24px rgba(122, 26, 26, 0.35);
    user-select: none;
    min-height: 4.8em;
    /* Texto largo (p. ej. la dedicatoria) scrollea en su caja en vez de empujar
       al ojo y al input fuera de la pantalla. El typewriter auto-scrollea (ojo.js). */
    max-height: 56vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #7a1a1a transparent;
}
.ojo-text--glitch { animation: ojoTextGlitch 0.28s steps(2); }
@keyframes ojoTextGlitch {
    0%, 100% { transform: translateX(0); text-shadow: 0 2px 10px #000; }
    25% { transform: translateX(3px); text-shadow: -2px 0 #ff2b2b, 2px 0 #2b7bff; }
    50% { transform: translateX(-3px) skewX(-1deg); text-shadow: 2px 0 #ff2b2b, -2px 0 #2b7bff; }
    75% { transform: translateX(1px); text-shadow: -1px 0 #ff2b2b, 1px 0 #2b7bff; }
}

/* Input: oculto hasta terminar el tipeo; fija abajo en móvil */
.ojo-form {
    display: flex;
    gap: 0.5em;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 460px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.ojo-form--on { opacity: 1; transform: none; pointer-events: auto; }
.ojo-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6em 0.8em;
    font-family: inherit;
    font-size: 1rem;
    color: #fff;
    background: rgba(20, 20, 22, 0.85);
    border: 1px solid #7a1a1a;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.ojo-field:focus { border-color: #fff; box-shadow: 0 0 14px rgba(122, 26, 26, 0.5); }
.ojo-send {
    flex: 0 0 auto;
    padding: 0.55em 1.2em;
    font-family: inherit;
    font-size: 1rem;
    color: #fff;
    background: #7a1a1a;
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.ojo-send:hover { background: #fff; color: #7a1a1a; transform: scale(1.05); }

/* ------------------------------------------------------------- SUSURROS */
.ojo-whisper {
    position: fixed;
    right: 24px;
    bottom: 104px;
    z-index: 1500;
    max-width: 240px;
    padding: 8px 12px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: #cfcfcf;
    background: rgba(10, 10, 10, 0.55);
    border: 1px solid rgba(122, 26, 26, 0.4);
    text-shadow: 0 0 6px #000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s, transform 0.5s;
}
.ojo-whisper--on { opacity: 1; transform: none; }
.ojo-whisper--hover { color: #fff; }
.ojo-whisper--react { border-color: rgba(122, 26, 26, 0.7); }

/* ============================================ DESCENSO (Postal / Manhunt)
   Intensidad escalada por --madness (0..5). Intenso pero seguro:
   los destellos van por debajo del umbral fotosensible (rojos, ~1/seg, sin
   estrobo de luminancia). Todo se desactiva con prefers-reduced-motion. */
.ojo-overlay--descent { --madness: 0; background: #080000; }

/* Temblor de pantalla: tiembla la capa FX y el ojo observador; el input NO
   (sigue usable). Amplitud proporcional a la locura. */
.ojo-overlay--descent .ojo-fx,
.ojo-overlay--descent .ojo-watcher {
    animation: descentShake 0.16s steps(2) infinite;
}
@keyframes descentShake {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(calc(var(--madness) * -2px), calc(var(--madness) * 1.4px)); }
    50%  { transform: translate(calc(var(--madness) * 2px),  calc(var(--madness) * -1.4px)); }
    75%  { transform: translate(calc(var(--madness) * -1.4px), calc(var(--madness) * -2px)); }
    100% { transform: translate(0, 0); }
}

/* Texto enrojecido, más agresivo con la locura */
.ojo-overlay--descent .ojo-text {
    color: #ff5a5a;
    text-shadow: 0 0 10px rgba(255, 40, 40, 0.55), 0 2px 8px #000;
    letter-spacing: calc(0.5px + var(--madness) * 0.4px);
}

/* Grano y viñeta roja que se intensifican */
.ojo-overlay--descent .ojo-fx-grain { opacity: calc(0.1 + var(--madness) * 0.035); }
.ojo-overlay--descent .ojo-fx-vignette {
    box-shadow: inset 0 0 240px 50px rgba(122, 26, 26, calc(0.14 + var(--madness) * 0.07));
}

/* El ojo observador enrojece */
.ojo-overlay--descent .ojo-watcher img {
    filter: contrast(1.4) brightness(1.08) sepia(0.35) hue-rotate(-28deg) saturate(1.7);
}

/* Destello rojo: ráfagas cortas (~1/seg, máx por debajo de 3/seg), opacidad
   sub-umbral escalada por --madness. Rojo, nunca blanco a pantalla completa. */
.ojo-overlay--descent .ojo-fx-flash {
    background: rgba(150, 16, 16, calc(0.16 + var(--madness) * 0.05));
    animation: descentFlash 1.7s steps(1) infinite;
}
@keyframes descentFlash {
    0%, 30%, 60%, 100% { opacity: 0; }
    33%, 37% { opacity: 1; }
    52%, 55% { opacity: 0.8; }
}

/* ============================================================ RESPONSIVE */
@media (max-width: 768px) {
    .ojo { right: 14px; bottom: 14px; width: 78px; height: 62px; }
    /* Diálogo agrupado al centro: "space-between" empujaba el input al borde
       inferior, fuera del alcance del pulgar. Ahora ojo + texto + campo quedan
       juntos y centrados; el texto largo scrollea en su propia caja. */
    .ojo-stage {
        justify-content: center;
        gap: 1rem;
        padding: 3.25rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
    }
    .ojo-watcher { width: clamp(92px, 22vw, 130px); }  /* más chico: deja sitio al texto y al input */
    .ojo-text {
        font-size: 1.12rem;
        min-height: 0;
        max-height: 38vh;
        flex: 0 1 auto;
        -webkit-overflow-scrolling: touch;
    }
    .ojo-form { max-width: 100%; flex: 0 0 auto; }
    .ojo-whisper { right: 12px; bottom: 70px; font-size: 0.82rem; }
    .ojo-hud { font-size: 0.74rem; gap: 10px; }
}

/* ====================================================== REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    .ojo-img,
    .ojo:hover,
    .ojo-watcher,
    .ojo-fx-grain,
    .ojo-fx-scan,
    .ojo-fx-vignette,
    .ojo-fx-flash,
    .ojo-hud-rec i,
    .ojo-overlay--jolt,
    .ojo-overlay--descent .ojo-fx,
    .ojo-text--glitch {
        animation: none !important;
    }
    .ojo-overlay { transition: none; }
}