/* SECTION 04 — the eye wall (js/eyes.js, js/eye-tiles.js), and the opening of SECTION 05, which
   slides up over it. The wall is sticky; the calm ivory panel that follows in the page scrolls up
   over it, so it physically covers the grid while the grid drifts upward. */

.eyes { position: relative; isolation: isolate; background: var(--black); border-radius: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) 0 0; overflow: clip; }   /* clip, not hidden: the wall stays sticky */
.eyes-stick { position: sticky; top: var(--nav-h); z-index: 0; height: calc(100svh - var(--nav-h)); overflow: hidden; }
.eyes-grid { display: grid; grid-template-columns: repeat(var(--cols, 10), 1fr); will-change: transform; }

/* ---------- One tile: square, colour-blocked, a flat eye ---------- */
.eye { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg); backface-visibility: hidden; }
.eye-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.eye-ball { position: absolute; overflow: hidden; border-radius: 50%; }
.eye-aim {
  position: absolute; inset: 0; display: grid; place-items: center;
  transform: translate(var(--ax, 0%), var(--ay, 0%));              /* a glance toward the pointer */
  transition: transform 520ms cubic-bezier(0.3, 0.7, 0.2, 1);
}
.eye-iris { aspect-ratio: 1; }
.eye-iris svg { display: block; width: 100%; height: 100%; }
.eye-lid { position: absolute; inset: 0; background: var(--lid); border-bottom: 3px solid #111; transform: scaleY(0); transform-origin: 50% 0; }

/* ---------- Eight look paths: quick glances (saccades) between holds. Each tile picks a path,
   a duration (5–12s) and a start offset, so no two eyes move together. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .eye-iris { animation: var(--dur, 8s) cubic-bezier(0.5, 0, 0.1, 1) var(--delay, 0s) infinite both; }
  .look-1 { animation-name: eye-look-1; } .look-2 { animation-name: eye-look-2; } .look-3 { animation-name: eye-look-3; } .look-4 { animation-name: eye-look-4; }
  .look-5 { animation-name: eye-look-5; } .look-6 { animation-name: eye-look-6; } .look-7 { animation-name: eye-look-7; } .look-8 { animation-name: eye-look-8; }
  .eye-lid { animation: eye-blink var(--blink) linear var(--blink-delay) infinite; }
  .eyes.is-off .eye-iris, .eyes.is-off .eye-lid { animation-play-state: paused; }   /* off screen: no work */

  @keyframes eye-look-1 { 0%, 16% { translate: 0 0; } 20%, 44% { translate: -34% 0; } 48%, 70% { translate: 30% 4%; } 74%, 100% { translate: 0 0; } }
  @keyframes eye-look-2 { 0%, 12% { translate: 0 0; } 16%, 40% { translate: 0 -28%; } 44%, 64% { translate: 4% 26%; } 68%, 100% { translate: 0 0; } }
  @keyframes eye-look-3 { 0%, 20% { translate: 0 0; } 24%, 50% { translate: -26% -22%; } 54%, 80% { translate: 24% 18%; } 84%, 100% { translate: 0 0; } }
  @keyframes eye-look-4 { 0%, 30% { translate: 30% 0; } 34%, 52% { translate: -20% -10%; } 56%, 100% { translate: 30% 0; } }
  @keyframes eye-look-5 { 0%, 34% { translate: -30% 2%; } 38%, 56% { translate: 22% 12%; } 60%, 100% { translate: -30% 2%; } }
  @keyframes eye-look-6 { 0%, 40% { translate: 0 -26%; } 44%, 60% { translate: 26% -8%; } 64%, 100% { translate: 0 -26%; } }
  @keyframes eye-look-7 { 0%, 38% { translate: 4% 26%; } 42%, 62% { translate: -24% 6%; } 66%, 100% { translate: 4% 26%; } }
  @keyframes eye-look-8 { 0%, 25% { translate: 0 0; } 27%, 33% { translate: 32% -12%; } 35%, 60% { translate: 0 0; } 62%, 68% { translate: -30% 14%; } 70%, 100% { translate: 0 0; } }
  @keyframes eye-blink { 0%, 93% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .eye-iris { translate: calc(var(--rx) * 100%) calc(var(--ry) * 100%); }   /* each eye still looks its own way */
  .eye-lid { display: none; }
  .eye-aim { transition: none; }
}

/* ---------- SECTION 05 opens: a calm, editorial ivory panel that covers the wall ---------- */
.eyes-cover {
  position: relative; z-index: 1;
  margin-top: 60svh;                                                 /* rises while the last tiles are still flying: never a blank screen */
  min-height: calc(100svh - var(--nav-h));
  display: grid; align-content: center; gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(4rem, 10vw, 8rem) var(--gutter);
  background: var(--ivory); color: var(--black); font-family: var(--satoshi);
  border-radius: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) 0 0;
  box-shadow: 0 -24px 60px rgb(0 0 0 / 0.28);
}
.eyes-title { margin: 0; max-width: 12ch; font: 900 clamp(3rem, 9vw, 10rem)/0.86 var(--satoshi); letter-spacing: -0.055em; text-transform: uppercase; }
.eyes-sub {
  justify-self: end; margin: 0; max-width: 30ch; padding-top: 1.25rem; border-top: 1px solid rgb(17 17 17 / 0.25);
  font: 500 clamp(1.1rem, 1.6vw, 1.5rem)/1.45 var(--satoshi); color: #3A3A33;
}
.ew { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.14em 0.12em 0.16em; margin: -0.14em -0.12em -0.16em;   /* room for the whole letter: tight tracking and line-height otherwise shave its edges */ }
.ew > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .eyes-cover .ew > span { translate: 0 150%; transition: translate 900ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 110ms); }
  .js .eyes-cover .eyes-sub { opacity: 0; translate: 0 1rem; transition: opacity 700ms var(--ease) 450ms, translate 900ms var(--ease) 450ms; }
  .js .eyes-cover.is-in .ew > span, .js .eyes-cover.is-in .eyes-sub { translate: 0 0; opacity: 1; }
}

@media (max-width: 760px) {
  .eyes-cover { margin-top: 55svh; }
  .eyes-sub { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .eyes-cover { margin-top: 30svh; }                               /* no shatter: the panel just covers the wall */
}