/* Homepage animation: randomly shows E, G or H on each page load. */
.hero-random-visual {
  position: relative;
  min-height: 500px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.home-animation-option {
  display: none;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  position: relative;
}
.home-animation-option.is-active { display: grid; place-items: center; }
.home-animation-option .svg-wrap { width: 100%; aspect-ratio: 1 / 1; }
.home-animation-option .svg-wrap svg { width: 100%; height: 100%; display: block; overflow: visible; }
.home-animation-option::before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.78), rgba(246,239,247,.46) 54%, rgba(228,207,235,.12) 76%, transparent 83%);
  box-shadow: 0 20px 50px rgba(131,90,153,.08);
  z-index: -1;
}
.floaty { animation: home-floaty 4.6s ease-in-out infinite; transform-origin: center; }
.floaty-fast { animation: home-floaty 3.2s ease-in-out infinite; transform-origin: center; }
.pulse-soft { animation: home-pulse-soft 2.6s ease-in-out infinite; transform-origin: center; }
.pulse-alt { animation: home-pulse-alt 2.1s ease-in-out infinite; transform-origin: center; }
.sparkle-a { animation: home-sparkle 2.4s ease-in-out infinite; transform-origin: center; }
.sparkle-b { animation: home-sparkle 2.4s ease-in-out .8s infinite; transform-origin: center; }
.orbit-spin { animation: home-orbit-spin 14s linear infinite; transform-box: view-box; transform-origin: 50% 50%; }
.halo-glow { animation: home-halo-glow 4s ease-in-out infinite; transform-origin: center; }
.scale-rock { animation: home-scale-rock 4.4s ease-in-out infinite; transform-origin: 50% 34%; }
.paper-float { animation: home-paper-float 4.8s ease-in-out infinite; transform-origin: center; }
.tap-gavel { animation: home-tap-gavel 2.8s ease-in-out infinite; transform-origin: 71% 40%; }
@keyframes home-floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes home-pulse-soft { 0%,100%{transform:scale(1);opacity:.75} 50%{transform:scale(1.06);opacity:1} }
@keyframes home-pulse-alt { 0%,100%{transform:scale(.94);opacity:.3} 50%{transform:scale(1.02);opacity:.55} }
@keyframes home-sparkle { 0%,100%{opacity:.25;transform:scale(.8) rotate(0)} 45%{opacity:1;transform:scale(1.08) rotate(10deg)} }
@keyframes home-orbit-spin { from{transform:rotate(0)} to{transform:rotate(-360deg)} }
@keyframes home-halo-glow { 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:.7;transform:scale(1.06)} }
@keyframes home-scale-rock { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
@keyframes home-paper-float { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-9px) rotate(2deg)} }
@keyframes home-tap-gavel { 0%,100%{transform:rotate(0)} 35%{transform:rotate(-12deg)} 55%{transform:rotate(7deg)} }

/* Desktop: fill the right-hand column instead of leaving a large empty frame. */
@media (min-width: 1121px) {
  .hero-grid { gap: 34px; }
  .hero-random-visual { min-height: 470px; }
  .home-animation-option { width: min(100%, 520px); }
}

/* Tablet / compact laptop: animation sits above the copy, tightly. */
@media (max-width: 1120px) {
  .hero-grid { gap: 10px !important; }
  .hero-grid > .hero-random-visual {
    order: -1;
    width: 100%;
    min-height: 0 !important;
    margin: 0 auto;
    padding: 0;
  }
  .hero-grid > .hero-copy { order: 0; }
  .home-animation-option { width: min(62vw, 430px); }
}

@media (max-width: 820px) {
  .hero { padding-top: 24px !important; }
  .hero-grid { gap: 4px !important; }
  .hero-random-visual { min-height: 0 !important; margin: 0; }
  .home-animation-option { width: min(76vw, 390px); }
}

/* Phone: keep the animation immediately above the eyebrow/text with almost no dead space. */
@media (max-width: 620px) {
  .hero { padding-top: 16px !important; }
  .hero-grid { gap: 0 !important; }
  .hero-random-visual { min-height: 0 !important; margin: 0 0 -4px; padding: 0; }
  .home-animation-option { width: min(86vw, 350px); }
  .home-animation-option::before { inset: 2%; }
}

@media (max-width: 390px) {
  .home-animation-option { width: min(88vw, 330px); }
}

@media (prefers-reduced-motion: reduce) {
  .home-animation-option * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}