/* Paper Theatre - the opening movie (op.js). Black, type, pictures, light: nothing spins or bounces.
   The overlay sits above the title screen (13) and below the full-screen menus (20). */

#stage .vn-op {
  position: absolute; inset: 0; z-index: 18; overflow: hidden; background: #000; color: #f3ede0;
  cursor: default; user-select: none; -webkit-user-select: none; opacity: 1;
  --op-gold: #e3c98a;
}
/* it comes up out of the title screen (or the empty stage) instead of cutting to black, and fades when it ends */
#stage .vn-op { animation: vn-op-in 0.45s ease backwards; }
@keyframes vn-op-in { from { opacity: 0; } }
#stage .vn-op.out { opacity: 0; transition: opacity 0.38s ease; }

/* pictures */
.vn-op-shots { position: absolute; inset: 0; transition: opacity calc(var(--op-beat, 500ms) * 1.6) ease; }
.vn-op-shots.out { opacity: 0; }
/* a picture waits unseen until its beat (drawn ahead, so the cut does not wait for it): as good as transparent,
   but not opacity 0, which a browser does not bother to draw at all */
.vn-op-shot {
  position: absolute; inset: 0; opacity: 0.001;
  transform: scale(1.07) translate3d(calc(var(--op-dx, 1.6%) * -1), 0, 0);
  transition: opacity 0.24s ease; filter: saturate(0.9) brightness(0.9);
}
.vn-op-shot svg { width: 100%; height: 100%; display: block; }
.vn-op-shot > img.vn-painted { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.vn-op-shot.on { opacity: 1; }
/* each cut drifts slowly for as long as it is up: a camera that does not hurry */
.vn-op-shot.go { transform: scale(1.04) translate3d(var(--op-dx, 1.6%), 0, 0); transition: opacity 0.24s ease, transform var(--op-dur, 2000ms) linear; }
.vn-op-shot.final { filter: saturate(0.85) brightness(0.62); transition: opacity 1.4s ease; }
.vn-op-shot.final.go { transform: scale(1.02); transition: opacity 1.4s ease, transform 6s ease-out; }
.vn-op.dim .vn-op-shot.on { filter: saturate(0.5) brightness(0.32) blur(2px); transition: opacity 0.24s ease, filter 0.6s ease, transform var(--op-dur, 2000ms) linear; }

.vn-op-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.55) 100%),
              linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 38%);
}
/* a breath of light on each cut */
.vn-op-light {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(70% 60% at 30% 20%, rgba(255, 236, 200, 0.55), rgba(255, 236, 200, 0) 70%);
}
.vn-op-light.flare { animation: vn-op-breath calc(var(--op-beat, 500ms) * 2.4) ease-out; }
@keyframes vn-op-breath { 0% { opacity: 0.55; } 100% { opacity: 0; } }
/* the first light: a thin line drawn across the black */
.vn-op-line {
  position: absolute; left: 50%; top: 50%; width: 0; height: 1px; transform: translateX(-50%); opacity: 0;
  background: linear-gradient(90deg, transparent, var(--op-gold) 25%, #fff6e2 50%, var(--op-gold) 75%, transparent);
  box-shadow: 0 0 18px 2px rgba(255, 230, 180, 0.35);
  transition: width 2.2s cubic-bezier(0.2, 0.6, 0.2, 1), opacity 1.2s ease, top 1.6s ease;
}
.vn-op-line.on { width: 46%; opacity: 1; top: 64%; }

/* the title, set large: it comes out of a soft light and settles, very slowly, to its size (opacity, blur and
   scale only: the lines are set once and never re-wrap while they are looked at) */
.vn-op-title, .vn-op-final {
  position: absolute; left: 10%; right: 10%; top: 50%; text-align: center; opacity: 0;
  transform: translateY(-50%) scale(1.04); filter: blur(7px);
  transition: opacity 1.6s ease, filter 1.9s ease, transform 4.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.vn-op-title h2, .vn-op-final h2 {
  margin: 0; font: 500 clamp(26px, 4.6cqw, 78px)/1.22 var(--font-title); letter-spacing: 0.08em; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.7);
}
.vn-op-title p, .vn-op-final p {
  margin: 0.9em 0 0; font: italic 500 clamp(13px, 1.7cqw, 28px)/1.35 var(--font-vn); color: #d9d4c6; letter-spacing: 0.06em;
}
.vn-op-title.on, .vn-op-final.on { opacity: 1; transform: translateY(-50%) scale(1); filter: blur(0); }
/* (the second time, over the first picture, it has less time: it comes a little faster) */
.vn-op-final { transition-duration: 1.1s, 1.4s, 4.2s; }
/* it leaves by fading where it stands */
.vn-op-title.on.gone, .vn-op-final.on.gone { opacity: 0; transition: opacity 0.6s ease, filter 1.9s ease, transform 4.2s cubic-bezier(0.2, 0.6, 0.2, 1); }
.vn-op-final .rule { display: block; width: 0; height: 1px; margin: 0.9em auto 0; background: linear-gradient(90deg, transparent, var(--op-gold) 20%, var(--op-gold) 80%, transparent); transition: width 2s ease 0.4s; }
.vn-op-final.on .rule { width: 9em; }

/* the vertical column: the title's own words, down the right-hand side */
.vn-op-vert {
  position: absolute; right: 6.5%; top: 9%; max-height: 74%; overflow: hidden; opacity: 0;
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 500 clamp(15px, 2.4cqw, 40px)/1.3 var(--font-title); letter-spacing: 0.32em; color: #fbf6ea;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.7), 0 1px 2px rgba(0, 0, 0, 0.6);
  border-right: 1px solid rgba(227, 201, 138, 0.6); padding-right: 0.6em;
  /* a soft shade of its own, so that it reads over a bright picture too */
  background: rgba(0, 0, 0, 0.32); box-shadow: 0 0 3.4cqw 2.8cqw rgba(0, 0, 0, 0.32);
  transition: opacity 1.4s ease;
}
.vn-op-vert[data-long] { font-size: clamp(13px, 1.8cqw, 30px); letter-spacing: 0.22em; }
.vn-op-vert.on { opacity: 0.92; }

/* the cast roll */
.vn-op-roll {
  position: absolute; left: 7%; bottom: 11%; max-width: 60%; opacity: 0; transition: opacity calc(var(--op-beat, 500ms) * 0.9) ease;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85), 0 0 3px rgba(0, 0, 0, 0.6);
}
.vn-op-roll.on { opacity: 1; }
.vn-op-roll small { font: 600 clamp(9px, 0.9cqw, 14px)/1 var(--font-body); letter-spacing: 0.5em; text-transform: uppercase; color: var(--op-gold); margin-bottom: 0.7em; }
.vn-op-roll span { font: italic 500 clamp(16px, 2.3cqw, 38px)/1.2 var(--font-vn); letter-spacing: 0.04em; }

/* the chapter titles: a quick roll */
.vn-op-chapters {
  position: absolute; left: 12%; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none;
  opacity: 0; transition: opacity 0.5s ease; display: flex; flex-direction: column; gap: 0.55em;
}
.vn-op-chapters.on { opacity: 1; }
.vn-op-chapters li { display: flex; align-items: baseline; gap: 1.1em; opacity: 0; transform: translateX(-0.5em); transition: opacity 0.45s ease, transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1); }
.vn-op-chapters li.on { opacity: 1; transform: none; }
.vn-op-chapters .n { min-width: 1.6em; text-align: right; font: 500 clamp(16px, 2.2cqw, 36px)/1 var(--font-vn); color: var(--op-gold); }
.vn-op-chapters .t { font: 500 clamp(15px, 2cqw, 32px)/1.25 var(--font-title); letter-spacing: 0.08em; }

/* ORIGINAL WORK */
.vn-op-end {
  position: absolute; left: 14%; right: 14%; top: 50%; transform: translateY(-50%); text-align: center; opacity: 0;
  transition: opacity 0.9s ease;
}
.vn-op-end.on { opacity: 1; }
.vn-op-end small { display: block; font: 600 clamp(9px, 0.95cqw, 14px)/1 var(--font-body); letter-spacing: 0.55em; text-transform: uppercase; color: var(--op-gold); padding-left: 0.55em; margin-bottom: 1.6em; }
.vn-op-end .cite { margin: 0 auto; max-width: 46em; font: 500 clamp(13px, 1.55cqw, 24px)/1.5 var(--font-vn); color: #ece6d6; text-wrap: balance; }
.vn-op-end .dram { margin: 1.6em 0 0; font: italic 500 clamp(11px, 1.2cqw, 19px)/1.3 var(--font-vn); color: #b9b2a2; letter-spacing: 0.08em; }

/* Skip: always there, never loud */
#stage .vn-op-skip {
  position: absolute; right: 2.2%; bottom: 3%; min-height: 44px; min-width: 44px; padding: 0 1.1em; border: 0; background: none;
  font: 600 clamp(10px, 0.95cqw, 14px)/1 var(--font-body); letter-spacing: 0.4em; text-transform: uppercase; color: rgba(243, 237, 224, 0.5);
  cursor: pointer; transition: color 0.2s ease;
}
#stage .vn-op-skip:hover, #stage .vn-op-skip:focus-visible { color: var(--op-gold); outline: none; }
#stage .vn-op-skip:focus-visible { text-decoration: underline; text-underline-offset: 0.4em; }

/* reduced motion: one still card, nothing animates */
.vn-op.is-still *, .vn-op.is-still { transition: none !important; animation: none !important; }
.vn-op.is-still .vn-op-shot { transform: none; filter: saturate(0.85) brightness(0.62); }

@media (max-aspect-ratio: 4/5) {
  /* an upright phone: the column stays, the type is set for the narrow frame */
  .vn-op-title, .vn-op-final { left: 8%; right: 16%; }
  .vn-op-title h2, .vn-op-final h2 { font-size: clamp(24px, 7.4cqw, 44px); }
  .vn-op-vert { top: 6%; max-height: 52%; font-size: clamp(14px, 4.4cqw, 26px); }
  .vn-op-roll { left: 8%; bottom: 14%; max-width: 72%; }
  .vn-op-roll span { font-size: clamp(16px, 5.4cqw, 30px); }
  .vn-op-chapters { left: 8%; right: 14%; }
  .vn-op-chapters .t { font-size: clamp(14px, 4.4cqw, 22px); }
  .vn-op-end { left: 8%; right: 8%; }
  .vn-op-end .cite { font-size: clamp(13px, 3.8cqw, 18px); }
}