/* ==========================================================================
   Lightbox — fotografia cez celú obrazovku (T125)

   Zdieľa ho domovská stránka aj album realizácií, preto sedí v /css a nie
   v album.css. Zámer je jediný: keď chce návštevník vidieť fotografiu
   v plnej veľkosti, nemá mu v tom prekážať nič ďalšie — žiadny titulok,
   počítadlo ani nepriehľadná čierna pasparta. Pozadie ostáva viditeľné,
   len rozostrené, takže je stále zrejmé, odkiaľ sa fotografia otvorila.
   ========================================================================== */

html.lightbox-open { overflow: hidden; }

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--ivory, #f2ede2);
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* T135 — dvojité ťuknutie na šípku (alebo tri rýchle za sebou) rozšíri výber
     na obsah dialógu a `::selection` mu podloží zlatú. Nad fotografiou je
     z toho sépiový závoj, ktorý ostane, kým sa niekam neťukne. V lightboxe
     nie je čo označovať — je tu len fotografia a ovládanie — takže výber
     jednoducho nevzniká. */
  user-select: none;
  -webkit-user-select: none;
}

/* Podržaný prst nad fotografiou nemá vyvolávať ponuku ani ťahanie obrázka. */
.lightbox__image {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Rozostrenie beží na ::backdrop, teda na jedinej vrstve, ktorá je nad
   stránkou a pod fotografiou. Kým je dialóg otvorený, stránka pod ňou stojí
   (`html` má `overflow: hidden` a Lenis je zastavený), takže sa blur
   rasterizuje raz a neúčtuje si nič za snímku — to je celý rozdiel oproti
   `backdrop-filter`, ktorý by bežal počas scrollu a na mobile by pálil GPU.

   Prechod ide cez `opacity`, nie cez polomer blur-u: animovaný polomer sa
   prepočítava každý frame, priehľadnosť je čistá kompozícia. */
.lightbox::backdrop {
  background: rgba(10, 20, 13, 0.46);
  -webkit-backdrop-filter: blur(26px) saturate(115%);
  backdrop-filter: blur(26px) saturate(115%);
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.22, 0.61, 0.24, 1);
}

.lightbox.is-open::backdrop { opacity: 1; }

/* Bez podpory rozostrenia by bola stránka pod fotografiou čitateľná
   a rušila by — vtedy radšej hustejší závoj. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .lightbox::backdrop { background: rgba(8, 16, 10, 0.93); }
}

.lightbox__frame {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /* Bočné odsadenie drží šípky mimo fotografie — nie sú to gombíky
     položené na zábere, ale ovládanie v prázdnom priestore vedľa neho. */
  padding:
    max(clamp(3rem, 6vh, 4.5rem), env(safe-area-inset-top))
    max(clamp(4.75rem, 8vw, 9rem), env(safe-area-inset-right))
    max(clamp(3rem, 6vh, 4.5rem), env(safe-area-inset-bottom))
    max(clamp(4.75rem, 8vw, 9rem), env(safe-area-inset-left));
}

.lightbox__frame:focus { outline: none; }

.lightbox__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/* `inset: 0` + `margin: auto` centruje obrázok bez ohľadu na jeho pomer
   strán a bez toho, aby sa musela merať jeho veľkosť. `--lb-dir` (-1, 0, 1)
   určuje, z ktorej strany prilieta — nastavuje ho JS podľa smeru listovania,
   takže prechod má rovnaký smer ako gesto alebo šípka. */
.lightbox__image {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0.4rem;
  box-shadow: 0 2rem 4.5rem -1.75rem rgba(4, 10, 6, 0.6);
  opacity: 0;
  transform: translate3d(calc(var(--lb-dir, 0) * 2.25rem), 0, 0) scale(0.975);
  /* T129 — pôvodných 0,46 s na transforme znamenalo, že po ťuknutí či ťahu
     prstom sa fotografia usádzala skoro pol sekundy. Nebolo to čakanie na
     dáta, ale samotná krivka: gesto skončilo dávno predtým, než sa obraz
     zastavil, a pôsobilo to ako oneskorenie. Kratšia dráha aj kratší čas
     držia rovnaký pohyb, len v tempe gesta. */
  transition:
    opacity 0.2s cubic-bezier(0.22, 0.61, 0.24, 1),
    transform 0.28s cubic-bezier(0.22, 0.61, 0.24, 1);
}

.lightbox__image.is-current {
  opacity: 1;
  transform: none;
}

/* --- T131: zásobník pripravených fotografií -------------------------
   Lightbox už nemá dva `<img>` prvky, ktorým sa pri každom kroku
   prepisuje `src`, ale niekoľko hotových — predsťahovaných, načítaných
   a dekódovaných. Krok je preto len presunutie `is-current`, čo je práca
   pre kompozítor, nie pre sieť. Pri troch-štyroch ťuknutiach za sebou
   alebo pri držanej šípke je to jediný spôsob, ako sa zmestiť do snímku.

   Čakajúce fotografie však nesmú stáť ani bod GPU pamäte. `transform`
   na `.lightbox__image` je 3D, teda pozvánka na vlastnú kompozitnú
   vrstvu, a sedem celoobrazovkových vrstiev je presne to, čoho sa T129
   zbavovalo. `visibility: hidden` ich drží mimo kreslenia — načítajú sa
   aj dekódujú úplne rovnako, len sa nekreslia. Kreslené sú vždy nanajvýš
   dve: prilietajúca (`is-current`) a odlietajúca (`is-retiring`). */
.lightbox__image { visibility: hidden; }

.lightbox__image.is-current,
.lightbox__image.is-retiring { visibility: visible; }

/* T130 — rýchle listovanie. Pôvodný 0,28 s posuv by pri troch-štyroch
   ťuknutiach za sebou prekryl medzikroky: prehliadač stihne vymeniť
   zdroj, ale oko vidí len poslednú fotku, lebo predchádzajúce ešte
   doletujú. Počas `is-scrubbing` ostáva len krátky crossfade, bez
   posunu — šípky aj držaná klávesa potom listujú ako list papiera. */
.lightbox.is-scrubbing .lightbox__image {
  transition: opacity 0.08s linear;
  transform: none;
}

/* Zatváranie: fotografia sa zmenší a stratí spolu so závojom. Trieda mizne
   skôr, než dialóg — JS drží `close()` o dĺžku prechodu. */
.lightbox:not(.is-open) .lightbox__image.is-current {
  opacity: 0;
  transform: scale(0.975);
}

.lightbox__close,
.lightbox__arrow {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(242, 237, 226, 0.16);
  border-radius: 999px;
  color: var(--ivory, #f2ede2);
  background: rgba(10, 20, 13, 0.45);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.22s cubic-bezier(0.22, 0.61, 0.24, 1),
    background 0.22s cubic-bezier(0.22, 0.61, 0.24, 1),
    border-color 0.22s cubic-bezier(0.22, 0.61, 0.24, 1);
}

.lightbox__close:hover,
.lightbox__arrow:hover {
  color: var(--green-deep, #0e1a12);
  border-color: var(--gold, #c9a96a);
  background: var(--gold, #c9a96a);
}

.lightbox__close:focus-visible,
.lightbox__arrow:focus-visible {
  outline: 2px solid var(--gold, #c9a96a);
  outline-offset: 3px;
}

.lightbox__close {
  top: max(clamp(0.9rem, 2.2vh, 1.6rem), env(safe-area-inset-top));
  right: max(clamp(0.9rem, 2.2vw, 1.6rem), env(safe-area-inset-right));
  width: 3rem;
  height: 3rem;
}

.lightbox__arrow {
  top: 50%;
  width: 3.35rem;
  height: 3.35rem;
  margin-top: -1.675rem;
}

.lightbox__arrow--prev { left: max(0.9rem, env(safe-area-inset-left)); }
.lightbox__arrow--next { right: max(0.9rem, env(safe-area-inset-right)); }

.lightbox__close svg,
.lightbox__arrow svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Mobil: rovnaký závoj ako na počítači (T132) ---------------------
   T129 tu mala výnimku: na telefóne sa `backdrop-filter` vypínal a závoj
   bol takmer nepriehľadný (`rgba(9, 18, 12, 0.965)`). Dôvodom bola cena
   rozostrenia počas prechodu priehľadnosti.

   Výnimka je preč, lebo brala presne to, kvôli čomu závoj vznikol: za
   fotografiou má byť **vidieť stránku, z ktorej sa otvorila**, len
   rozostrenú. Na telefóne z toho ostala čierna plocha a fotografia
   pôsobila ako odbočka, nie ako priblíženie. Vzhľad má byť na oboch
   zariadeniach ten istý, takže pravidlo je teraz len jedno — to hore.

   Na čo si dať pozor, keby sa otvorenie na telefóne niekedy zadrhlo:
   blur sa prepočítava, kým beží prechod priehľadnosti, a v albume je pod
   ním ešte ambientná vrstva scény s vlastným `filter: blur(24px)`.
   Riešením nie je vrátiť nepriehľadný závoj, ale znížiť polomer — 26px
   je pri šírke 393 bodov proporčne oveľa silnejšie rozostrenie než tých
   istých 26px na 1440. Merať cez `.imgopt/qa-lightbox/backdrop.mjs`,
   a nie v headless: tam je kompozícia softvérová a cenu blur-u
   nezreprodukuje. */

/* Na telefóne je fotografia takmer cez celú šírku, takže bočné odsadenie
   klesá — šípky sedia na okraji záberu rovnako ako na desktope, len bližšie.
   Vzhľad aj gesto ostávajú identické, mení sa len mierka. */
@media (max-width: 680px) {
  .lightbox__frame {
    padding:
      max(4.4rem, env(safe-area-inset-top))
      max(0.9rem, env(safe-area-inset-right))
      max(3.4rem, env(safe-area-inset-bottom))
      max(0.9rem, env(safe-area-inset-left));
  }

  .lightbox__close {
    width: 2.75rem;
    height: 2.75rem;
  }

  .lightbox__arrow {
    width: 2.9rem;
    height: 2.9rem;
    margin-top: -1.45rem;
  }

  .lightbox__arrow--prev { left: max(0.55rem, env(safe-area-inset-left)); }
  .lightbox__arrow--next { right: max(0.55rem, env(safe-area-inset-right)); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox::backdrop,
  .lightbox__image,
  .lightbox__close,
  .lightbox__arrow { transition: none; }

  .lightbox__image { transform: none; }
  .lightbox:not(.is-open) .lightbox__image.is-current { transform: none; }
}