/* HomeZero hero scene. Builds on scene-iso.css (.hzi materials and sky tokens); this file only adapts the frame.
   Without JS the hero keeps its original round core; .hzh-on is set by scene-hero.js once the scene is mounted. */
.hero-visual.hzh-on { aspect-ratio: 4 / 3; width: min(100%, 520px); }
.hero-visual.hzh-on .hero-visual__chip { padding: 4px 11px; font-size: .78rem; z-index: 1; }
.hero-visual.hzh-on .hero-visual__chip:nth-child(n) { top: auto; right: auto; bottom: auto; left: auto; }
.hero-visual.hzh-on .hero-visual__chip:nth-child(3) { top: 6%; left: 0; }
.hero-visual.hzh-on .hero-visual__chip:nth-child(4) { top: -9%; right: 0; }
.theme-business .hero-visual.hzh-on .hero-visual__chip:nth-child(4) { top: -19%; }
.hero-visual.hzh-on .hero-visual__chip:nth-child(5) { bottom: 4%; left: 0; }
.hero-visual.hzh-on .hero-visual__chip:nth-child(6) { bottom: 4%; right: 0; }
.hero-visual.hzh-on::after, .hero-visual.hzh-on .hero-visual__core { display: none; }
.hero-visual.hzh-on::before { inset: 6% 2% 2%; border: 0; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%, var(--glow-1), transparent 68%); }

.hzi.hzh { position: absolute; inset: 0 0 17% 0; z-index: 0; height: auto; overflow: visible; border: 0; border-radius: 0; background: none; pointer-events: none; }
.hzh svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
.hzh .halo { opacity: .1; }
.hzh .cloud ellipse { fill: var(--hzi-cloud); }
.hzh .lift, .hzh .hzh-lift { animation: hzh-breathe 7s ease-in-out infinite; will-change: transform; }

@keyframes hzh-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } }

@media (max-width: 1100px) {
  .hero-visual.hzh-on .hero-visual__chip { font-size: .72rem; }
  .hero-visual.hzh-on .hero-visual__chip:nth-child(6) { bottom: 12%; }
}

@media (max-width: 600px) {
  .hero-visual.hzh-on { width: min(100%, 330px); }
  .hero-visual.hzh-on .hero-visual__chip:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hzh .hzh-lift { animation: none !important; will-change: auto; }
}
