/* ===========================================================================
   DE OPENING - vaste opbouw, op elke Gryd HQ-site identiek
   ---------------------------------------------------------------------------
   De hero, en alleen de hero, beweegt mee met de scroll. Welke beweging dat
   is staat in data-opening op de sectie: inzoom, cijfers, rondleiding,
   uitvergroting of woorden. De pijplijn kiest die per site (zie
   server/opening.js en OPENINGSFILM.md).

   Dit bestand gaat over opbouw, lagen en hoogtes. Lettertype, kleur en knoppen
   van de kop komen uit de stylesheet van de site.

   Alles zonder `.opening-aan` is de stilstaande toestand: zo staat de hero er
   zonder JavaScript en onder prefers-reduced-motion. Eén scherm hoog, de
   eerste foto schermvullend, de kop erop. opening.js zet `.opening-aan` op
   <html> en pas dan gaat de sectie vast staan en bewegen.

   Bewust geen url() in dit bestand: bij publiceren verhuist de map en worden
   alleen paden in HTML herschreven. Beelden staan altijd als <img> in de HTML.

   Knoppen (in :root van de stylesheet van de site):
     --opening-achtergrond   kleur achter de beelden, standaard #111
     --opening-demping       donkerte onder de tekst, 0 tot 1, standaard .6
     --opening-lengte        scrollafstand; per soort een eigen standaard
   =========================================================================== */

.opening {
  position: relative;
  background: var(--opening-achtergrond, #111);
}

.opening__scherm {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

/* ---- beeldlagen -------------------------------------------------------- */

.opening__lucht,
.opening__land,
.opening__scherp,
.opening__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.opening__land { z-index: 1; }
.opening__scherp { z-index: 2; opacity: 0; }

.opening__kaart {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.opening__demping {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, calc(var(--opening-demping, .6) * .4)) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, calc(var(--opening-demping, .6) * .5)) 68%,
    rgba(0, 0, 0, var(--opening-demping, .6)) 100%
  );
}

/* ---- tekstlagen -------------------------------------------------------- */

.opening__kop,
.opening__slot {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
}

/* De slotregel en de oplichtende zin horen bij de beweging; stilstaand is er
   alleen de kop. Wat erin staat, staat ook elders op de pagina. */
.opening__slot,
.opening__zin { display: none; }

.opening__wenk {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: none;
  pointer-events: none;
}

/* ---- cijfers ----------------------------------------------------------- */
/* De cijfers zijn een eigen moment: na de kop komen ze groot en gecentreerd
   in beeld, elk met een dun lijntje ertussen en het label klein eronder. Het
   lettertype erft van de site (zet het op de kopletter in de eigen
   stylesheet); de maat hoort hier, want die maakt het moment.
   Stilstaand zijn ze er niet: wat erin staat, staat ook elders op de pagina. */

.opening__cijfers { display: none; }

.opening-aan .opening__cijfers {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 clamp(1rem, 4vw, 3rem);
  list-style: none;
  color: #fff;
  opacity: 0;
}

/* Een eigen donkere laag onder de cijfers, zodat ze op elk beeld even goed
   lezen; hij komt mee op met de rij. */
.opening-aan .opening__cijfers::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .52);
}

.opening__cijfers li {
  flex: 1 1 0;
  max-width: 22rem;
  padding: 0 clamp(.75rem, 2.5vw, 2.5rem);
  text-align: center;
}

.opening__cijfers li + li {
  border-left: 1px solid rgba(255, 255, 255, .28);
}

.opening__getal {
  display: block;
  font-size: clamp(3.8rem, 12.5vw, 12rem);
  line-height: .95;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.opening__label {
  display: block;
  margin-top: .9rem;
  font-size: clamp(.72rem, 1.1vw, .9rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .82;
}

/* Op een telefoon onder elkaar, met de lijn erboven in plaats van ernaast. */
@media (max-width: 640px) {
  .opening-aan .opening__cijfers { flex-direction: column; gap: 1.6rem; }
  .opening__cijfers li { flex: 0 0 auto; }
  .opening__cijfers li + li { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); padding-top: 1.6rem; }
  .opening__getal { font-size: clamp(3.4rem, 18vw, 5.5rem); }
}

/* =========================================================================
   BEWEGEND
   ========================================================================= */

.opening-aan .opening {
  height: var(--opening-lengte, 240vh);
}

.opening-aan .opening[data-opening="inzoom"]        { height: var(--opening-lengte, 260vh); }
.opening-aan .opening[data-opening="rondleiding"]   { height: var(--opening-lengte, 320vh); }
.opening-aan .opening[data-opening="uitvergroting"] { height: var(--opening-lengte, 230vh); }
.opening-aan .opening[data-opening="cijfers"]       { height: var(--opening-lengte, 220vh); }
.opening-aan .opening[data-opening="woorden"]       { height: var(--opening-lengte, 250vh); }

.opening-aan .opening__scherm {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}

.opening-aan .opening__lucht,
.opening-aan .opening__land,
.opening-aan .opening__scherp,
.opening-aan .opening__foto,
.opening-aan .opening__kaart,
.opening-aan .opening__kop,
.opening-aan .opening__slot {
  will-change: transform, opacity;
}

.opening-aan .opening__slot { display: block; opacity: 0; }
.opening-aan .opening__wenk { display: flex; }

/* rondleiding: opening.js geeft de foto zijn volle maat en schuift hem als
   camera, dus hier geen cover. */
.opening-aan .opening[data-opening="rondleiding"] .opening__foto {
  inset: auto;
  top: 0;
  left: 0;
  max-width: none;
  object-fit: fill;
  transform-origin: 0 0;
}

/* woorden: de kernzin staat midden op het beeld, woorden lichten één voor
   één op. */
.opening-aan .opening__zin {
  position: absolute;
  z-index: 4;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.opening__woord {
  opacity: .16;
  transition: none;
}

/* =========================================================================
   DE KADER-SOORTEN: breedbeeld, deuren, passepartout, drieluik, rolluik,
   letterraam. Ze openen het kader van de foto in plaats van erin te zoomen.
   Stilstaand zijn de extra lagen er niet; dan staat de foto gewoon vol in
   beeld met de kop erop.
   ========================================================================= */

.opening__deur,
.opening__lijn,
.opening__doek,
.opening__raam { display: none; }

.opening__paneel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.opening-aan .opening[data-opening="letterraam"] { height: var(--opening-lengte, 260vh); }

/* deuren */
.opening-aan .opening__deur {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 50%;
  background: var(--opening-achtergrond, #111);
  will-change: transform;
}
.opening-aan .opening__deur--links { left: 0; }
.opening-aan .opening__deur--rechts { right: 0; }

/* passe-partout: de lijst in een lichte papierkleur, met een dunne lijn om
   de foto zoals een snijrand in karton. De kop staat als label eronder; kleur
   en uitlijning daarvan horen in de stylesheet van de site. */
.opening-aan .opening__lijn {
  display: block;
  position: absolute;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .16), 0 0 0 7px rgba(255, 255, 255, .35);
}

/* rolluik: het doek laat onderin een strook foto vrij, en de kop staat op het
   doek, net boven die strook. */
.opening-aan .opening__doek {
  display: block;
  position: absolute;
  inset: 0 0 14% 0;
  z-index: 2;
  background: var(--opening-achtergrond, #111);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  will-change: transform;
}
.opening-aan .opening[data-opening="rolluik"] .opening__kop { bottom: 14%; }

/* letterraam: witte letters op een laag in de paginakleur, vermenigvuldigd
   over de foto. Wit laat de foto door, de donkere laag dekt hem af. Zet de
   letter in de stylesheet van de site op de kopletter, zo vet als die gaat. */
.opening-aan .opening__raam {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 2;
  align-items: flex-start;
  justify-content: center;
  padding-top: 14svh;
  overflow: hidden;
  background: var(--opening-achtergrond, #111);
  color: #fff;
  mix-blend-mode: multiply;
}
.opening__raam [data-raam] {
  display: block;
  font-size: clamp(5rem, 23vw, 22rem);
  line-height: .82;
  letter-spacing: -.03em;
  white-space: nowrap;
  transform-origin: 50% 55%;
}

/* Passe-partout stilstaand: de ingelijste foto met het label eronder, zoals
   de beginstand. Het label heeft donkere tekst op de lijst en is op de foto
   zelf onleesbaar; en ook zo staat de hele foto in beeld (dat is wat de kaart
   en een bezoeker zonder beweging te zien krijgen). */
.opening[data-opening="passepartout"] .opening__scherm {
  background: var(--opening-passe, #efe8da);
}
html:not(.opening-aan) .opening[data-opening="passepartout"] .opening__kaart {
  clip-path: inset(9% 22% 30% 22%);
}
html:not(.opening-aan) .opening[data-opening="passepartout"] .opening__demping { display: none; }
html:not(.opening-aan) .opening[data-opening="passepartout"] .opening__lijn {
  display: block;
  position: absolute;
  inset: 9% 22% 30% 22%;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .16), 0 0 0 7px rgba(255, 255, 255, .35);
}
@media (max-width: 699px) {
  html:not(.opening-aan) .opening[data-opening="passepartout"] .opening__kaart { clip-path: inset(10% 6% 48% 6%); }
  html:not(.opening-aan) .opening[data-opening="passepartout"] .opening__lijn { inset: 10% 6% 48% 6%; }
}

/* =========================================================================
   LIJST: een kleine, echte foto blijft klein. Hij hangt naast de kop (op een
   telefoon erboven) en wordt nooit breder dan --lijst-breed, dat de pijplijn
   op de sectie zet (80% van de echte breedte van de foto). Dit is ook de
   stilstaande stand, en dus wat de kaart fotografeert; bewegend is alleen de
   sectie hoger, en schuift de camera rustig binnen de lijst.
   ========================================================================= */

.opening[data-opening="lijst"] .opening__scherm {
  display: grid;
  /* Kop en lijst samen in het midden: aan de twee randen van een breed
     scherm leken het twee losse dingen. */
  grid-template-columns: minmax(0, 34rem) auto;
  justify-content: center;
  align-items: center;
  column-gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(5.5rem, 14svh, 9rem) clamp(1.25rem, 7vw, 7rem) clamp(3rem, 9svh, 6rem);
  box-sizing: border-box;
}

.opening[data-opening="lijst"] .opening__kop {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1;
}

.opening[data-opening="lijst"] .opening__kaart {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  width: min(var(--lijst-breed, 520px), 44vw);
  aspect-ratio: var(--lijst-verhouding, 4 / 3);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px -30px rgba(0, 0, 0, .65);
}

.opening[data-opening="lijst"] .opening__foto {
  transform-origin: 50% 50%;
}

.opening-aan .opening[data-opening="lijst"] { height: var(--opening-lengte, 170vh); }

@media (max-width: 699px) {
  .opening[data-opening="lijst"] .opening__scherm {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    align-content: center;
    row-gap: 1.75rem;
    padding-top: clamp(4.5rem, 12svh, 6rem);
  }
  .opening[data-opening="lijst"] .opening__kaart {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: min(var(--lijst-breed, 520px), 100%);
  }
  .opening[data-opening="lijst"] .opening__kop { grid-row: 2; }
}