/* vgalleri.css v2 — VÄRLDSSTRÖMMEN på Tjänster (2026-07-29).
   Rutnätet struket på Williams ord: hela galleriet är nu fem scroll-scener
   där världarna TIPPAR förbi (kurvan uppmätt på Codrops-demot, se vgalleri.js).
   Perspektivet bor på scenen, preserve-3d på kortet, rotationen scrubbas i JS. */

#vgalleri{position:relative;overflow:hidden;padding:2vh 0 6vh}

.vgi-scen{position:relative;height:clamp(460px,64vw,780px);
  perspective:1300px;transform-style:preserve-3d;margin-bottom:clamp(2rem,7vh,6rem)}
.vgi-scen:last-child{margin-bottom:0}

/* de två världarna: diagonalt förskjutna, överlappande */
.vgi-bild{position:absolute;display:block;text-decoration:none;
  transform-style:preserve-3d;will-change:transform}
.vgi-p1{left:5%;top:3%;width:clamp(280px,40vw,560px)}
.vgi-p2{right:5%;top:34%;width:clamp(250px,34vw,470px)}

.vgi-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;
  border-radius:5px;background:#081418;box-shadow:0 34px 90px rgba(0,0,0,.62);
  transition:box-shadow .55s cubic-bezier(.23,1,.32,1)}
.vgi-media img,.vgi-media video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.vgi-media video{opacity:0;transition:opacity .45s ease}
.vgi-bild.spelar .vgi-media video{opacity:1}
.vgi-bild:hover .vgi-media,.vgi-bild:focus-visible .vgi-media{
  box-shadow:0 34px 110px rgba(79,227,212,.3)}

.vgi-namn{display:block;margin-top:.85rem;font:600 1.08rem/1.3 Supreme,sans-serif;
  color:var(--text)}
.vgi-pelare{display:block;margin-top:.1rem;font:400 .86rem/1.3 Supreme,sans-serif;
  color:rgba(232,244,242,.42)}
.vgi-bild:focus-visible .vgi-namn{color:var(--teal)}

/* namnbandet: löper tvärs scenen, mellan världarna i djupled */
.vgi-band{position:absolute;left:0;right:0;top:47%;z-index:1;pointer-events:none;
  transform:translateY(-50%);overflow:hidden;white-space:nowrap}
.vgi-rad{display:inline-block;white-space:nowrap;will-change:transform;
  font-family:Archivo,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(2.4rem,6.6vw,6.2rem);line-height:1;letter-spacing:-.02em;
  color:rgba(79,227,212,.5);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.vgi-rad i{font-style:normal;color:rgba(232,244,242,.2);margin:0 .38em}
/* världarna ligger över bandet så det känns som ett rum, inte ett lager */
.vgi-p1{z-index:3}
.vgi-p2{z-index:2}

@media (max-width:820px){
  #vgalleri{overflow:visible;padding-bottom:3vh}
  .vgi-scen{height:auto;perspective:none;display:flex;flex-direction:column;
    gap:1.2rem;margin-bottom:1.6rem}
  .vgi-bild{position:static;width:100%!important}
  .vgi-band{position:static;transform:none;margin:.2rem 0 .4rem}
  .vgi-rad{font-size:1.5rem}
}