/* =====================================================================
   watchers.css — the look of sky/watchers.js: reset 6, the watchers.
   ===================================================================== */

/* ---------------- the eyes in the rooms ---------------- */
.watcher {
    position: absolute;
    z-index: 3;
    width: clamp(26px, 2.6vw, 44px);
    aspect-ratio: 60 / 32;
    transform: translate(-50%, -50%) scaleY(.06);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, .7));
    transition: transform .35s cubic-bezier(.3, .7, .3, 1), opacity .35s;
}
.watcher > svg,
.watcher > .art { display: block; width: 100%; height: 100%; object-fit: contain; }
.watcher .we-look { transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: transform .25s ease-out; }
.watcher.open { transform: translate(-50%, -50%) scaleY(1); opacity: 1; }
.watcher.blink { animation: we-blink .32s ease-in-out; }
@keyframes we-blink { 45% { transform: translate(-50%, -50%) scaleY(.06); } }

/* the hallway's one that never blinks (reset 6): a little bigger, always open, and it can be touched */
.watcher.still {
    width: clamp(34px, 3.4vw, 56px);
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.watcher.still:focus-visible { outline: 2px dashed #fff6dc; outline-offset: 4px; }
.watcher.still.weeping { transform: translate(-50%, -50%) scaleY(.06); transition: transform 1.4s ease-in .3s; }
/* a tear, welling and running down the wall */
.watcher.still::after {
    content: "";
    position: absolute;
    left: 46%;
    top: 70%;
    width: 5px;
    height: 7px;
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    background: rgba(220, 235, 255, .9);
    box-shadow: 0 0 4px rgba(255, 255, 255, .6);
    opacity: 0;
}
.watcher.still.weeping::after { animation: we-tear 1.6s ease-in .5s forwards; }
@keyframes we-tear { 0% { opacity: 0; } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(46px) scaleY(1.6); } }
.watcher.still.gone { opacity: 0; pointer-events: none; transition: opacity 1s; }

/* ---------------- the eye in the sky (through the telescope, looking up) ---------------- */
.gaze {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    visibility: hidden;
    clip-path: circle(min(45vh, 46vw) at 50% 48%);      /* (the telescope's lens: the same as the stars in it, sky.css) */
}
.gaze.up { visibility: visible; }
.gaze .ge-eye {
    position: absolute;
    left: 50%;
    top: 37%;
    width: min(54vh, 64vw);
    aspect-ratio: 200 / 110;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(.02);
    pointer-events: none;
    filter: drop-shadow(0 0 18px rgba(255, 200, 120, .35));
    transition: transform 1.8s cubic-bezier(.3, .7, .2, 1), opacity 1s;
    -webkit-tap-highlight-color: transparent;
}
.gaze .ge-eye > svg,
.gaze .ge-eye > .art { display: block; width: 100%; height: 100%; object-fit: contain; }
.gaze .ge-eye:focus-visible { outline: none; }
.gaze .ge-look { transform: translate(calc(var(--lx, 0px) * 2.4), calc(var(--ly, 0px) * 2.4)); transition: transform .3s ease-out; }
.gaze.open .ge-eye { opacity: 1; transform: translate(-50%, -50%) scaleY(1); pointer-events: auto; cursor: pointer; }
.gaze.painted.up .ge-eye { opacity: .95; transform: translate(-50%, -50%); pointer-events: auto; cursor: default; filter: none; }
/* meeting it: it widens, the pupil opens all the way, and it burns */
.gaze.staring .ge-eye { transform: translate(-50%, -50%) scale(1.3); transition: transform 1.6s ease-in; }
.gaze.staring .ge-pupil { transform-box: fill-box; transform-origin: 50% 50%; animation: ge-dilate 1.5s ease-in forwards; }
@keyframes ge-dilate { to { transform: scale(5.4, 1.6); } }
.gaze-flash {
    position: fixed;
    inset: 0;
    z-index: 2147482500;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 40%, #fff 0, #fffbe8 45%, #ffe7a8 100%);
    transition: opacity .7s ease-in;
}
.gaze-flash.on { opacity: 1; }
.gaze-flash.fading { opacity: 0; transition: opacity 1.4s ease-out; }
/* the traveller, after: burnt black where they stood, then gone to ash */
.scene-character.burnt { filter: brightness(0) contrast(1.4) drop-shadow(0 0 6px rgba(255, 140, 40, .5)); }
.scene-character.crumbling { animation: gz-crumble 2s ease-in forwards; transform-origin: 50% 100%; }
@keyframes gz-crumble { to { opacity: 0; transform: scaleY(.35) scaleX(1.2); } }
.gaze-ash {
    position: fixed;
    z-index: 4;
    width: 5px;
    height: 4px;
    background: #2a2622;
    box-shadow: 0 0 2px rgba(255, 120, 40, .5);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .watcher, .gaze .ge-eye, .gaze .ge-look, .watcher .we-look { transition: none; }
    .watcher.blink { animation: none; }
}