/* RV Studio V17 — Bewegung und Effekte der Startseite (nur Darstellung). */

/* ---------- Referenz-Layout auf Handybreite skalieren ---------- */
body:has(#home:not(.hidden)) main.wrap,
body:has(#home:not(.hidden)) .lux-bottomnav { zoom: var(--cc-zoom, 1); }
body:has(#home:not(.hidden))::before,
body:has(#home:not(.hidden))::after { width: calc(17px * var(--cc-zoom, 1)); }

/* ---------- Drehende Erde ---------- */
.v15-globe-wrap .cc-earth {
  position: absolute; left: 43%; top: 50%; width: 67.4%; height: 67.4%;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 1; pointer-events: none;
  box-shadow: 0 0 4px 1px rgba(110, 190, 255, .75), 0 0 18px 4px rgba(35, 140, 255, .5), 0 0 40px 10px rgba(20, 140, 255, .22);
}
.v15-globe-wrap.cc-live .v11-globe {
  -webkit-mask-image: radial-gradient(circle at 43% 50%, transparent 0 46%, #000 48%, #000 56%, ,.6) 63%, transparent 69%);
          mask-image: radial-gradient(circle at 43% 50%, transparent 0 46%, #000 48%, #000 56%, ,.6) 63%, transparent 69%);
}
/* Referenz-Hintergrund des Globus: läuft weich ins Panel aus */
.v15-globe-wrap .cc-globe-bg { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; overflow: visible; pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 46.5% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 46.5% 50%, #000 55%, transparent 100%); }
.v15-globe-wrap .v11-globe { position: relative; z-index: 0; }
.v11-sales .body > .v11-col { position: relative; z-index: 2; }
.cc-spark { filter: drop-shadow(0 0 .8px #308cff); animation: cc-twinkle 3.2s ease-in-out infinite; }
.cc-spark-1 { animation-delay: -.8s; animation-duration: 2.6s; }
.cc-spark-2 { animation-delay: -1.7s; animation-duration: 4.1s; }
.cc-spark-3 { animation-delay: -2.4s; animation-duration: 3.6s; }
@keyframes cc-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.cc-globe-hud, .cc-bot-hud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.cc-globe-hud .cc-spin-a, .cc-globe-hud .cc-spin-b, .cc-globe-hud .cc-sweep { transform-box: view-box; transform-origin: 43px 50px; }
.cc-bot-hud .cc-spin-a, .cc-bot-hud .cc-spin-b { transform-box: view-box; transform-origin: 50px 51px; }
.cc-spin-a { animation: cc-spin 22s linear infinite; }
.cc-spin-b { animation: cc-spin 13s linear infinite reverse; }
.cc-sweep { animation: cc-spin 5.5s linear infinite; mix-blend-mode: screen; }
.cc-glowline { filter: drop-shadow(0 0 1.2px #2c8cff) drop-shadow(0 0 2.4px #2c8cff); }
.cc-orbit-dot { filter: drop-shadow(0 0 1.6px #8ad3ff) drop-shadow(0 0 3px #2c8cff); }

/* Avatar oben links: kleine drehende Erde */
.cc-avatar { position: relative; display: inline-block; flex: none; line-height: 0; }
.cc-avatar .v11-avatar {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 37%, #000 41%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 0 37%, #000 41%);
}
.cc-avatar .cc-avatar-earth {
  position: absolute; left: 50%; top: 50%; width: 78%; height: 78%;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 10px 1px rgba(40, 140, 255, .45);
}

/* ---------- Lebendiger KI-Roboter im Gravitationsfeld ---------- */
.cc-bot { --gx: 0; --gy: 0; }
.cc-bot-field { position: absolute; left: -9%; top: -9%; width: 118%; height: 118%; z-index: 0; overflow: visible; pointer-events: none; }
.cc-field-halo { animation: cc-fieldpulse 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cc-wave { opacity: 0; transform-box: fill-box; transform-origin: center; animation: cc-wave 4.5s ease-out infinite; filter: drop-shadow(0 0 1px #2c8cff); }
.cc-wave-1 { animation-delay: -1.5s; } .cc-wave-2 { animation-delay: -3s; }
.cc-bot .cc-bot-ring {
  position: absolute; inset: 0; z-index: 1; transform-origin: 50% 51%;
  -webkit-mask-image: radial-gradient(circle at 50% 51%, transparent 0 33%, #000 35%);
          mask-image: radial-gradient(circle at 50% 51%, transparent 0 33%, #000 35%);
  animation: cc-spin 28s linear infinite;
}
.cc-bot-float { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none;
  animation: cc-float 5.2s ease-in-out infinite;
  transform: translate(calc(var(--gx) * 1.2%), calc(var(--gy) * 0.8%)) rotate(calc(var(--gx) * 3deg));
  transition: transform .9s cubic-bezier(.4,.1,.3,1); }
.cc-bot .cc-bot-head { width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(circle at 50% 51%, #000 0 33.5%, transparent 35%);
          mask-image: radial-gradient(circle at 50% 51%, #000 0 33.5%, transparent 35%); }
/* Eingebrannte Augen abdecken, eigene Augen darüber */
.cc-socket { position: absolute; width: 21%; height: 21%; top: 48.9%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #050e1a 0 46%, #07172a 56%, rgba(6,33,60,.85) 64%, rgba(3,16,30,0) 74%); }
.cc-socket-l { left: 39.8%; } .cc-socket-r { left: 69.3%; }
.cc-eye { position: absolute; width: 14%; height: 14%; top: 48.9%; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%) scaleY(1); transition: transform .07s ease-in;
  box-shadow: 0 0 0 1.2px rgba(50,140,255,.75), 0 0 8px 1px rgba(20,140,255,.55), inset 0 0 5px rgba(20,140,255,.5);
  background: radial-gradient(circle at 50% 50%, #030912 0 60%, #04172a 72%); }
.cc-eye-l { left: 39.8%; } .cc-eye-r { left: 69.3%; }
.cc-pupil { position: absolute; left: 50%; top: 50%; width: 62%; height: 62%; border-radius: 50%;
  transform: translate(calc(-50% + var(--gx) * 26%), calc(-50% + var(--gy) * 26%));
  transition: transform .35s cubic-bezier(.3,.1,.2,1);
  background: radial-gradient(circle, #fff 0 20%, #d8e6ff 28%, #3a8cff 44%, #188cff 56%, rgba(15,140,255,.35) 68%, transparent 72%);
  box-shadow: 0 0 12px 4px rgba(20,140,255,.85), 0 0 22px 6px rgba(20,140,255,.35); mix-blend-mode: normal; animation: cc-eyepulse 2.4s ease-in-out infinite; }
.cc-blinking .cc-eye { transform: translate(-50%, -50%) scaleY(.08); }
.cc-mouth {
  position: absolute; z-index: 2; left: 54.5%; top: 59.5%; width: 6%; height: 4%; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle, #b0e0ff 0 20%, #409aff 45%, transparent 72%);
  mix-blend-mode: screen; pointer-events: none; animation: cc-eyepulse 1.8s ease-in-out infinite;
}
.cc-bot-shadow { position: absolute; left: 50%; bottom: 3%; width: 46%; height: 7%; z-index: 0; border-radius: 50%; pointer-events: none;
  transform: translateX(-50%); background: radial-gradient(ellipse, rgba(30,140,255,.55), rgba(20,140,255,.15) 55%, transparent 72%);
  filter: blur(2px); animation: cc-shadow 5.2s ease-in-out infinite; }
.cc-bot.cc-busy .cc-bot-ring { animation-duration: 5s; }
.cc-bot.cc-busy .cc-pupil { animation-duration: .6s; }
.cc-bot.cc-busy .cc-bot-hud .cc-spin-b { animation-duration: 3.5s; }
@keyframes cc-float { 0%, 100% { translate: 0 1.6%; } 50% { translate: 0 -3.4%; } }
@keyframes cc-shadow { 0%, 100% { scale: 1.08 1; opacity: .95; } 50% { scale: .78 .8; opacity: .5; } }
@keyframes cc-wave { 0% { scale: .92; opacity: 0; } 15% { opacity: .75; } 100% { scale: 1.42; opacity: 0; } }
@keyframes cc-fieldpulse { 0%, 100% { opacity: .75; scale: .96; } 50% { opacity: 1; scale: 1.04; } }

/* ---------- Lichtkanten, die über die Rahmen laufen ---------- */
.cc-glint { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.cc-glint::before, .cc-glint::after { content: ''; position: absolute; height: 2px; pointer-events: none; }
.cc-glint::before {
  top: 0; left: 0; width: 24%;
  background: linear-gradient(90deg, transparent, rgba(196, 238, 255, .95), transparent);
  filter: drop-shadow(0 0 3px #3a8cff); translate: -120% 0;
  animation: cc-glint 7.5s linear infinite; animation-delay: var(--d, 0s);
}
.cc-glint::after {
  bottom: 0; right: 0; width: 20%;
  background: linear-gradient(90deg, transparent, rgba(44, 140, 255, .95), transparent);
  filter: drop-shadow(0 0 3px #258cff); translate: 120% 0;
  animation: cc-glint-r 9s linear infinite; animation-delay: var(--d, 0s);
}

/* leeren Antwortbereich ausblenden (erscheint, sobald eine Antwort da ist) */
body:has(#home:not(.hidden)) .v11-ai .home-ai-feed:empty { display: none; }

/* ---------- Glut im Hintergrund ---------- */
.cc-embers { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: none; mix-blend-mode: screen; }
body:has(#home:not(.hidden)) .cc-embers { display: block; }

/* ---------- Kleine Lebenszeichen ---------- */
.v11-tile .ic { animation: cc-iconglow 3.8s ease-in-out infinite; }
.v11-tile:nth-child(2) .ic { animation-delay: -.6s; } .v11-tile:nth-child(3) .ic { animation-delay: -1.2s; }
.v11-tile:nth-child(4) .ic { animation-delay: -1.8s; } .v11-tile:nth-child(5) .ic { animation-delay: -2.4s; }
.v11-tile:nth-child(6) .ic { animation-delay: -3s; }
.v11-q .ic { animation: cc-iconglow 4.4s ease-in-out infinite; }
.v11-tile .bd { animation: cc-ping 2.2s ease-out infinite; }
.v11-ai .on::before, .v11-bell i { animation: cc-blinkdot 1.8s ease-in-out infinite; }
.v11-pill .dot { animation: cc-core 2.4s ease-in-out infinite; }
.v11-seg button[aria-pressed="true"] { animation: cc-segglow 2.8s ease-in-out infinite; }
.v11-title { animation: cc-flicker 11s linear infinite; }
.v11-m svg.spark polyline { stroke-dasharray: 160; stroke-dashoffset: 160; animation: cc-draw 1.6s ease-out .2s forwards; }
.lux-bottomnav .orb img { animation: cc-breathe 7s ease-in-out infinite, cc-spin 24s linear infinite; }
#homeAiSend { animation: cc-sendglow 2.6s ease-in-out infinite; }

@keyframes cc-spin { to { transform: rotate(360deg); } }
@keyframes cc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.2%; } }
@keyframes cc-blink { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 .1; } }
@keyframes cc-eyepulse { 0%, 100% { opacity: .78; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.35); } }
@keyframes cc-look { 0%, 18%, 100% { margin-left: 0; } 26%, 40% { margin-left: -1.6%; } 52%, 68% { margin-left: 1.6%; } 76% { margin-left: 0; } }
@keyframes cc-glint { 0% { translate: -120% 0; } 55%, 100% { translate: 520% 0; } }
@keyframes cc-glint-r { 0% { translate: 120% 0; } 60%, 100% { translate: -620% 0; } }
@keyframes cc-iconglow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(60, 150, 255, .45)); } 50% { filter: drop-shadow(0 0 9px rgba(40, 140, 255, .95)); } }
@keyframes cc-ping { 0% { box-shadow: 0 0 0 0 rgba(43, 140, 255, .75), 0 0 8px #2b8cff; } 80%, 100% { box-shadow: 0 0 0 9px rgba(43, 140, 255, 0), 0 0 8px #2b8cff; } }
@keyframes cc-blinkdot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes cc-core { 0%, 100% { box-shadow: 0 0 9px 2px rgba(47, 140, 255, .65); filter: brightness(1); } 50% { box-shadow: 0 0 16px 5px rgba(47, 140, 255, .95); filter: brightness(1.3); } }
@keyframes cc-segglow { 0%, 100% { box-shadow: 0 0 8px rgba(47, 140, 255, .55), inset 0 0 0 1px rgba(70, 140, 255, .6); } 50% { box-shadow: 0 0 16px rgba(47, 140, 255, .95), inset 0 0 0 1px rgba(110, 170, 255, .9); } }
@keyframes cc-flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .55; } 98% { opacity: 1; } 99% { opacity: .7; } }
@keyframes cc-draw { to { stroke-dashoffset: 0; } }
@keyframes cc-sendglow { 0%, 100% { box-shadow: 0 0 10px rgba(47, 140, 255, .55); } 50% { box-shadow: 0 0 20px rgba(47, 140, 255, .95); } }

@media (prefers-reduced-motion: reduce) {
  html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-glint, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-embers { display: none !important; }
  html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-spin-a, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-spin-b, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-sweep, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-bot-ring, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-bot-head, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-eye, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-mouth, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-bot-float, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-pupil, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-wave, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-field-halo, html:not(.rv-motion-full):not(.rv-motion-balanced) .cc-bot-shadow,
  html:not(.rv-motion-full):not(.rv-motion-balanced) .lux-bottomnav .orb img, html:not(.rv-motion-full):not(.rv-motion-balanced) #homeAiSend { animation: none !important; }
  html:not(.rv-motion-full):not(.rv-motion-balanced) .v11-m svg.spark polyline { stroke-dashoffset: 0; animation: none !important; }
}

/* ---------- Maße nach Referenz (720 × 1280 ohne Statusleiste) ---------- */
@media (max-width: 999px) {
  body:has(#home:not(.hidden)) main.wrap { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .v11 { gap: 10px; }
  .v11-top { min-height: 56px; }
  .v11-sales .body { min-height: 238px; }
  .v15-globe-wrap { width: 292px; height: 292px; }
  .v11-sales .body > .v11-col:last-child { grid-template-rows: minmax(112px, 1fr) 56px 56px; }
  .v11-m { min-height: 54px; padding: 6px 8px; }
  .v11-quick .v11-ph { margin-bottom: 9px; }
  .v11-q { min-height: 74px; padding: 9px 3px; gap: 6px; }
  .v11-q .ic { width: 28px; height: 28px; }
  .v11-ai .v11-chatrow { gap: 8px; }
  .v11-prompts { margin-top: 8px; }
  body:has(#home:not(.hidden)) .v11-ai .rv-crafted-chat { margin-top: 10px; }
  .v11-card { min-height: 78px; padding: 9px 10px 10px; }
}
.v11-hud > .cc-glint { position: absolute; inset: 0; z-index: 4; }
@media (max-width: 999px) {
  body:has(#home:not(.hidden)) .v11-ai .rv-crafted-chat { margin-top: 8px; }
  body:has(#home:not(.hidden)) .v11-ai .rv-crafted-chat textarea { height: 44px; min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  body:has(#home:not(.hidden)) .v11-ai .rv-crafted-chat-icon,
  body:has(#home:not(.hidden)) .v11-ai .rv-crafted-chat #homeAiSend { width: 46px; height: 46px; min-height: 46px; flex-basis: 46px; }
  .v11-ins .v11-ph { margin-bottom: 8px; }
  .v11-card { min-height: 70px; }
}

/* ---------- Leuchtende Füllungen wie im Entwurf ---------- */
.v11-hud > .cc-fill {
  position: absolute; inset: 2px; z-index: 0; pointer-events: none;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}
.v11-tile > .cc-fill {
  background:
    radial-gradient(90% 55% at 50% 108%, rgba(36, 140, 255, .55), transparent 70%),
    radial-gradient(70% 45% at 50% -10%, rgba(120, 190, 255, .16), transparent 70%),
    linear-gradient(180deg, rgba(14, 34, 62, .72), rgba(5, 8, 16, .9));
}
.v11-q > .cc-fill {
  background:
    radial-gradient(90% 60% at 50% 110%, rgba(70, 170, 255, .55), transparent 70%),
    linear-gradient(180deg, rgba(22, 72, 120, .55), rgba(8, 22, 40, .85));
}
.v11-q.red > .cc-fill {
  background:
    radial-gradient(90% 60% at 50% 110%, rgba(40, 140, 255, .62), transparent 70%),
    linear-gradient(180deg, rgba(18, 66, 120, .62), rgba(6, 22, 40, .88));
}
.v11-card > .cc-fill {
  background: radial-gradient(80% 70% at 50% 120%, rgba(60, 150, 255, .30), transparent 70%), linear-gradient(180deg, rgba(14, 34, 60, .55), rgba(5, 8, 16, .85));
}
.v11-tile .ic svg, .v11-q .ic svg { stroke-width: 2; }
.v11-tile:nth-child(1) .ic, .v11-tile:nth-child(3) .ic { color: #488cff; }
.v11-tile:nth-child(2) .ic, .v11-tile:nth-child(4) .ic, .v11-tile:nth-child(6) .ic { color: #5ec3ff; }
.v11-tile:nth-child(5) .ic { color: #c4e6ff; }
.v11-tile .lb { color: #e6f4ff; text-shadow: 0 1px 6px , .8); }
.v11-q .ic { color: #d6f1ff; }
.v11-q .lb { color: #eaf6ff; }
/* Globus-Mitte (43 % im Ringbild) mittig im Panel ausrichten */
.v15-globe-wrap { transform: translate(-43%, -50%) !important; }
.cc-comet-tail { opacity: .9; }
.cc-bot-hud .cc-spin-a { animation-duration: 48s; }
.cc-bot-hud .cc-spin-b { animation-duration: 30s; }