/* ===========================================================================
   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%; }
}

/* =========================================================================
   STROOK: een brede fotostrook (zoals 1600x480) als band over de pagina, met
   de kop eronder. Hij vult geen scherm, want daarvoor is hij in de hoogte te
   klein, en wordt nooit breder getoond dan --strook-breed (zijn echte
   breedte), dat de pijplijn op de sectie zet. Dit is ook de stilstaande stand,
   en dus wat de kaart fotografeert; bewegend glijdt de camera rustig door de
   band.
   ========================================================================= */

.opening[data-opening="strook"] .opening__scherm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.75rem, 4svh, 3rem);
  padding: clamp(5rem, 11svh, 7rem) 0 clamp(2.5rem, 7svh, 4.5rem);
  box-sizing: border-box;
}

.opening[data-opening="strook"] .opening__kaart {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: min(100%, var(--strook-breed, 1600px));
  margin: 0 auto;
  aspect-ratio: var(--strook-verhouding, 10 / 3);
  max-height: 58svh;
  overflow: hidden;
}

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

/* De kop lijnt links uit met de band erboven; op een smal scherm, waar de
   band tot de rand loopt, met een gewone kantlijn. */
.opening[data-opening="strook"] .opening__kop {
  position: relative;
  inset: auto;
  box-sizing: border-box;
  width: min(100% - 2.5rem, var(--strook-breed, 1600px));
  margin: 0 auto;
  padding: 0;
}

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

/* Op een telefoon is een strook van 3:1 een smal lint; daar een ruimere
   uitsnede uit het midden, nog steeds kleiner dan de foto zelf. */
@media (max-width: 699px) {
  .opening[data-opening="strook"] .opening__kaart { aspect-ratio: 16 / 9; }
}