/* public/css/gallery-modes.css
   Nuotraukų albumo režimai (2026-10-11): Tinklelis / Karuselė 3D / Erdvė / Pasakojimas (+ Dalelės, 2026-10-14). Žymėjimas -
   views/partials/gallery-album.ejs, elgsena - public/js/gallery-modes.js (+ gallery-space.js, gallery-particles.js). Režimas - .gm-album[data-mode]; specifiškumas 0,3,0 nugali
   style.css senos juostos taisykles (0,1,0), todėl style.css nekeičiamas (jei šis failas nepasikrautų, lieka sena juosta).
   Judinama tik transform/opacity/filter/spalvos; „mažiau judesio“ blokas failo gale pažodžiui pakartoja kiekvieną animuojamą
   selektorių (tests/galleryModes.test.js). Jokių cursor: (svetainė piešia savo žymeklį) ir jokio touch-action: none. */

.gm-album {
  --gm-css: 1; /* gallery-modes.js tikrina, ar šis failas pasikrovė */
  --gm-row: 160px; /* tinklelio eilės aukštis (1440 px ekrane - 4 nuotraukos eilėje) */
  --gm-top: 0px; /* meniu juostos aukštis (JS) - čia prilimpa perjungiklis Pasakojime */
  --gm-accent: #bfe3ff;
  --gm-amber: #c9852f;
  position: relative;
  margin: 1.25rem 0 0;
  scroll-margin-top: calc(var(--gm-top) + 8px);
}

/* ---------- perjungiklis, užuominos (.gm-album ... - nugali style.css .service-item p) ---------- */
.gm-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-family: monospace;
}
.gm-switch[hidden] {
  display: none;
}
.gm-prompt {
  margin-right: 4px;
  color: #777;
  font-size: 0.85rem;
}
.gm-btn {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #333;
  border-radius: 4px;
  background: #141414;
  color: #aaa;
  font-family: monospace;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.gm-btn:hover,
.gm-btn:focus-visible {
  border-color: #777;
  color: #fff;
  outline: none;
}
.gm-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--gm-accent);
}
.gm-btn[aria-pressed="true"] {
  border-color: #fff;
  background: #262626;
  color: #fff;
}
.gm-btn[aria-busy="true"]::after {
  content: " …";
}
.gm-album .gm-hint {
  min-height: 1.3em;
  margin: 0 0 6px;
  color: #777;
  font-family: monospace;
  font-size: 0.8rem;
}
.gm-album .gm-note {
  margin: 0 0 6px;
  color: var(--gm-amber);
  font-family: monospace;
  font-size: 0.85rem;
}
.gm-album .gm-note:empty {
  display: none;
}
.gm-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
p.gm-diag {
  margin: 10px 0 0;
  color: #6b6b6b;
  font-family: monospace;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

/* ---------- bendra visiems režimams ---------- */
.gm-album .gm-stage {
  margin: 0;
}
/* Sena 0,2 s transform animacija ir užvedimo scale kovotų su perėjimais ir karuselės kadrais. */
.gm-album .gm-stage .thumbnail-item {
  transition: none;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
.gm-album .gm-stage .thumbnail-item:hover {
  transform: none;
}
.gm-album .gm-stage .thumbnail-item img {
  aspect-ratio: var(--ar);
  object-fit: cover;
}
.gm-album .gm-cap,
.gm-album .gm-space-cap,
.gm-album .gm-nav {
  display: none;
}
.gm-cap b {
  margin-right: 8px;
  color: var(--gm-accent);
  font-family: monospace;
  font-weight: normal;
}

/* ---------- TINKLELIS: lygintos eilės (vienodas eilės aukštis, plotis pagal proporcijas) ---------- */
.gm-album[data-mode="grid"] .carousel-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  overflow: visible;
  scroll-snap-type: none;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  background: #1a1a1a;
}
/* Paskutinė eilė neišsitempia per visą plotį. */
.gm-album[data-mode="grid"] .carousel-thumbnails::after {
  content: "";
  flex-grow: 1000;
}
.gm-album[data-mode="grid"] .thumbnail-item {
  flex: var(--ar) 1 calc(var(--ar) * var(--gm-row));
  width: auto;
  min-width: 0;
  transition: filter 0.2s;
}
.gm-album[data-mode="grid"] .thumbnail-item:hover {
  filter: brightness(1.15);
}

/* ---------- KARUSELĖ 3D: transform rašo JS; be preserve-3d (gylį tvarko z-index - Safari) ---------- */
.gm-album[data-mode="carousel"] .carousel-thumbnails {
  position: relative;
  display: block;
  height: clamp(220px, min(62vw, 58vh), 540px);
  padding: 0;
  overflow: hidden;
  overflow: clip;
  scroll-snap-type: none;
  perspective: 1100px;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.gm-album[data-mode="carousel"] .thumbnail-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: var(--gm-card-h, 70%);
  aspect-ratio: var(--ar);
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}
.gm-album[data-mode="carousel"] .thumbnail-item img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gm-album[data-mode="carousel"] .gm-nav,
.gm-album[data-mode="space"] .gm-nav,
.gm-album[data-mode="particles"] .gm-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 10px;
  color: #999;
  font-family: monospace;
}
.gm-nav button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}
.gm-nav button:hover,
.gm-nav button:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}
.gm-nav button:disabled {
  opacity: 0.35;
}

/* ---------- ERDVĖ ir DALELĖS: drobė per visą sceną; DOM nuotraukos vizualiai paslėptos, bet fokusuojamos ---------- */
.gm-album[data-mode="space"] .gm-stage,
.gm-album[data-mode="particles"] .gm-stage {
  position: relative;
  height: clamp(320px, min(70vh, 118vw), 720px);
  background: #141414;
}
.gm-album[data-mode="space"] .carousel-thumbnails,
.gm-album[data-mode="particles"] .carousel-thumbnails {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  scroll-snap-type: none;
}
.gm-album[data-mode="space"] .thumbnail-item,
.gm-album[data-mode="particles"] .thumbnail-item {
  width: 160px; /* tikras dydis paslėptame takelyje (tingiai kraunami vaizdai be 0x0) */
}
.gm-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y pinch-zoom;
}
.gm-album[data-mode="space"] .gm-space-cap,
.gm-album[data-mode="particles"] .gm-space-cap {
  position: absolute;
  z-index: 1; /* virš drobės (ji įterpiama vėliau) */
  right: 12px;
  bottom: 10px;
  left: 12px;
  display: block;
  margin: 0;
  color: #c8c8c8;
  font-family: monospace;
  font-size: 0.85rem;
  text-shadow: 0 1px 4px #000;
  pointer-events: none;
}

/* ---------- PASAKOJIMAS: didelės nuotraukos su užrašais; judesys pagal slinkimą ---------- */
.gm-album[data-mode="story"] .gm-switch {
  position: sticky;
  top: var(--gm-top);
  z-index: 5;
  background: rgba(13, 13, 13, 0.94);
}
/* Scena (style.css .carousel-container { overflow: hidden }) būtų slinkties konteineris - view() laiko juostos prisirištų prie
   jos, o ne prie puslapio: efektai „užšaldavo“ pagal vietą scenoje, nuo 11-os nuotraukos užrašai likdavo nematomi
   (Dariaus telefonas, 2026-10-11). Pasakojime scena neapkerpa - apkerpa pati nuotrauka (overflow: clip). */
.gm-album[data-mode="story"] .gm-stage {
  overflow: visible;
}
.gm-album[data-mode="story"] .carousel-thumbnails {
  display: block;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
.gm-album[data-mode="story"] .thumbnail-item {
  position: relative;
  width: min(100%, calc(82vh * var(--ar)));
  width: min(100%, calc(82svh * var(--ar)));
  margin: 0 auto 12vh;
  overflow: hidden;
  overflow: clip;
}
.gm-album[data-mode="story"] .gm-cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  padding: 32px 14px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #e8e8e8;
  font-size: 0.95rem;
  line-height: 1.4;
}
/* Naršyklės su slinkimo laiko juosta - grynas CSS (be JS slinkimo klausytojų). Įsistatymas ir užrašas baigiasi, kai nuotrauka
   VISA įslenka (entry 100%) - galutinė būsena pasiekiama ir puslapio apačioje, kur toliau slinkti nebėra kur. */
@supports (animation-timeline: view()) {
  .gm-album[data-mode="story"] .thumbnail-item {
    animation: gm-settle auto linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
  .gm-album[data-mode="story"] .thumbnail-item img {
    animation: gm-drift auto linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .gm-album[data-mode="story"] .gm-cap {
    animation: gm-cap-in auto linear both;
    animation-timeline: view();
    animation-range: entry 40% entry 100%;
  }
}
/* Kitur (pvz. Firefox) - JS uždeda .gm-fx ir, nuotraukai įslinkus, .gm-in (IntersectionObserver, vieną kartą). */
.gm-album[data-mode="story"].gm-fx .thumbnail-item {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gm-album[data-mode="story"].gm-fx .thumbnail-item.gm-in {
  opacity: 1;
  transform: none;
}
@keyframes gm-settle {
  from {
    opacity: 0.25;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gm-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}
@keyframes gm-cap-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- perėjimas tarp režimų (View Transitions; vėlavimus nuotraukoms įrašo JS) ---------- */
::view-transition-group(*) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Apkirpta miniatiūra sklandžiai virsta tikrų proporcijų nuotrauka (be tarpų). */
::view-transition-old(*),
::view-transition-new(*) {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .gm-album {
    --gm-row: 140px;
  }
  .gm-album[data-mode="carousel"] .carousel-thumbnails {
    perspective: 800px;
  }
}
@media (max-width: 480px) {
  .gm-album {
    --gm-row: 84px; /* 390 px telefone - dvi 16:9 eilėje (92 px netilpdavo per 2 px) */
  }
  .gm-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .gm-prompt {
    grid-column: 1 / -1;
  }
}

/* „Mažiau judesio“: kiekvienas animuojamas selektorius pažodžiui (tas pats specifiškumas, vėliau šaltinyje). JS papildomai
   neleidžia perėjimų, karuselės inercijos ir Erdvės savaiminio judesio. */
@media (prefers-reduced-motion: reduce) {
  .gm-btn,
  .gm-album[data-mode="grid"] .thumbnail-item,
  .gm-album[data-mode="story"] .thumbnail-item,
  .gm-album[data-mode="story"] .thumbnail-item img,
  .gm-album[data-mode="story"] .gm-cap,
  .gm-album[data-mode="story"].gm-fx .thumbnail-item,
  ::view-transition-group(*) {
    animation: none;
    transition: none;
  }
}