/* base */
:root{ --shadow:0 18px 42px rgba(0,0,0,.35); --line:#ffffff30; --bg:#0a0f1f; --panel:#0e1427 }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Arial;background:var(--bg);color:#eaf0ff}
.stage{position:fixed;inset:0;overflow:hidden}
#stageBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(.95) saturate(1.05)}
#bubbles-container{position:fixed;inset:0;z-index:50;pointer-events:none}
#bubbles-container .bubble{pointer-events:auto}
.text{position:fixed;z-index:20;}

/* Bubbles + classes */
.bubble{position:absolute;border-radius:50%;display:block;text-decoration:none;overflow:hidden;border:1px solid #ffffff30;box-shadow:var(--shadow);background:#1a2347;transform:translateZ(0);transition:transform .2s ease, filter .2s ease}
.bubble.hidden{display:none}
.bubble-inner-video, .bubble-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}

/* Class sizes and behaviors */
.cls1{width:4.5vmin;height:4.5vmin;filter:saturate(.9)}
.cls1:hover{transform:scale(1.04)}
.cls1 .bubble-overlay{display:none} /* minimal */

@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.cls2{width:6vmin;height:6vmin;background-image:linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,.25), rgba(255,255,255,.08));background-size:200% 100%;animation:shimmer 3.8s linear infinite}
.cls2:hover .bubble-overlay{opacity:1;transform:translateY(0)}
.bubble-overlay{position:absolute;inset:auto 0 0 0;background:rgba(12,16,32,.68);color:#fff;padding:10px 12px;opacity:0;transform:translateY(8px);transition:opacity .18s ease, transform .18s ease;pointer-events:none}
.bubble-title{font-weight:600;line-height:1.2}
.bubble-desc{font-size:12px;opacity:.85;margin-top:4px;line-height:1.35;max-height:5em;overflow:hidden}

@keyframes wobbleSlow{0%,100%{transform:translateZ(0)}50%{transform:translateY(-6px) scale(1.02)}}
@keyframes wobbleFast{0%,100%{transform:translateZ(0)}50%{transform:translateY(-8px) scale(1.04)}}
.cls3{width:9vmin;height:9vmin;animation:wobbleSlow 4.2s ease-in-out infinite}
.cls4{width:11vmin;height:11vmin;animation:wobbleSlow 3.4s ease-in-out infinite}
.cls5{width:13vmin;height:13vmin;animation:wobbleFast 2.2s ease-in-out infinite}
.cls3::before,.cls4::before,.cls5::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%), radial-gradient(120% 120% at 70% 70%, rgba(255,255,255,.1), rgba(255,255,255,0) 60%);mix-blend-mode:screen;pointer-events:none}

.cls6{width:24vmin;height:24vmin;background:#111;border:1px solid #ffffff40}
.cls6 .bubble-overlay{opacity:1;}

/* presets */
.bubble--pdf .bubble-overlay{background:#162044}
.bubble--pdf::after{content:"PDF";position:absolute;top:8px;left:8px;background:#e02525;color:#fff;font-weight:700;padding:2px 6px;border-radius:6px;letter-spacing:.5px}
.bubble--mail{background:linear-gradient(180deg,#16356b,#0e2b57)}
.bubble--mail::after{content:"✉";position:absolute;top:8px;left:8px;font-size:18px}
.bubble--youtube::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:32px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5)}

/* Text block theme */
.text--auto{background:rgba(12,16,32,.65); color:#fff; border:1px solid #ffffff30; border-radius:14px; padding:14px 18px;}

/* Back bubble */
.back-bubble{background:linear-gradient(135deg,#1f2a48,#0f1530)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:80}
.modal.show{display:flex}
.modal .content{position:relative;width:36vw;height:calc(36vw * 0.5625);background:#0a0f1f;border:1px solid #ffffff30;border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.modal .content iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.modal .close{position:absolute;top:6px;right:10px;background:#152042;border:1px solid #ffffff30;color:#fff;border-radius:50%;width:32px;height:32px;cursor:pointer}
/* ==== FIX: společné styly pro všechny stránky ==== */
html, body { margin:0; padding:0; height:100%; background:#0f172a; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.stage { position:relative; min-height:100vh; overflow:hidden; }
#stageBg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.25; }
#bubbles-container { position:relative; z-index:2; width:100%; height:100vh; }
.bubble { position:absolute; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,.08) 60%), rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2); color:#e2e8f0; text-decoration:none; overflow:hidden; }
.bubble img { width:72%; height:72%; border-radius:50%; object-fit:cover; }
.bubble .label { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:12px; background: rgba(0,0,0,.35); padding:2px 6px; border-radius:8px; }


/* === User-requested visual tweaks (opaque background, semi-transparent bubbles, bounded movement) === */
#stageBg { opacity: 1 !important; } /* fully opaque background image */
#bubbles-container { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; overflow: hidden !important; z-index: 50; pointer-events: none; }
#bubbles-container .bubble { pointer-events: auto; }

/* Semi-transparent bubbles with page graphics */
.bubble { opacity: 0.78; }
.bubble:hover { opacity: 0.92; }