/* ---------------------------------------------------------------------------
   Bildeserie til Sofies konfirmasjon.
   Vises i fullskjerm på prosjektor under seremonien.
--------------------------------------------------------------------------- */

body {
  background: var(--dyp);
  color: var(--krem);
  font-family: var(--skrift-brod);
  overflow: hidden;
}

body.spiller { cursor: none; }

/* ---- Scenen -------------------------------------------------------------- */

.scene {
  position: fixed;
  inset: 0;
  /* Varm glød i midten, mørkere ut mot kantene */
  background:
    radial-gradient(ellipse 120% 100% at 50% 42%,
                    var(--plomme) 0%,
                    var(--dyp) 72%),
    var(--dyp);
}

/* To lag som veksler, så overgangen kan tones mykt */
.lag {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Bare opasitet. Før trakk laget som gikk ut seg litt bakover, men med
     korte visningsbilder er overtoningen i gang nesten hele tiden - og da
     ble den lille krympingen til en bevegelse som aldri tok slutt. */
  transition: opacity var(--overgang) ease-in-out;
}
.lag.synlig { opacity: 1; }

/* ---- Enkeltbilder -------------------------------------------------------- */

.motiv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Collage: felles ----------------------------------------------------- */

.collage {
  position: absolute;
  inset: 0;
}

/* Plassholderen bestemmer hvor bildet ligger. Den står helt i ro, slik
   at kortet inni står fritt til å animeres uten at de kommer i veien
   for hverandre. */
.plass { position: absolute; }

/* Hvert bilde ligger i et «kort» med lys kant, som et framkalt bilde.
   Kortene legges ut ett etter ett, som når man deler ut bilder på et bord. */
.kort {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  border: 0.55vmin solid var(--kortkant);
  box-shadow: var(--skygge-kort);
  background: var(--vin);
  opacity: 0;
  animation: kortInn 0.95s cubic-bezier(0.22, 0.68, 0.28, 1) both;
  animation-delay: calc(var(--i) * 190ms);
}

/* Et kort inneholder enten et stillbilde eller et Live Photo-klipp.
   De oppfører seg likt: fyller kortet, og puster i samme takt. */
.kort img,
.kort video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Rammen har samme format som bildet, så her klippes ingenting bort.
     Verdien betyr bare noe for et bilde som mangler mål i manifestet. */
  object-position: 50% 38%;
}

@keyframes kortInn {
  from { opacity: 0; transform: translateY(2.2vh) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* ---- Hvor kortene ligger -------------------------------------------------

   Selve oppstillingen regnes ut i js/slideshow.js, ut fra formatet på
   hvert enkelt bilde. Skriptet setter --x, --y, --b og --r; høyden
   følger av --ar, altså bildets eget format. Derfor får et liggende
   bilde en liggende ramme, og ingenting blir beskåret.

   Tidligere lå det faste regler her for hver gruppestørrelse - alle med
   samme rutehøyde. Da måtte liggende bilder klippes til for å passe, og
   det var som regel folk i kanten som forsvant.                        */

.collage .plass {
  left: var(--x);
  top: var(--y);
  width: var(--b);
  aspect-ratio: var(--ar);
  z-index: var(--i);
  /* --x og --y peker på midten av kortet, derfor halvparten tilbake */
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}

/* Spredt: kortene ligger litt oppå hverandre, som en bunke bilder noen
   nettopp har delt ut. Da trenger de en tydeligere skygge for å løfte
   seg fra det som ligger under. */
.spredt .kort {
  box-shadow: var(--skygge-loftet);
}

/* ---- Vignett ------------------------------------------------------------- */

.scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              transparent 52%, rgb(var(--vignett-rgb) / 0.6) 100%);
}

/* ---- Årstall og alder ---------------------------------------------------- */

.arstall {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 15vh 1rem 6vh;
  background: linear-gradient(to top,
              rgb(var(--dyp-rgb) / 0.82) 0%,
              rgb(var(--dyp-rgb) / 0.45) 45%,
              transparent 100%);
  text-align: center;
  font-family: var(--skrift-tittel);
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.arstall.synlig { opacity: 1; }
.arstall.synlig b,
.arstall.synlig span { transform: none; opacity: 1; }

.arstall b {
  display: block;
  transform: translateY(0.34em);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.22, 0.68, 0.28, 1), opacity 0.7s ease;
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  /* Rosa som går over i fersken og gull */
  background: linear-gradient(105deg, var(--rosa), var(--fersken) 55%, var(--gull));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.arstall span {
  display: block;
  margin-top: 0.7rem;
  transform: translateY(0.5em);
  opacity: 0;
  transition: transform 0.85s cubic-bezier(0.22, 0.68, 0.28, 1) 0.16s,
              opacity 0.7s ease 0.16s;
  font-family: var(--skrift-brod);
  font-size: clamp(0.85rem, 1.8vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--rosa);
}

/* ---- Forside og sluttbilde ----------------------------------------------- */

.kort-side {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  gap: 1.3rem;
  text-align: center;
  padding: 2rem;
  background:
    radial-gradient(ellipse 110% 90% at 50% 45%, var(--vin) 0%, var(--dyp) 70%),
    var(--dyp);
  transition: opacity 1.4s ease;
}
.kort-side[hidden] { display: none; }
.kort-side.borte { opacity: 0; pointer-events: none; }

/* Bildet av Sofie på forsiden og sluttbildet. Rammet inn som et framkalt
   bilde, akkurat som kortene i collagene, og lagt litt på skjeve.

   Høyden er satt, bredden regnes ut av bildet selv - da kan formatet ikke
   bli et annet enn bildets eget, og ingenting beskjæres. */
.portrett {
  justify-self: center;
  height: min(34vh, 46vw);
  width: auto;
  max-width: 78vw;
  margin-bottom: 0.8rem;
  border-radius: 14px;
  border: 0.55vmin solid var(--kortkant);
  box-shadow: var(--skygge-portrett);
  background: var(--vin);
  transform: rotate(-2.2deg);
}

/* Sluttbildet heller andre veien enn forsiden, så de to sidene ikke ser
   ut som samme bilde om igjen. */
.portrett.speilvendt { transform: rotate(2.2deg); }

.portrett[hidden] { display: none; }

/* Med et bilde over blir det trangere om plassen, så navnet gir litt etter.

   `min(..., 13vh)` er det som gjør at sluttbildet holder seg innenfor:
   «Gratulerer, Sofie» går over to linjer, og på en lav skjerm ville de to
   linjene pluss bildet gått ut over kanten hvis skriften bare rettet seg
   etter bredden. */
.kort-side.med-bilde h1 { font-size: min(clamp(3rem, 10vw, 7.5rem), 13vh); }
.kort-side.med-bilde { gap: 1rem; }
.kort-side.med-bilde .start { margin-top: 1.6rem; }

.kort-side h1 {
  font-family: var(--skrift-tittel);
  font-size: clamp(4rem, 15vw, 12rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
  background: linear-gradient(102deg, var(--krem) 12%, var(--rosa) 52%, var(--fersken) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kort-side .linje {
  width: min(240px, 42vw);
  height: 1px;
  margin: 0.7rem auto;
  background: linear-gradient(to right, transparent, var(--rosa), transparent);
}

.kort-side h2 {
  font-family: var(--skrift-brod);
  font-size: clamp(0.8rem, 2.1vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--gull);
}

.kort-side p {
  color: var(--krem-svak);
  font-size: clamp(0.9rem, 1.7vw, 1.15rem);
  letter-spacing: 0.09em;
}

.start {
  justify-self: center;
  margin-top: 2.2rem;
  padding: 1.05rem 3.4rem;
  border: 1px solid rgb(var(--rosa-rgb) / 0.5);
  border-radius: 999px;
  color: var(--rosa);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.start:hover,
.start:focus-visible {
  background: rgb(var(--rosa-rgb) / 0.15);
  border-color: var(--rosa);
  color: var(--krem);
  outline: none;
}

.hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 2.5rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--krem-svakest);
  transition: opacity 0.6s ease, visibility 0.6s;
}
body.igang .hint { opacity: 0; visibility: hidden; }

/* ---- Framdrift ----------------------------------------------------------- */

.framdrift {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 2px;
  z-index: 5;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(to right, var(--rosa), var(--gull));
  opacity: 0;
  transition: opacity 0.4s ease;
}
.framdrift.synlig { opacity: 0.7; }

.pause {
  position: fixed;
  top: 2rem;
  right: 2.4rem;
  z-index: 6;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rosa);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pause.synlig { opacity: 0.9; }

/* ---- Redusert bevegelse -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  /* Kortene tones fortsatt inn ett og ett, men uten å komme nedenfra */
  @keyframes kortInn { from { opacity: 0; } to { opacity: 1; } }
}