/* ==========================================================================
   TimLuks – shapes.css
   Abstraktné 3D tvary vpravo v hero („hĺbka ako materiál“): zvitá sklenená stuha a dva hranoly
   s limetkovým okrajovým svetlom. Tvary kreslí shader v assets/js/shapes.js do <canvas>;
   tu je len umiestnenie, plynulé zjavenie a jemné rozostrené „bokeh“ svetlá pre pocit hĺbky.

   Plátno je také veľké ako voľné miesto vpravo od nadpisu (--hl je v headline.css). Keď je
   miesta príliš málo (menšie okno, mobil), scéna sa skryje a shader sa nespúšťa.
   ========================================================================== */

.shapes {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;                       /* pod obsahom hera (viď .hero .container v base.css) */
  width: calc(50vw - 3.75 * var(--hl));   /* voľné miesto vpravo od nadpisu + malá rezerva */
  display: grid;
  place-items: center;
  container-type: inline-size;
  pointer-events: none;
}

/* Plátno je o čosi širšie než voľné miesto (tvary majú okolo seba prázdny okraj) a posunuté k pravému okraju. */
.shapes__stage {
  position: relative;
  width: 116cqw;
  aspect-ratio: 1;
  translate: 5cqw 0;
}

/* Atribút hidden (shapes.js ho nastaví, keď WebGL nie je) prebije display: grid vyššie. */
.shapes[hidden] { display: none; }

/* Ľavá scéna (sklo): voľné miesto vľavo od nadpisu; „Tvoríme“ vyčnieva doľava, preto o čosi väčšia rezerva. */
.shapes--left {
  right: auto;
  left: 0;
  width: calc(50vw - 4.3 * var(--hl));
}
.shapes--left .shapes__stage { translate: -2cqw 7vh; }   /* o čosi nižšie */

@container (max-width: 259px) {
  .shapes__stage { display: none; }
}

.shapes__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Rozostrené svetelné škvrny: jedna vpredu a dve vzadu za tvarmi – ako keď je popredie mimo ostrosti. */
.shapes__bokeh {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0.12) 70%, transparent);
  filter: blur(6px);
  animation: sh-drift 14s ease-in-out infinite alternate;
}
.shapes__bokeh--1 { right: 2%;  bottom: 6%;  width: 15%; height: 15%; opacity: 0.55; }
.shapes__bokeh--2 { left: 6%;   top: 14%;    width: 9%;  height: 9%;  opacity: 0.4;  animation-duration: 18s; animation-delay: -6s; }
.shapes__bokeh--3 { right: 14%; top: 4%;     width: 6%;  height: 6%;  opacity: 0.5;  animation-duration: 11s; animation-delay: -3s; }
@keyframes sh-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-8%, -12%); }
}

/* Kým sa nadpis nespustí (main.js pridá .is-ready), scéna nie je vidieť; bez JS ju hneď zobrazí fallback. */
.js .hero:not(.is-ready) .shapes {
  opacity: 0;
  animation: hero-fallback-shapes 0s linear 3s forwards;
}
@keyframes hero-fallback-shapes { to { opacity: 1; } }

.hero.is-ready .shapes {
  animation: sh-in 1.4s var(--ease-out) both;
}
@keyframes sh-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: none; }
}