/* The cinematic open (screens/open.js): each beat adds .at-<beat> to the screen, and the rules below
   play it. One light source: the warm line across the middle lights the title from below; only the
   eyes glow on their own. Colours are the look's palette, set on the screen by open.js: --accent (the lamp,
   the ground line's amber), --rose and --mint (the eyes). */
.open, .open.leaving { /* no scale in or out: the bars stay flush with the screen's edges */
  --lamp: var(--accent); --lamp-hot: #fff1d2; --bar: 7rem; transform: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #0b0618, #040209 70%, #000);
}

/* letterbox bars, a 2.4:1 frame */
.open-bar { position: absolute; left: 0; right: 0; height: var(--bar); background: #000;
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.25, 1); }
.open-bar.top { top: 0; transform: translateY(-100%); box-shadow: 0 0.2rem 1.2rem #000; }
.open-bar.bottom { bottom: 0; transform: translateY(100%); box-shadow: 0 -0.2rem 1.2rem #000; }
.open.at-dark .open-bar { transform: none; }

/* the line: a slit of light opening from the centre, and the haze it throws up onto the title */
.open-beam { position: absolute; left: 0; right: 0; top: 50%; height: 0.18rem; margin-top: -0.09rem; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--lamp) 18%, var(--lamp-hot) 50%, var(--lamp) 82%, transparent);
  box-shadow: 0 0 0.8rem var(--lamp), 0 0 3rem rgba(255, 140, 40, 0.55);
  transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s; }
.open-beam::before { content: ""; position: absolute; left: 15%; right: 15%; bottom: 0; height: 16rem; opacity: 0.55;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255, 160, 60, 0.32), rgba(255, 120, 40, 0.08) 55%, transparent 75%); }
.open.at-light .open-beam { transform: none; opacity: 1; }

/* PERSIA standing on the line, lit from its foot; text-indent balances the tracking's trailing gap */
.open-title { position: absolute; left: 0; right: 0; bottom: calc(50% + 0.7rem); margin: 0; text-align: center;
  font: 900 10rem/1 var(--display); font-stretch: condensed; letter-spacing: 0.9em; text-indent: 0.9em;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #4a2410 0%, #a8581c 45%, var(--lamp) 78%, var(--lamp-hot) 100%);
  filter: drop-shadow(0 0.5rem 1.6rem rgba(255, 140, 40, 0.35)); opacity: 0;
  transition: opacity 1.4s ease-out, letter-spacing 3s cubic-bezier(0.2, 0.7, 0.2, 1), text-indent 3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.open.at-title .open-title { opacity: 1; letter-spacing: 0.16em; text-indent: 0.16em; }

/* the eyes: a scowling pair (each lid slants down to the nose), slit pupils, each in its own glow */
.eye-pair { position: absolute; display: flex; gap: 0.55em; font-size: calc(1rem * var(--s)); translate: -50% -50%;
  opacity: 0; --c: var(--lamp); filter: drop-shadow(0 0 0.35em var(--c)) drop-shadow(0 0 1.2em var(--c)); }
.eye-pair:nth-child(4n + 2) { --c: var(--rose); }
.eye-pair:nth-child(4n + 3) { --c: var(--mint); }
.eye-pair b { position: relative; width: 1.5em; height: 0.85em; border-radius: 50%;
  background: radial-gradient(ellipse 60% 70% at 50% 62%, #fffbe8 0 18%, var(--c) 55%, color-mix(in srgb, var(--c), #000 45%));
  clip-path: polygon(0 0, 100% 52%, 100% 100%, 0 100%); }
.eye-pair b + b { clip-path: polygon(0 52%, 100% 0, 100% 100%, 0 100%); }
.eye-pair b::after { content: ""; position: absolute; left: 50%; top: 18%; width: 0.17em; height: 76%; translate: -50% 0;
  border-radius: 50%; background: #16040c; }
.open.at-eyes .eye-pair { animation: eye-open 0.34s ease-out var(--d) both, eye-blink 0.2s ease-in-out calc(var(--d) + 1s); }
@keyframes eye-open {
  0% { opacity: 0; scale: 1 0.06; }
  45% { opacity: 1; scale: 1 1.12; }
  72% { scale: 1 0.86; }
  100% { opacity: 1; scale: 1 1; }
}
@keyframes eye-blink { 50% { scale: 1 0.08; } }

/* the impact: a white flash, and everything else cut away under it */
.open-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.open.at-impact .open-flash { animation: open-flash 0.6s cubic-bezier(0.3, 0, 0.6, 1) both; }
.open.at-impact :is(.open-bar, .open-beam, .open-title, .open-eyes) { visibility: hidden; }
@keyframes open-flash { from { opacity: 1; } to { opacity: 0; } }

/* reduced motion: the bars, the line and the eyes appear and go without moving; the title only fades */
@media (prefers-reduced-motion: reduce) {
  .open-bar.top, .open-bar.bottom, .open-beam { transform: none; opacity: 0; transition: none; }
  .open.at-dark .open-bar, .open.at-light .open-beam { opacity: 1; }
  .open-title, .open.at-title .open-title { letter-spacing: 0.16em; text-indent: 0.16em; transition: opacity 1.4s ease-out; }
  .open.at-eyes .eye-pair { animation: none; opacity: 1; }
}