/* =========================================
   serversdesign.de — museum hall
   scene.webp 1619x941 · frame.webp 399x693
   ========================================= */

/* ---- Schriften lokal gehostet (DSGVO-konform, kein Google-CDN) ---- */
@font-face {
  font-family: 'Raleway';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/raleway-300.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: 'Raleway';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/raleway-400.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: 'Raleway';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/raleway-500.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;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body {
  min-height: 100%;
  overscroll-behavior-y: none;
  background: #e8dbd0;
  font-family: 'Raleway', sans-serif;
  color: #1d1c1a;
  caret-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

/* Markierungs-Highlight nur in der Galerie unterdrücken – Fließtext bleibt markierbar */
.hero ::selection { background: transparent; }

/* ---- Erster Bildschirm ---- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;   /* stabil: ändert sich beim Scrollen nicht (kein Springen der Adressleiste) */
  overflow: hidden;
}

/* ---- Scene ---- */
.scene {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  aspect-ratio: 1619 / 941;
  z-index: 1;
}

.gallery {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
  z-index: 2; /* room on top, painting shows through the window */
}

.gallery--mobile { display: none; }

/* ---- Besucher-Ebene: liegt vor Raum & Rahmen (transparentes PNG, Szenengröße) ---- */
.people {
  position: absolute;
  left:   32.9%;     /* по горизонтали — левый край фигуры */
  bottom:  0%;     /* высота над полом — где стоят ноги  */
  width:   4.5%;     /* размер фигуры — ширина к сцене     */
  height: auto;      /* высота сама, пропорции сохраняются */
  display: block;
  user-select: none;
  pointer-events: none;
  z-index: 3;        /* перед галереей (z-index 2)         */
}

/* ---- Gedanken der Besucher: Hover-Bereiche über den Figuren (nur Desktop) ---- */
.visitor {
  position: absolute;
  top: 79.2%;
  height: 9%;
  z-index: 5;
  cursor: help;
}
.visitor--she { left: 33.0%;  width: 2.05%; }   /* linke Figur (Frau)  */
.visitor--he  { left: 35.05%; width: 2.10%; }   /* rechte Figur (Mann) */

/* weicher Lichthof am Kopf beim Überfahren – zeigt, wer gerade „denkt" */
.visitor::before {
  content: '';
  position: absolute;
  top: 18%;
  width: 160%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,250,238,.55) 0%, rgba(255,250,238,0) 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.visitor--she::before { left: 50%; }
.visitor--he::before  { left: 30%; }
.visitor:hover::before { opacity: 1; }

/* die Gedankenblase */
.thought {
  position: absolute;
  bottom: 110%;
  width: max-content;
  max-width: 215px;
  padding: 9px 13px;
  background: rgba(248,243,235,.97);
  border: 1px solid rgba(150,130,100,.35);
  border-radius: 11px;
  box-shadow: 0 10px 28px rgba(60,50,35,.16);
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .005em;
  color: #3a362f;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.thought--left  { right: 35%; }   /* Frau: Blase öffnet sich nach oben-links  */
.thought--right { left: 35%; }    /* Mann: Blase öffnet sich nach oben-rechts */
.visitor:hover .thought { opacity: 1; transform: translateY(0); }

/* ---- Live canvas (inside the gold moulding) ---- */
.canvas {
  position: absolute;
  left:   38.73%;
  top:    10.84%;
  width:  22.85%;
  height: 70.46%;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(180deg, #f6f1e8 0%, #efe8da 100%);
  container-type: size;
  z-index: 1;
}

.slot { position: absolute; inset: 0; z-index: 2; opacity: 0; }

.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ---- Museums-Etikett: Link → #about (Größe = gemalte Plakette) ---- */
.plaque {
  position: absolute;
  left: 63.37%;
  top:  77.58%;
  width: 2.04%;
  height: 2.87%;
  z-index: 4;
  display: block;
  cursor: pointer;
  border-radius: 2px;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  animation: ppulse 3.2s ease-in-out infinite;
}

.plaque:focus-visible {
  outline: 2px solid rgba(120,100,70,.85);
  outline-offset: 2px;
}

@keyframes ppulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,250,238,0); }
  50%      { box-shadow: 0 0 3px 0.5px rgba(255,250,238,.5); }
}

/* ---- Typed text ---- */
.typewrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12%;
  text-align: left;
  pointer-events: none;
}

.typed {
  position: relative;          /* anchor for the absolute cursor */
  font-size: clamp(11px, 6cqw, 24px);
  font-weight: 400;
  line-height: 1.75;
  color: #3a362f;
  white-space: pre-wrap;
  width: 100%;
}

.typed .ch { visibility: hidden; }
.typed .ch.on { visibility: visible; }

.tcur {
  position: absolute;
  width: 1.5px;
  height: 1.2em;
  background: #3a362f;
  opacity: .8;
}
.tcur.blink { animation: tblink 1s steps(1) infinite; }
@keyframes tblink { 50% { opacity: 0; } }

/* ---- Scroll-Hinweis ---- */
.scrolldown {
  position: fixed;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  z-index: 4;
  color: #9c8e7e;
  opacity: .7;
  transition: opacity .4s ease;
  animation: sbounce 2.4s ease-in-out infinite;
}
.scrolldown:hover { opacity: 1; }
.scrolldown.hide { opacity: 0; pointer-events: none; }
@keyframes sbounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(5px); }
}

/* ---- Footer ---- */
footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 300;
  color: #9c8e7e;
  letter-spacing: .07em;
  text-align: center;
  z-index: 5;
}

/* ---- Zweiter Bildschirm: Über das Projekt ---- */
.about {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px 96px;     /* unten Platz für den fixierten Footer */
  background: #e8dbd0;
}

.about-inner {
  max-width: 600px;
  text-align: center;
}

.about h1 {
  font-weight: 300;
  font-size: clamp(28px, 6vw, 34px);
  letter-spacing: .04em;
  line-height: 1.15;
  color: #1d1c1a;
}

.about-role {
  margin-top: 10px;
  font-size: clamp(11px, 2.4vw, 13px);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9c8e7e;
}

.about-rule {
  display: block;
  width: 46px;
  height: 1px;
  margin: 26px auto;
  background: #c9bca9;
}

.about p:not(.about-role):not(.about-mail) {
  font-size: clamp(14px, 2.5vw, 16.5px);
  font-weight: 400;
  line-height: 1.8;
  color: #4a443b;
  margin: 0 auto 16px;
  max-width: 56ch;
}

.about-mail {
  margin-top: 26px;
  font-size: clamp(13px, 2.4vw, 15px);
}

.about-mail a {
  color: #4a443b;
  text-decoration: none;
  border-bottom: 1px solid #cfc6b6;
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.about-mail a:hover { color: #1d1c1a; border-color: #9c8e7e; }

/* ---- Zurück nach oben: feiner Pfeil im Stil der .about-rule ---- */
.about-up {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 44px;
  color: #9c8e7e;
  opacity: .65;
  transition: opacity .3s ease, color .3s ease, transform .3s ease;
}
.about-up:hover {
  opacity: 1;
  color: #6f6354;
  transform: translateY(-3px);
}
.about-up:focus-visible {
  outline: 2px solid rgba(120,100,70,.85);
  outline-offset: 4px;
  border-radius: 2px;
  opacity: 1;
}

/* =========================================
   Adaptiv: Hochformat / schmale Screens
   Echte Rahmen-Fotografie (frame.webp 399x693)
   ========================================= */
@media (max-aspect-ratio: 9/11), (max-width: 560px) {

  .gallery--desktop { display: none; }
  .gallery--mobile  { display: block; }

  /* Mobil wird nur der Rahmen gezeigt (kein Raum) → Besucher-Ebene ausblenden */
  .people { display: none; }
  .visitor { display: none; }

  /* nur der Rahmen, randlos: volle Breite, vertikal zentriert im Hero */
  .scene {
    position: absolute;
    top: calc(50% - 22px);
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: min(96vw, calc((100svh - 110px) * 399 / 693));
    aspect-ratio: 399 / 693;
  }

  .canvas {
    left:   3.5%;
    top:    1.8%;
    width:  93.5%;
    height: 96.5%;
  }

  /* Etikett im engen Ausschnitt nicht vorhanden – zum Abschnitt führt das Scrollen */
  .plaque { display: none; }

  .typed { line-height: 1.6; }

  /* Текст «О проекте» крупнее только на мобильной (десктоп не трогаем) */
  .about p:not(.about-role):not(.about-mail) { font-size: 24px; }

  footer { font-size: 10px; letter-spacing: .05em; }
}

/* very small phones: let the footer wrap */
@media (max-width: 380px) {
  footer { font-size: 9px; padding: 0 8px; }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plaque, .scrolldown { animation: none; }
  .about-up:hover { transform: none; }
}