/* A typographic plane in front of the eye, never a new photographic layer. */
.eye-flight {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #f7f3e9;
  pointer-events: none;
  user-select: none;
}
.eye-flight-line {
  position: absolute;
  left: 5%;
  width: 90%;
  top: 25%;
  text-align: center;
  white-space: pre;
  font-family: Manrope, sans-serif;
  font-size: clamp(38px, 10.5vw, 136px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.055em;
  text-shadow: 0 2px 24px #02050966;
}
.eye-flight-line:nth-child(2) { top: 53%; }
.eye-flight-glyph {
  display: inline-block;
  transform-origin: center;
  will-change: transform;
}
.eye-flight-caption {
  position: absolute;
  top: 72%;
  left: 8%;
  width: 84%;
  margin: 0;
  text-align: center;
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: .035em;
  text-shadow: 0 2px 12px #020509;
}
@media (max-width: 750px) {
  .eye-flight-line { top: 31%; }
  .eye-flight-line:nth-child(2) { top: 48%; }
}
@media (prefers-reduced-motion: reduce) {
  .eye-flight { z-index: 3; top: 14%; height: auto; bottom: auto; opacity: 1 !important; }
  .eye-flight-line, .eye-flight-line:nth-child(2) {
    position: static;
    display: inline;
    font-size: clamp(22px, 4.7vw, 46px);
    white-space: normal;
  }
  .eye-flight { text-align: center; }
  .eye-flight-line + .eye-flight-line::before { content: ' '; }
  .eye-flight-glyph { transform: none !important; will-change: auto; }
  .eye-flight-caption { display: none; }
}

/* A short, legible camera passage; words remain intact around the pupil. */
.eye-scene { height: 270svh; }
.portal { height: 100svh; }
.eye-flight-line { top: 14%; font-size: clamp(38px, 8.8vw, 112px); }
.eye-flight-line:nth-child(2) { top: 57%; }
.eye-flight-caption { top: 77%; }
.eye-flight { z-index: 3; }
.eye-black { will-change: opacity; }
.kinetic .phrase { will-change: transform, opacity, clip-path; }
@media (max-width: 750px) {
  .eye-scene { height: 250svh; }
  .eye-flight-line { top: 21%; }
  .eye-flight-line:nth-child(2) { top: 56%; }
}
@media (prefers-reduced-motion: reduce) {
  .eye-scene { height: 100svh !important; }
  .eye-black { clip-path: none !important; will-change: auto; }
  .eye-flight-line, .eye-flight-line:nth-child(2) { position: static; font-size: clamp(22px, 4.7vw, 46px); }
  .kinetic .phrase { transform: none !important; clip-path: none !important; opacity: 1 !important; will-change: auto; }
}
/* Real lines of text, not a flex collection of independently flying glyphs. */
.kinetic .phrase {
  display: block;
  left: 9%; right: 9%;
  font-size: clamp(30px, 4.6vw, 70px);
  line-height: 1.14;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.kinetic .phrase.first { top: 27%; }
.kinetic .phrase.second { top: 53%; }
@media (max-width: 750px) {
  .kinetic .phrase { font-size: clamp(27px, 7.2vw, 40px); }
}