/* V1 — "Getij"
 *
 * Richting: storytelling, donker. MAREA betekent getij, en het eerste scherm is
 * het water zelf: een donker wateroppervlak dat doorloopt, met één getijdenlijn
 * die er dwars overheen wordt getrokken en waar het feit aan hangt. Vlak en
 * accent komen uit het water en het zand van Zoutelande, niet uit een palet.
 */

#version-v1{
  --veld: #0C1714;
  --veld-kop: #0C1714;
  --veld-diep: #060F0D;
  --ink: #E9EEEA;
  --ink-stil: #A9BAB3;
  --lijn: #2A3B36;
  --accent: #D9C69C;
  --accent-ink: #0C1714;
  --chip-veld: #14231F;
  --chip-ink: #E9EEEA;
  --ff-kop: 'Petrona', Georgia, serif;
  --fs-display: clamp(2.55rem, 6.1vw, 5rem);
  /* het reuzencijfer van de sectie "vijf dagen": V3 gebruikte deze maat
     voor een heel woord, hier draagt hij precies een cijfer */
  --fs-mega: clamp(4.5rem, 12vw, 9.5rem);
}

#version-v1{font-family:'Mulish',system-ui,sans-serif}

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

.v1-hero{
  justify-content:flex-start;
  /* Een verlopend vlak op de sectie zelf: hero-craft loopt vanaf de hero
   * omhoog, dus een verloop op een absoluut kind telt daar niet mee. */
  background-image:
    radial-gradient(120% 90% at 18% 8%, rgb(24 45 40 / .85) 0%, rgb(6 15 13 / .2) 62%, rgb(6 15 13 / 0) 100%);
  background-color:var(--veld);
}

.v1-film{
  position:absolute;
  /* ruimer dan de sectie, zodat de drift nooit een rand laat zien en er ook
   * nooit een schalende transform op de sectie zelf hoeft te staan */
  inset:-5%;
  z-index:0;
  background:var(--veld-diep) center/cover no-repeat;
  background-image:url('../img/hero-v1-poster.jpg');
}
.v1-video{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.5) brightness(1.55) contrast(1.18);
}
/* De donkere plaat hoort HIER, over de volle breedte, en niet op de
 * tekstcontainer: die is 1240px breed en gecentreerd, dus zodra de video licht
 * genoeg werd om het water te zien, tekende de plaat zijn eigen rechthoek op
 * het scherm. Een laag van rand tot rand heeft geen rand. */
.v1-sluier{
  position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(96deg, rgb(6 15 13 / .94) 0%, rgb(6 15 13 / .88) 38%, rgb(6 15 13 / .5) 68%, rgb(6 15 13 / .14) 100%),
    linear-gradient(180deg, rgb(6 15 13 / .6) 0%, rgb(6 15 13 / .1) 32%, rgb(6 15 13 / .5) 100%);
}

/* de getijdenlijn: één doorlopende curve, eb en vloed, twee keer */
.v1-lijn{
  position:absolute;z-index:2;
  left:0;right:0;
  /* Vast aan de ONDERkant, niet op een percentage: de curve liep anders op
   * sommige hoogtes vlak onder de knoppenrij door, en zand op wit gaf daar
   * 1,97:1 op de slechtste pixel. */
  top:auto;bottom:calc(var(--u) * 8);
  width:100%;height:min(26vh, 200px);
  color:var(--accent);
  opacity:.85;
  filter:drop-shadow(0 14px 22px rgb(4 12 10 / .6));
}
.v1-getij{stroke-dasharray:2400}

.v1-inhoud{
  padding-top:calc(var(--u) * 8);
  padding-bottom:calc(var(--u) * 4);
}

.v1-kop{
  font-family:var(--ff-kop);
  font-weight:500;
  font-size:var(--fs-display);
  line-height:1.04;
  letter-spacing:-0.018em;
  max-width:19ch;
  margin-bottom:calc(var(--u) * 3);
}
#version-v1 .v1-r2{color:var(--accent);display:block}

#version-v1 .v1-lead{margin-bottom:calc(var(--u) * 4.5);max-width:48ch}

.v1-vloed{
  display:flex;align-items:baseline;gap:calc(var(--u) * 1.25);
  margin-bottom:calc(var(--u) * 2.5);
  font-family:'Karla',system-ui,sans-serif;
  font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
}

.v1-chip{
  right:clamp(18px, 5vw, 64px);
  bottom:calc(var(--u) * 11);
}
.v1-zegel{
  position:absolute;z-index:6;
  left:clamp(18px, 5vw, 64px);
  bottom:calc(var(--u) * 4);
  width:clamp(72px, 8vw, 104px);
  filter:drop-shadow(0 16px 26px rgb(4 12 10 / .55));
}

/* -------------------------------------------------------------- voet ---- */

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

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

/* Ingetogen, want dit bedrijf verkoopt rust: je moet twee keer kijken om het te
 * zien. Niets begint op opacity 0, dus met beweging uit staat er nooit iets
 * onzichtbaar te wachten. */
@media (prefers-reduced-motion: no-preference){
  .v1-video{animation:v1-drift 30s ease-in-out infinite}
  .v1-getij{animation:v1-trek 2800ms var(--sprong) 240ms both}
  .v1-chip{animation:v1-zak var(--t-traag) var(--sprong) 520ms both}
  .v1-zegel{animation:v1-zak var(--t-traag) var(--sprong) 640ms both}
  .v1-chip .stip{animation:v1-puls 4600ms ease-in-out 1600ms infinite}
  .v1-lijn{animation:v1-deining 22s ease-in-out infinite}
}
@media (prefers-reduced-motion: reduce){
  .v1-video{display:none}
}

@keyframes v1-drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-1.8%,-1.4%,0)}
}
@keyframes v1-trek{
  from{stroke-dashoffset:2400}
  to{stroke-dashoffset:0}
}
@keyframes v1-deining{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,10px,0)}
}
@keyframes v1-zak{
  from{transform:translate3d(0,14px,0)}
  to{transform:translate3d(0,0,0)}
}
@keyframes v1-puls{
  0%,100%{transform:scale(1)}
  50%{transform:scale(.6)}
}

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

@media (max-width: 900px){
  /* Op smal loopt een horizontaal verloop binnen 390px van .95 naar 0, dus de
   * staart van de tweede kopregel kwam op onbeschermde video terecht: 1,43:1 op
   * de slechtste pixel. Op deze breedte loopt de plaat daarom van boven naar
   * beneden en dekt hij het hele tekstblok. */
  .v1-sluier{
    background-image:
      linear-gradient(184deg, rgb(6 15 13 / .94) 0%, rgb(6 15 13 / .9) 62%, rgb(6 15 13 / .66) 100%);
  }
  .v1-kop{max-width:22ch}
  .v1-chip{bottom:calc(var(--u) * 12);right:clamp(18px, 5vw, 40px)}
  .v1-zegel{left:clamp(18px, 5vw, 40px);bottom:calc(var(--u) * 4)}
  .v1-lijn{bottom:calc(var(--u) * 9)}
  .v1-zegel{width:74px}
}
@media (max-width: 560px){
  #version-v1{--fs-display: clamp(1.68rem, 8.2vw, 2.6rem)}
  .v1-inhoud{padding-top:calc(var(--u) * 3);padding-bottom:calc(var(--u) * 26)}
  .v1-lijn{bottom:calc(var(--u) * 13);height:150px}
  .v1-chip{bottom:calc(var(--u) * 13);left:clamp(18px, 5vw, 40px);right:auto;max-width:min(64vw, 232px)}
  .v1-zegel{width:54px;right:clamp(18px, 5vw, 40px);left:auto;bottom:calc(var(--u) * 14)}
  .v1-kop{max-width:none}
}