/* =========================================================
   Hero 3D — panel s plovoucími objekty (index.html)
   ========================================================= */
.hero--3d { background: var(--primary); overflow: hidden; }
.hero--3d .hero__inner { position: relative; z-index: 2; padding-left: 54px; }

.hero3d { position: relative; width: 100%;
  max-width: min(392px, calc((100vw - 48px) / 1.60));
  margin: 0 auto; aspect-ratio: .53; isolation: isolate;
  container-type: inline-size; }

.hero3d__panel { position: absolute; inset: 0; border-radius: 44px; overflow: hidden;
  background: linear-gradient(180deg,#C8F26B 0%,#AADE8B 17%,#9BBCC8 41%,#9A93D8 67%,#7B4BE0 100%);
  box-shadow: 0 40px 90px rgba(35,35,35,.26);
  animation: heroPanelIn 1s cubic-bezier(.2,.9,.25,1) both; }

.hero3d__vign { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 9;
  box-shadow: inset 0 0 50px 5px rgba(35,35,35,.46),
              inset 0 0 130px 26px rgba(35,35,35,.22); }

.hero3d__disc { position: absolute; left: 19%; top: 33%; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: #fff; z-index: 2; display: flex; align-items: center; justify-content: center;
  animation: heroPanelIn 1s .12s cubic-bezier(.2,.9,.25,1) both; }

.hero3d .glitch { position: relative; width: 66%; aspect-ratio: 4/3; }
.hero3d .glitch svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none;
  stroke-width: 5.5; stroke-linecap: square; stroke-linejoin: miter; }
.hero3d .glitch .c { stroke: #12E8E0; mix-blend-mode: multiply; animation: heroGl1 4.6s steps(1) infinite; }
.hero3d .glitch .m { stroke: #FF2E63; mix-blend-mode: multiply; animation: heroGl2 4.6s steps(1) infinite; }
.hero3d .glitch .k { stroke: #2B23E8; }

@keyframes heroGl1 {
  0%,86% { transform: translate(-2.5px,1px); }
  88%    { transform: translate(-7px,-2px); }
  91%    { transform: translate(-1px,3px); }
  94%    { transform: translate(-6px,0); }
  96%,100% { transform: translate(-2.5px,1px); } }
@keyframes heroGl2 {
  0%,86% { transform: translate(2.5px,-1px); }
  88%    { transform: translate(7px,2px); }
  91%    { transform: translate(1px,-3px); }
  94%    { transform: translate(6px,0); }
  96%,100% { transform: translate(2.5px,-1px); } }

/* horní lišta panelu = příkazový řádek pro AI */
.hero3d__top { position: absolute; left: 8%; right: 8%; top: 5%; z-index: 12;
  display: flex; justify-content: center;
  animation: heroPanelIn .9s .2s cubic-bezier(.2,.9,.25,1) both; }
.hero3d__prompt {
  display: flex; align-items: center; gap: 2cqw;
  width: 100%; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding: 1.9cqw 3.2cqw;
  font: 500 2.7cqw/1.25 Poppins, sans-serif; color: rgba(35, 35, 35, 0.6);
  box-shadow: 0 0.8cqw 2.2cqw rgba(35, 35, 35, 0.09);
  white-space: nowrap; overflow: hidden;
}
.hero3d__prompt-logo { width: 3.2cqw; height: 3.2cqw; flex: none;
  fill: #D97757; opacity: 0.9; }
.hero3d__prompt-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hero3d__prompt .caret { width: 0.4cqw; height: 3cqw; background: rgba(35, 35, 35, 0.45);
  flex: none; margin-left: -1.2cqw; animation: heroCaret 1.1s steps(1) infinite; }
@keyframes heroCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.hero3d__bar { position: absolute; left: 9%; right: 9%; bottom: 4.5%; height: 11%; z-index: 12;
  background: #fff; border-radius: 999px; display: flex; align-items: center;
  justify-content: space-around; padding: 0 6%;
  box-shadow: 0 16px 34px rgba(35,35,35,.18);
  animation: heroObjIn .9s 1s cubic-bezier(.2,.9,.25,1) both; }
.hero3d__bar svg { width: 22px; height: 22px; stroke: #232323; stroke-width: 1.8; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }
.hero3d__bar .cta { width: 38px; height: 38px; border-radius: 50%; background: #C2F15E;
  display: flex; align-items: center; justify-content: center; }
.hero3d__bar .cta svg { width: 18px; height: 18px; }

.hero3d .obj { position: absolute; z-index: 5; will-change: transform; pointer-events: none;
  transform: translate3d(calc(var(--px,0)*1px), calc(var(--py,0)*1px), 0); }
.hero3d .obj__e { display: block; animation: heroObjIn .9s cubic-bezier(.2,.9,.25,1) both; }
.hero3d .obj__f { display: block; will-change: transform; }
.hero3d .obj img { display: block; width: 100%; height: auto; }

.hero3d .obj--mark    { left: -60%; top: 2%;  width: 62%; z-index: 6; }
.hero3d .obj--pillow  { left: 60%;  top: 14%; width: 50%; z-index: 5; }
.hero3d .obj--cursor  { left: -30%; top: 32%; width: 66%; z-index: 7; }
.hero3d .obj--bananas { left: 38%;  top: 58%; width: 30%; z-index: 8; }
/* dolar zatim mimo hru */
.hero3d .obj--dollar  { display: none; }

.hero3d .obj--mark    .obj__e { animation-delay: .46s; }
.hero3d .obj--dollar  .obj__e { animation-delay: .38s; }
.hero3d .obj--cursor  .obj__e { animation-delay: .30s; }
.hero3d .obj--pillow  .obj__e { animation-delay: .62s; }
.hero3d .obj--bananas .obj__e { animation-delay: .54s; }

.hero3d .obj--mark    .obj__f { animation: heroFloatB 9s   ease-in-out infinite; }
.hero3d .obj--dollar  .obj__f { animation: heroFloatC 8.2s ease-in-out infinite; }
.hero3d .obj--cursor  .obj__f { animation: heroFloatA 7.5s ease-in-out infinite; }
.hero3d .obj--pillow  .obj__f { animation: heroFloatA 8.8s ease-in-out infinite reverse; }
.hero3d .obj--bananas .obj__f { animation: heroFloatB 10s  ease-in-out infinite reverse; }

@keyframes heroObjIn {
  from { opacity: 0; transform: translateY(54px) scale(.78) rotate(-6deg); }
  to   { opacity: 1; transform: none; } }
@keyframes heroPanelIn {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to   { opacity: 1; transform: none; } }
@keyframes heroFloatA {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-22px) rotate(2.2deg); } }
@keyframes heroFloatB {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-16px) rotate(-3deg); } }
@keyframes heroFloatC {
  0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
  50%     { transform: translateY(-13px) rotate(1.6deg) scale(1.03); } }

@media (max-width: 900px) {
  .hero--3d .hero__inner { grid-template-columns: 1fr; }
  .hero3d { margin-top: 40px; }
  .hero3d__panel { border-radius: 30px; }
  .hero3d__bar svg { width: 16px; height: 16px; }
  .hero3d__bar .cta { width: 28px; height: 28px; }
  .hero3d__bar .cta svg { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero3d .obj__f, .hero3d .obj__e,
  .hero3d__panel, .hero3d__disc { animation: none !important; }
  .hero3d .obj { transform: none !important; }
}