/* =====================================================================
   EXPERIMENT — 3D photo slideshow (MQ Ovalhalle + Baroque Suites)
   Self-contained: to remove the whole feature, delete this file,
   slideshow.js, assets/photos/ and the two tags in index.html.
   Nothing in style.css / script.js depends on it.
   ===================================================================== */

/* ---------- shared slide: photo in a 30°/90°/60° right triangle ----------
   apex 30° top, right angle bottom-left, 60° bottom-right → h = w·√3 */
.p3d-slide{
  position:absolute; left:50%; top:50%;
  width:min(72vw, 640px);
  aspect-ratio:1000/1732;
  clip-path:polygon(0 0, 0 100%, 100% 100%);
  will-change:transform, opacity;
}
.p3d-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}
.p3d-world{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}

/* ---------- 1. ambient background universe (all pages) ----------
   Full colour, faded via opacity only (user: no desaturation). */
.p3d-bg{
  position:fixed; inset:0; z-index:-1;
  perspective:1300px; overflow:hidden;
  pointer-events:none;
  opacity:.25;
}
/* sizes are randomized per-triangle inline by slideshow.js */

/* small photo-less colour triangles between the photo-triangles
   (site palette; same 30°/90°/60° shape as everything else on the site;
   colour + size set inline per element by slideshow.js) */
.p3d-tri{
  position:absolute; left:50%; top:50%;
  aspect-ratio:1000/1732;
  clip-path:polygon(0 0, 0 100%, 100% 100%);
  will-change:transform, opacity;
}

/* the content layers must let the universe shine through */
body.p3d-bg-on .frame,
body.p3d-bg-on #view-landing,
body.p3d-bg-on .stage{ background:transparent; }

/* ---------- landing becomes scrollable (user request) ----------
   No content below — a pad supplies scroll room, the stage is pinned,
   so scrolling only spins the universe. */
body.p3d-bg-on.landing-locked{ overflow:auto; height:auto; }
body.p3d-bg-on #view-landing .stage-wrap{ position:fixed; top:0; left:0; width:100%; }
.p3d-scrollpad{ display:none; height:400vh; }
body.landing-locked .p3d-scrollpad{ display:block; }

/* ---------- restore the buttons' hover (user request) ----------
   The old mix-blend-mode:difference hover blends against the now-
   transparent frame, i.e. does nothing. invert(1) reproduces the same
   look (difference vs white) and works through the transform isolation. */
@media (hover:hover){
  body.p3d-bg-on .reg-btn:hover,
  body.p3d-bg-on .node.mmore:hover,
  body.p3d-bg-on .node.ext:hover,
  body.p3d-bg-on .btn-tri:hover,
  body.p3d-bg-on .ans:hover,
  body.p3d-bg-on .btn-tri:focus-visible,
  body.p3d-bg-on .node.mmore:focus-visible,
  body.p3d-bg-on .node.ext:focus-visible,
  body.p3d-bg-on .reg-btn:focus-visible,
  body.p3d-bg-on .ans:focus-visible{
    filter:invert(1);
  }
}

/* ---------- 2. fullscreen viewer ---------- */
.p3d-overlay{
  position:fixed; inset:0; z-index:999;
  background:rgba(255,255,255,.97);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
  font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight:700;
}
.p3d-overlay.on{ opacity:1; pointer-events:auto; }
body.p3d-lock{ overflow:hidden; }

.p3d-stage{
  position:absolute; inset:0;
  perspective:1300px;
  touch-action:none;
  overflow:hidden;
}
.p3d-overlay .p3d-slide{ width:min(60vw, 44vh); } /* h = w·√3 must fit the screen */
@media (max-width:760px){
  .p3d-overlay .p3d-slide{ width:min(80vw, 40vh); }
}

/* UI — site colours, and the site's RENDERED type size: the page text
   sits in a frame scaled by vh/1117 (mobile vh/852), so the overlay
   uses vh units to land at exactly the same on-screen size.
   16.585/1117 → 1.4848vh · 13.072/852 → 1.5343vh · lh 1.01.
   Everything flush to the edges (user: "alles ganz am rand"). */
.p3d-close{
  position:absolute; right:0; top:0; z-index:2;
  border:none; background:none; cursor:pointer;
  color:var(--pink); font:700 1.4848vh/1 Arial, sans-serif;
  padding:6px;                       /* keeps it tappable at site size */
}
.p3d-close:hover{ color:var(--blue); }

.p3d-cap, .p3d-credit, .p3d-hint{
  position:absolute; z-index:2;
  font-size:1.4848vh; letter-spacing:-.0297vh; line-height:1.01;
}
.p3d-cap   { left:6px; bottom:calc(6px + 1.5vh); color:var(--blue); } /* one line above the credit */
.p3d-credit{ left:6px; bottom:6px;  color:var(--grey); }
.p3d-hint  { right:6px; bottom:6px; color:var(--pink); }
@media (max-width:760px){
  .p3d-close{ font-size:1.5343vh; }
  .p3d-cap, .p3d-credit, .p3d-hint{
    font-size:1.5343vh; letter-spacing:-.0307vh;
  }
  .p3d-cap{ bottom:calc(6px + 1.55vh); }
}

/* the "Oval Hall" / "Baroque Suites" texts become triggers —
   hairline underline, precisely set (user: thin & accurate) */
.p3d-trigger{
  cursor:pointer;
  text-decoration:underline;
  text-decoration-thickness:.06em;   /* ≈1px at site size, scales with the frame */
  text-underline-offset:.14em;
}