/* =============================================================
   marcus-belz.de — Browser-Rahmen für Screenshots
   Angelehnt an ChromeWindow aus ui_kits/web/browser-window.jsx,
   brand-konform: Schatten navy-getönt, Leiste in Slate, Ampel-
   punkte einfarbig (Rot/Gelb/Grün sind bei DI² Feedback-Farben).

   Mechanik:
   - Kipp-Eintritt: Der Rahmen steht beim Sichtbarwerden um
     --frame-tilt gekippt und dreht in die Ebene (.is-inview).
   - Parallax: Der Screenshot ist höher als .frame-view und
     wird per --p (px, von site.js gesetzt) nach oben geschoben.
   Beides nur mit JS (html.js) und nicht bei reduced motion.
   Die Transforms liegen ausschließlich in Text-Panels, nie in
   .panel-image (siehe site.css).
   ============================================================= */

.frame-stage {
  perspective: 1000px;
  perspective-origin: 50% 40%;
}

.frame {
  position: relative;
  margin: 0;
  overflow: clip;
  border-radius: 10px;
  background: var(--di-slate-800);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(15, 23, 42, 0.08);
  transform-origin: 50% 50%;
}

/* Einblenden schnell, Drehung langsam: so ist der Rahmen schon sichtbar, während er noch
   gekippt steht. Bei gleicher Dauer wäre er flach, bevor man ihn sieht. */
html.js .frame {
  opacity: 0;
  transform: translateY(24px) rotateY(var(--frame-tilt));
  transition: opacity 350ms var(--ease), transform 900ms var(--ease);
}
html.js .panel-grid--flip .frame {
  transform: translateY(24px) rotateY(calc(-1 * var(--frame-tilt)));
}
html.js .frame.is-inview {
  opacity: 1;
  transform: none;
}

/* Leiste: Ampelpunkte + URL-Pille */
.frame-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 14px;
}
/* Drei Punkte wie in den Code-Blöcken von sql.marcus-belz.de: dort überschreibt das
   Theme-CSS die Plugin-Ampel mit Soft White, Signal Blue und Cyan Teal, ohne Rand,
   12 px, 20 px Mittenabstand. Maintainer-Wunsch 2026-10-02. */
.frame-dots { display: flex; gap: 8px; }
.frame-dots i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.frame-dots i:nth-child(1) { background: var(--di-white); }
.frame-dots i:nth-child(2) { background: var(--di-blue); }
.frame-dots i:nth-child(3) { background: var(--di-cyan); }
.frame-url {
  flex: 1;
  margin-left: var(--space-2);
  height: 26px;
  padding: 0 14px;
  border-radius: 13px;
  background: var(--di-slate-700);
  color: var(--di-slate-300);
  font-size: 13px;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Inhalt: Screenshot, der beim Scrollen mitläuft */
.frame-view {
  position: relative;
  overflow: clip;
  aspect-ratio: 16 / 11;
  /* min-height: auto würde die Höhe am Bild ausrichten und das Seitenverhältnis
     aushebeln. Mit 0 bleibt das Fenster 16:11, der Rest des Screenshots ist
     geclippt und wird per Parallax hereingeschoben. */
  min-height: 0;
  background: #fff;
}
/* Screenshot als Link: Klick öffnet die Vollgrößen-Variante (neuer Tab) */
.frame-link { display: block; cursor: zoom-in; }
.frame-link:focus-visible { outline-offset: -2px; }
.frame-view img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(calc(var(--p, 0) * -1px));
  will-change: transform;
}
/* Platzhalter mit Viewport-Verhältnis (bis der volle DI²-Shot vorliegt) */
.frame-view--wide { aspect-ratio: 1920 / 830; }

@media (max-width: 768px) {
  .frame-view { aspect-ratio: 4 / 3; }
  .frame-view--wide { aspect-ratio: 1920 / 830; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .frame,
  html.js .panel-grid--flip .frame {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .frame-view img { transform: none; will-change: auto; }
}