/* ============================================================
   Bright Books v2 - vormgeving
   Eén scherm, rustig en licht, in twee helften.
   Links Why Ibiza (uitverkocht), rechts Vriendschap (linkt naar
   rosevriendschap.nl). Achter de boeken lopen de schilderijen van
   de covers door als zachte hoogtelijnen, over de hele helft.
   Op een telefoon staan de boeken onder elkaar, Vriendschap boven.
   Kleuren en maten staan hieronder bij elkaar.
   ============================================================ */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../fonts/archivo.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/jetbrains-mono-normal.woff2') format('woff2'); }

:root {
  --paper-left: #f4f5f6;                /* links een zweem koel wit (Ibiza) */
  --paper-right: #f8f5f0;               /* rechts een zweem warm wit (Vriendschap) */
  --ink: #1b2130;                       /* tekst */
  --ink-soft: #6c7180;
  --hair: rgba(27, 33, 48, .1);         /* de dunne lijn tussen de helften */

  --lines: .2;                          /* hoe sterk de hoogtelijnen op de achtergrond zijn (0 - 1) */

  /* papier: een heel fijne korrel op de achtergrond (niet op de covers).
     Sterker of zwakker: verander de twee getallen na "0 0 0" in de laatste regel (nu .2 en -.09). Weghalen: zet --paper op none. */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .13 0 0 0 .2 -.09'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");

  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --gutter: 16px;
  --top: 64px;                          /* boven en onder even veel: boek + tekst samen precies in het midden */
  --bottom: 64px;                       /* (de regel onderin staat in deze ruimte) */
  --foot: clamp(8px, 1.6vh, 16px);      /* afstand van de regel tot de onderrand: zelfde hoogte als hinzegroup.com */

  /* de boeken: zo groot als past, met lucht eromheen (beide boeken zijn 17 x 23 cm) */
  --book-h: min(74svh, calc(100svh - 200px), 1040px);
  /* hooguit 620 px breed: op retina is dat 1240 beeldpunten, zo groot als de bestanden. Zo blijven de covers altijd haarscherp. */
  --book-w: min(calc(50vw - 2 * var(--gutter)), calc(var(--book-h) * .739), 620px);

  --ease: cubic-bezier(.16, .84, .24, 1);
  --calm: cubic-bezier(.33, 0, .2, 1);  /* rustig in en uit, voor "Uitverkocht" */

  /* schaduw onder de boeken: dichtbij scherp, verder weg zacht en breed */
  --shadow:
    0 1px 1px rgba(20, 24, 36, .1),
    0 3px 6px rgba(20, 24, 36, .09),
    0 12px 24px -4px rgba(20, 24, 36, .16),
    0 32px 54px -12px rgba(20, 24, 36, .26),
    0 64px 110px -28px rgba(20, 24, 36, .36);
  --shadow-up:
    0 1px 1px rgba(20, 24, 36, .1),
    0 4px 8px rgba(20, 24, 36, .09),
    0 18px 32px -6px rgba(20, 24, 36, .18),
    0 46px 74px -16px rgba(20, 24, 36, .28),
    0 84px 140px -34px rgba(20, 24, 36, .38);
}
@supports not (height: 1svh) { :root { --book-h: min(74vh, calc(100vh - 200px), 1040px); } }
@media (min-width: 600px) { :root { --gutter: 30px; } }
@media (min-width: 800px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper-left); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1 { margin: 0; font-weight: 400; }
::selection { background: var(--ink); color: #fff; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.arrow { display: inline-block; transition: transform .35s var(--ease); }

/* ---------- het scherm: twee helften naast elkaar ---------- */
.split {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: 1fr 1fr;
}
/* Vriendschap staat in de code eerst, maar hoort rechts */
.half--ibiza { grid-column: 1; grid-row: 1; background: var(--paper), var(--paper-left); }
.half--vriendschap { grid-column: 2; grid-row: 1; background: var(--paper), var(--paper-right); }

/* de naad: een haarlijn die naar boven en (ruim boven de regel onderin) naar beneden wegvaagt */
.split::after {
  content: ''; position: absolute; z-index: 2; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px;
  background: linear-gradient(180deg, transparent, var(--hair) 14%, var(--hair) 60%, transparent 78%);
  pointer-events: none;
}

.half {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: var(--top) var(--gutter) var(--bottom);
}

/* ---------- achtergrond: de schilderijen als zachte hoogtelijnen ----------
   images/...-lijnen.v2.png: dunne lijnen op wit. "multiply" laat het wit wegvallen,
   zodat alleen de lijnen op de kleur van de helft overblijven. Rond het boek iets
   sterker, naar de randen lichter en onderin weg (daar staat de regel). */
.lines {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%;
  mix-blend-mode: multiply; opacity: var(--lines);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 44%, #000 30%, rgba(0, 0, 0, .5) 100%), linear-gradient(0deg, transparent 4%, #000 26%);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(80% 70% at 50% 44%, #000 30%, rgba(0, 0, 0, .5) 100%), linear-gradient(0deg, transparent 4%, #000 26%);
          mask-composite: intersect;
  pointer-events: none; user-select: none;
}

/* ---------- het klikbare vlak: boek + onderschrift, met een rand eromheen ----------
   De rand is ongeveer de helft van de ruimte tussen boek en schermrand.
   Met een negatieve marge eromheen, zodat de rand de boeken niet kleiner maakt. */
.zone {
  --pad-x: max(14px, calc((50vw - var(--book-w)) / 4));
  --pad-y: clamp(18px, 4.5vh, 56px);
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 34px);
  padding: var(--pad-y) var(--pad-x);
  margin: calc(-1 * var(--pad-y)) calc(-1 * var(--pad-x));
  text-align: center; -webkit-tap-highlight-color: transparent;
}
a.zone { cursor: pointer; }
.zone:focus-visible { outline: none; }
.zone:focus-visible .book { outline: 1px solid var(--ink); outline-offset: 12px; }

/* ---------- het boek: alleen de voorkant, met een zachte schaduw ---------- */
.book {
  position: relative; display: block;
  width: var(--book-w); aspect-ratio: 170 / 230;
  border-radius: 1px; background: #fff;
  box-shadow: var(--shadow);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.book__cover { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: filter 1s var(--calm); }

/* ---------- onderschrift ---------- */
.caption { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.caption__title {
  font-size: clamp(12px, 1.05vw, 15px); font-weight: 600; font-stretch: 80%;
  letter-spacing: .3em; margin-right: -.3em; text-transform: uppercase; line-height: 1;
}
/* beide regels even hoog, zodat de boeken links en rechts precies gelijk staan */
.caption__meta {
  font-size: clamp(12px, .95vw, 14px); color: var(--ink-soft); letter-spacing: .03em; white-space: nowrap;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
a.zone .caption__meta { color: var(--ink); border-color: rgba(27, 33, 48, .25); transition: border-color .3s; }

/* ---------- aanwijzen: beide boeken komen iets omhoog ---------- */
@media (hover: hover) {
  .zone:hover .book { transform: translateY(-8px); box-shadow: var(--shadow-up); }
  a.zone:hover .caption__meta { border-color: var(--ink); }
  a.zone:hover .arrow { transform: translate(3px, -3px); }
}

/* ---------- het vlak op de cover: "Uitverkocht" (links) en "Bestel nu" (rechts) komen rustig in beeld ---------- */
.flag {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 76%; padding: 1.35em 0 1.3em;
  font-size: clamp(11px, 1.05vw, 15px); font-weight: 500; letter-spacing: .42em; text-indent: .42em;
  line-height: 1; text-transform: uppercase; color: #fff; text-align: center;
  background: rgba(10, 11, 14, .44);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  opacity: 0; transform: translate(-50%, calc(-50% + 6px));
  transition: opacity .9s var(--calm), transform 1.1s var(--calm);
  pointer-events: none;
}
.zone.is-open .flag { opacity: 1; transform: translate(-50%, -50%); }
.zone.is-open .book__cover { filter: brightness(.9); }
.zone.is-open .book { transform: translateY(-8px); box-shadow: var(--shadow-up); }
@media (hover: hover) {
  .zone:hover .flag { opacity: 1; transform: translate(-50%, -50%); }
  /* alleen het uitverkochte boek wordt iets doffer; Vriendschap blijft helder */
  .zone[data-soldout]:hover .book__cover { filter: brightness(.9); }
}

/* ---------- regel onderin: zelfde letter en hoogte als hinzegroup.com ---------- */
.foot {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--foot);
  display: flex; justify-content: center; pointer-events: none;
}
.foot a {
  pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .6em;
  padding: 4px 8px; line-height: 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; word-spacing: -.15em; text-transform: uppercase;
  color: var(--ink-soft); transition: color .3s;
}
.foot__parent { border-bottom: 1px solid transparent; transition: border-color .3s; }
.foot a:hover { color: var(--ink); }
.foot a:hover .foot__parent { border-color: currentColor; }

/* ---------- 404: één melding in het midden ---------- */
.split--single { grid-template-columns: 1fr; place-items: center; padding: var(--top) var(--gutter) var(--bottom); }
.split--single::after { display: none; }
.lost { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.lost__title { font-size: clamp(22px, 3vw, 36px); font-weight: 600; font-stretch: 80%; line-height: 1.15; letter-spacing: .14em; text-transform: uppercase; max-width: 18ch; }
.lost__link { font-size: 14px; border-bottom: 1px solid rgba(27, 33, 48, .3); padding-bottom: 3px; }
.lost__link:hover .arrow { transform: translateX(4px); }

/* ---------- binnenkomst ---------- */
/* De boeken wachten tot beide covers geladen zijn (js/site.js zet dan "is-ready"),
   en komen daarna precies tegelijk omhoog. Met "translate" en niet "transform":
   zo botst het nooit met het omhoogkomen bij aanwijzen. */
.js .book, .js .caption { opacity: 0; }
.js.is-ready .book { opacity: 1; animation: rise 1.2s var(--ease) both; }
.js.is-ready .caption { opacity: 1; animation: fade 1.2s ease .35s both; }
.js .lines { animation: fade-lines 2.4s ease .2s both; }
.js .foot { animation: fade 1.2s ease .45s both; }
@keyframes rise { from { opacity: 0; translate: 0 22px; } }
@keyframes fade-lines { from { opacity: 0; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- telefoon: de boeken onder elkaar, Vriendschap boven ---------- */
@media (max-width: 599px) {
  :root {
    --book-w: min(74vw, 340px); --lines: .16;
    /* kortere schaduw: anders wordt hij aan de onderkant van het blok afgesneden */
    --shadow: 0 1px 1px rgba(20, 24, 36, .1), 0 3px 6px rgba(20, 24, 36, .09), 0 12px 22px -4px rgba(20, 24, 36, .18), 0 28px 44px -14px rgba(20, 24, 36, .3);
    --shadow-up: 0 1px 1px rgba(20, 24, 36, .1), 0 4px 8px rgba(20, 24, 36, .09), 0 16px 28px -6px rgba(20, 24, 36, .2), 0 34px 52px -16px rgba(20, 24, 36, .32);
  }
  .split { grid-template-columns: 1fr; }
  .half--ibiza, .half--vriendschap { grid-column: 1; grid-row: auto; }
  .half { padding: 52px 20px; }          /* boven en onder gelijk: boek + tekst in het midden van elk blok */
  .zone { --pad-x: 18px; --pad-y: 18px; gap: 22px; }
  .lines { object-position: 50% 40%; }
  /* de naad wordt een liggende haarlijn tussen de twee boeken */
  .split::after { display: none; }
  .half--ibiza::before {
    content: ''; position: absolute; z-index: 2; top: 0; left: 18%; right: 18%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--hair), transparent);
  }
  .caption__title { font-size: 13px; }
  .caption__meta { font-size: 13px; }
  .flag { font-size: 13px; }
  .foot { position: static; grid-column: 1; padding: 6px 20px 26px; background: var(--paper), var(--paper-left); }
  .foot a { flex-direction: column; align-items: center; gap: 2px; font-size: 11px; }
}
/* laag scherm (telefoon dwars): mag scrollen, boeken iets kleiner */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --top: 28px; --bottom: 60px; --book-h: 300px; }
}

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