/* ===========================================================================
 * Elyndor Shared Live Preview System
 * Owner: Elyndor (CEO) · Author: Elyndor · 2026-07-12
 * Phase 3 — Production implementation
 *
 * Renders each Command Center at its native desktop viewport (1440 × 900)
 * and scales the entire composition proportionally into the available card.
 *
 * Anti-regression: this stylesheet is additive only. Pages that don't
 * include <div class="preview" data-product="apple"></div> are unaffected.
 * =========================================================================== */

/* === Preview container ================================================= */

.preview, .preview-mount, .preview-auto-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10; /* default; overridden per-product if needed */
  background: var(--preview-bg, #0d1525);
  border-radius: var(--preview-radius, 14px);
  border: 1px solid var(--preview-border, rgba(255, 255, 255, 0.08));
  box-shadow: var(--preview-shadow, 0 24px 60px rgba(0, 0, 0, 0.5));
  overflow: hidden;
  isolation: isolate; /* contain iframe stacking & filter */
  /* Reserve geometry — prevent layout shift on load. */
  contain: layout paint;
  /* Color scheme hint so the iframe's bg blends */
  color-scheme: dark;
}

.preview[data-fit="cover"] {
  aspect-ratio: auto; /* set via JS based on registry */
}

/* === The fixed virtual desktop canvas ================================== */
/* The iframe sits in a virtual canvas at native source dimensions.
   The stage then applies a uniform CSS scale to fit the .preview box. */

.preview-stage {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none; /* click-through to the overlay */
  overflow: hidden; /* the scaled iframe must not escape the preview box */
  /* HiDPI rendering */
  transform-origin: var(--preview-origin, center center);
}

.preview-iframe {
  display: block;
  width: var(--preview-source-w, 1440px);
  height: var(--preview-source-h, 900px);
  border: 0;
  background: var(--preview-bg, #0d1525);
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  /* Sub-pixel rendering tweak — looks crisper when scaled down */
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
  pointer-events: none; /* not interactive in card mode */
  visibility: visible;
}

.is-loading .preview-iframe { visibility: hidden; }

.preview.is-ready .preview-iframe,
.preview-mount.is-ready .preview-iframe,
.preview-auto-wrap.is-ready .preview-iframe { visibility: visible; }

/* === The premium shell ================================================= */
/* Quiet, restrained — Apple/Linear-style title bar above the iframe.
   The Command Center remains the hero; the shell supports it. */

.preview-shell {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--preview-shell-h, 32px);
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.06),
              rgba(255, 255, 255, 0.02));
  border-bottom: 1px solid var(--preview-shell-border, rgba(255, 255, 255, 0.06));
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  z-index: 3; /* above the stage */
  pointer-events: none;
}

.preview-shell-dots {
  display: flex;
  gap: 6px;
}
.preview-shell-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.preview-shell-dots span:nth-child(1) { background: #ff5f57; }
.preview-shell-dots span:nth-child(2) { background: #ffbd2e; }
.preview-shell-dots span:nth-child(3) { background: #28c840; }

.preview-shell-title {
  margin-left: 10px;
  font: 11px/1 'SF Mono', Menlo, ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === The click-through overlay ========================================= */
/* One deliberate click target covers the entire preview. The iframe
   beneath stays non-interactive. */

.preview-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding-bottom: 16px;
  z-index: 4;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg,
              rgba(0, 0, 0, 0) 60%,
              rgba(0, 0, 0, 0.18) 100%);
  transition: background var(--t-base, 200ms) var(--ease-out, ease);
  cursor: pointer;
}

.preview-overlay:focus-visible {
  outline: none;
}
.preview-overlay:focus-visible .preview-overlay-cta {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 0 4px rgba(232, 183, 90, 0.6);
}

.preview:hover .preview-overlay,
.preview-mount:hover .preview-overlay,
.preview-auto-wrap:hover .preview-overlay {
  background: linear-gradient(180deg,
              rgba(0, 0, 0, 0) 50%,
              rgba(0, 0, 0, 0.28) 100%);
}

.preview-overlay-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(13, 21, 37, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f4ede0;
  font: 500 12px/1 inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-base, 200ms) var(--ease-out, ease),
              transform var(--t-base, 200ms) var(--ease-out, ease);
}

.preview:hover, .preview-mount:hover, .preview-auto-wrap:hover .preview-overlay-cta,
.preview-mount:hover .preview-overlay-cta,
.preview-auto-wrap:hover .preview-overlay-cta,
.preview:focus-within, .preview-mount:focus-within, .preview-auto-wrap:focus-within .preview-overlay-cta,
.preview-mount:focus-within .preview-overlay-cta,
.preview-auto-wrap:focus-within .preview-overlay-cta,
.preview-overlay:focus-visible .preview-overlay-cta {
  opacity: 1;
  transform: translateY(0);
}

.preview-overlay-cta::after {
  content: "→";
  margin-left: 2px;
  transition: transform var(--t-base, 200ms) var(--ease-out, ease);
}
.preview-overlay:hover .preview-overlay-cta::after {
  transform: translateX(2px);
}

/* === Loading state ===================================================== */

.preview-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  background: var(--preview-bg, #0d1525);
  opacity: 1;
  transition: opacity 280ms ease;
}

/* Hide loading once any of the .is-ready host variants exists. */
.preview.is-ready .preview-loading,
.preview-mount.is-ready .preview-loading,
.preview-auto-wrap.is-ready .preview-loading,
.preview-failed .preview-loading { opacity: 0; pointer-events: none; }

.preview-loading-bar {
  width: 56px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}
.preview-loading-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  animation: preview-shimmer 1400ms linear infinite;
}
@keyframes preview-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .preview-loading-bar::after { animation: none; opacity: 0; }
}

/* === Failure state ===================================================== */

.preview-failed {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  background: var(--preview-bg, #0d1525);
  padding: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
}

.preview-failed-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: #f4ede0;
}
.preview-failed-msg {
  font-size: 12px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.55);
  max-width: 28ch;
  line-height: 1.4;
}
.preview-failed-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(232, 183, 90, 0.18);
  border: 1px solid rgba(232, 183, 90, 0.4);
  color: #f4ede0;
  font: 500 12px/1 inherit;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.preview-failed-cta:hover {
  background: rgba(232, 183, 90, 0.28);
}
.preview-failed-cta::after {
  content: "→";
}

/* === Reduced-motion ==================================================== */

@media (prefers-reduced-motion: reduce) {
  .preview-overlay,
  .preview-overlay-cta,
  .preview-loading {
    transition: none !important;
    animation: none !important;
  }
}

/* === Theme variants ==================================================== */

.preview[data-theme="glass"] {
  --preview-bg: #050a14;
  --preview-border: rgba(90, 200, 250, 0.18);
  --preview-shadow:
    inset 0 0 60px rgba(90, 200, 250, 0.06),
    0 0 80px rgba(90, 200, 250, 0.14),
    0 12px 60px rgba(0, 0, 0, 0.5);
  --preview-radius: 22px;
}

.preview[data-theme="brutalist"] {
  --preview-bg: #f6f1e7;
  --preview-border: #1a1a1a;
  --preview-shadow: 8px 8px 0 #1a1a1a;
  --preview-radius: 0;
}

.preview[data-theme="cyberpunk"] {
  --preview-bg: #07021a;
  --preview-border: rgba(255, 0, 153, 0.4);
  --preview-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.25),
    0 0 40px rgba(255, 0, 153, 0.18),
    0 12px 40px rgba(0, 0, 0, 0.5);
  --preview-radius: 6px;
}

.preview[data-theme="magazine"] {
  --preview-bg: #faf8f3;
  --preview-border: rgba(0, 0, 0, 0.08);
  --preview-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
  --preview-radius: 4px;
}

/* === Mounted-as-iframe upgrade hook =================================== */
/* Existing <iframe class="hero-iframe"> markup stays on disk.
   preview.js upgrades it in-place by wrapping with .preview.
   Anti-regression: this is the only way the existing home + apple
   pages change. */

.preview-auto-wrap {
  position: relative;
  /* keep the geometry reserved; the JS sets exact aspect-ratio */
}

/* === Touch-safe ======================================================== */

@media (hover: none) and (pointer: coarse) {
  .preview-overlay-cta {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Reduced-motion on the iframe itself ============================== */

.preview[data-reduced-motion] .preview-iframe {
  /* signal to the iframe to honor reduced-motion (the iframe may still
     animate itself; we just remove any internal scroll-jacking CSS). */
}