/* ------------------------------------------------------------------
   Hero sphere — kadry z filmów Sebastiana rozłożone na wewnętrznej
   ścianie kuli, kamera stoi w jej środku. Startuje TYLKO na desktopie;
   na mobile i przy prefers-reduced-motion zostaje oryginalne zdjęcie hero.
   ------------------------------------------------------------------ */

.hero-sphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
  /* Kolejność warstw hero jest tu jawna. Bez tego canvas z z-index
     wchodził PRZED nagłówek i przyciski — tekst robił się nieczytelny. */
  z-index: 0;
}

.hero-sphere.is-ready { opacity: 1 }

.hero-veil { z-index: 1 }      /* przyciemnienie nad kadrami */
.hero-content { z-index: 2 }   /* nagłówek, podtytuł, przyciski — zawsze na wierzchu */

/* „AI-made" i „AI-looking" nie mogą się łamać na dywizie. Bez tego przeglądarka
   dzieli je w środku wyrazu („AI-" / „made") i rozbija paralelę, na której stoi
   cały nagłówek. Własna klasa, bo `whitespace-nowrap` nie ma w zbudowanym CSS. */
.hero-content .nolam { white-space: nowrap }

/* Nagłówek dostaje pełną szerokość kontenera (72rem = max-w-6xl) zamiast
   max-w-3xl. Przy 48rem paralela rozjeżdżała się na cztery linie; przy 72rem
   siada na dwie: produkty w pierwszej, obietnica w drugiej. */
.hero-content h1 { max-width: 72rem }

/* Zdjęcie hero zostaje jako podkład i fallback — gaśnie dopiero, gdy
   sfera faktycznie się pokaże. Gdy WebGL padnie, nic się nie zmienia. */
.hero-fallback {
  transition: opacity 1.1s ease;
}

.hero-fallback.is-hidden,
.sphere-live .hero-fallback { opacity: 0 !important }

/* Podkład hero to zamrożona pierwsza klatka tej samej sceny — poziomy na
   desktopie, pionowy na telefonie (podmiana przez <source> w <picture>).
   Dzięki temu sfera wchodzi na obraz, który już tak wygląda, i nie widać
   przeskoku treści. Oba pliki mają przyciemnienie wpalone w render, więc
   NIE nakładamy na nie dodatkowego opacity — zrobiłyby się prawie czarne. */

/* Delikatna zachęta: kursor nad hero sygnalizuje, że scena reaguje. */
@media (hover: hover) and (pointer: fine) {
  .sphere-live .hero-sphere { pointer-events: auto; cursor: grab }
  .sphere-live .hero-sphere:active { cursor: grabbing }
}