/* ============ 3D-MacBook: der Einstieg ins Nicklas OS ============
   Am Ende der Landing (index.html, .macbook) und auf preview/macbook-3d.html.
   Die Szene rendert three.js in #m3-gl (WebGL); der Bildschirm ist ein
   iframe mit Nicklas OS, den der CSS3DRenderer in #m3-css deckungsgleich
   über die Deckelfläche legt. Logik: js/macbook-3d.js */

/* Abschnitt auf der Landing: weiß wie "More Work", liegt über dem sticky Hero */
.macbook {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 0 24px 130px;
}
.macbook .m3 { max-width: 1060px; margin: 0 auto; }
/* Überschrift über dem Gerät (v48, Nicklas' Wahl aus Claudes Vorschlägen), gleiche
   Größe wie die Wörter neben dem „More Work"-Ordner */
.mac-title {
  font-family: "Trovical", Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.05;
  text-align: center;
  color: #111;
  margin: 0 0 8px;
  padding-top: 110px;
}
.mac-title em { font-style: italic; }
@media (max-width: 820px) { .mac-title { padding-top: 70px; } }
@media (max-width: 820px) {
  .macbook { padding: 0 12px 90px; }
}

.pv-wrap { max-width: 1060px; margin: 0 auto; padding: 96px 24px 120px; }
.pv-wrap h1 { font-family: "Trovical", Georgia, serif; font-weight: 400; font-size: clamp(34px, 5vw, 56px); line-height: 1.1; margin: 0 0 12px; }
.pv-wrap p.pv-note { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: #777; margin: 0 0 40px; }

.m3 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
#m3-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#m3-css { position: absolute; inset: 0; pointer-events: none; }
/* Der Bildschirm-iframe: im Gerät nicht bedienbar, im Vollbild schon */
/* !important: der CSS3DRenderer setzt auf dem Objekt-Element inline
   pointer-events:auto — ohne das Ausrufezeichen fing der iframe die Klicks,
   und der Klick auf den Bildschirm kam nie bei der Seite an */
#m3-css .m3-screen, #m3-css .m3-screen iframe { pointer-events: none !important; }
#m3-css iframe { border: 0; display: block; background: #000; }
/* Handy: Standbild statt iframe (js/macbook-3d.js, STATIC) */
#m3-css .m3-still { display: block; pointer-events: none; }
/* Notch (Maße im iframe-Maßstab, 1440px breit): ragt nur so tief ins Display wie die Menüleiste */
#m3-css .m3-notch {
  position: absolute;
  top: 0;
  left: 50%;
  width: 124px;               /* Nicklas: ~20 % breiter als die erste Fassung */
  height: 26px;               /* genau so hoch wie die Tahoe-Menüleiste (#t-menubar, tahoe.css) */
  transform: translateX(-50%);
  background: #000;
  border-radius: 0 0 10px 10px;
  pointer-events: none;
}
body.os-full #m3-css .m3-notch { display: none; }
/* Der iMac hat keine Notch und eckige Displayecken (js/macbook-3d.js, attachScreen) */
#m3-css .m3-screen.no-notch .m3-notch { display: none; }

.m3-hint {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -50%);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: #111;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 20, 30, 0.18);
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.m3:hover .m3-hint { transform: translate(-50%, -56%); }
.m3-hint.below { top: auto; bottom: -34px; background: transparent; box-shadow: none; color: #555; }
.m3-hint.hidden { opacity: 0; }

/* ---- Vollbild: der iframe füllt das Fenster, WebGL ist aus ---- */
body.os-full { overflow: hidden; }
body.os-full #m3-gl, body.os-full .m3-hint { visibility: hidden; }
body.os-full #m3-css {
  position: fixed;
  inset: 0;
  width: 100% !important;     /* der Renderer setzt Inline-Maße, die hier nicht gelten sollen */
  height: 100% !important;
  z-index: 1000;
  pointer-events: auto;
  perspective: none !important;
  background: #000;
}
/* Der Renderer legt zwischen Host und Bildschirm-Div weitere transformierte
   Divs an (Kamera-Ebene, Objekt-Hülle) — im Vollbild alle neutralisieren */
body.os-full #m3-css div { transform: none !important; width: 100% !important; height: 100% !important; position: fixed !important; inset: 0; }
body.os-full #m3-css .m3-screen {
  transform: none !important;
  position: fixed !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto !important;
}
body.os-full #m3-css iframe { width: 100% !important; height: 100% !important; pointer-events: auto !important; }
body.os-full #m3-css .m3-screen { border-radius: 0 !important; }


/* Im Vollbild muss der Abschnitt über Footer und "More Work" liegen: die sind
   spätere Geschwister mit eigenem z-index 2 und lagen sonst in hohen
   Fenstern (Hochformat) über dem unteren Rand des OS. */
body.os-full .macbook { z-index: 1000; }

/* Hinweis AUF dem Bildschirm, sobald der Deckel offen ist (Maße im
   Bildschirmmaßstab 1440px, erscheint also etwa ein Drittel so groß) */
#m3-css .m3-enter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px 44px;
  border-radius: 999px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 36px;
  color: #111;
  background: #fff;
  box-shadow: 0 20px 60px rgba(20, 20, 30, 0.30);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#m3-css .m3-screen.is-open .m3-enter { opacity: 1; }
body.os-full #m3-css .m3-enter { display: none; }

/* Abdunkeln beim Wechsel ins Vollbild und zurück */
.m3-shade {
  position: fixed;
  inset: 0;
  z-index: 1002;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
.m3-shade.on { opacity: 1; }