/* Supernova Web Studios — compatibility layer
   Progressive fallbacks for Safari 11.1–14 and older mobile browsers.
   Modern browsers keep the original design declarations. */

html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.shell { margin-left: auto; margin-right: auto; }

/* Old Safari supports the prefixed blur implementation. */
.site-header.scrolled,
.inner-header,
.gallery-modal,
.xray-shot,
.xray-note,
.xray-terminal,
.xray-layer-badge,
.gravity-sidebar { -webkit-backdrop-filter: blur(16px); }
.gallery-modal { -webkit-backdrop-filter: blur(18px); }
.site-header.scrolled { -webkit-backdrop-filter: blur(18px); }

.grid-overlay { -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 94%); }

/* Keyboard focus remains visible before :focus-visible existed in Safari. */
.no-focus-visible a:focus,
.no-focus-visible button:focus,
.no-focus-visible [role="button"]:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

/* `color-mix()` is decorative; keep the modal opaque if unsupported. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .gallery-modal {
    background:
      radial-gradient(circle at 82% 82%, rgba(255,255,255,.05), transparent 25%),
      rgba(3,4,8,.985);
  }
}

/* `aspect-ratio` arrived late in Safari. These dimensions preserve composition. */
@supports not (aspect-ratio: 1 / 1) {
  .hero-core { height: 190px; }
  .orbit-one { height: 52%; }
  .orbit-two { height: 61%; }
  .orbit-three { height: 42%; }
  .hero-stamp { height: 100px; }
  .browser { height: 534px; max-height: 54vw; }
  .phone { height: 449px; max-height: 45vw; min-height: 276px; }
  .project-orbit { height: 53%; }
  .pegoli-document { height: 333px; max-height: 24vw; }
  .world-browser { height: 490px; max-height: 56vw; }
  .contact-orbit { height: 56vw; }
  .gravity-teaser::before { height: 52vw; }
  .inner-hero::before { height: 58vw; max-height: 880px; }
  .site-header .nav-links::before, .inner-header .nav-links::before { height: 82vw; }
  .mobile-globe-shell { height: 270px; }
  .inner-section .split-copy > div > img { min-height: 420px; }
  @media (max-width: 800px) {
    .hero-core { height: 240px; }
    .browser, .project-shell-reverse .browser { height: 320px; max-height: none; }
    .world-browser { height: 280px; max-height: none; }
    .mobile-globe-shell { height: 70vw; min-height: 230px; max-height: 310px; }
  }
}

/* Safari <= 14: flex gap fallback. Only high-value UI rows are patched; grid gap is native. */
.no-flex-gap .nav-shell > * + * { margin-left: 36px; }
.no-flex-gap .brand > * + * { margin-left: 12px; }
.no-flex-gap .nav-links > * + * { margin-left: 26px; }
.no-flex-gap .nav-actions > * + * { margin-left: 12px; }
.no-flex-gap .hero-actions > * + *,
.no-flex-gap .gravity-nav > * + *,
.no-flex-gap .gravity-actions-final > * + * { margin-left: 12px; }
.no-flex-gap .footer-shell > * + * { margin-left: 24px; }
.no-flex-gap .inner-kicker > * + *,
.no-flex-gap .section-label > * + *,
.no-flex-gap .chapter-label > * + * { margin-left: 12px; }
.no-flex-gap .button > * + * { margin-left: 24px; }
.no-flex-gap .gallery-ticks > * + * { margin-left: 8px; }
.no-flex-gap .availability > * + * { margin-left: 10px; }
.no-flex-gap .hero-trust > * { margin-right: 24px; margin-bottom: 12px; }
.no-flex-gap .project-copy ul > * { margin-right: 8px; margin-bottom: 8px; }

@media (max-width: 800px) {
  .no-flex-gap .site-header .nav-links > * + *,
  .no-flex-gap .inner-header .nav-links > * + * { margin-left: 0; }
  .no-flex-gap .nav-shell > * + * { margin-left: 12px; }
  .no-flex-gap .nav-links > * + * { margin-left: 0; }
  .no-flex-gap .gravity-nav > * + * { margin-left: 8px; }
}

.gravity-invalid { animation: gravityInvalidShake .26s ease; }
@keyframes gravityInvalidShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }