/* The overture — a paper-toned opening over the First Look. A pencil drawing of the man from behind draws itself
   (line pass, then tone, then only the bag takes colour), the title settles beneath it, and the paper goes to
   night over the scene that has been loading underneath. Critical rules for the first paint are inlined in index.html;
   everything else lives here. No controls, by design; prefers-reduced-motion gets a still drawing and plain fades. */

.overture {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: var(--paper, #fbf8f1); color: #2a2a28;
  display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; align-items: end;
  padding: max(24px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  pointer-events: auto; contain: strict;
}
.overture.gone { display: none; }

/* faint paper grain and a warm falloff so the sheet reads as paper, not a white screen */
.ov-grain { position: absolute; inset: -2%; z-index: 3; pointer-events: none; opacity: .28; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .92 0 0 0 0 .9 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px; }
.ov-fall { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, rgba(255,252,244,0) 45%, rgba(214,204,186,.35) 100%); }

/* the drawing */
.ov-figure { position: relative; z-index: 1; grid-row: 2; margin: 0; width: min(74vw, 58svh * 0.65, 440px); aspect-ratio: 624 / 960;
  transform: translateY(0) scale(1); transition: transform 1.2s cubic-bezier(.2,.6,.2,1), opacity 1.1s ease; }
.ov-figure canvas { display: block; width: 100%; height: 100%; }
.ov-figure.settle { animation: ov-step 3.2s cubic-bezier(.3,.4,.2,1) forwards; }
@keyframes ov-step { from { transform: scale(1); } to { transform: scale(1.028) translateY(-.6%); } }

/* the title under the drawing */
.ov-title { position: relative; z-index: 2; grid-row: 3; align-self: start; text-align: center; margin-top: clamp(18px, 3.5svh, 34px); }
.ov-name { margin: 0; font-family: var(--display, 'Newsreader', Georgia, serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 7.6vw, 46px);
  letter-spacing: .01em; line-height: 1.1; color: #26261f;  }
.ov-name span { display: inline-block; opacity: 0; transform: translateY(6px); filter: blur(3px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.6,.2,1), filter .8s ease; transition-delay: var(--d, 0ms); }
.ov-name span.sp { width: .28em; }
.overture.titled .ov-name span { opacity: 1; transform: none; filter: blur(0); }
.ov-kicker { margin: 12px 0 0; font-family: var(--body, 'Literata', Georgia, serif); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #8a8474; opacity: 0; transition: opacity 1s ease .45s; }
.overture.titled .ov-kicker { opacity: 1; }

/* night rises: a soft ink wash climbs from below, then the sheet itself fades so the running scene shows through */
.ov-ink { position: absolute; left: 0; right: 0; top: 0; height: 200%; z-index: 4; pointer-events: none;
  background: linear-gradient(to top, #0b0d0d 0%, #0b0d0d 58%, rgba(11,13,13,.72) 70%, rgba(11,13,13,0) 100%);
  transform: translateY(100%); opacity: 0; }
.overture.out .ov-ink { opacity: 1; animation: ov-ink 1.05s cubic-bezier(.6,.05,.3,1) forwards; }
@keyframes ov-ink { from { transform: translateY(100%); } to { transform: translateY(-50%); } }
.overture.out .ov-figure { transform: translateY(-2.5%) scale(1.04); opacity: 0; transition-delay: .35s; }
.overture.out .ov-title { opacity: 0; transition: opacity .6s ease .2s; }
.overture.out { animation: ov-lift 1.7s ease forwards; }
@keyframes ov-lift { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }

@media (min-width: 900px) {
  .ov-figure { width: min(34vw, 64svh * 0.65, 480px); }
  .ov-name { font-size: clamp(38px, 3.6vw, 54px); }
}

@media (prefers-reduced-motion: reduce) {
  .ov-figure.settle, .overture.out .ov-ink { animation: none; }
  .overture.out .ov-ink { opacity: 1; transform: translateY(-50%); transition: opacity .6s ease; }
  .ov-name span { transition: opacity .5s ease; transform: none; filter: none; }
  .overture.out { animation: ov-lift .9s ease forwards; }
}