/* Reading-eyes strip above the secret textarea.
   No third-party resources. Face images and eye geometry: see "Faces" below. */

:root {
  --navy: #111f42;
  --page-bg: #0a1022;
  --field-bg: #0d1630;
  --field-border: #24325e;
  --text: #e8ecf8;
  --muted: #8d98b8;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--page-bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.4;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 56px;
}

.page__title {
  margin: 0 0 24px;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Card: strip + textarea as one block ---- */

.card {
  container-type: inline-size;
  margin: 0;
}

.field {                     /* one border and focus ring around strip + textarea */
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.field:focus-within {
  border-color: #5b7cff;
  box-shadow: 0 0 0 1px #5b7cff;
}

/* ---- Faces ----
   Swap the face by changing the face--* class on .field in index.html.
   Cartoon values come from: python -I tools/oogstrook.py <image> <output.webp>
   Photo values come from:   python -I tools/foto-ogen.py

   Optional per face (defaults suit the cartoons):
     --sclera, --eye-shade          eyeball fill, and a shadow drawn over it under the upper lid
     --iris-l, --iris-r, --glint    pupil/iris fill per eye, and its highlight
     --lid-color, --lash-color      the eyelid used for blinking
     --eye-l-cx/-cy, --eye-r-cx/-cy where the iris rests in each eye box (fraction of the box)
     --gaze-x, --gaze-y             how far the iris travels compared to the cartoons (1 = same) */

.face--eigen {
  --face-img: url("../assets/gezicht-eigen.webp");
  --face-ar: 3.4835;         /* 2752 / 790 */
  --strip-bg: var(--navy);
  --eye-left-x: 18.20%;
  --eye-right-x: 60.57%;
  --eye-top: 58.10%;
  --eye-w: 21.26%;           /* the wider of the two eyes, so no hole is left uncovered */
  --eye-h: 33.54%;
  --pupil-d: 60%;            /* pupil diameter, % of eye box height */
}

.face--gadget {
  --face-img: url("../assets/gezicht-gadget.webp");
  --face-ar: 3.4924;         /* 2752 / 788 */
  --strip-bg: #10152b;
  --eye-left-x: 29.65%;
  --eye-right-x: 54.43%;
  --eye-top: 56.09%;
  --eye-w: 15.99%;
  --eye-h: 19.67%;
  --pupil-d: 60%;
  --lid-color: #614848;
  --lash-color: #111;
}

.face--foto {
  --face-img: url("../assets/gezicht-foto.webp");
  --face-ar: 3.4965;         /* 1493 / 427 */
  --strip-bg: #0f1420;
  --eye-left-x: 32.48%;
  --eye-right-x: 58.61%;
  --eye-top: 55.97%;
  --eye-w: 9.65%;
  --eye-h: 11.71%;
  --pupil-d: 126%;           /* the iris is taller than the eye opening, like a real eye */
  --eye-l-cx: 0.587;  --eye-l-cy: 0.33;
  --eye-r-cx: 0.396;  --eye-r-cy: 0.28;
  --gaze-x: 0.8;
  --gaze-y: 0.8;
  --sclera: radial-gradient(ellipse 60% 70% at 50% 55%, #d6c6be, #c3aea6 55%, #8a736b);
  --eye-shade: linear-gradient(rgba(45, 25, 20, 0.6), rgba(45, 25, 20, 0) 45%);
  --iris-l: url("../assets/iris-foto-l.webp") center / 100% 100% no-repeat;
  --iris-r: url("../assets/iris-foto-r.webp") center / 100% 100% no-repeat;
  --glint: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 30%, rgba(255, 255, 255, 0) 70%);
  --lid-color: linear-gradient(#c49a8e, #ad8075);
  --lash-color: #3a2420;
}

/* Full photo: he holds a letter and the textarea sits on it. Eyes are lowered, so they only
   read from side to side. */
.face--brief {
  --face-img: url("../assets/gezicht-brief.webp");
  --face-ar: 0.796;          /* 1592 / 2000 */
  --face-mask: none;
  --strip-bg: #45453b;
  --eye-left-x: 36.12%;
  --eye-right-x: 57.60%;
  --eye-top: 35.65%;
  --eye-w: 8.48%;
  --eye-h: 1.70%;
  --pupil-d: 176%;
  --eye-l-cx: 0.578;  --eye-l-cy: 0.059;
  --eye-r-cx: 0.348;  --eye-r-cy: 0.059;
  --gaze-x: 0.5;
  --gaze-y: 0.1;
  --sclera: radial-gradient(ellipse 60% 80% at 50% 70%, #b9a49b, #8d766d 60%, #5e4a43);
  --eye-shade: linear-gradient(rgba(40, 22, 18, 0.65), rgba(40, 22, 18, 0) 60%);
  --iris-l: url("../assets/iris-brief-l.webp") center / 100% 100% no-repeat;
  --iris-r: url("../assets/iris-brief-r.webp") center / 100% 100% no-repeat;
  --glint: none;
  --lid-color: linear-gradient(#b38c83, #c59f96);
  --lash-color: #2e1c18;
  --letter-x: 16.33%;
  --letter-y: 41.00%;
  --letter-w: 69.10%;
  --letter-h: 23.50%;
  position: relative;
}

.card:has(.face--brief) {
  max-width: 520px;
  margin-inline: auto;
}

.face--brief .strip {
  height: auto;
  aspect-ratio: var(--face-ar);
}

.face--brief .secret {
  position: absolute;
  left: var(--letter-x);
  top: var(--letter-y);
  width: var(--letter-w);
  height: var(--letter-h);
  min-height: 0;
  padding: 0.6em 0.8em;
  resize: none;
  background: transparent;
  color: #1f1d1a;
  font: clamp(12px, 3.1cqw, 17px)/1.45 "Courier New", Courier, ui-monospace, monospace;
  transform: rotate(-0.7deg);  /* the letter is held slightly askew */
}

.face--brief .secret::placeholder { color: #8b8780; }

/* ---- Strip ---- */

.strip {
  /* Fixed height, but never taller than what the full image width allows */
  height: min(clamp(96px, 14vw, 150px), calc(100cqw / var(--face-ar)));
  display: flex;
  justify-content: center;
  overflow: hidden;
  background: var(--strip-bg);
}

.eyes {
  --px: 0.5;
  --py: 0.62;
  --dur: 0ms;
  position: relative;
  flex: none;
  height: 100%;
  aspect-ratio: var(--face-ar);
}

.eyes::after {               /* the face itself, on top of the eye whites and pupils */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--face-img) center / 100% 100% no-repeat;
  /* Fade the far left and right so a hat brim running to the image edge blends into the strip */
  -webkit-mask-image: var(--face-mask, linear-gradient(to right, transparent, #000 6%, #000 94%, transparent));
  mask-image: var(--face-mask, linear-gradient(to right, transparent, #000 6%, #000 94%, transparent));
  pointer-events: none;
}

.eye {
  position: absolute;
  top: var(--eye-top);
  width: var(--eye-w);
  height: var(--eye-h);
  background: var(--sclera, #fff);
  overflow: hidden;
  container-type: size;      /* enables cqw / cqh relative to the eye box */
}

.eye::after {                /* shadow of the upper lid, over iris and eyelid alike */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--eye-shade, none);
  pointer-events: none;
}

.eye--left  { left: var(--eye-left-x);  --cx: var(--eye-l-cx, 0.5); --cy: var(--eye-l-cy, 0.58); }
.eye--right { left: var(--eye-right-x); --cx: var(--eye-r-cx, 0.5); --cy: var(--eye-r-cy, 0.58); }

.pupil {
  /* --px/--py come from JS (0.5 / 0.58 = looking straight ahead); each face maps them onto its own eye */
  --x: calc(var(--cx) + (var(--px) - 0.5) * var(--gaze-x, 1));
  --y: calc(var(--cy) + (var(--py) - 0.58) * var(--gaze-y, 1));
  position: absolute;
  top: 0;
  left: 0;
  height: var(--pupil-d);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2b1d18;
  transform: translate(calc(var(--x) * 100cqw - 50%), calc(var(--y) * 100cqh - 50%));
  transition: transform var(--dur) ease-out;
  will-change: transform;
}

.eye--left .pupil  { background: var(--iris-l, #2b1d18); }
.eye--right .pupil { background: var(--iris-r, #2b1d18); }

.pupil::after {
  content: "";
  position: absolute;
  top: 16%;
  left: 20%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--glint, #fff);
}

.lid {
  position: absolute;
  inset: 0;
  background: var(--lid-color, #f6b796);
  transform: scaleY(0);
  transform-origin: top;
}

.lid::after {              /* lash line */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6%;
  background: var(--lash-color, #4b2d25);
}

.eyes.is-blinking .lid {
  animation: blink 160ms ease-in-out both;
}

@keyframes blink {
  0%   { transform: scaleY(0); }
  50%  { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

/* ---- Textarea ---- */

.secret {
  display: block;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  min-height: 9em;
  resize: vertical;
  background: var(--field-bg);
  color: var(--text);
  border: 0;
  border-radius: 0;
  font: 1rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.secret::placeholder { color: var(--muted); }

.secret:focus { outline: none; }   /* the ring is drawn on .field */

/* ---- Button ---- */

.btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: #3b5bdb;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.btn:hover { background: #4c6ef5; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pupil { transition: none; }
  .eyes.is-blinking .lid { animation: none; }
}