/* ============================================================================
   EY-LO Web-Demo — interaktive Nachbildung der App-Oberflaeche
   Vanilla CSS, self-contained. Marke: Schwarz #0A0A0A, Amber #C4933F.
   ========================================================================== */

.eylo-demo {
  /* Brand tokens */
  --bg: #0A0A0A;
  --amber: #C4933F;
  --amber-soft: rgba(196, 147, 63, 0.16);
  --rec: #FF3B30;
  --green: #34C759;
  --white: #ffffff;
  --white-60: rgba(255, 255, 255, 0.60);
  --white-40: rgba(255, 255, 255, 0.40);
  --white-20: rgba(255, 255, 255, 0.20);
  --font-brand: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  position: relative;
  width: 100%;
  max-width: 1144px;   /* native frame width; scale freely below */
  margin: 0 auto;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--white);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------- Overview */

.overview { position: relative; }

.frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1.5;   /* etwas mehr als MacBook Ratio, damit iPad rechts Platz hat */
}

/* Zwei separate Devices: MacBook hinten links, iPad ueberlappt vorne rechts. */
.device {
  position: absolute;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 0.25s ease;
}
.device-mac {
  left: 0;
  top: 0;
  width: 72%;
  aspect-ratio: 3944 / 2564;   /* natives Verhaeltnis der MacBook-PNG */
  z-index: 1;
}
.device-ipad {
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 2610 / 1890;   /* natives Verhaeltnis der iPad-PNG */
  z-index: 2;
}

/* Das PNG-Mockup liegt oben; die UI dahinter scheint durch den transparenten
   Screen-Bereich durch. */
.device-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Der Screen-Bereich liegt unter dem PNG und wird nur durch das transparente
   "Loch" sichtbar. Positionen sind Prozent der jeweiligen Mockup-PNG. */
.device-screen {
  position: absolute;
  overflow: hidden;
  background: var(--bg);
  z-index: 1;
}
/* Exakte Screen-Bereiche der Mockup-PNGs, per Pixel-Analyse ermittelt.
   Beim MacBook laeuft der Container bis zum tatsaechlichen oberen
   Bildschirmrand (Bezel-Kante bei y=263), sodass die Software-Chrome buendig
   mit der Bildschirm-Oberkante sitzt. Die Notch (mittig, ca. 45-55% Breite)
   verdeckt den mittleren Teil der Topbar, was authentisch macOS-artig wirkt.
   iPad hat keine Notch, deshalb entspricht der Container exakt dem
   transparenten Loch. */
/* Werte leicht erweitert (links -0.29%, unten +0.29%) gegen Subpixel-Streifen
   beim MacBook. Der PNG-Bezel liegt mit z-index 2 obendrueber und verdeckt
   das Overlap sauber, sodass optisch kein Unterschied bleibt. */
.device-screen.mac  { left: 11.40%; top: 11.20%; width: 76.91%; height: 77.31%; }
.device-screen.ipad { left:  3.25%; top:  4.87%; width: 93.49%; height: 90.55%; }

/* Hover-Feedback nur in der Uebersicht (nicht im Detail-View):
   deutlicher Sprung nach oben plus sanfter Schlagschatten. Bewusst nur auf
   klassischen Desktop-Groessen (>=900 px Breite) UND Maus-Zeiger. iOS Safari
   meldet auf Touch manchmal faelschlich "hover: hover"; deshalb zusaetzlich
   die Breite als harte Schranke, damit Mobile garantiert keinen Hover
   bekommt und nichts "haengen bleibt". */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .frame-wrap .device:hover {
    transform: translateY(-12px);
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.18));
  }
}

.overview-hint {
  position: absolute;
  left: 50%; bottom: -1.9em;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.4vw, 14px);
  letter-spacing: 0.04em;
  color: var(--white-40);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ Detail */

.detail {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Fully opaque light background so the enlarged app sits on the EY-LO
     page background (light) instead of a dark modal. Overview devices are
     hidden behind this. */
  background: #FAFAF7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 7vh;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.detail.open { opacity: 1; }
.detail[hidden] { display: none; }

.detail-stage {
  position: relative;
  background: transparent;
  overflow: visible;
  transform-origin: top left;   /* set dynamically for the grow-from-device effect */
}
/* Aspect-Ratio der Stage folgt dem jeweiligen Mockup, das per JS gesetzt wird. */
.detail-stage.stage-mac {
  width: min(94vw, calc(84vh * 3944 / 2564));
  aspect-ratio: 3944 / 2564;
}
.detail-stage.stage-ipad {
  width: min(94vw, calc(84vh * 2610 / 1890));
  aspect-ratio: 2610 / 1890;
}

/* Device-Detail: fuellt die Stage; Struktur wie in der Uebersicht,
   aber ohne Hover-Effekt und ohne verschobene Positionierung. */
.device-detail {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: default;
}
.device-detail:hover { transform: none; }

/* macOS-Fensterrahmen sitzt IM Mac-Screen des Mockups */
.mac-window {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #1e1e1f;
  overflow: hidden;
}
.mac-titlebar {
  flex: 0 0 auto;
  height: 6%; min-height: 26px;
  background: #2c2c2e;
  display: flex; align-items: center; gap: 9px;
  padding: 0 14px;
}
/* Apple-Ampeln: Icons erscheinen bei Hover, wie in echt macOS. */
.mac-titlebar .tl {
  width: 12px; height: 12px; border-radius: 50%;
  position: relative;
  cursor: pointer;
}
.tl.red    { background: #FF5F57; }
.tl.yellow { background: #FEBC2E; }
.tl.green  { background: #28C840; }
.mac-titlebar .tl svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.12s ease;
}
/* Hover ueber die gesamte Ampel-Gruppe zeigt alle drei Symbole (macOS). */
.mac-titlebar:hover .tl svg { opacity: 1; }
.mac-screen { position: relative; flex: 1 1 auto; overflow: hidden; background: var(--bg); }

.detail-back {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 10;
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: rgba(20, 20, 20, 0.85);
  color: var(--white);
  font-size: 24px; line-height: 44px;
  cursor: pointer;
  /* Per default komplett aus dem Rendering raus, nur wenn Detail-Ansicht
     offen ist wird der Button eingeblendet. Verhindert Cache-Ghosts. */
  display: none;
}
.detail.open .detail-back {
  display: block;
}
.detail-back:hover { background: rgba(40, 40, 40, 0.95); }

/* Mobile: viel Platz oben (deutlich mehr Puffer damit der Close-Button
   klar OBERHALB des Geraets sitzt), Mac-Stage etwas breiter,
   macOS-Titelbar-Ampeln deutlich kleiner. */
@media (max-width: 700px) {
  .detail {
    padding-top: 120px;
    padding-bottom: 3vh;
  }
  .detail-back {
    top: max(8px, env(safe-area-inset-top));
    width: 40px; height: 40px;
    line-height: 40px;
    font-size: 22px;
  }
  /* iPad und Mac deutlich kleiner (65vh statt 78vh), damit klar Puffer
     zum Close-Button oben bleibt und das Geraet nicht rausragt. */
  .detail-stage.stage-mac {
    width: min(97vw, calc(65vh * 3944 / 2564));
  }
  .detail-stage.stage-ipad {
    width: min(97vw, calc(65vh * 2610 / 1890));
  }
  /* Titelbar sehr flach, Ampeln klein, sonst dominieren sie den Bildschirm */
  .mac-titlebar {
    height: 4%; min-height: 14px;
    padding: 0 6px; gap: 4px;
  }
  .mac-titlebar .tl {
    width: 7px; height: 7px;
  }
}

/* ============================================================================
   The reusable EY-LO UI component. Rendered identically in:
     - the Mac mini screen        (.no-chrome -> video only)
     - the iPad mini screen       (.no-chrome -> video only)
     - the enlarged detail stage  (full controls)
   Internally laid out at a fixed 1600x1200 design box and scaled to COVER its
   container via a CSS custom property --s, so proportions are pixel-identical
   on both platforms.
   ========================================================================== */

.eylo-ui-fit {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--bg);
}
.eylo-ui {
  position: absolute;
  top: 50%; left: 50%;
  width: 1600px;
  height: var(--design-h, 1200px);   /* dynamisch aus Container-Aspect */
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transform-origin: center center;
  background:
    radial-gradient(120% 90% at 50% 0%, #14181c 0%, #0c0f12 55%, var(--bg) 100%);
  font-size: 16px;
}

/* --- video layer --- */
.ui-video-area { position: absolute; inset: 0; overflow: hidden; }

.ui-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #10151a;
}
/* Fallback shown behind the <video>. Visible whenever the video has no source
   or fails to load (a video element with no playable src renders transparent). */
.ui-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--white-40);
  font-size: 30px;
  z-index: 0;
}
.ui-fallback.wide {
  background:
    radial-gradient(80% 120% at 50% 40%, #223038 0%, #141b20 60%, #0b1013 100%);
  animation: driftA 9s ease-in-out infinite alternate;
}
.ui-fallback.macro {
  background:
    radial-gradient(90% 90% at 45% 45%, #6d4b3a 0%, #3a2820 55%, #201512 100%);
  animation: driftB 7s ease-in-out infinite alternate;
}
@keyframes driftA { from { background-position: 46% 38%; } to { background-position: 54% 44%; } }
@keyframes driftB { from { background-position: 42% 42%; } to { background-position: 52% 50%; } }
.ui-video { z-index: 1; }

/* Macro picture-in-picture — bottom center, 16:9, white top-rounded frame,
   flush with the bottom edge. Width driven by the macro slider (10-70%). */
.ui-pip {
  position: absolute;
  left: 50%;
  bottom: 152px;             /* rests just on top of the 150px control band */
  transform: translateX(-50%);
  width: 30%;                 /* JS updates this live */
  aspect-ratio: 16 / 9;
  border: 3px solid var(--white);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  z-index: 3;
  background: #201512;
}
.ui-pip .ui-video, .ui-pip .ui-fallback { border-radius: 11px 11px 0 0; }

/* watermarks */
.ui-wm { position: absolute; z-index: 4; pointer-events: none; }
/* Watermarks live in the recorded image, so they sit ABOVE the bottom band
   (~150px) instead of behind it. */
.ui-wm-left {
  left: 26px; bottom: 166px;
  font-size: 22px; color: var(--white);
  opacity: 0.9;
}
.ui-wm-right {
  right: 26px; bottom: 162px;
  display: flex; align-items: center; gap: 10px;
}
.ui-wm-right .brand-word { font-family: var(--font-brand); font-size: 26px; letter-spacing: 0.01em; }

/* --- top bar --- */
.ui-topbar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 118px;
  display: flex; align-items: center;
  padding: 0 34px;
  /* Solid black band. In the real app these bands fade in/out; in the demo
     they stay visible so all controls are reachable. */
  background: var(--bg);
  z-index: 6;
}
.ui-brand { display: flex; align-items: center; gap: 16px; }
.ui-brand .brand-word { font-family: var(--font-brand); font-size: 40px; letter-spacing: 0.01em; }

/* Live-Anzeige sitzt links vor der MacBook-Notch (Notch bei ca. 44-56%
   der UI-Breite). Rechte Kante der Anzeige liegt bei 40%, sodass sie
   auch beim iPad optisch zentriert-links wirkt. */
.ui-status {
  position: absolute; left: 40%; top: 40px;
  transform: translateX(-100%);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 30px;
}
.ui-status .dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
}

.ui-top-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 22px;
}
.ui-capsule {
  display: flex; align-items: center;
  padding: 12px 26px;
  border: 1.5px solid var(--amber);
  border-radius: 999px;
  color: var(--amber);
  background: var(--amber-soft);
  font-family: var(--font-mono); font-size: 27px;
  white-space: nowrap;
}
.ui-iconbtn {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; color: var(--white);
  border-radius: 12px;
}
.ui-iconbtn:hover { background: rgba(255,255,255,0.08); }
.ui-iconbtn svg { width: 40px; height: 40px; }

/* record timer badge — sits just BELOW the top black band so it never
   collides with the green "Live" status inside the band. */
.ui-rec-badge {
  position: absolute; left: 50%; top: 138px;
  transform: translateX(-50%);
  display: none; align-items: center; gap: 12px;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  font-family: var(--font-mono); font-size: 30px; color: var(--white);
  z-index: 7;
}
.ui-rec-badge.on { display: flex; }
.ui-rec-badge .rdot {
  width: 16px; height: 16px; border-radius: 50%; background: var(--rec);
  animation: recblink 1s steps(1) infinite;
}
@keyframes recblink { 50% { opacity: 0.25; } }

/* --- bottom bar --- */
.ui-bottombar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 150px;
  display: flex; align-items: center;
  padding: 0 40px;
  background: var(--bg);   /* solid black band */
  z-index: 6;
}

/* mic + level meter (left) */
.ui-mic { display: flex; align-items: center; gap: 16px; }
.ui-mic svg { width: 34px; height: 34px; color: var(--white); }
/* Fewer, thicker bars (like the real app). Each bar is EITHER fully lit (amber)
   OR off (white) — no partial fill. This is a LEVEL meter: the fill grows from
   the LEFT (low level) toward the RIGHT (peak). Left bars are lit almost always,
   the rightmost only at the peak — so the level rises and falls left<->right.
   All bars share one cycle; each has its own amber window, widest on the left. */
.ui-levels { display: flex; align-items: center; gap: 6px; height: 34px; }
.ui-levels i {
  width: 9px; height: 100%;
  border-radius: 2px;
  background: var(--white-40);
  /* step-end holds each keyframe value then jumps -> every bar is fully amber
     (on) or white (off), never in between. */
  animation: 2.4s step-end infinite;
}
.ui-levels i:nth-child(1) { animation-name: lvl1; }
.ui-levels i:nth-child(2) { animation-name: lvl2; }
.ui-levels i:nth-child(3) { animation-name: lvl3; }
.ui-levels i:nth-child(4) { animation-name: lvl4; }
.ui-levels i:nth-child(5) { animation-name: lvl5; }
.ui-levels i:nth-child(6) { animation-name: lvl6; }
.ui-levels i:nth-child(7) { animation-name: lvl7; }
/* Level meter: bar i lights when the (irregular) level >= i. The two leftmost
   bars stay lit; the fill grows toward the right and the rightmost bar only
   flashes at the peak. */
@keyframes lvl1 { 0%{background:var(--amber)} }
@keyframes lvl2 { 0%{background:var(--amber)} }
@keyframes lvl3 { 0%{background:var(--white-40)} 7%{background:var(--amber)} 100%{background:var(--white-40)} }
@keyframes lvl4 { 0%{background:var(--white-40)} 14%{background:var(--amber)} 37%{background:var(--white-40)} 44%{background:var(--amber)} 73%{background:var(--white-40)} 80%{background:var(--amber)} 93%{background:var(--white-40)} }
@keyframes lvl5 { 0%{background:var(--white-40)} 14%{background:var(--amber)} 21%{background:var(--white-40)} 29%{background:var(--amber)} 37%{background:var(--white-40)} 44%{background:var(--amber)} 58%{background:var(--white-40)} 66%{background:var(--amber)} 73%{background:var(--white-40)} 80%{background:var(--amber)} 87%{background:var(--white-40)} }
@keyframes lvl6 { 0%{background:var(--white-40)} 29%{background:var(--amber)} 37%{background:var(--white-40)} 51%{background:var(--amber)} 58%{background:var(--white-40)} 66%{background:var(--amber)} 73%{background:var(--white-40)} }
@keyframes lvl7 { 0%{background:var(--white-40)} 51%{background:var(--amber)} 58%{background:var(--white-40)} }

/* center cluster: photo + record */
.ui-center {
  position: absolute; left: 50%; bottom: 30px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 60px;
}
.ui-photo {
  width: 92px; height: 92px; border-radius: 50%;
  border: 3px solid var(--white-40);
  background: transparent; cursor: pointer; color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.ui-photo:hover { border-color: var(--white); }
.ui-photo svg { width: 44px; height: 44px; }

.ui-record {
  width: 108px; height: 108px; border-radius: 50%;
  border: 6px solid var(--white);
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.ui-record .knob {
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--rec);
  transition: all 0.2s ease;
}
.ui-record.recording .knob {
  width: 44px; height: 44px; border-radius: 10px;   /* becomes a stop square */
}

/* right cluster: stabilization + macro slider */
.ui-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 34px;
}
.ui-stab {
  width: 108px; height: 76px; border-radius: 14px;
  border: none; background: transparent; cursor: pointer; color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.ui-stab:hover { background: rgba(255,255,255,0.08); }
.ui-stab svg { width: 88px; height: auto; display: block; }
/* Wellen immer sichtbar (Farbe wechselt: weiss aus, amber ein). */
.ui-stab { color: var(--white); }
.ui-stab.on { color: var(--amber); }

.ui-macro { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 300px; }
.ui-slider {
  position: relative; height: 34px; cursor: pointer;
  touch-action: none;   /* let us handle touch drags ourselves */
}
.ui-slider .track {
  position: absolute; top: 50%; left: 0; right: 0; height: 8px;
  transform: translateY(-50%);
  background: var(--white-20); border-radius: 4px;
}
.ui-slider .fill {
  position: absolute; top: 50%; left: 0; height: 8px;
  transform: translateY(-50%);
  background: var(--amber); border-radius: 4px;
  width: 33%;
}
.ui-slider .thumb {
  position: absolute; top: 50%; left: 33%;
  width: 34px; height: 34px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.ui-macro .macro-label {
  font-family: var(--font-mono); font-size: 24px; letter-spacing: 0.03em;
  color: var(--white-60); text-align: center;
}

/* --- flash (photo) --- */
.ui-flash {
  position: absolute; inset: 0; z-index: 20;
  background: #fff; opacity: 0; pointer-events: none;
}
.ui-flash.fire { animation: flash 0.15s ease-out; }
@keyframes flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }

/* --- stabilization HUD --- */
.ui-hud {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 360px; height: 360px;
  border-radius: 28px;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  z-index: 21; color: var(--white);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.ui-hud.show { opacity: 1; }
.ui-hud svg { width: 120px; height: 120px; }
.ui-hud .hud-text { font-family: var(--font-mono); font-size: 30px; text-align: center; }
/* icon color reflects state: white (off) -> amber (on); waves always visible */
.ui-hud { color: var(--white); }
.ui-hud.on { color: var(--amber); }

/* --- settings overlay (in-UI) --- */
.ui-settings {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center;
}
.ui-settings.open { display: flex; }
.ui-settings-panel {
  width: 66%; max-width: 900px;
  background: #16191d;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: 46px 50px;
  position: relative;
}
.ui-settings-panel h3 {
  font-family: var(--font-brand); font-size: 34px; margin: 0 0 22px;
}
.ui-settings-panel p {
  font-size: 26px; line-height: 1.55; color: var(--white-60); margin: 0;
}
.ui-settings-close {
  position: absolute; top: 18px; right: 20px;
  width: 46px; height: 46px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: var(--white);
  font-size: 26px; cursor: pointer;
}
.ui-settings-close:hover { background: rgba(255,255,255,0.18); }

/* In der Uebersicht wird die VOLLE Software-Oberflaeche angezeigt (Topbar,
   Bottombar, Bedien-Elemente). Das gibt dem Nutzer sofort einen realistischen
   Vorgeschmack der Software, nicht nur ein Video im Bildschirm. */