/* V2 — "Vijf dagen"
 *
 * Richting: editorial, licht. De meest troostende zin op de hele bronsite staat
 * begraven op de filosofiepagina: er zijn vijf dagen, en de eerste hoeft er
 * niets beslist te worden. Die zin is hier de kop, en het register van vijf
 * stappen ligt als een blad papier op de foto van laagwater. Vlak is zeenevel,
 * accent is het groen van de heg waar de portretten van de bron tegen staan.
 */

#version-v2{
  --veld: #DCE4E6;
  --veld-kop: #DCE4E6;
  --veld-plaat: #F4F6F6;
  --veld-diep: #CFD9DB;
  --ink: #16221E;
  --ink-stil: #475954;
  --lijn: #B4C2C4;
  --accent: #2B5340;
  --accent-ink: #F4F6F6;
  --chip-veld: #16221E;
  --chip-ink: #EAF0EE;
  --ff-kop: 'Andada Pro', Georgia, serif;
  --fs-display: clamp(2.2rem, 4.7vw, 3.9rem);
  /* draagt het woord "Marea getij" en het bedrag van de voorbespreking */
  --fs-mega: clamp(2.6rem, 7.4vw, 6rem);
}

#version-v2{font-family:'Karla',system-ui,sans-serif}

/* --------------------------------------------------------------- hero ---- */

.v2-hero{
  justify-content:space-between;
  background-image:
    linear-gradient(178deg, rgb(238 243 244 / .95) 0%, rgb(220 228 230 / 0) 46%),
    radial-gradient(90% 60% at 82% 12%, rgb(255 255 255 / .6) 0%, rgb(255 255 255 / 0) 70%);
  background-color:var(--veld);
}

.v2-boven{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  grid-template-areas:
    "kop  film"
    "rest film";
  column-gap:clamp(24px, 4vw, 60px);
  row-gap:calc(var(--u) * 3);
  /* Zonder align-content:start rekt een auto-rij uit zodra het raster meer
   * ruimte krijgt dan zijn inhoud, en sleept een absolute laag mee. */
  align-content:start;
  /* Iets strakker dan de gedeelde omhulselmaat: anders valt de onderrand van
   * het register net buiten een scherm van 900px hoog. */
  padding-top:calc(var(--u) * 4);
  padding-bottom:calc(var(--u) * 2);
}

.v2-kop{
  grid-area:kop;
  font-family:var(--ff-kop);
  font-weight:600;
  font-size:var(--fs-display);
  line-height:1.06;
  letter-spacing:-0.012em;
  max-width:20ch;
}
.v2-kop-b{display:block;position:relative;color:var(--accent)}
.v2-streep{
  display:block;
  height:2px;
  width:min(320px, 62%);
  margin-top:calc(var(--u) * 2);
  background:var(--accent);
  transform-origin:left center;
}

.v2-rest{grid-area:rest;display:flex;flex-direction:column;gap:calc(var(--u) * 3)}
#version-v2 .v2-lead{max-width:46ch}

/* de filmcel: het grote vak van het bentoraster */
.v2-cel{
  grid-area:film;
  position:relative;
  align-self:start;
  margin:0;
}
.v2-film{
  position:relative;
  aspect-ratio:4 / 3;
  border-radius:var(--r-m);
  overflow:clip;
  background:var(--veld-diep) center/cover no-repeat;
  background-image:url('../img/hero-v2-poster.jpg');
  box-shadow:var(--sh-b);
}
.v2-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.72) contrast(1.04);
}
.v2-bij{
  margin-top:calc(var(--u) * 1.75);
  font-size:var(--fs-label);
  letter-spacing:.16em;text-transform:uppercase;
  /* Volle inkt, niet de gedempte tint: dit bijschrift landt op het lichte deel
   * van het verlopende vlak en haalde daar 3,78:1. */
  color:var(--ink);
}

/* het register van vijf, breekt uit de container met PADDING zodat het nooit
 * horizontale overflow kan maken */
.v2-rail{
  position:relative;z-index:4;
  width:auto;
  padding:0 max(18px, calc((100vw - var(--maat)) / 2));
  margin-top:calc(var(--u) * -6);
}
.v2-rail-in{
  background:var(--veld-plaat);
  border-radius:var(--r-m);
  box-shadow:var(--sh-a);
  padding:calc(var(--u) * 2.5) clamp(18px, 3vw, 32px) calc(var(--u) * 3);
}
.v2-rail-kop{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--u) * 2);
  font-family:var(--ff-kop);
  font-size:var(--fs-h3);
  font-weight:600;
  margin-bottom:calc(var(--u) * 2.5);
}
.v2-rail-kop em{
  font-style:normal;
  font-family:'Karla',system-ui,sans-serif;
  font-size:var(--fs-small);font-weight:400;
  color:var(--ink-stil);
}
.v2-dagen{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:0;
  min-width:0;
}
.v2-dag{
  min-width:0;
  padding:0 clamp(10px, 1.4vw, 20px);
  border-left:var(--bd) solid var(--lijn);
}
.v2-dag:first-child{border-left:0;padding-left:0}
.v2-dag:last-child{padding-right:0}
.v2-nr{
  display:block;
  font-family:var(--ff-kop);
  font-size:var(--fs-h3);font-weight:600;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  margin-bottom:calc(var(--u) * .75);
}
.v2-dag h3{
  font-size:var(--fs-small);font-weight:600;
  letter-spacing:.01em;
  margin-bottom:calc(var(--u) * .75);
}
.v2-dag p{font-size:var(--fs-small);color:var(--ink-stil);line-height:1.5}

.v2-chip{
  left:calc(var(--u) * 2.5);
  bottom:calc(var(--u) * 7);
}
.v2-zegel{
  position:absolute;z-index:6;
  right:calc(var(--u) * 2.5);
  top:calc(var(--u) * 2.5);
  width:clamp(58px, 5.5vw, 76px);
  filter:drop-shadow(0 14px 22px rgb(22 34 30 / .34));
}

#version-v2 .voet{background:var(--veld-diep)}

/* ------------------------------------------------------------ beweging ---- */

@media (prefers-reduced-motion: no-preference){
  .v2-video{animation:v2-vaar 34s ease-in-out infinite}
  .v2-streep{animation:v2-rek 1200ms var(--sprong) 320ms both}
  .v2-dag{animation:v2-zak 760ms var(--sprong) both;animation-delay:calc(560ms + var(--i) * 80ms)}
  .v2-cel{animation:v2-zak 900ms var(--sprong) 120ms both}
  .v2-chip .stip{animation:v2-puls 5200ms ease-in-out 1800ms infinite}
}
@media (prefers-reduced-motion: reduce){
  .v2-video{display:none}
}

@keyframes v2-vaar{
  0%,100%{transform:scale(1.04) translate3d(0,0,0)}
  50%{transform:scale(1.04) translate3d(1.4%,-1%,0)}
}
@keyframes v2-rek{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes v2-zak{
  from{transform:translate3d(0,16px,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes v2-puls{
  0%,100%{transform:scale(1)}
  50%{transform:scale(.58)}
}

/* --------------------------------------------------------- responsief ---- */

@media (max-width: 1000px){
  .v2-boven{
    grid-template-columns:1fr;
    grid-template-areas:"kop" "film" "rest";
  }
  .v2-kop{max-width:24ch}
  .v2-film{aspect-ratio:16 / 9}
}

@media (max-width: 720px){
  .v2-rail{margin-top:calc(var(--u) * -3)}
  .v2-rail-in{padding-left:0;padding-right:0;background:none;box-shadow:none;border-top:var(--bd) solid var(--lijn);border-radius:0}
  .v2-rail-kop{padding:0 clamp(18px, 4vw, 40px);margin-top:calc(var(--u) * 2)}
  /* Een spoor dat je opzij schuift houdt het register overzichtelijk zonder de
   * hero drie schermen hoog te maken. */
  .v2-dagen{
    display:flex;
    gap:clamp(14px, 4vw, 24px);
    overflow-x:auto;
    min-width:0;max-width:100%;
    padding:0 clamp(18px, 4vw, 40px) calc(var(--u) * 2);
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .v2-dag{
    flex:0 0 min(72vw, 260px);
    min-width:0;
    padding:0 0 0 clamp(14px, 4vw, 20px);
    scroll-snap-align:start;
  }
  .v2-dag:first-child{padding-left:0}
  .v2-kop{max-width:none}
}