/* Eye-alignment demo visuals. Abstract only - gradient sky + soft silhouette,
   never a face. Eye targets sit at the app's real normalized coordinates. */

.ae-strip {
  --mix: 1;                      /* 0 = raw, 1 = aligned (scrub) */
  display: flex; gap: var(--ae-space-md);
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
}

.ae-frame {
  position: relative;
  /* Share the row rather than hold a fixed width, so whatever number of frames
     is on screen always fits it exactly. `max-width` keeps the desktop size at
     the 132px it has always been; the flex-basis is what shrinks below that.
     A fixed width plus a media-query handoff was tried first and always left a
     step where the frames got *smaller* as the viewport grew, because the
     clamp is narrower than the shared width through the middle range. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 132px;
  aspect-ratio: 9 / 16;          /* the app's 1080×1920 canvas */
  border-radius: var(--ae-radius-chip);
  overflow: hidden;
  box-shadow: var(--ae-shadow-card), inset 0 0 0 1px rgba(255,255,255,.08);
  isolation: isolate;
}

/* The sky fills the frame and never moves. */
.ae-frame__sky { position: absolute; inset: -30%; }
.ae-frame[data-sky="golden"] .ae-frame__sky { background: var(--ae-sky-golden); }
.ae-frame[data-sky="dusk"]   .ae-frame__sky { background: var(--ae-sky-dusk); }
.ae-frame[data-sky="day"]    .ae-frame__sky { background: var(--ae-sky-day); }
.ae-frame[data-sky="night"]  .ae-frame__sky { background: var(--ae-sky-night); }

.ae-frame__sky::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--ae-noise);
  opacity: var(--ae-noise-opacity);
}

/* The "subject" is what gets transformed - a soft silhouette carrying two eye
   dots. Raw state applies the seeded offset; aligned state is the identity. */
.ae-frame__subject {
  position: absolute; inset: -25%;
  transform: translate(var(--tx,0), var(--ty,0)) rotate(var(--tr,0deg)) scale(var(--ts,1));
  transition: transform var(--ae-align);
  will-change: transform;
}

/* Soft head-and-shoulders silhouette - deliberately abstract. */
.ae-frame__subject::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 30% 22% at 50% calc(16.67% + (var(--ae-eye-y) + 6%) * 0.6667),
      rgba(0,0,0,.20), rgba(0,0,0,.09) 58%, transparent 74%);
}

/* The two eyes, at the app's exact targets. */
.ae-frame__eye {
  /* subject box is inset -25%, so map the frame-space target into it */
  position: absolute; top: calc(16.67% + var(--ae-eye-y) * 0.6667);
  width: 14%; height: 1.5px; border-radius: 1px;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.88);
  box-shadow: 0 0 7px rgba(255,255,255,.45);
}
.ae-frame__eye--l { left: calc(16.67% + var(--ae-eye-left) * 0.6667); }
.ae-frame__eye--r { left: calc(16.67% + var(--ae-eye-right) * 0.6667); }


.ae-frame__day {
  position: absolute; left: 0; right: 0; bottom: 5%;
  text-align: center;
  font-family: var(--ae-serif); font-size: 11px;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Stagger the settle so it reads as a wave, not a single cut. */
.ae-strip .ae-frame__subject { transition-delay: calc(var(--i) * 55ms); }
.ae-strip.no-motion .ae-frame__subject { transition: none; }

/* Below 720px seven frames cannot fit at a legible size: squeezing them all in
   at 375px gives ~40px frames, where the eye sliver is a speck. Scrolling was
   worse - it cut the strip mid-row and hid the whole point, which is that every
   frame lands on the same line. So show five and let them share the width.
   Five makes that point exactly as well as seven, and the frames stay ~57-68px
   on a real phone. `buildStrip` still renders seven; the last two are hidden
   here rather than in JS so the desktop demo and the module stay untouched. */
@media (max-width: 720px) {
  .ae-strip { gap: 10px; }
}

/* Drop to five only below 540px. Above that all seven fit at 60px+, and
   cutting to five there would make the frames jump *smaller* as the screen got
   bigger (126px at five, 79px at seven) - a visible snap at the breakpoint. */
@media (max-width: 539px) {
  .ae-strip .ae-frame:nth-child(n+6) { display: none; }
}

/* Under 360px even five would drop below ~48px, so show four. */
@media (max-width: 359px) {
  .ae-strip .ae-frame:nth-child(n+5) { display: none; }
}