/* ============================================================
   Great Media Productions — style.css
   Statische portfolio-site | HTML5 / CSS3 / Vanilla JS
   ============================================================ */

/* ---------- 1. Design-systeem ---------- */
:root {
  --c-bg:            #000000;
  --c-text:          #FFFFFF;
  --c-title-header:  #9B1414;
  --c-title-footer:  #FA0A0A;
  --c-accent:        #FA0A0A;
  --font:            'Open Sans', system-ui, -apple-system, sans-serif;
  --strip-w:         clamp(84px, 15vw, 460px); /* filmrol-rand per zijde: ±15% van het beeld */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, p { margin: 0; }

/* ---------- 2. Header ---------- */
.site-header {
  position: relative;
  min-height: clamp(380px, 56vh, 680px);  /* hoger = meer van de foto in beeld (uitgezoomd) */
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url('../assets/images/thumbnails/webp/IMG-20230129-WA0008.webp') center 55% / cover no-repeat;  /* lagere uitsnede: persoon bovenin de header */
  isolation: isolate;
}

/* Donkere overlay */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 55%, #000 100%);
}

/* 'VideoPixelEffect': subtiel LED-raster over de foto */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(to right,  rgba(0,0,0,.28) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 2px);
  mix-blend-mode: multiply;
}

/* Navigatie */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  padding: 1.6rem 1rem;
  width: 100%;
}

.site-nav a {
  color: var(--c-text);
  text-decoration: none;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .01em;
  padding-bottom: .25rem;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--c-accent); }

.site-nav a.active { border-bottom-color: var(--c-title-header); }

/* Titelblok midden in de header */
.header-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Verplaatst tekst naar de onderkant */
  align-items: center;
  text-align: center;
  padding: 0 1rem 6rem; /* Extra ruimte aan de onderkant zodat hij niet tegen het pijltje botst */
}

.header-title {
  color: var(--c-title-header);
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.4rem, 2vw, 2.6rem);   /* titel ± 1/5 van de schermbreedte */
  letter-spacing: -.01em;
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}

.header-tagline {
  color: var(--c-text);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(.55rem, .68vw, .85rem); /* ± 1/3 van de titelgrootte */
  letter-spacing: .04em;
  margin-top: .7rem;
}

/* Scroll-indicator onderaan de header (bouncet zachtjes op en neer) */
.scroll-down {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  animation: bounce-down 2s ease-in-out infinite;
}

.scroll-down svg {
  width: 26px;
  height: 26px;
  stroke: var(--c-text);
  fill: none;
  transition: stroke .2s;
}

.scroll-down:hover svg,
.scroll-down:focus-visible svg { stroke: var(--c-accent); }

@keyframes bounce-down {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}

/* ---------- 3. Secties & video-grid ---------- */
main { display: block; }

.section {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.5rem) 1.5rem;
}

.section-title {
  color: var(--c-text);
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  letter-spacing: 0;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}

/* Flex i.p.v. grid zodat een onvolledige laatste rij gecentreerd wordt */
.video-grid {
  --gap-x: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(2.2rem, 4vw, 3.2rem) var(--gap-x);
}

.video-grid > * { width: calc((100% - 2 * var(--gap-x)) / 3); }

@media (max-width: 920px) { .video-grid > * { width: calc((100% - var(--gap-x)) / 2); } }
@media (max-width: 580px) { .video-grid > * { width: 100%; } }

/* ---------- 4. Video-component ---------- */
.video-card,
.category-card {
  position: relative;
  cursor: pointer;
  transition: transform .25s ease;
}

.video-card:hover,
.video-card:focus-visible,
.category-card:hover,
.category-card:focus-visible {
  transform: scale(1.05);
  z-index: 60; /* boven de dim-overlay (z-index 50) */
  outline: none;
}

.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play-button (CSS-driehoek), wit → rood bij hover */
.video-card .thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-46%, -50%);
  border-left: clamp(28px, 3.2vw, 38px) solid var(--c-text);
  border-top: clamp(18px, 2.1vw, 25px) solid transparent;
  border-bottom: clamp(18px, 2.1vw, 25px) solid transparent;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
  transition: border-left-color .2s ease;
}

.video-card:hover .thumb::after,
.video-card:focus-visible .thumb::after {
  border-left-color: var(--c-accent);
}

.video-title,
.category-title {
  color: var(--c-text);
  text-align: center;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.45;
  margin-top: .95rem;
}

/* Categorie-kaarten op Home (links naar subpagina's) */
.category-card { display: block; text-decoration: none; }
.category-card .category-title { font-weight: 700; font-size: 1.15rem; }

/* ---------- 5. Dim-overlay (rest van de pagina donkerder) ---------- */
.dim-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 50;
}

body:has(.video-card:hover) .dim-overlay,
body:has(.video-card:focus-visible) .dim-overlay,
body.is-dimming .dim-overlay {            /* JS-fallback zonder :has() */
  opacity: .6;
}

/* ---------- 6. Footer ---------- */
.site-footer { padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem 1.5rem; }

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 760px;
  margin-inline: auto;
}

.footer-brand {
  color: var(--c-title-footer);
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-align: center;
}

.footer-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
}

.footer-social a { display: inline-flex; }

.footer-social svg {
  width: 26px;
  height: 26px;
  fill: var(--c-text);
  transition: fill .2s ease;
}

.footer-social a:hover svg,
.footer-social a:focus-visible svg { fill: var(--c-accent); }

/* Back-to-top pijltje, onderaan gecentreerd */
.to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 2.5rem auto 0;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: #0d0d0d;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}

.to-top svg { width: 18px; height: 18px; stroke: var(--c-text); transition: stroke .2s; }

.to-top:hover,
.to-top:focus-visible {
  border-color: var(--c-accent);
  background: #161616;
}
.to-top:hover svg { stroke: var(--c-accent); }

@media (max-width: 580px) {
  .footer-inner { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ---------- 7. Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(0,0,0,.93);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease;
}

.lightbox-frame {
  width: min(1100px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 0 60px rgba(0,0,0,.9);
}

.lightbox-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.lightbox-close {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  color: var(--c-text);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, transform .2s;
}

.lightbox-close:hover,
.lightbox-close:focus-visible { color: var(--c-accent); transform: scale(1.12); }

/* ---------- 8. Filmrol pagina-transitie ---------- */

/* Zwarte randen met sprocket-gaatjes, links & rechts */
.film-strip {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--strip-w);
  z-index: 90;
  background: #0f0f0f;               /* donker, maar net niet zwart */
  border-right: 3px solid #303030;   /* outline in het lichtere grijs */
  transform: translateX(-101%);
  transition: transform .65s cubic-bezier(.45, .05, .25, 1); /* rustig in én uit beeld */
  overflow: hidden;
  pointer-events: none;
}

.film-strip.right {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 3px solid #303030;
  transform: translateX(101%);
}

.film-strip.left { left: 0; }

/* De gaatjes: herhalend patroon, hoger dan het scherm zodat hij kan 'spoelen' */
.film-strip::before {
  content: "";
  position: absolute;
  top: -184px;            /* 2 patroon-periodes extra boven beeld */
  bottom: -184px;
  left: 50%;
  width: 44%;
  max-width: 64px;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(246, 243, 235, .96) 0 40px,   /* gaatje (licht door de film) */
    transparent 40px 92px              /* periode = 92px */
  );
}

/* Spoel-animatie: patroon verschuift exact één periode → naadloze loop */
@keyframes film-roll {
  to { transform: translateX(-50%) translateY(92px); }
}

/* Framelines: horizontale scheidingslijnen tussen de 'frames' van de film.
   Het patroon (periode = 100vh) wordt via background-position verschoven,
   zodat losse frames van boven naar beneden door het beeld schieten. */
.film-frames {
  position: fixed;
  inset: 0;
  z-index: 85;            /* boven de pagina, onder de zijstroken */
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background-image: repeating-linear-gradient(
    to bottom,
    #303030 0 2px,          /* outline */
    #0f0f0f 2px 26px,       /* frameline: donker, net niet zwart */
    #303030 26px 28px,      /* outline */
    transparent 28px 100vh  /* het frame zelf */
  );
}

/* UIT: 6 frames passeren met een speedramp (rustig aan, snel, rustig uit) */
@keyframes frames-roll {
  from { background-position-y: 0; }
  to   { background-position-y: 600vh; }
}

/* IN: de laatste 2 frames rollen binnen en komen tot stilstand */
@keyframes frames-roll-in {
  from { background-position-y: -200vh; }
  to   { background-position-y: 0; }
}

/* De reel: kopieën van de pagina die als losse frames voorbijschieten.
   Wordt door main.js gevuld bij soft navigation; het laatste frame bevat
   de nieuwe pagina en landt exact op zijn eindpositie. */
.film-reel {
  position: fixed;
  inset: 0;
  z-index: 80;              /* onder de framelines (85) en zijstroken (90) */
  pointer-events: none;
}

.reel-frame {
  position: absolute;
  left: 0;
  right: 0;
  height: 100vh;
  overflow: hidden;
  transform: translateZ(0); /* containing block voor de pagina-kopie erin */
  background: var(--c-bg);
}

/* Zelfde duur & easing als frames-roll: lijnen en frames blijven synchroon */
html.fx-exit .film-reel {
  animation: frames-roll-reel 1.25s cubic-bezier(.5, .05, .3, 1) both;
}

@keyframes frames-roll-reel {
  from { transform: translateY(0); }
  to   { transform: translateY(600vh); }
}

/* ----- Transitie-states (classes op <html>) ----- */

/* Pagina-wrapper krijgt de transforms */
/* Bewust géén z-index: anders ontstaat een stacking context en kan een
   gehoverde kaart (z-index 60) nooit boven de dim-overlay (50) uitkomen. */
.page-wrap {
  position: relative;
  transform-origin: 50% 50vh;
}

/* Tijdens elke fase: geen scrollbars, strips zichtbaar, gaatjes spoelen */
html.fx-zoomout, html.fx-exit, html.fx-prep, html.fx-land, html.fx-zoomin { overflow: hidden; }

html.fx-zoomout .film-strip,
html.fx-exit .film-strip,
html.fx-prep .film-strip,
html.fx-land .film-strip { transform: translateX(0); }

html.fx-exit .film-strip::before,
html.fx-land .film-strip::before {
  animation: film-roll .09s linear infinite;
}

html.fx-zoomout .film-frames,
html.fx-exit .film-frames,
html.fx-prep .film-frames,
html.fx-land .film-frames { opacity: 1; }

html.fx-exit .film-frames {
  animation: frames-roll 1.25s cubic-bezier(.5, .05, .3, 1) both;
}

html.fx-land .film-frames {
  animation: frames-roll-in .55s cubic-bezier(.15, .5, .25, 1) both;
}

/* UIT: 1) uitzoomen */
html.fx-zoomout .page-wrap {
  transform: scale(.8);
  transition: transform .3s ease;
}

/* UIT: 2) frame schiet razendsnel naar beneden (film spoelt door) */
html.fx-exit .page-wrap {
  transform: scale(.8) translateY(140vh);
  transition: transform .5s cubic-bezier(.6, 0, .8, .4);
}

/* IN: 0) startstand nieuwe pagina — klein en boven beeld (gezet vóór eerste paint) */
html.fx-prep .page-wrap {
  transform: scale(.8) translateY(-140vh);
  transition: none;
}
html.fx-prep .film-strip { transition: none; }

/* IN: 1) frame rolt naar beneden het beeld in en komt tot stilstand */
html.fx-land .page-wrap {
  transform: scale(.8) translateY(0);
  transition: transform .55s cubic-bezier(.18, .8, .28, 1); /* synchroon met frames-roll-in */
}

/* IN: 2) inzoomen naar normaal, strips schuiven weg */
html.fx-zoomin .page-wrap {
  transform: none;
  transition: transform .45s ease;
}
html.fx-zoomin .film-strip.left  { transform: translateX(-101%); }
html.fx-zoomin .film-strip.right { transform: translateX(101%); }
html.fx-zoomin .film-frames      { opacity: 0; }

/* ---------- 9. Toegankelijkheid ---------- */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.video-card:focus-visible, .category-card:focus-visible { outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}