/* FRANKTOOLATE — overgenomen uit het Figma-ontwerp "home" (1440 px breed) */

:root {
  --bg: #000;
  --fg: #fff;
  --muted: rgba(255, 255, 255, 0.55);
  --photo-width: 641px;
  --gutter: 16px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- Kop ---------- */

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(40px, 6.7vw, 96px) var(--gutter) 0;
  text-align: center;
}

.wordmark {
  font-family: "Anek Gujarati", system-ui, sans-serif;
  font-size: clamp(26px, 2.44vw + 8px, 35px);
  line-height: 1;
  letter-spacing: 0.15em;
  /* compenseert de letterafstand na de laatste letter, zodat het woord echt gecentreerd staat */
  margin-right: -0.15em;
}

/* Naam-animatie: FRANK, TOO en LATE faden na elkaar in en pulseren daarna om en om.
   Pas hier de tijden aan:
   - 1.4s  = hoe lang het infaden van één woord duurt
   - 1.1s  = tijd tussen de woorden bij het infaden
   - 4.2s  = start van het pulseren (na het infaden; ook aanpassen in inc/layout.php)
   - 10.5s = één volledige pulsronde (3 woorden x 3.5s)
   - 0.45  = hoe ver een woord vervaagt bij het pulseren (1 = niet, 0 = helemaal) */
.wordmark .w { display: inline-block; }

.js .wordmark .w {
  opacity: 0;
  animation:
    wm-in 1.4s ease-out calc(0.3s + var(--i) * 1.1s) forwards,
    wm-pulse 10.5s ease-in-out calc(4.2s + var(--i) * 3.5s) infinite;
}

/* Tweede pagina in hetzelfde bezoek: niet opnieuw infaden, wel pulseren */
.js.wm-seen .wordmark .w {
  opacity: 1;
  animation: wm-pulse 10.5s ease-in-out calc(var(--i) * 3.5s - var(--wm-phase, 0s)) infinite;
}

@keyframes wm-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wm-pulse {
  0%, 34%, 100% { opacity: 1; }
  17%           { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .js .wordmark .w { animation: none; opacity: 1; }
}

.site-nav {
  margin-top: 6px;
  font-size: clamp(16px, 0.6vw + 12px, 20px);
  line-height: 29px;
}

.site-nav .or { margin: 0 0.5em; }

.site-nav a {
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] { border-bottom-color: currentColor; }

.site-nav a:focus-visible { outline: none; }

/* ---------- Verticaal centreren ----------
   De naam en het menu blijven bovenaan; de inhoud (foto of about)
   staat verticaal in het midden van de ruimte daaronder.
   Is de inhoud hoger dan het scherm, dan scrolt de pagina gewoon. */
body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- Eén foto tegelijk ---------- */

main {
  padding: clamp(40px, 4.4vw, 63px) var(--gutter) clamp(40px, 5vw, 64px);
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photo {
  /* Witte rand om de foto: 30 px, op telefoons 15 px */
  --frame: 30px;
  display: block;
  padding: var(--frame);
  background: #fff;
}

/* De foto zelf is maximaal 641 px breed (zoals in Figma) en past met rand en al binnen het scherm */
.photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(var(--photo-width), calc(100vw - 2 * var(--gutter) - 2 * var(--frame)));
  /* ruimte voor de kop, de witte rand en een eventueel bijschrift; zo past alles altijd in beeld */
  max-height: calc(100vh - 350px);
  max-height: calc(100svh - 350px);
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 700px) {
  .photo { --frame: 15px; }
  .photo img { max-height: calc(100svh - 260px); }
}

/* Fade: foto (met rand) komt zacht op en vervaagt bij het wisselen.
   Zonder JavaScript is de foto gewoon direct zichtbaar. */
.js .photo,
.js .caption {
  opacity: 0;
  transition: opacity 450ms ease;
}
.js .photo.is-visible,
.js .caption.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .js .photo, .js .caption { transition: none; }
}

.caption {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* Geen bijschrift? Dan ook geen lege ruimte */
.caption:empty { min-height: 0; margin: 0; }

/* "press for next": alleen op aanraakschermen (telefoon, tablet) */
.tap-hint {
  display: none;
  margin: 14px 0 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: center;
}
@media (hover: none) {
  .tap-hint { display: block; }
}

/* ---------- Cursor: witte transparante pijl ---------- */

.has-dot-cursor,
.has-dot-cursor * { cursor: none !important; }

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 16px;
  margin: -8px 0 0 -16px; /* het midden van de pijl zit op de muispositie */
  color: rgba(255, 255, 255, 0.6);
  /* subtiele donkere rand, zodat de pijl ook op de witte rand en lichte foto's zichtbaar blijft */
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .2s;
}
.cursor-dot svg {
  display: block;
  transition: transform .15s ease;
}

.cursor-dot.visible { opacity: 1; }

/* Iets groter boven Home/About, en een klein tikje naar rechts bij het klikken */
.cursor-dot.on-link svg { transform: scale(1.25); }
.cursor-dot.pressed svg { transform: translateX(5px); }

/* ---------- About ---------- */

.about {
  max-width: var(--photo-width);
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.6;
}

.about p { margin: 0 0 1.2em; }

/* About-foto: boven de tekst, zonder witte rand */
.about-photo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(400px, 100%);
  max-height: 400px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}

/* Instagram onderaan de about-pagina */
.about .insta { margin: clamp(28px, 4vw, 44px) 0 0; font-size: 15px; text-align: center; }
.about .insta a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 16px 6px 12px; border-radius: 5.5px;   /* afgerond vlakje (zelfde hoek als het Instagram-logo), alleen zichtbaar bij aanwijzen */
  color: #fff; background: transparent;
  transition: background-color .2s, color .2s;
}
.about .insta a:hover, .about .insta a:focus-visible { background: #fff; color: #000; outline: none; }
.insta-icon { display: inline-flex; width: 27px; height: 27px; }
.insta-icon svg { width: 100%; height: 100%; fill: currentColor; }

.empty {
  color: var(--muted);
  text-align: center;
}

/* ---------- Zachte overgang tussen home en about ---------- */
/* Werkt in Chrome, Edge en Safari; andere browsers wisselen gewoon direct. */
@view-transition { navigation: auto; }

/* De naam en het menu blijven staan, alleen de inhoud eronder fadet */
.site-header { view-transition-name: site-header; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 450ms; animation-timing-function: ease; }
::view-transition-group(site-header) { animation-duration: 0s; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Cookie-melding (alleen als Google Analytics aan staat) ---------- */
.consent {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 12px);
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  transition: opacity .4s, transform .4s;
  z-index: 50;
}
.consent.show { opacity: 1; transform: translate(-50%, 0); }
.consent button {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.consent button:hover,
.consent button:focus-visible { border-bottom-color: currentColor; outline: none; }
@media (max-width: 480px) {
  .consent { flex-wrap: wrap; justify-content: center; gap: 6px 18px; text-align: center; }
  .consent span { width: 100%; }
}

/* ---------- Homepage: foto verticaal gecentreerd ---------- */
/* De naam en het menu blijven bovenaan; de foto staat midden in de ruimte eronder. */
.page-home {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.page-home main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

/* ---------- Menu met categorieën: work · portrait · editorial  or  about ---------- */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0;
}
.site-nav .cats { white-space: nowrap; }
.site-nav .dot { margin: 0 0.75em; opacity: 0.6; }   /* ruimte rond de puntjes */
@media (max-width: 420px) {
  .site-nav { font-size: 15px; }
  .site-nav .dot { margin: 0 0.65em; }
}

/* ---------- Bijschrift met like-hartje: "anna · ♡ 12" ---------- */
.caption {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}
.caption-sep { margin: 0 1em; opacity: 0.7; }   /* ruimte tussen naam en hartje */
.caption.no-title .caption-title,
.caption.no-title .caption-sep { display: none; }

.like {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;          /* iets groter klikvlak, vooral op de telefoon */
  margin: -4px 0;
  background: none;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;   /* geen standaard (ronde) knopvorm van Safari */
  appearance: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.like:focus { outline: none; }
.like svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  transition: fill .2s, stroke .2s, transform .2s;
}
.like:hover svg,
.like:focus-visible svg { stroke: var(--fg); }
.like:focus-visible { outline: none; }
.like.is-liked svg { fill: #ff3040; stroke: #ff3040; }   /* rood, gevuld hart */
.like-count:empty { display: none; }

/* Klein "popje" bij het liken */
.like.pop svg { animation: like-pop .45s cubic-bezier(.17,.89,.32,1.49); }
@keyframes like-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .like.pop svg { animation: none; }
}

/* ---------- Hartje linksonder, naam rechtsonder, gelijk met de randen van de foto ---------- */
.figure {
  display: flex;
  flex-direction: column;   /* even breed als de foto (met witte rand) */
  max-width: 100%;
}
.figure .caption {
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  text-align: left;
}
.figure .like { order: 0; margin-left: -2px; }          /* links, optisch gelijk met de rand */
.figure .caption-title { order: 2; text-align: right; }  /* rechts */
.figure .caption-sep { display: none; }                  /* scheidingsteken niet meer nodig */

/* ---------- Openingsanimatie "zwerm" (eerste bezoek) ----------
   De foto's vliegen onder de naam en het menu door. */
.intro-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.intro-card {
  position: absolute; background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  will-change: transform; transform-origin: 50% 50%;
}
.intro-card img { display: block; width: 100%; height: 100%; }
.page-home .site-header { position: relative; z-index: 41; }
.intro .tap-hint { opacity: 0; }
.tap-hint { transition: opacity .6s ease; }