/* ========================
   Monitor v prstenci ikon (stránka O mně, sekce Technologie)
   Scéna je ve 3D: ikony obíhají po nakloněné a do strany natočené dráze
   a přitom se natáčí čelem k divákovi. Dráha sama vidět není. Na monitoru
   se střídá logo Halyxa a nápis WCMS. Otáčení řídí CSS animace, JavaScript
   zrychluje oběh při najetí myší, přepíná obrazovku monitoru a vyměňuje
   ikony, když jsou schované za monitorem.
======================== */

/* Registrace proměnné, aby šel poloměr plynule animovat při hoveru */
@property --orbit-r {
  syntax: '<length>';
  inherits: true;
  initial-value: 200px;
}

.orbit-scene {
  --orbit-r: 200px;
  --orbit-tilt: 68deg;
  --orbit-roll: -14deg;
  --orbit-duration: 40s;
  --tile: 52px;
  --items: 8;

  position: relative;
  width: 540px;
  height: 440px;
  flex-shrink: 0;
  perspective: 1400px;
  transition: --orbit-r 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.orbit-scene:hover {
  --orbit-r: 214px;
}

/* Společný 3D prostor pro dráhu i monitor, aby se ikony vzadu schovaly
   za monitor a vpředu ho překryly. Střed scény je v bodě (0, 0)
   a leží ve středu obrazovky monitoru, takže prstenec obepíná monitor uprostřed. */
.orbit-stage {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

/* Rovina dráhy: nejdřív nakloněná dozadu, pak natočená do strany */
.orbit-plane {
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateZ(var(--orbit-roll)) rotateX(var(--orbit-tilt));
}

@keyframes orbit-spin {
  to { transform: rotateZ(360deg); }
}

.orbit-spin,
.orbit-counter {
  position: absolute;
  transform-style: preserve-3d;
  animation: orbit-spin var(--orbit-duration) linear infinite;
}

/* Protisměrná rotace ruší otáčení dráhy, ikona se tak sama neotáčí */
.orbit-counter {
  animation-direction: reverse;
}

.orbit-item {
  position: absolute;
  transform-style: preserve-3d;
  --angle: calc(360deg / var(--items) * var(--i));
  transform: rotateZ(var(--angle)) translateX(var(--orbit-r)) rotateZ(calc(var(--angle) * -1));
}

/* Dlaždice s ikonou stojí v prstenci kolmo k rovině, čelem k divákovi.
   Animace orbit-depth ji ztlumí, když je vzadu za monitorem.
   Záporné zpoždění posune fázi podle výchozí pozice ikony. */
.orbit-tile {
  position: absolute;
  left: calc(var(--tile) / -2);
  top: calc(var(--tile) / -2);
  width: var(--tile);
  height: var(--tile);
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--bg-raised);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: rotateX(calc(var(--orbit-tilt) * -1)) rotateZ(calc(var(--orbit-roll) * -1));
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7);
  animation: orbit-depth var(--orbit-duration) linear infinite;
  animation-delay: calc(var(--orbit-duration) * var(--i) / var(--items) * -1);
}

.orbit-tile img {
  width: 56%;
  height: 56%;
  object-fit: contain;
}

/* 25 % = ikona úplně vpředu, 75 % = úplně vzadu (viz úhel na dráze).
   Vzadu ikona na chvíli úplně zmizí: kvůli náklonu dráhy vykukuje kousek nad
   monitorem a v tu chvíli ji homeAnimationScript.js vymění za jinou. */
@keyframes orbit-depth {
  0%, 50%, 100% { opacity: 0.9; }
  25% { opacity: 1; }
  67% { opacity: 0.45; }
  75% { opacity: 0; }
  83% { opacity: 0.45; }
}

/* ---------- Monitor ---------- */
.monitor {
  position: absolute;
  left: -135px;
  top: -79px; /* střed obrazovky (158 / 2) je v bodě 0 */
  width: 270px;
  height: 196px;
  transform-origin: 135px 79px; /* zmenšení na mobilu drží střed obrazovky na místě */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.monitor-screen {
  width: 270px;
  height: 158px;
  padding: 4px;
  border-radius: 8px;
  background: #2a2e2a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.8);
}

/* Displej se střídá mezi produkty (logo Halyxa, nápis WCMS) přes třídu is-active */
.monitor-display {
  position: relative;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: #0b0d0b;
}

.monitor-slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.monitor-slide.is-active {
  opacity: 1;
}

/* Pozadí odpovídá pozadí loga, ať kolem něj není vidět rámeček */
.monitor-slide--halyxo {
  background: linear-gradient(#191622, #100e17);
}

.monitor-slide--halyxo img {
  width: 92%;
  height: auto;
}

/* WCMS zatím logo nemá, proto jen název velkým tučným písmem */
.monitor-slide--wcms {
  background: #0d0f0e;
}

.monitor-slide--wcms span {
  font-weight: 600;
  font-size: 46px;
  letter-spacing: 0.04em;
  color: var(--text, #ECEDE9);
}

.monitor-neck {
  width: 24px;
  height: 30px;
  background: linear-gradient(90deg, #1f231f, #363b36 50%, #1f231f);
}

.monitor-base {
  width: 110px;
  height: 8px;
  border-radius: 3px;
  background: #2f342f;
}

@media (prefers-reduced-motion: reduce) {
  .orbit-spin,
  .orbit-counter,
  .orbit-tile {
    animation-play-state: paused;
  }
}

/* ---------- Zmenšování ----------
   Scéna má pevnou základní velikost 540 × 440 a na menším místě se zmenšuje
   celá jedním poměrem (--orbit-scale nastavuje homeAnimationScript.js podle
   šířky obalu). Monitor, dráha i ikony tak drží vzájemné proporce. */
.orbit-wrap {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 540 / 440;
}

.orbit-wrap .orbit-scene {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(var(--orbit-scale, 1));
  transform-origin: 0 0;
}