/* =========================================
   serversdesign.de — museum hall
   scene.webp 860x941, corners at image edges
   floor line 90.33% · canvas 34.46/11.48 42.03x69.29
   ========================================= */

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

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

::selection { background: transparent; }

/* ---- Scene ---- */
.scene {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100vh;
  height: 100dvh;
  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 */
}

/* ---- 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;
}

.innershadow {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow:
    inset 0 10px 16px -9px rgba(80,65,45,.35),
    inset 7px 0 12px -9px rgba(80,65,45,.22),
    inset -7px 0 12px -9px rgba(80,65,45,.20),
    inset 0 -7px 12px -9px rgba(80,65,45,.16);
}

.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;
}

/* ---- Museum label (hotspot, future "Über das Projekt") ---- */
.plaque {
  position: absolute;
  left: 63.3%;
  top:  77.5%;
  width: 2.5%;
  height: 3.0%;
  z-index: 3;
  cursor: pointer;
}

/* ---- 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; } }

/* ---- 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;
  z-index: 2;
}

footer a {
  color: #9c8e7e;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}

footer a:hover { color: #6e6253; border-color: #bba; }

/* =========================================
   Adaptiv: Hochformat / schmale Screens
   Nur Rahmen + Kontakt — der Saal bleibt dem Desktop.
   ========================================= */
@media (max-aspect-ratio: 9/11), (max-width: 560px) {

  .gallery, .plaque { display: none; }

  /* the scene becomes the frame itself: oak moulding around the canvas */
  .scene {
    position: fixed;
    top: calc(50% - 22px);
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: min(86vw, calc((100dvh - 140px) * 0.554));
    aspect-ratio: 364 / 657;          /* same proportions as the museum window */
    padding: clamp(7px, 2.4vw, 14px); /* moulding width */
    background:
      linear-gradient(135deg,
        #d9b97f 0%, #c9a560 22%, #b98f45 50%,
        #c79f55 78%, #dcbd83 100%);
    border-radius: 1px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 0 -1px 0 rgba(90,65,25,.35),
      0 24px 50px -20px rgba(80,60,35,.40),
      0 8px 18px -8px rgba(80,60,35,.22);
  }

  .canvas {
    position: relative;
    left: auto; top: auto;
    width: 100%; height: 100%;
  }

  .typed { line-height: 1.6; }

  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; text-align: center; }
}