/* AiCreation Cube-Landing: eigene Klassen. Tokens zuerst, dann die Stationen.
   Nichts hiervon fasst .sc-stage, .sc-copy oder [data-sc-*] an. */

:root {
  --sc-canvas:      #0b0d16;
  --sc-surface:     #121627;
  --sc-ink:         #f5f7fa;
  --sc-ink-soft:    #b7c0d4;
  --sc-accent:      #26c6da;
  --sc-accent-ink:  #071018;
  --sc-font-display: "Sora", system-ui, sans-serif;
  --sc-font-text:    "Hanken Grotesk", system-ui, sans-serif;
  --sc-shadow-color: 228 40% 3%;
  --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px;
  /* Bühnen-Variablen, page.js schreibt sie pro Frame auf .bau */
  --par: 0; --n: 0; --g: 0; --c: 0; --pmx: 0; --pmy: 0;
  --cx: 0px; --cy: 0px; --cth: 0deg; --csy: 1; --px: 0px; --py: 0px; --pth: 0deg;
  --focus: 0.5;
}
.sc-display { font-weight: 700; }
.sc-display--md { font-weight: 600; }
/* Helle Schrift auf dunklem Grund: eine Stufe mehr Gewicht (taste.md) */
.sc-lede { font-weight: 500; }
.sc-body { font-weight: 500; }

/* ------------------------------------------------------------ Wortmarke -- */
.mark {
  position: fixed; top: clamp(0.9rem, 2.2vw, 1.6rem); left: var(--sc-gutter); right: var(--sc-gutter);
  z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* Minimal-Navigation: Tracking und Grösse wie die Site-Navbar (13 px, 0.15 em), Trefferfläche 44 px */
/* Dunkle Pille hinter den Wörtern: die Navigation steht über wechselnden Bühnen (Himmel, Alpenglühen,
   helle Kante der Tür), ohne eigenen Grund reisst der Kontrast (Challenger 23.09., Verifier F8). */
.mark__nav {
  display: flex; align-items: center; gap: clamp(0.9rem, 2.4vw, 2rem);
  padding: 0 1rem; border-radius: 999px;
  background: color-mix(in oklab, var(--sc-canvas) 62%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mark__nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.15rem;
  font-family: var(--sc-font-display); font-size: 13px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none;
  color: var(--sc-ink); opacity: 0.86; text-shadow: 0 1px 6px rgb(0 0 0 / 0.45);
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mark__nav a:hover, .mark__nav a:focus-visible { opacity: 1; }
.mark__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 8px; height: 1px; width: 0;
  background: var(--sc-accent); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mark__nav a:hover, .mark__nav a:focus-visible { color: var(--sc-ink); }
.mark__nav a:hover::after, .mark__nav a:focus-visible::after { width: 100%; }
.mark__nav a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 700px) {
  .mark__word { display: none; }              /* nur das Emblem, die drei Wörter brauchen den Platz */
  .mark__nav { gap: 1rem; }
  .mark__nav a { font-size: 12px; letter-spacing: 0.12em; }
}
.mark__link { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--sc-ink); }
.mark__link img { width: 40px; height: 40px; border-radius: 50%; }
.mark__word { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: var(--sc-track-snug); }
.mark__tld { color: var(--sc-accent); font-weight: 500; }

/* ------------------------------------------------- 1+2 Ankunft und Bau -- */
.bau { background: var(--sc-canvas); }
.world {
  position: absolute; bottom: 0; left: 50%;
  width: max(100%, calc(100svh * 2.357));
  aspect-ratio: 2560 / 1086;
  transform: translateX(calc(var(--focus) * -100%));
  will-change: transform;
}
.ly { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; will-change: transform, opacity; }
/* Zeiger: Ferne steht, nur der Zaun vorne wandert spürbar. Scroll-Parallaxe (--par) staffelt alle Ebenen. */
.ly--sky    { transform: translate3d(0, calc(var(--par) * -18px), 0); }
.ly--sky-n  { transform: translate3d(0, calc(var(--par) * -18px), 0); opacity: var(--n); }
.ly--land   { transform: translate3d(calc(var(--pmx) * -1.5px), calc(var(--par) * -10px), 0); }
.ly--land-n { transform: translate3d(calc(var(--pmx) * -1.5px), calc(var(--par) * -10px), 0); opacity: var(--n); }
.ly--cube   { transform: translate3d(calc(var(--pmx) * 2px), calc(var(--pmy) * 1px), 0); }
.ly--cube-n { transform: translate3d(calc(var(--pmx) * 2px), calc(var(--pmy) * 1px), 0); opacity: var(--n); }
.ly--closed { transform: translate3d(calc(var(--pmx) * 2px), calc(var(--pmy) * 1px), 0); opacity: var(--c); }
.ly--fence  { transform: translate3d(calc(var(--pmx) * 10px), calc(var(--par) * 16px + var(--pmy) * 5px), 0);
              filter: brightness(calc(1 - 0.62 * var(--n))); }

/* Der Kern: weiches Licht, atmet im Ruhezustand, wird beim Setzen heller und folgt der Maus leicht */
.ly--glow { pointer-events: none; mix-blend-mode: screen; opacity: calc(0.35 + 0.65 * var(--g)); }
/* Lichthof des fertigen Würfels: wächst mit der Überblendung, liegt unter der Würfel-Ebene */
.ly--halo { pointer-events: none; mix-blend-mode: screen; opacity: calc(var(--c) * 0.85); }
.halo {
  position: absolute; width: 64%; aspect-ratio: 1; border-radius: 50%;
  left: 63%; top: 52%; transform: translate(-50%, -50%) scale(calc(0.7 + 0.3 * var(--c)));
  background: radial-gradient(circle,
    rgba(150, 235, 245, 0.75) 0%, rgba(38, 198, 218, 0.45) 22%,
    rgba(38, 198, 218, 0.16) 42%, transparent 62%);
}
.glow {
  position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%;
  left: calc(66.5% + var(--pmx) * 1.2%); top: calc(48% + var(--pmy) * 1.2%);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 170, 235, 0.55) 0%, rgba(38, 198, 218, 0.55) 18%,
    rgba(38, 198, 218, 0.22) 38%, transparent 62%);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; } }

/* Signature Move: Paneel-Paket und Seil als eigene Ebenen, page.js fährt --t, --ang */
/* Seil samt Laufkatze: Ausschnitt x 3500..3600, y 192..1005 im 4k-Raster; Drehpunkt = Katzenpunkt (3554, 232) */
.cable {
  position: absolute; left: 55.24%; top: 7.14%; width: 1.578%; height: 30.25%; max-width: none;
  transform-origin: 54% 4.9%;
  transform: translate3d(var(--cx), var(--cy), 0) rotate(var(--cth)) scaleY(var(--csy));
  will-change: transform;
}
.panel {
  position: absolute; left: 54.29%; top: 37.02%; width: 3.63%; height: 16.93%; max-width: none;
  transform-origin: 49% 17%;
  transform: translate3d(var(--px), var(--py), 0) rotate(var(--pth));
  will-change: transform;
  filter: brightness(calc(1 - 0.35 * var(--n)));
}

.bau__copy { max-width: min(38rem, 70vw); }
.bau__h1 { text-wrap: balance; }
.bau__slot { position: relative; min-height: 7.5rem; margin-top: var(--sc-4); }
.bau__line { position: absolute; left: 0; top: 0; max-width: 34ch; }
@media (max-width: 700px) {
  :root { --focus: 0.63; }
  .bau__h1 { font-size: var(--sc-t-2xl); }
  .bau__copy { max-width: none; }
  .bau__slot { min-height: 9rem; }
  .bau__line { max-width: none; }
}
@media (max-width: 860px) { .bau .sc-scrim--lead { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 26%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 46%, transparent 62%); } }
/* Handy hochkant (Florian 07.09.: «ich sehe die Alpen nicht»): die Szene wird auf 222vw
   gezeigt statt auf Bildschirmhöhe, also 45 % der Bildbreite statt 20 %: grosser Gipfel
   links, Würfel mit Öffnung und Paneel, rechte Kante angeschnitten. Die Szene sitzt unten,
   der Himmel läuft als hohe Ebene nach oben weiter, die Copy steht oben im Himmel. */
@media (max-width: 700px) and (orientation: portrait) {
  :root { --focus: 0.52; }
  .world { width: 222vw; }
  .ly--sky, .ly--sky-n { top: auto; bottom: 0; height: 250%; }
  .bau__copy { top: clamp(5.5rem, 13vh, 8rem); bottom: auto; }
  .bau .sc-scrim--lead { background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 66%, transparent) 26%,
    color-mix(in oklab, var(--sc-canvas) 22%, transparent) 46%,
    transparent 60%); }
}

/* ------------------------------------------------- 3 Schnitt ins Innere -- */
.innen { position: relative; padding: 0; background: #090b10; }
.innen__fig { margin: 0; width: 100%; height: 100svh; }
.innen__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.innen__scrim { position: absolute; inset: 0; }
.innen__copy { position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(3rem, 10vh, 7rem); max-width: 42rem; margin-inline: auto; text-align: center; }
.innen__copy .sc-lede { font-weight: 500; }
.innen__copy .sc-lede { margin-inline: auto; }

/* ----------------------------------------------------- 3b Fünf Dinge -- */
/* Ruhiger Textabschnitt zwischen Werkstatt und Galerie. Die Kante links der Liste
   füllt sich cyan mit dem Fortschritt des Akts (--sc-p), das einzige Element hier,
   das auf den Scroll reagiert. */
.dinge { position: relative; padding-block: clamp(4rem, 9vw, 8rem); background: #090b10; }
.dinge__grid { display: grid; grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.dinge__lead { position: sticky; top: clamp(5rem, 14vh, 9rem); }
.dinge__lead .sc-lede { color: var(--sc-ink-soft); }
.dinge__list { position: relative; list-style: none; margin: 0; padding: 0 0 0 var(--sc-5); }
.dinge__list::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--sc-hairline-strong); }
.dinge__list::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px;
  height: calc(var(--sc-p, 0) * 100%); background: var(--sc-accent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--sc-accent) 60%, transparent);
}
.dinge__list li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--sc-3); padding-block: var(--sc-5); border-top: 1px solid var(--sc-hairline); }
.dinge__list li:first-child { border-top: 0; padding-top: 0; }
.dinge__n { font-family: var(--sc-font-display); font-size: var(--sc-t-sm); color: var(--sc-accent); letter-spacing: var(--sc-track-wide); padding-top: 0.45em; }
.dinge__list h3 { hyphens: auto; overflow-wrap: anywhere; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); line-height: 1.12; margin: 0 0 var(--sc-2); text-wrap: balance; }
.dinge__list p { margin: 0; max-width: 48ch; color: var(--sc-ink-soft); font-weight: 500; line-height: 1.6; text-wrap: pretty; }
@media (max-width: 760px) {
  .dinge__grid { grid-template-columns: 1fr; gap: var(--sc-7); }
  .dinge__lead { position: static; }
}

/* ------------------------------------------------------------ 4 Projekte -- */
.galerie { background: #07080c; }
.galerie__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0.55; max-width: none; }
.rail { position: relative; z-index: 2; height: 100%; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); padding-inline: var(--sc-gutter); }
.rail__lead { flex: 0 0 auto; width: clamp(17rem, 26vw, 26rem); }
.rail__end  { flex: 0 0 auto; width: clamp(15rem, 22vw, 20rem); padding-right: var(--sc-gutter); }
.rail__more { display: inline-block; margin-top: var(--sc-4); color: var(--sc-accent); font-weight: 500; }
.plate { flex: 0 0 auto; width: clamp(17rem, 25vw, 25rem); }
.plate__body {
  background: color-mix(in oklab, #0d1220 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 28%, transparent);
  box-shadow: var(--sc-e3), var(--sc-edge);
  padding: var(--sc-4);
}
.plate__body img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.plate h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); margin: var(--sc-5) 0 var(--sc-3); line-height: 1.1; }
.plate dl { margin: 0; display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sc-2) var(--sc-3); font-size: var(--sc-t-sm); }
.plate dt { color: var(--sc-accent); letter-spacing: var(--sc-track-wide); text-transform: uppercase; font-size: var(--sc-t-xs); padding-top: 0.15em; }
.plate dd { margin: 0; color: var(--sc-ink-soft); }
.plate__link { display: inline-block; margin-top: var(--sc-4); font-weight: 500; }
/* gestaffeltes Ankommen der Platten aus --sc-p, das erste Element bleibt präsent */
@media (prefers-reduced-motion: no-preference) {
  .plate:nth-of-type(1) { opacity: clamp(0.55, calc(0.55 + var(--sc-p) * 6), 1); }
  .plate:nth-of-type(2) { opacity: clamp(0.55, calc(0.3 + var(--sc-p) * 5), 1); }
  .plate:nth-of-type(3) { opacity: clamp(0.55, calc(0.1 + var(--sc-p) * 4.5), 1); }
  .plate:nth-of-type(4) { opacity: clamp(0.55, calc(-0.1 + var(--sc-p) * 4), 1); }
  .plate:nth-of-type(5) { opacity: clamp(0.55, calc(-0.3 + var(--sc-p) * 3.6), 1); }
  .plate:nth-of-type(6) { opacity: clamp(0.55, calc(-0.5 + var(--sc-p) * 3.3), 1); }
}
@media (prefers-reduced-motion: reduce) {
  .rail { padding-block: var(--sc-6); }
}

/* --------------------------------------------------------- 5 Der Mensch -- */
.mensch {
  position: relative; padding-block: clamp(4rem, 8vw, 8rem);
  background: #e9ecef; color: #14171f;
  --sc-ink: #14171f; --sc-ink-soft: #4b5468; --sc-accent: #0097a7;
}
.mensch__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; opacity: 0.85; max-width: none; }
.mensch__grid { position: relative; display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mensch__plate { margin: 0; background: #0b0d16; padding: 0.55rem; box-shadow: var(--sc-e3); border: 1px solid color-mix(in oklab, #26c6da 45%, transparent); }
.mensch__plate img { width: 100%; height: auto; }
.mensch__text .sc-lede { color: var(--sc-ink); }
.mensch__text .sc-body { color: var(--sc-ink-soft); }
@media (max-width: 760px) { .mensch__grid { grid-template-columns: 1fr; } .mensch__plate { max-width: 18rem; } }

/* ------------------------------------------------------------- 6 Die Tür -- */
.tuer { background: #06070b; }
.tuer__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 55%; max-width: none; }
.tuer__scrim { --sc-canvas: #06070b; }
.tuer__inner {
  position: absolute; z-index: var(--sc-z-copy); left: var(--sc-gutter); bottom: clamp(7rem, 18vh, 12rem);
  width: min(38rem, calc(100% - 2 * var(--sc-gutter)));
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-5);
}
.tuer__lede { max-width: 34ch; }
.cta {
  display: inline-block; padding: 0.95rem 1.7rem; border-radius: var(--sc-r-md);
  background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none;
  font-family: var(--sc-font-display); font-weight: 700; letter-spacing: var(--sc-track-snug);
  box-shadow: var(--sc-e2); transition: background-color var(--sc-d-fast) var(--sc-ease-out);
  white-space: nowrap;
}
.cta:hover { background: #4dd0e1; }
.cta:active { translate: 0 1px; }
.foot {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(1.2rem, 3vh, 2.2rem);
  z-index: var(--sc-z-copy); display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem;
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.foot img { width: 28px; height: 28px; border-radius: 50%; }
.foot__links { display: flex; gap: 1.2rem; margin-left: auto; }
.foot__links a { text-decoration: none; }
.foot__links a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  /* Unter 860px liegt die Copy über der ganzen Breite: Band statt Ecke, Würfel weiter nach rechts */
  .tuer__bg { object-position: 86% 55%; }
  .tuer__scrim { background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 98%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 36%,
    color-mix(in oklab, var(--sc-canvas) 55%, transparent) 58%,
    transparent 74%); }
}
@media (max-width: 700px) { .foot__links { margin-left: 0; } .tuer__inner { bottom: clamp(9rem, 22vh, 13rem); } }

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .glow { animation: none; }
  .ly, .cable, .panel { transform: none !important; }
}

/* Spotlight auf den Platten (21st.dev «spotlight-card», Cyan fix, lokal berechnet in page.js).
   ::before = Rand-Licht, nur auf dem Rahmen sichtbar (Maske Rahmen minus Innenfläche),
   ::after = schwacher Fleck im Inneren, .plate__glow = weicher Schein aussen. */
.plate__body { --mx: -999px; --my: -999px; isolation: isolate; }
.plate__body::before, .plate__body::after { content: ""; }
.plate__body::before, .plate__body::after, .plate__glow {
  content: ""; position: absolute; pointer-events: none; opacity: 0;
  transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
.plate__body::before {
  inset: -2px; z-index: 3; border: 2px solid transparent; filter: brightness(1.5);
  background: radial-gradient(13rem 13rem at var(--mx) var(--my),
    color-mix(in oklab, var(--sc-accent) 85%, white) 0%,
    color-mix(in oklab, var(--sc-accent) 70%, transparent) 30%, transparent 70%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box; mask-composite: exclude;
}
.plate__body::after {
  inset: 0; z-index: 2;
  background: radial-gradient(16rem 16rem at var(--mx) var(--my),
    color-mix(in oklab, var(--sc-accent) 20%, transparent), transparent 70%);
}
.plate__glow {
  inset: -18px; z-index: -1; filter: blur(12px); mix-blend-mode: screen; border: 18px solid transparent;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box; mask-composite: exclude;
  background: radial-gradient(16rem 16rem at calc(var(--mx) + 18px) calc(var(--my) + 18px),
    color-mix(in oklab, var(--sc-accent) 80%, transparent), transparent 70%) border-box;
}
.plate__body.is-lit::before, .plate__body.is-lit::after, .plate__body.is-lit .plate__glow { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .plate__body::before, .plate__body::after, .plate__glow { display: none; }
}

/* Fugen-Licht am Schlussbild: die Cyan-Fugen des Würfels liegen als eigene Ebene mit Alpha
   (tools/extract_seams.py) im Screen-Modus über dem Monument und werden nur in einem
   Kreis um den Zeiger freigegeben (--sc-mx/--sc-my kommen vom Engine-Spotlight der Bühne).
   Zwei Kopien: scharf und als Bloom (Blur). Nur mit echtem Zeiger. */
.tuer__seams {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 55%;
  max-width: none; pointer-events: none; z-index: 1; mix-blend-mode: screen; opacity: 0;
  transition: opacity var(--sc-d-slow) var(--sc-ease-out);
  -webkit-mask: radial-gradient(28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), #000 0%, rgba(0,0,0,0.65) 35%, transparent 70%);
  mask: radial-gradient(28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), #000 0%, rgba(0,0,0,0.65) 35%, transparent 70%);
}
.tuer__seams--bloom { filter: blur(16px) brightness(2.2); }
.tuer__seams:not(.tuer__seams--bloom) { filter: brightness(1.4); }
.tuer:hover .tuer__seams { opacity: 1; }
@media (max-width: 860px) { .tuer__seams { object-position: 86% 55%; } }
@media (hover: none) { .tuer__seams { display: none; } }