/* The same decorative layer is used by the storefront and the configuration preview. */
.sf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background: radial-gradient(ellipse at 25% 100%, var(--glow), transparent 55%),
    linear-gradient(120deg, var(--hero), var(--hero-end) 70%, var(--hero));
}
.storefront-hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  mask-image: radial-gradient(ellipse 34% 50% at 50% 45%, #0004, #000 90%);
}
.storefront-hero-art i { position: absolute; display: block; left: var(--x); top: var(--y); animation-delay: var(--delay); }
.storefront-hero-art svg { display: block; width: 100%; height: 100%; fill: none; }

/* 01 · The original, quiet floating spheres. */
.storefront-hero-art[data-hero=soft] i {
  width: 140px; height: 140px; left: 8%; top: auto; bottom: -75px;
  border-radius: 50%; opacity: .7;
  background: radial-gradient(circle at 30% 28%, #ffffff65, var(--glow));
  box-shadow: inset -8px -10px 25px #68854712;
  animation: sf-float 12s ease-in-out infinite alternate;
}
.storefront-hero-art[data-hero=soft] i:nth-child(2) { width: 74px; height: 74px; left: auto; right: 10%; bottom: 34px; animation-delay: -5s; }

/* 02 · Diagonal comets: bright heads and long, fading tails. */
.storefront-hero-art[data-hero=comets] i {
  width: clamp(95px, 17vw, 260px); height: 2px;
  background: linear-gradient(90deg, transparent, var(--spark));
  transform: rotate(-28deg); border-radius: 100%;
  animation: sf-comet calc(7s + var(--i) * .6s) linear infinite;
  animation-delay: var(--delay);
}
.storefront-hero-art[data-hero=comets] i:after { content: ''; position: absolute; right: 0; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 14px 3px var(--glow); }

/* 03 · Slow, independently drifting fireflies. */
.storefront-hero-art[data-hero=fireflies] i {
  width: calc(3px + mod(var(--i), 3) * 2px); height: calc(3px + mod(var(--i), 3) * 2px); border-radius: 50%;
  background: var(--spark); box-shadow: 0 0 14px 4px var(--glow);
  animation: sf-firefly calc(8s + var(--i) * .35s) ease-in-out infinite alternate;
  animation-delay: var(--delay);
}

/* 04 · Short illuminated segments travel along complete curved paths. */
.storefront-hero-art[data-hero=light-trails] path { stroke: var(--spark); stroke-width: 1; opacity: .15; }
.storefront-hero-art[data-hero=light-trails] .light-runner {
  opacity: .75; stroke-width: 2; stroke-dasharray: 7 93; stroke-linecap: round;
  animation: sf-trail calc(9s + var(--i) * 2s) linear infinite;
  animation-delay: calc(var(--i) * -3s);
  filter: drop-shadow(0 0 5px var(--spark));
}

/* 05 · Three layers of dotted grids, shifting at different scales. */
.storefront-hero-art[data-hero=dots] i {
  inset: -15%; width: auto; height: auto;
  background: radial-gradient(circle, var(--spark) 1px, transparent 1.5px);
  background-size: 23px 23px; opacity: .22;
  animation: sf-dots 14s ease-in-out infinite alternate;
}
.storefront-hero-art[data-hero=dots] i:nth-child(2) { background-size: 47px 47px; transform: rotate(16deg); opacity: .12; animation-delay: -6s; }
.storefront-hero-art[data-hero=dots] i:nth-child(3) { inset: 50% -10% -50%; background-size: 17px 17px; transform: perspective(400px) rotateX(55deg); animation-delay: -10s; }

/* 06 · Vertical ribbons, softly folded like an aurora. */
.storefront-hero-art[data-hero=aurora] i {
  left: calc(var(--i) * 27% - 15%); top: -70%; width: 40%; height: 240%;
  background: linear-gradient(90deg, transparent, var(--spark), var(--glow), transparent);
  opacity: .2; filter: blur(25px); border-radius: 45%;
  transform: rotate(26deg); animation: sf-aurora 18s ease-in-out infinite alternate; animation-delay: var(--delay);
}

/* 07 · Wide contour waves enter from the lower edge. */
.storefront-hero-art[data-hero=waves] i {
  left: -20%; top: calc(65% + var(--i) * 9%); width: 140%; height: 90%;
  border: 1px solid var(--spark); border-radius: 45% 55% 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--glow) 30%, transparent), transparent 50%);
  opacity: .25; animation: sf-wave calc(12s + var(--i) * 2s) ease-in-out infinite alternate; animation-delay: var(--delay);
}

/* 08 · Satellite dots orbit tilted ellipses at the edges. */
.storefront-hero-art[data-hero=orbits] i {
  left: calc(-10% + var(--i) * 48%); top: calc(-50% + var(--i) * 28%); width: 38%; aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--spark) 28%, transparent); border-radius: 50%;
  transform: rotate(-30deg); animation: sf-orbit calc(25s + var(--i) * 7s) linear infinite; animation-delay: var(--delay);
}
.storefront-hero-art[data-hero=orbits] i:before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 14%; left: 14%; background: var(--spark); box-shadow: 0 0 20px var(--spark); }
.storefront-hero-art[data-hero=orbits] i:after { content: ''; position: absolute; inset: 16%; border: 1px solid color-mix(in srgb, var(--spark) 18%, transparent); border-radius: 50%; }

/* 09 · Large organic pools of color blend into each other. */
.storefront-hero-art[data-hero=mesh] i {
  width: 55%; height: 110%; left: calc(var(--i) * 28% - 45%); top: calc(mod(var(--i), 2) * 45% - 35%);
  background: radial-gradient(ellipse, var(--spark), var(--glow) 40%, transparent 70%);
  border-radius: 45% 70% 40% 60%; filter: blur(30px); opacity: .2;
  animation: sf-mesh calc(17s + var(--i) * 3s) ease-in-out infinite alternate; animation-delay: var(--delay);
}

/* 10 · Long rays fan slowly across the hero. */
.storefront-hero-art[data-hero=rays] i {
  left: calc(15% + var(--i) * 14%); top: -120%; width: 13%; height: 350%;
  background: linear-gradient(90deg, transparent, var(--spark), transparent); opacity: .12;
  transform-origin: 50% 0; transform: rotate(25deg); filter: blur(6px);
  animation: sf-ray calc(18s + var(--i) * 2s) ease-in-out infinite alternate; animation-delay: var(--delay);
}

/* 11 · Translucent geometric prisms, without a WebGL dependency. */
.storefront-hero-art[data-hero=prisms] i {
  width: calc(65px + var(--i) * 13px); aspect-ratio: 1;
  background: linear-gradient(135deg, #ffffff70, color-mix(in srgb, var(--spark) 28%, transparent), transparent);
  clip-path: polygon(50% 0, 100% 28%, 85% 84%, 30% 100%, 0 42%); opacity: .45;
  animation: sf-prism calc(14s + var(--i) * 2s) ease-in-out infinite alternate; animation-delay: var(--delay);
}

/* 12 · A constellation connected by thin lines, with gently glowing stars. */
.storefront-hero-art[data-hero=constellation] path { stroke: var(--spark); stroke-width: 1; opacity: .24; }
.storefront-hero-art[data-hero=constellation] circle { fill: var(--spark); animation: sf-star 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.8s); }
.storefront-hero-art[data-hero=constellation] .constellation-lines { transform-origin: center; animation: sf-constellation 24s ease-in-out infinite alternate; }

@keyframes sf-float { to { transform: translateY(-18px); } }
@keyframes sf-comet { 0% { opacity: 0; transform: translate(-240px, 120px) rotate(-28deg); } 20%,65% { opacity: .65; } 100% { opacity: 0; transform: translate(500px, -260px) rotate(-28deg); } }
@keyframes sf-firefly { 0% { opacity: .2; transform: translate(-15px, 14px) scale(.65); } 50% { opacity: .85; } 100% { opacity: .3; transform: translate(28px, -30px) scale(1.1); } }
@keyframes sf-trail { to { stroke-dashoffset: -100; } }
@keyframes sf-dots { to { background-position: 23px 16px; opacity: .1; } }
@keyframes sf-aurora { to { transform: translateX(12%) rotate(-10deg) scaleX(1.4); border-radius: 70% 20% 65% 40%; } }
@keyframes sf-wave { to { transform: translateX(8%) rotate(-7deg); border-radius: 65% 30% 0 0; } }
@keyframes sf-orbit { to { transform: rotate(330deg); } }
@keyframes sf-mesh { to { transform: translate(16%, 15%) scale(1.2) rotate(30deg); } }
@keyframes sf-ray { to { transform: rotate(-12deg) translateX(20%); opacity: .22; } }
@keyframes sf-prism { to { transform: translateY(-35px) rotate(38deg); } }
@keyframes sf-star { to { opacity: .25; r: 1.5; } }
@keyframes sf-constellation { to { transform: translate(8px, -5px); } }
@media (max-width: 600px) {
  .storefront-hero-art[data-hero=fireflies] i:nth-child(n+17) { display: none; }
  .storefront-hero-art[data-hero=orbits] i { width: 70%; }
  .storefront-hero-art[data-hero=soft] i:first-child { left: -30px; bottom: -90px; }
  .storefront-hero-art[data-hero=soft] i:nth-child(2) { right: -20px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .storefront-hero-art *, .storefront-hero-art *:before, .storefront-hero-art *:after { animation: none !important; }
  .storefront-hero-art[data-hero=comets] i { opacity: .4; }
}