/* puzzle.css — the gate: eye · triangle · heart-drag · alarm. Paired with puzzle.js.
   The Last Psyop reveal/landing styles live in landing.css (both linked by index.html). */
:root { --dread: 0; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* light root → the address-bar / overscroll gap on mobile blends with the page instead of
   flashing a grey strip (it used to be dark, which showed on Safari/Chrome/DuckDuckGo). */
html { background: #f4f2ea; }
body { background: #f4f2ea; }
/* EYE MODE: locked — no scroll, no overscroll/pull, no zoom, no text-select */
body {
  font: 400 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif; color: #141008;
  overflow: hidden; overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
#eyeHit { cursor: pointer; }
#boom { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 80; pointer-events: none; display: none; }

/* ░ THE EYE — inverted scheme: white world, solid yellow triangle w/ black line ░ */
#hero {
  /* STATIC svh (not dynamic dvh): dvh is recomputed a frame after load on Firefox once the toolbar
     settles, which moved the static-sized triangle down-then-up into place. svh equals vh on desktop
     and stays put. Kept identical to the inlined critical CSS in index.html so there's no reflow. */
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: 1rem 1rem calc(11vh + env(safe-area-inset-bottom, 0px));   /* room at the bottom for the heart, above the gesture bar */
  background: #f4f2ea; transition: opacity 1s ease;
}
#hazard { width: min(92vw, 88vh, 660px); height: auto; flex: none; position: relative; z-index: 1; will-change: transform; }
.tri { fill: #f2dd00; stroke: #0c0c0c; stroke-width: 14; transition: opacity .9s ease; }
.rim { stroke: #0c0c0c; stroke-width: 7; }
/* the closed-lid line — starts hidden (the eye opens with no blink); JS fades it in only while the
   lid closes. Without opacity:0 here it flashes across the eye on load in Firefox, whose first rAF
   (which sets the opacity) fires a beat after first paint. */
.crease { stroke: #0c0c0c; stroke-width: 7; stroke-linecap: round; opacity: 0; }
#scleraE { fill: #f2dd00; }                                            /* eye blends into the sign… */
#hi { fill: #fff7c0; opacity: .85; }
body.blessed .tri { opacity: 0; }

/* DEMO: the proximity red wash is replaced by a triangle-contained glow drawn inside #hazard,
   so the full-screen wash is disabled here — red can't leak over/beside the triangle. */
#dread { display: none !important; }
#reel text { fill: #0c0c0c; }   /* keep the hazard glyphs black on the yellow if they render monochrome */

/* ░ pinned credit + draggable heart ░ */
.credit {
  position: fixed; left: 0; right: 0; z-index: 85; margin: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);   /* lifted clear of the OS edge-gesture zone */
  padding: 10px; text-align: center;
  color: #6a6052; font: 600 14px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .04em;
}
#heart { display: inline-block; vertical-align: -.06em; touch-action: none; user-select: none; }
#heart.dragging {
  position: fixed; z-index: 90; margin: 0; font-size: 52px; line-height: 1;
  top: 0; left: 0; will-change: transform;   /* anchored at the origin; JS drives position via transform (no reflow) */
  transform: translate(-50%, -50%); filter: drop-shadow(0 0 16px rgba(255,90,160,.85));
}
.sparkle { position: fixed; pointer-events: none; z-index: 88; transform: translate(-50%,-50%); will-change: transform, opacity; animation: spark .7s ease-out forwards; }
@keyframes spark {
  from { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3) rotate(35deg); }
}
/* flat iris (default): solid yellow disc with a black outline, no reflection */
#irisC { fill: #f2dd00; stroke: #0c0c0c; stroke-width: 6; }
#hi { display: none; }

/* tapping the eye: it flares RED and the info-"i" lights up before the rabbit hole */
body.alarm #irisC { fill: #ff1500; stroke: #2a0000; transition: fill .12s; }
body.alarm #pupil { fill: #000; }
body.alarm #gaze  { filter: drop-shadow(0 0 12px #ffe000) drop-shadow(0 0 30px #ff3000) drop-shadow(0 0 60px rgba(255,60,0,.7)) !important; }
body.alarm #dread { opacity: .9 !important; }