/* virtual republic 2006 – stage layout.
   The stage is the original 960 x 580 Flash stage. One stage pixel = var(--u) CSS px, so the whole stage scales
   to the window like Flash "showAll" while text stays text. Positions are stage pixels measured from the original
   (frames/2.svg of the SWF export and the Ruffle screenshots). */

@font-face {
  font-family: "Isonorm Mono";
  src: url("../fonts/isonorm-mono.woff") format("woff");
  font-display: block;
}

:root {
  --black: #000000;
  --accent: #f5dc32;        /* star, headings, links */
  --menu: #54514d;          /* menu and footer, default */
  --menu-active: #868481;   /* menu and footer, active / hover */
  --olive: #666100;
  --olive-light: #a08f01;
  --panel: #36322d;
  --panel-dark: #1a1a1a;
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --blend: 0.3s;            /* _global.blendTime */
}

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

#viewport {
  position: fixed;
  inset: 0;
  --u: min(calc(100vw / 960), calc(100vh / 580));
}

#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(960 * var(--u));
  height: calc(580 * var(--u));
  transform: translate(-50%, -50%);
  font-family: "Isonorm Mono", monospace;
  font-size: calc(12 * var(--u));
  line-height: 1;
  color: var(--menu);
  -webkit-font-smoothing: antialiased;
}

#stage button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

#stage a { color: inherit; text-decoration: none; }

/* --- content window (all views): x 322 y 154, 311 x 223 --- */
.window {
  position: absolute;
  left: calc(322 * var(--u));
  top: calc(154 * var(--u));
  width: calc(311 * var(--u));
  height: calc(223 * var(--u));
}

/* --- claim: typed like on a typewriter (js/stage.js moves the text and the cover frame by frame); the box
   ends where the black cover of the SWF begins --- */
.claim {
  position: absolute;
  margin: 0;
  left: calc(300 * var(--u));
  /* 2006: y 407 for the one claim line; with the name above it the block goes 8.5 lower, so that both lines sit
     optically centred on the star (user 03.11.2026): the middle from the ascenders of the name to the baseline of
     the claim on the star's own middle, the centre of the circle through its points, 22.1 below the top of its box */
  top: calc(415.5 * var(--u));
  width: calc(300 * var(--u));
  height: calc(13 * var(--u));
  color: var(--accent);
  white-space: pre;
  transition: opacity 2s var(--ease-out-cubic);
}
.claim-text {
  display: block;
  padding-left: calc(41 * var(--u));
}
/* the name (typed first) one line above the 2006 claim: 12 px type, 15 px line step; the paper rolls up one line */
.claim-name, .claim-line { display: block; width: max-content; }
.claim-name { margin-bottom: calc(3 * var(--u)); }
.claim-name:empty { display: none; }
#stage:not(.intro) .claim { opacity: 0; pointer-events: none; }

/* --- star: x 596 y 392, 40 x 40 --- */
.star {
  position: absolute;
  left: calc(596 * var(--u));
  top: calc(392 * var(--u));
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  opacity: 0.5;
}
.star svg { display: block; width: 100%; height: 100%; fill: var(--accent); }
#stage.intro .star { opacity: 0; }
#stage.intro .star.pulse {
  animation: star-in 0.8s var(--ease-out-cubic) forwards, star-pulse 1.6s var(--ease-out-cubic) 0.8s infinite;
}
@keyframes star-in { from { opacity: 0; } to { opacity: 0.5; } }
@keyframes star-pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
#stage:not(.intro) .star:hover, #stage:not(.intro) .star:focus-visible { opacity: 1; }
.star[aria-disabled="true"] { opacity: 1; cursor: default; transition: opacity 0.8s var(--ease-out-cubic); }

/* --- footer: 9 px type, baseline y 569 --- */
.footer {
  position: absolute;
  left: 0;
  top: calc(561.5 * var(--u));
  width: 100%;
  height: calc(10 * var(--u));
  font-size: calc(9 * var(--u));
}
#stage .footer > * { position: absolute; top: 0; color: var(--menu); white-space: nowrap; }
/* globalNavi_mc.animIn after the star: languages fade in after 2 s, the imprint after 2.5 s (1 s, easeInCubic) */
/* each item fades on its own; the footer itself never fades, or the imprint would fade twice and pop up late */
#stage.intro .footer > * { opacity: 0; visibility: hidden; }
#stage .footer [data-lang] { transition: opacity 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) 2s, visibility 0s 2s; }
#stage .footer .imprint, #stage .footer .portfolio { transition: opacity 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) 2.5s, visibility 0s 2.5s, color 0.3s; }
.footer [data-lang="en"] { left: calc(322 * var(--u)); }
.footer [data-lang="de"] { left: calc(596 * var(--u)); }
.footer .imprint { right: calc(60 * var(--u)); }
/* the portfolio link centred in the gap between german (ends 625.5) and the imprint (starts 821.7), whatever its length */
.footer .portfolio { left: calc(723.6 * var(--u)); transform: translateX(-50%); }
#stage .footer > :hover, #stage .footer > [aria-pressed="true"], #stage .footer > [aria-current="page"] { color: var(--menu-active); }

/* --- tree menu: origin y 220, 15 px type, glyphs end at x 897 (majors) and 878 (children) --- */
.menu {
  position: absolute;
  left: 0;
  top: calc(220 * var(--u));
  width: calc(899.5 * var(--u));
  height: calc(220 * var(--u));
  font-size: calc(15 * var(--u));
}
.menu[hidden] { display: none; }
.menu { pointer-events: none; }  /* the menu box covers the star; only the labels take clicks */
.menu .label { pointer-events: auto; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu .major {
  position: absolute;
  right: 0;
  top: calc(var(--y) * var(--u));
  height: calc(23 * var(--u));
  opacity: 0;
  white-space: nowrap;
}
.menu.in .major { opacity: 1; }
#stage .menu .label {
  display: block;
  margin-left: auto;
  height: calc(15 * var(--u));
  /* glyph rows as in the Ruffle shots (measured with _CLAUDE_/tools/rows.py) */
  padding-top: calc(2 * var(--u));
  line-height: calc(15 * var(--u));
  text-align: right;
}
#stage .menu .label { color: var(--menu); }
#stage .menu .label:hover, #stage .menu .label.is-active, #stage .menu .minor.is-active .label { color: var(--menu-active); }
.menu .minor { color: var(--menu); }
.menu .minor.is-active { color: var(--menu-active); }
.menu .minors { position: absolute; right: calc(19 * var(--u)); top: 0; }
.menu .minor {
  position: absolute;
  right: 0;
  top: calc((23 + var(--minor-step, 19) * var(--j)) * var(--u));
  opacity: 0;
  visibility: hidden;
}
.menu .minor.shown { opacity: 1; visibility: visible; }

/* --- views (js/views/*.js): view origin = content clip at x 322, y 154 --- */
.window { z-index: 1; }
.view { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.view .body {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(312 * var(--u));
  height: calc(224 * var(--u));
  background: var(--black);
  z-index: 1;
}
.view .shape, .view .field, .view .line, .view .tab-line, .view .arrow, .view .tab-button,
.view .clip, .view .strip, .view .pages button { position: absolute; display: block; }
.view .shape { pointer-events: none; user-select: none; }
.view .field { white-space: pre-line; color: var(--menu-active); text-align: left; }
.view .line, .view .tab-line { background: var(--menu); height: 1px; }
.view-practical .title, .view .art { color: var(--accent); }
.view-services .body .head, .view-services .tab .head { color: var(--accent); }
.view-constitution .head { color: var(--panel); }

/* the tab sheet lies behind the window body and slides out to the left */
.view .tab {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(312 * var(--u));
  height: calc(224 * var(--u));
  background: var(--black);
  z-index: 0;
}
.view .tab-content { position: absolute; inset: 0; }
.view .arrow svg { display: block; width: 100%; height: 100%; fill: var(--olive); transition: fill 0.7s var(--ease-out-cubic); }
.view .arrow.flipped { transform: scaleX(-1); }
.view .tab-button:hover + .arrow svg, .view .tab:has(.tab-button:hover) .arrow svg,
.view .tab-button:focus-visible ~ .arrow svg { fill: var(--accent); transition-duration: 0.4s; }
.view .tab .frame { z-index: 0; }

/* imprint */
.view-imprint .clip { overflow: hidden; }
.view-imprint .strip { color: inherit; transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); }
#stage .view-imprint .pages button { color: var(--accent); opacity: 0.4; font-size: calc(9 * var(--u)); line-height: calc(13 * var(--u)); text-align: left; }
#stage .view-imprint .pages button:hover, #stage .view-imprint .pages button[aria-current] { opacity: 1; }

/* media views */
.view .screen, .view .monitor, .view .welle, .view .bar, .view .progress, .view .arrow-box { position: absolute; display: block; }
.view .screen { background: var(--black); overflow: hidden; }
.view video { display: block; width: 100%; height: 100%; object-fit: fill; }
.view audio { display: none; }
.view .play-control {
  position: absolute; left: 50%; top: 50%; width: calc(40 * var(--u)); height: calc(40 * var(--u));
  transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.6); border: 1px solid var(--menu); z-index: 5;
}
#stage .view .play-control { padding: calc(10 * var(--u)); }
.view .play-control svg { display: block; width: 100%; height: 100%; fill: var(--accent); }
.view .welle { transform-origin: 0 0; }
.view .bar { background: var(--panel); }
.view .progress { height: 1px; transform-origin: 0 50%; transform: scaleX(0); }
.view .progress.loaded { background: var(--olive); }
.view .progress.played { background: var(--accent); }
.view-historic .head { color: var(--accent); }
.view .arrow-box { background: var(--black); }
#stage .view .monitor { overflow: hidden; }
.view .monitor .arrow svg { fill: var(--olive); transition: fill 0.7s var(--ease-out-cubic); }
.view .monitor:hover .arrow svg, .view .monitor:focus-visible .arrow svg { fill: var(--accent); transition-duration: 0.4s; }
.view .monitor .label, .view-observation .tab .label { color: var(--menu-active); }

/* references */
.view-references .preview, .view-references .list { position: absolute; overflow: hidden; }
.view-references .strip { position: absolute; left: 0; top: 0; width: 100%; transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1); }
#stage .view-references .thumb { position: absolute; display: block; overflow: visible; }
.view-references .thumb img { position: absolute; display: block; transition: filter 0.6s ease-out; }
.view-references .thumb:hover img, .view-references .thumb:focus-visible img { filter: brightness(1.25); transition-duration: 0.2s; }
.view-references .marker { position: absolute; display: block; border: calc(2 * var(--u)) solid var(--accent); box-sizing: border-box; z-index: 2; opacity: 0; transition: opacity 0.5s var(--ease-out-cubic); pointer-events: none; }
.view-references .marker.shown { opacity: 1; }
.view-references .head, .view-references .mission-head, .view-references .order-head { color: var(--accent); }
.view-references .mission, .view-references .title { text-shadow: calc(1 * var(--u)) calc(1 * var(--u)) 0 var(--black); }
.view-references .no-ref { position: absolute; background: var(--black); }
.view-references .no-ref[hidden] { display: none; }
#stage .view-references .order { position: absolute; display: block; color: var(--olive); font-size: calc(9 * var(--u)); line-height: calc(14 * var(--u)); text-align: left; padding-left: calc(2 * var(--u)); transition: color 0.7s var(--ease-out-cubic); }
#stage .view-references .order:hover, #stage .view-references .order:focus-visible { color: var(--accent); transition-duration: 0.4s; }
#stage .view-references .preview-pages button, #stage .view-references .list-pages button { position: absolute; display: block; color: var(--accent); opacity: 0.4; font-size: calc(9 * var(--u)); line-height: calc(13 * var(--u)); text-align: left; }
#stage .view-references .preview-pages button:hover, #stage .view-references .preview-pages button[aria-current],
#stage .view-references .list-pages button:hover, #stage .view-references .list-pages button[aria-current] { opacity: 1; }

/* contact */
.view-contact .form input, .view-contact .form textarea {
  position: absolute; display: block; box-sizing: border-box; margin: 0; border: 0; border-radius: 0;
  padding: 0 calc(2 * var(--u)); background: transparent; color: var(--menu-active);
  font: inherit; font-size: calc(10 * var(--u)); line-height: calc(14 * var(--u)); outline: none; resize: none;
}
.view-contact .form input:focus, .view-contact .form textarea:focus { background: var(--panel); }   /* backgroundColor 3551789 */
.view-contact .form textarea::placeholder { color: var(--menu-active); opacity: 1; }
#stage .view-contact .box { position: absolute; display: block; text-align: left; }
.view-contact .square { position: absolute; display: block; box-sizing: border-box; border: 1px solid var(--menu); transition: border-color 0.4s var(--ease-out-cubic); }
.view-contact .box[aria-checked="true"] .square { border-color: var(--accent); transition-duration: 0.1s; }
#stage .view-contact .transmit { position: absolute; display: block; color: var(--menu); font-size: calc(10 * var(--u)); line-height: calc(14 * var(--u)); text-align: left; transition: color 0.7s var(--ease-out-cubic); }
#stage .view-contact .transmit:hover, #stage .view-contact .transmit:focus-visible { color: var(--accent); transition-duration: 0.4s; }
#stage .view-contact .transmit[hidden] { display: none; }
.view-contact .board-head, .view-contact .board-title { color: var(--accent); }

/* --- keyboard focus --- */
#stage :focus { outline: none; }
#stage :focus-visible { outline: 1px solid var(--accent); outline-offset: calc(2 * var(--u)); }

/* --- phone / portrait: the same blocks stacked on a 340 x 500 stage; type and tap targets grow with the width --- */
@media (max-width: 699px), (orientation: portrait) {
  #viewport { --u: min(calc(100vw / 340), calc(100vh / 500)); }
  #stage { width: calc(340 * var(--u)); height: calc(500 * var(--u)); }
  .menu { top: calc(12 * var(--u)); width: calc(337 * var(--u)); height: calc(165 * var(--u)); --minor-step: 23; }
  #stage .menu .label { height: calc(21 * var(--u)); }
  .window { left: calc(24 * var(--u)); top: calc(180 * var(--u)); }
  .star { left: calc(295 * var(--u)); top: calc(418 * var(--u)); }
  .claim { left: calc(-1 * var(--u)); top: calc(441.5 * var(--u)); }   /* 433 + 8.5: centred on the star, as above */
  .footer { top: calc(468 * var(--u)); height: calc(24 * var(--u)); }
  #stage .footer > * { line-height: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .footer [data-lang="en"] { left: calc(24 * var(--u)); }
  .footer [data-lang="de"] { left: calc(90 * var(--u)); }
  .footer .imprint { right: calc(5 * var(--u)); }
  /* the portfolio link in the footer row, centred between german (ends 119.5) and the imprint (starts 256.7) */
  .footer .portfolio { left: calc(188.1 * var(--u)); }
  /* an open tab cannot slide out to the left of the screen: it lies over the window */
  .view .tab.is-out { transform: none !important; z-index: 2; }
}

/* --- reduced motion: no slides or pulses, fades stay --- */
@media (prefers-reduced-motion: reduce) {
  #stage, #stage * {
    transition-property: opacity, color, background-color, border-color, fill !important;
    animation: none !important;
  }
  #stage.intro .star, #stage.intro .star.pulse { opacity: 0.5; }
}

/* english subtitles (js/subtitles.js), typed into the window */
.view .subtitle {
  position: absolute; display: block; margin: 0; box-sizing: border-box; z-index: 3;
  font-size: calc(10 * var(--u)); line-height: calc(14 * var(--u)); color: var(--accent);
  white-space: pre-line; pointer-events: none;
}
.view-speech .subtitle {
  width: max-content; transform: translateX(-50%); text-align: center;
  padding: calc(2 * var(--u)) calc(6 * var(--u)); background: rgba(0, 0, 0, 0.62);
}
.view .subtitle[hidden] { display: none; }