/* ============================================================
   CarGuard – Cinematic Scroll-Journey
   Gepinnte Bühne + „Kamera", die durch eine Vektor-Szene fährt.
   ============================================================ */

.cine-reduced-note { display: none; }

/* Bühne: füllt den Viewport, wird gepinnt */
.cine { position: relative; }
.stage {
  position: relative; height: 100vh; width: 100%; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 12%, #0d1426 0%, #07090f 55%, #05060c 100%);
}

/* Sterne / Atmosphäre */
.stage .stars { position: absolute; inset: 0; pointer-events: none; opacity: .7; }
.stage .stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; opacity: .5; animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%,100%{opacity:.2} 50%{opacity:.8} }

/* Die „Welt": großes Koordinatensystem, das die Kamera transformiert.
   KEIN will-change → Browser rastert beim Zoom neu = scharf (sonst unscharf). */
.world {
  position: absolute; top: 0; left: 0;
  width: 1600px; height: 1000px;
  transform-origin: 0 0;
}
.layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* --- Boden / Parkplatz --- */
.ground {
  position: absolute; left: 120px; top: 700px; width: 1360px; height: 4px;
  background: linear-gradient(90deg, transparent, rgba(52,226,164,.35), transparent);
  border-radius: 4px;
}
.ground::after {
  content: ""; position: absolute; left: 50%; top: 40px; transform: translateX(-50%);
  width: 900px; height: 220px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(45,156,219,.10), transparent 70%);
}

/* --- Auto (SVG skaliert sich mit) --- */
.car { position: absolute; left: 470px; top: 430px; width: 660px; }
.car svg { width: 100%; height: auto; overflow: visible; }
.car .glassglow { filter: drop-shadow(0 0 18px rgba(52,226,164,.5)); }

/* --- Sensor-Wellen ums Auto --- */
.waves { position: absolute; left: 800px; top: 600px; }
.waves span {
  position: absolute; left: 0; top: 0; transform: translate(-50%,-50%);
  border-radius: 50%; border: 2px solid rgba(52,226,164,.4);
  width: 40px; height: 40px; opacity: 0; will-change: transform, opacity;
}
.stage.armed .waves span { animation: ripple 3.2s ease-out infinite; }
.stage.armed .waves span:nth-child(2) { animation-delay: 1.06s; border-color: rgba(45,156,219,.4); }
.stage.armed .waves span:nth-child(3) { animation-delay: 2.12s; border-color: rgba(124,77,255,.4); }
@keyframes ripple {
  0%   { width: 40px; height: 40px; opacity: .9; }
  100% { width: 620px; height: 620px; opacity: 0; }
}

/* --- iPhone-Mockups in der Welt (nutzen die .phone-Komponente) --- */
.world .phone { position: absolute; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,255,255,.1); }
.sensor-phone { left: 726px; top: 556px; width: 58px; border-radius: 12px; padding: 4px; }
.sensor-phone::before { width: 22px; height: 6px; top: 6px; }
.sensor-phone .phone-screen { border-radius: 9px; }
.sensor-phone .scr { padding: 14px 6px 7px; gap: 4px; }

.user-phone { left: 1316px; top: 388px; width: 66px; border-radius: 12px; padding: 4px; }
.user-phone::before { width: 20px; height: 6px; top: 6px; }
.user-phone .phone-screen { border-radius: 9px; }
.user-phone .scr { padding: 13px 6px 7px; gap: 4px; }

/* Mini-Screen-Inhalte (für stark gezoomte iPhones) */
.mini-shield { margin: 2px auto; width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--grad-soft); border-radius: 8px; border: 1px solid rgba(52,226,164,.3); }
.mini-shield svg { width: 16px; height: 16px; }
.mini-t { font-size: 5px; font-weight: 700; text-align: center; color: var(--text); letter-spacing: .02em; }
.mini-s { font-size: 4px; text-align: center; color: var(--muted); }
.mini-bar { height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--grad); }
.mini-cta { margin-top: 2px; font-size: 4.5px; font-weight: 700; text-align: center; color: #04130D;
  background: var(--grad); border-radius: 4px; padding: 3px 0; }

/* --- Figuren --- */
.figure { position: absolute; }
.intruder { left: 360px; top: 506px; width: 150px; will-change: transform; }
.user { left: 1230px; top: 360px; width: 210px; }
.figure svg { width: 100%; height: auto; overflow: visible; }
.user .watch-glow { filter: drop-shadow(0 0 8px rgba(52,226,164,.9)); }

/* Haus-Andeutung hinter dem Nutzer */
.house { position: absolute; left: 1180px; top: 250px; width: 360px; opacity: .55; }
.house svg { width: 100%; height: auto; }

/* ============================================================
   UI-Overlay (fix über der Bühne, bewegt sich NICHT mit)
   ============================================================ */
.cine-ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

.cine-cap {
  position: absolute; max-width: 440px; opacity: 0; will-change: transform, opacity;
}
.cine-cap.bl { left: 7%; bottom: 12%; }
.cine-cap.br { right: 7%; bottom: 14%; text-align: right; }
.cine-cap.cl { left: 8%; top: 50%; transform: translateY(-50%); }
.cine-cap .eyebrow { margin-bottom: 14px; }
.cine-cap h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 12px; }
.cine-cap p { color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.18rem); }
.cine-cap.br .eyebrow { margin-left: auto; }

/* Alarm-Blitz */
.cine-flash { position: absolute; inset: 0; background: radial-gradient(circle at 42% 60%, rgba(255,77,94,.55), transparent 60%); opacity: 0; pointer-events: none; z-index: 4; }

/* Scroll-Hinweis am Anfang */
.cine-hint {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted-2); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  z-index: 6; will-change: opacity;
}
.cine-hint .mouse { width: 22px; height: 34px; border: 2px solid var(--muted-2); border-radius: 12px; position: relative; }
.cine-hint .mouse::after { content: ""; position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 3px; height: 6px; background: var(--accent); border-radius: 3px; animation: scrolldot 1.6s ease-in-out infinite; }
@keyframes scrolldot { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,10px)} }

/* Fortschritts-Kapitel-Punkte rechts */
.cine-chapters { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 6; }
.cine-chapters i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); transition: background .3s, transform .3s; }
.cine-chapters i.on { background: var(--accent); transform: scale(1.5); box-shadow: 0 0 10px var(--accent); }

@media (max-width: 760px) {
  .cine-cap { max-width: 78%; }
  .cine-cap.br { right: 6%; }
  .cine-chapters { right: 12px; }
}

/* Reduced motion: Journey durch statische Sektion ersetzen */
@media (prefers-reduced-motion: reduce) {
  .cine { display: none; }
  .cine-reduced-note { display: block; }
}

/* ============================================================
   HOCHGLANZ-Upgrade: Atmosphäre, Tiefe, Film-Look
   ============================================================ */

/* Mehrschichtiger Hintergrund (fix hinter der Welt) */
.backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.backdrop .sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 72% 8%, rgba(45,156,219,.16), transparent 55%),
    radial-gradient(90% 70% at 20% 0%, rgba(52,226,164,.10), transparent 50%),
    linear-gradient(180deg, #0a1326 0%, #070b16 45%, #05070e 100%);
}
.backdrop .moon {
  position: absolute; top: 9%; right: 16%; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #eaf6ff, #9fc6e6 55%, #5b86a8 80%);
  box-shadow: 0 0 80px 24px rgba(180,220,255,.22), 0 0 180px 60px rgba(45,156,219,.12);
  opacity: .9;
}
/* Stadt-Bokeh am Horizont (Lichter via JS) */
.backdrop .city { position: absolute; left: 0; right: 0; bottom: 30%; height: 200px; }
.backdrop .city i {
  position: absolute; bottom: 0; width: 6px; height: 6px; border-radius: 50%;
  filter: blur(2px); opacity: .55;
}
/* Dunst überm Horizont */
.backdrop .haze {
  position: absolute; left: 0; right: 0; bottom: 26%; height: 280px;
  background: linear-gradient(180deg, transparent, rgba(45,156,219,.08) 60%, rgba(52,226,164,.06));
  filter: blur(20px);
}
/* Sterne dürfen jetzt im Backdrop sitzen */
.backdrop .stars { position: absolute; inset: 0; top: 0; height: 60%; }

/* Keine Filter an skalierten Elementen → bleiben beim Zoom scharf.
   (Schatten/Glow kommen aus der SVG selbst, nicht aus CSS-Filtern.) */
.car { filter: none; }
.car .glassglow { filter: none; }
/* Boden-Reflexion des Autos (gespiegelt, verblasst) */
.car-reflection {
  position: absolute; left: 470px; top: 770px; width: 660px;
  transform: scaleY(-1); opacity: .18; filter: blur(3px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 70%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 70%);
  pointer-events: none;
}
.car-reflection svg { width: 100%; height: auto; }

/* Reicherer Boden-Glow */
.ground { height: 3px; background: linear-gradient(90deg, transparent, rgba(52,226,164,.5), rgba(45,156,219,.4), transparent); }
.ground::after {
  width: 1100px; height: 300px; top: 30px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(45,156,219,.16), rgba(52,226,164,.06) 40%, transparent 72%);
}

/* Scheinwerfer-Lichtkegel */
.headlamp {
  position: absolute; left: 1120px; top: 596px; width: 360px; height: 150px;
  background: linear-gradient(100deg, rgba(207,240,255,.32), transparent 72%);
  clip-path: polygon(0 42%, 0 58%, 100% 100%, 100% 0);
  filter: blur(6px); opacity: .0; pointer-events: none;
}
.stage.armed .headlamp { opacity: .55; transition: opacity 1.2s ease; }

/* Film-Look-Overlay */
.cine-overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cine-overlay .vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.32) 82%, rgba(0,0,0,.6) 100%);
}
.cine-overlay .grain {
  position: absolute; inset: -50%; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(4) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-4%,2%)} 50%{transform:translate(3%,-3%)} 75%{transform:translate(-2%,4%)} 100%{transform:translate(2%,-2%)} }

@media (prefers-reduced-motion: reduce) { .cine-overlay .grain { animation: none; } }