/* Shared poster styles — used by index.html (Damian, V2) and marcin.html (V1). */

/* Self-hosted Archivo Black (latin + latin-ext for Polish) */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/archivo-black-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/archivo-black-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Noto Music Notes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/noto-music-notes.woff2") format("woff2");
  unicode-range: U+266A-266B;
}

:root {
  --paper: #f4efe4;
  --ink: #111;
  --emoji-font: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo Black", Impact, "Arial Black", sans-serif;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Photocopy grain over the whole page — inline SVG noise, multiplied onto the paper */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: 0.16;
  mix-blend-mode: multiply;
}

/* Whole poster is one fixed-height grid: captions + footer take what they need,
   the face fills the remaining row — so nothing ever scrolls, at any window size.
   Per-page knobs (set on .poster):
     --face-ratio   width / height of the face image
     --text-budget  room reserved for captions/footer/gaps below the face's max height */
.poster {
  --face-ratio: 820 / 851;
  --text-budget: 17rem;

  display: grid;
  grid-template-rows: auto minmax(0, 1fr); /* remaining rows (captions, footer) are implicit auto */
  justify-items: center;
  align-items: center;
  gap: clamp(0.4rem, 1.5vh, 1.25rem);
  padding: clamp(0.5rem, 3vh, 2.5rem) 1rem;
  width: min(100%, 60rem);
  /* Height: the viewport, but no taller than the face's max height (see .scene: min(66.5vw, 30rem))
     + the text budget — keeps text close to the face on tall phones and big screens. */
  height: min(100vh, calc(min(66.5vw, 30rem) + var(--text-budget)));
  height: min(100dvh, calc(min(66.5vw, 30rem) + var(--text-budget)));
  text-align: center;
}

.caption {
  margin: 0;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.caption--top { font-size: clamp(1.25rem, min(7vw, 6vh), 4rem); }
.caption--bottom { font-size: clamp(1.1rem, min(6.5vw, 5.5vh), 3.5rem); }

/* Optional third line under the bottom caption — the "charges" on a wanted poster */
.caption--sub {
  font-size: clamp(0.85rem, min(3.2vw, 2.8vh), 1.4rem);
  line-height: 1.2;
}

.emoji {
  display: inline-block;
  font-family: var(--emoji-font);
  font-size: 0.9em;
  vertical-align: 0.02em;
}

.caption--sub .emoji { font-size: 1.3em; vertical-align: -0.1em; }

.emoji--blink { animation: blink 3s ease-in-out infinite; }
.emoji--cheers { animation: cheers 2.4s ease-in-out infinite; transform-origin: 50% 90%; }

.scene {
  position: relative;
  container-type: inline-size;
  /* Height comes from the leftover grid row; width follows the image ratio.
     Also capped by width (so the side ornaments fit) and an absolute max. */
  height: min(100%, 66.5vw, 30rem);
  min-height: 0;
  aspect-ratio: var(--face-ratio);
}

.portrait {
  position: relative;
  width: 100%;
  height: 100%;
  animation: bob 6s ease-in-out infinite;
}

.face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Floating ornaments around the face (question marks, notes…), sized relative to the scene */
.qm {
  position: absolute;
  font-size: calc(var(--size, 12) * 1cqw);
  line-height: 1;
  transform: rotate(var(--rot, 0deg));
  animation: float var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
  user-select: none;
  pointer-events: none;
}

/* ♪ ♫ aren't in Archivo Black — a 700-byte Noto Music subset (OFL) draws them the same on every OS;
   the stroke fattens them to the weight of the Archivo question marks */
.qm--note {
  font-family: "Noto Music Notes", "Apple Symbols", "Segoe UI Symbol", sans-serif;
  font-size: calc(var(--size, 12) * 0.85cqw); /* the note glyphs are taller than "?" */
  -webkit-text-stroke: 0.05em currentColor;
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -0.5em; }
}

@keyframes bob {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(1deg); }
}

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.1); }
}

@keyframes cheers {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(10deg); }
}

/* Fine print — same display face as the captions, just tiny, tracked and muted */
.footer {
  margin: 0;
  padding-top: clamp(0.25rem, 2vh, 1.5rem);
  font-size: clamp(0.55rem, 1vw, 0.7rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, var(--paper));
}

.footer b {
  font-weight: inherit;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .qm, .portrait, .emoji { animation: none; }
}