/* ==========================================================================
   Ortus — Fabeltiere
   Fixed-stage layout. Design canvas is 1180x820 CSS px, which is exactly the
   iPad Air 11" M4 viewport (2360x1640 physical @2x) and exactly 1/4 of the
   4720x3280 comps. Every value below is measured off those comps.

   Baseline is Safari 15 (the iPad Air 2 test unit runs iOS 15.8.7):
   no container queries, no :has(), no nesting.
   ========================================================================== */

/* Futura Std, converted from the OTF masters in design/fonts-src/.
   Only the app chrome needs these — the body copy arrives as InDesign SVG
   with the text already outlined. Licence for web embedding: to confirm. */
@font-face {
  font-family: "Futura Std";
  src: url("../fonts/FuturaStd-Book.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Futura Std";
  src: url("../fonts/FuturaStd-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: "Futura Std";
  src: url("../fonts/FuturaStd-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: block;
}

:root {
  --red:   #BF331E;   /* sampled flat across a 400x200 region of the comps */
  --cream: #F8F2EF;

  --stage-w: 1180;
  --stage-h: 820;

  /* Home grid: 5x4 of 145px tiles, 38px gutters, centred on both axes. */
  --tile: 145px;
  --gutter: 38px;

  /* Detail: plate column is centred on x=215, capped at 288x570 from y=138.
     Text column starts at x=438 and is 594 wide. */
  --plate-x: 71px;
  --plate-w: 288px;
  --plate-h: 570px;
  --plate-gap: 19px;
  --copy-x: 438px;
  --copy-w: 594px;
  --content-y: 138px;

  --margin-right: 27px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--red);
  overflow: hidden;
}

body {
  font-family: "Futura Std", "Futura", "Avenir Next", system-ui, sans-serif;
  color: var(--cream);
  /* Kiosk hygiene: no callouts, no selection, no tap flash, no overscroll. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* "none", not "100%": stops iOS text autosizing from inflating type inside
     the scaled stage, which is what breaks fixed-width boxes. */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  overscroll-behavior: none;
  touch-action: manipulation;
}

/* --- Stage ---------------------------------------------------------------
   Fixed pixel canvas, centred and scaled by --scale (set from JS). The red
   body shows through as letterbox bands wherever the aspect ratio differs
   from 1180:820 — on the iPad Air 2 that is ~28px top and bottom.
   -------------------------------------------------------------------------- */

.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1180px;
  height: 820px;
  margin: -410px 0 0 -590px;   /* half of h / w — avoids translate(-50%,-50%)
                                  compounding with the scale below */
  transform: scale(var(--scale, 1));
  transform-origin: 50% 50%;
  background: var(--red);
  overflow: hidden;
}

/* --- Transition video ------------------------------------------------------
   Sits above both screens for the duration of the ink animation. The master is
   2360x1640, exactly 2x the stage, so it lands 1:1 on the production iPad. */

.transition {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 1180px;
  height: 820px;
  object-fit: cover;
  background: var(--red);
  pointer-events: none;      /* taps during the animation are ignored */
}

.transition[hidden] { display: none; }

/* --- Screens -------------------------------------------------------------- */

.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 260ms ease;
}

.screen.is-visible { opacity: 1; }
.screen[hidden]    { display: none; }

/* --- Language toggle ------------------------------------------------------ */

/* "DE | EN" ink measures 92.25px wide in the comp, which the font metrics
   put at 25px Book — same size as the back button. The underline sits under
   the glyphs of DE only, so the buttons carry no horizontal padding. */
.lang {
  position: absolute;
  top: 21.75px;              /* tuned so glyph top lands on y=24, as measured */
  right: var(--margin-right);
  z-index: 10;
  display: flex;
  align-items: baseline;
  font-size: 25px;
  line-height: 1;
}

.lang__btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  border-bottom: 1.5px solid transparent;   /* comp: 1.25px at y≈46.75 */
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1;
  color: var(--cream);
  cursor: pointer;
  white-space: nowrap;
}

.lang__btn.is-active { border-bottom-color: var(--cream); }

/* Gap DE→EN is 31.5px in the comp with the bar centred in it. */
.lang__sep { padding: 0 7.5px; }

/* --- Home grid ------------------------------------------------------------ */

.grid {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 5*145 + 4*38 = 877 ;  4*145 + 3*38 = 694 */
  width: 877px;
  height: 694px;
  margin: -347px 0 0 -438.5px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, var(--tile));
  grid-template-rows: repeat(4, var(--tile));
  gap: var(--gutter);
}

.tile {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: var(--tile);
  height: var(--tile);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Touch feedback. Kept subtle — the tiles are artwork, not UI chrome. */
.tile.is-pressed { transform: scale(0.955); opacity: 0.86; }

/* --- Detail --------------------------------------------------------------- */

.plates {
  position: absolute;
  left: var(--plate-x);
  top: var(--content-y);
  width: var(--plate-w);
  height: var(--plate-h);
  display: flex;
  flex-direction: column;
  align-items: center;      /* keeps the stack centred on x=215 when scaled */
  gap: var(--plate-gap);
}

.plates img { display: block; }

.copy {
  position: absolute;
  left: var(--copy-x);
  top: var(--content-y);
  width: var(--copy-w);
}

/* The text block is delivered as an SVG laid out in InDesign, so it is placed
   at its authored width and left to size itself vertically. */
.copy img,
.copy svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Fallback copy, used until the real SVGs arrive. */
.copy-fallback h1 {
  margin: 0 0 22px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.copy-fallback p {
  margin: 0 0 16px;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 400;
}

.copy-fallback .placeholder {
  opacity: 0.62;
  font-style: italic;
}

/* --- Back button ---------------------------------------------------------- */

/* Sized off the comp: the "< Zurück" ink measures 93.5px wide, which every
   glyph independently puts at 25px Futura Std Book. Deliberately avoids flex
   and relies on line-height centring — bulletproof on Safari 15, where
   button-as-flex-container has a history of oddities. */
.back {
  position: absolute;
  right: 25px;
  bottom: 30px;
  width: 122px;
  height: 45px;              /* content box 118x41 after the 2px border */
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 2px solid var(--cream);
  border-radius: 0;
  color: var(--cream);
  font-family: inherit;
  font-size: 25px;
  font-weight: 400;
  line-height: 41px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.back.is-pressed {
  background: var(--cream);
  color: var(--red);
}