/* Alleen decoratie: geen JavaScript, geen externe bestanden en geen interactie. */
.hero-space { display: none; }

@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .hero { position: relative; overflow: hidden; isolation: isolate; }
  .hero-grid { position: relative; z-index: 1; }

  .hero-space { position: absolute; inset: 0; display: block; z-index: 0; overflow: hidden; pointer-events: none; }
  .hero-starfield { position: absolute; inset: -26%; background-repeat: repeat; transform-origin: center; will-change: transform, opacity; }
  .hero-starfield--far { --star-opacity: .32; background-image: radial-gradient(1px 1px at 28px 38px, rgba(255,255,255,.5), transparent 1.7px), radial-gradient(1px 1px at 168px 126px, rgba(255,255,255,.34), transparent 1.7px), radial-gradient(1.5px 1.5px at 314px 72px, rgba(255,255,255,.48), transparent 2px); background-size: 390px 235px; opacity: var(--star-opacity); animation: euroster-star-flight 24s linear infinite; }
  .hero-starfield--near { --star-opacity: .22; background-image: radial-gradient(2px 2px at 82px 90px, rgba(255,255,255,.72), transparent 2.8px), radial-gradient(1.5px 1.5px at 254px 38px, rgba(255,255,255,.58), transparent 2.4px), radial-gradient(1px 1px at 412px 170px, rgba(255,255,255,.46), transparent 1.7px); background-size: 470px 270px; opacity: var(--star-opacity); animation: euroster-star-flight 15s linear infinite; }

  .hero-planet { --object-opacity: .34; position: absolute; left: 50%; top: 50%; display: block; width: 82px; aspect-ratio: 1; border-radius: 50%; opacity: 0; transform-origin: center; will-change: transform, opacity; animation: euroster-planet-flight 165s linear infinite; box-shadow: inset -18px -13px 22px rgba(0,0,0,.55), inset 12px 7px 18px rgba(255,255,255,.17), 0 0 22px rgba(169,206,255,.1); }
  .hero-planet--jupiter { --exit-x: 54vw; --exit-y: -18vh; background: repeating-linear-gradient(172deg, #d8b583 0 7px, #a66d4d 8px 12px, #edd1a0 13px 19px); animation-delay: 0s; }
  .hero-planet--saturn { --exit-x: -57vw; --exit-y: 24vh; width: 64px; background: radial-gradient(circle at 32% 28%, #f7dfaa 0 15%, #c99963 48%, #70513e 100%); animation-delay: 15s; }
  .hero-planet--saturn::after { content: ""; position: absolute; inset: 39% -35%; border: 5px solid rgba(224,198,151,.48); border-inline-color: rgba(236,211,172,.7); border-radius: 50%; transform: rotate(-18deg); }
  .hero-planet--neptune { --exit-x: 23vw; --exit-y: -56vh; width: 56px; background: radial-gradient(circle at 31% 27%, #77c5f4 0 10%, #276db3 47%, #102b6d 100%); animation-delay: 30s; }
  .hero-planet--mercury { --exit-x: -45vw; --exit-y: -56vh; width: 36px; background: radial-gradient(circle at 31% 26%, #c5c0b7 0 12%, #756f6a 55%, #302e31 100%); animation-delay: 45s; }
  .hero-planet--venus { --exit-x: 59vw; --exit-y: 41vh; width: 62px; background: radial-gradient(circle at 29% 25%, #f6d29b 0 12%, #c48855 52%, #735039 100%); animation-delay: 60s; }
  .hero-planet--earth { --object-opacity: .22; --exit-x: -78vw; --exit-y: -23vh; left: 62%; top: 72%; width: 300px; background: radial-gradient(ellipse at 57% 28%, rgba(255,255,255,.58) 0 3%, transparent 8%), radial-gradient(ellipse at 40% 42%, rgba(255,255,255,.30) 0 5%, transparent 13%), radial-gradient(ellipse at 67% 52%, rgba(255,255,255,.25) 0 5%, transparent 12%), radial-gradient(ellipse at 39% 57%, #61a971 0 9%, transparent 10%), radial-gradient(ellipse at 57% 42%, #4d9769 0 12%, transparent 13%), radial-gradient(ellipse at 67% 68%, #3d805f 0 8%, transparent 9%), radial-gradient(circle at 32% 27%, #85dcff 0 25%, #2e91d0 54%, #0d4f9d 72%, #061a50 100%); box-shadow: inset -58px -46px 70px rgba(0,0,0,.70), inset 20px 12px 32px rgba(255,255,255,.18), 0 0 34px rgba(113,205,255,.18); animation-delay: 75s; }
  .hero-planet--mars { --exit-x: 18vw; --exit-y: 61vh; width: 48px; background: radial-gradient(circle at 31% 26%, #e07a55 0 12%, #a43d2d 57%, #552019 100%); animation-delay: 90s; }
  .hero-planet--uranus { --exit-x: -31vw; --exit-y: 58vh; width: 58px; background: radial-gradient(circle at 32% 28%, #b6f2ef 0 12%, #5bb9c4 56%, #266e91 100%); animation-delay: 105s; }
  .hero-planet--moon { --object-opacity: .25; --exit-x: -76vw; --exit-y: 17vh; left: 61%; top: 30%; width: 270px; background: radial-gradient(circle at 69% 27%, rgba(55,58,65,.46) 0 5%, transparent 5.7%), radial-gradient(circle at 56% 62%, rgba(57,60,66,.52) 0 8%, transparent 8.7%), radial-gradient(circle at 32% 40%, rgba(72,74,81,.44) 0 6%, transparent 6.7%), radial-gradient(circle at 70% 75%, rgba(71,73,79,.36) 0 4%, transparent 4.7%), radial-gradient(circle at 33% 25%, #f2f1e8 0 21%, #c9cbd0 50%, #858992 76%, #4b4e55 100%); box-shadow: inset -50px -42px 64px rgba(0,0,0,.68), inset 18px 11px 28px rgba(255,255,255,.20), 0 0 30px rgba(220,230,255,.14); animation-delay: 120s; }
  .hero-planet--sun { --object-opacity: .24; --exit-x: -57vw; --exit-y: -51vh; width: 94px; background: radial-gradient(circle at 35% 32%, #fff5b1 0 16%, #ffcf4a 48%, #e76e17 100%); box-shadow: inset -18px -13px 22px rgba(148,54,0,.26), inset 12px 7px 18px rgba(255,255,255,.36), 0 0 34px rgba(255,191,72,.24); animation-delay: 135s; }
  .hero-planet--iss { --object-opacity: .42; --exit-x: 66vw; --exit-y: 8vh; width: 64px; aspect-ratio: 3/1; border-radius: 3px; background: linear-gradient(90deg, #1e426e 0 29%, #d9e0e6 30% 70%, #1e426e 71%); box-shadow: 0 0 12px rgba(180,220,255,.26); animation-delay: 150s; }
  .hero-planet--iss::before { content: ""; position: absolute; inset: 29% 41%; border-radius: 50%; background: #f5fbff; box-shadow: 0 0 7px rgba(255,255,255,.48); }
  .hero-planet--iss::after { content: ""; position: absolute; left: 43%; top: -43%; width: 14%; height: 186%; border: 2px solid rgba(222,235,246,.84); border-radius: 2px; }

  @keyframes euroster-star-flight { from { transform: scale(.72); opacity: .04; } 76% { opacity: var(--star-opacity); } to { transform: scale(1.32); opacity: .04; } }
  @keyframes euroster-planet-flight { 0%, 1.1% { transform: translate3d(-50%,-50%,0) scale(.12); opacity: 0; } 2.4%, 5.5% { opacity: var(--object-opacity); } 7.1% { transform: translate3d(calc(-50% + var(--exit-x)),calc(-50% + var(--exit-y)),0) scale(1.18); opacity: 0; } 7.2%, 100% { transform: translate3d(calc(-50% + var(--exit-x)),calc(-50% + var(--exit-y)),0) scale(1.18); opacity: 0; } }
}