/* The blue hemisphere blends into the page without a hard bottom edge. */
.concentro-home .hero { overflow: visible; }
.hero-art { inset: 0 0 -120px; background: #fff url('/assets/hero-aurora.svg') center top / 100% 100% no-repeat; }
.hero-art::after { display: block; position: absolute; z-index: 4; inset: auto 0 0; height: 180px; background: linear-gradient(180deg,#fff0,#fff 88%); }
.hero-stage { padding-bottom: 190px; }
@media (min-width:1151px) { .hero-stage { min-height: max(calc(100svh - 90px), min(55vw,920px)); } }
.hero-foot { position: relative; z-index: 2; }
.hero-preview.hero-motion { top: 8%; right: max(8px,calc((100% - 1560px)/2)); width: min(62%,1000px); aspect-ratio: 1.28; mix-blend-mode: normal; pointer-events: auto; }
.hero-motion-art { position: absolute; inset: 0; }
.hero-motion-art > img,.hero-motion-art > canvas { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.hero-motion-art > canvas { opacity: 0; transition: opacity .35s; }
.hero-motion-art > img { transition: opacity .35s; opacity: 1; }
.motion-ready .hero-motion-art > canvas { opacity: 1; }
.motion-ready .hero-motion-art > img { opacity: 0; }
.motion-pause { position: absolute; right: 24px; bottom: 20px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #bedbf14d; border-radius: 50%; background: #0c254526; color: #edf6ff; opacity: .55; transition: opacity .2s; }
.motion-pause:hover,.motion-pause:focus-visible { opacity: 1; }
.motion-pause::before { content: ''; width: 7px; height: 9px; border-inline: 2px solid currentColor; }
.motion-pause[data-paused='true']::before { width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
.motion-fallback .motion-pause { display: none; }
.motion-pause:focus-visible { outline: 2px solid #a9e1ff; outline-offset: 4px; }
@media (min-width:901px) and (max-height:850px) {
  .hero-preview.hero-motion { top: 10%; width: 60%; }
}
@media (min-width:641px) and (max-width:1150px) {
  .hero-preview.hero-motion { top: 19%; right: 4px; width: 52%; }
  .concentro-home .hero h1 { width: 52%; font-size: clamp(3.6rem,7.3vw,5.4rem); }
  .concentro-home .hero-description { max-width: 46%; }
  .concentro-home .hero .hero-actions { max-width: 48%; gap: 12px; }
  .motion-pause { right: 16px; bottom: 10px; }
}
@media (max-width:640px) {
  .hero-stage { padding-bottom: 105px; }
  .hero-art { bottom: -80px; background: #fff url('/assets/hero-aurora.svg') center top / 100% 100% no-repeat; }
  .hero-art::after { height: 200px; }
  .hero-preview.hero-motion { position: relative; top: auto; right: auto; width: 100%; max-width: 640px; aspect-ratio: 1.05; margin-top: 12px; grid-row: 2; }
  .motion-pause { right: 20px; bottom: 8px; }
  .concentro-home .hero .hero-actions { max-width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-motion-art > canvas,.hero-motion-art > img { transition: none; }
  .motion-pause { display: none; }
}