:root{
  --album:#211914;        /* donker albumkarton */
  --album-diep:#17110d;
  --inkt:#f0e6d2;         /* ivoorwitte inkt */
  --inkt-zacht:rgba(240,230,210,.55);
  --gilt:#d9a441;         /* goudopdruk */
  --leer:#2b1d12;         /* albumkaft */
  --print:#f6efe1;        /* fotopapier */
  --hoekje:#e3d5b8;       /* fotohoekjes */
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --hand:"Caveat", "Segoe Script", cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  /* effen kleur zorgt dat iOS de statusbalk/safe-area óók donker tint */
  background-color:var(--album);
  background-image:
    radial-gradient(120% 85% at 50% -5%, #2c2016 0%, var(--album) 52%, var(--album-diep) 100%);
  color:var(--inkt);
  font-family:var(--serif);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
}
body.dicht{overflow:hidden;height:100vh;height:100dvh}
/* warme lamp boven het album + ingebonden vignet (gebonden fotoboek-gevoel) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(217,164,65,.11), transparent 60%),
    radial-gradient(140% 118% at 50% 50%, transparent 52%, rgba(0,0,0,.58) 100%);
  box-shadow:inset 0 0 0 1px rgba(217,164,65,.10), inset 0 0 130px rgba(0,0,0,.5);
}
/* leerkorrel: een fijne papierkorrel + een grovere leer-mottling, samen geeft
   dat een gebonden-fotoboek-gevoel */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.09;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.11' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size:150px 150px, 340px 340px;
}

/* ---------- de albumkaft (draait open als een echt album) ---------- */
#kaft-scene{
  position:fixed;inset:0;z-index:50;
  perspective:1700px;perspective-origin:32% center;
}
#kaft{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(140% 100% at 30% 20%, rgba(217,164,65,.10), transparent 55%),
    radial-gradient(120% 120% at 80% 90%, rgba(0,0,0,.55), transparent 60%),
    var(--leer);
  transform-origin:left center;
  backface-visibility:hidden;
  box-shadow:inset 0 0 130px rgba(0,0,0,.45);
  transition:transform 2.1s cubic-bezier(.5,.02,.28,1);
}
/* de rug van het album (scharnier, links) */
#kaft::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:16px;
  background:linear-gradient(90deg, rgba(0,0,0,.6), rgba(217,164,65,.18) 55%, transparent);
}
#kaft.open{transform:rotateY(-120deg);pointer-events:none}
.kaft-binnen{
  width:min(86vw,420px);
  padding:clamp(2.5rem,8vw,4rem) clamp(1.5rem,6vw,3rem);
  text-align:center;
  border:1px solid rgba(217,164,65,.65);
  outline:1px solid rgba(217,164,65,.3);
  outline-offset:6px;
}
.kaft-jaartal{
  font-size:.8rem;letter-spacing:.45em;text-transform:uppercase;
  color:var(--gilt);margin-bottom:1.6rem;
}
.kaft-titel{
  font-size:clamp(2.6rem,11vw,4rem);
  font-weight:300;letter-spacing:.04em;line-height:1.1;
  color:var(--gilt);
  text-shadow:0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,235,190,.15);
}
.kaft-sub{
  font-family:var(--hand);font-size:1.5rem;color:var(--inkt-zacht);
  margin-top:1rem;
}
#openKnop{
  margin-top:2.4rem;
  font-family:var(--serif);font-size:1rem;letter-spacing:.12em;
  color:var(--gilt);background:transparent;
  border:1px solid var(--gilt);border-radius:2px;
  padding:.85rem 1.8rem;cursor:pointer;
  transition:background .3s, color .3s;
}
#openKnop:hover, #openKnop:focus-visible{background:var(--gilt);color:var(--leer)}
#openKnop:focus-visible{outline:2px solid var(--inkt);outline-offset:3px}
.kaft-hint{margin-top:1.2rem;font-size:.85rem;color:var(--inkt-zacht)}

/* ---------- albumpagina's ---------- */
main{position:relative;z-index:2;max-width:620px;margin:0 auto;padding:0 clamp(1.2rem,5vw,2rem)}
section{padding:clamp(4rem,12vh,7rem) 0}

.intro{min-height:92vh;min-height:92dvh;display:flex;flex-direction:column;justify-content:center}
.intro h1{font-family:var(--hand);font-weight:400;font-size:clamp(2.4rem,9vw,3.4rem);color:var(--inkt)}
.intro p{margin-top:1.4rem;font-size:1.1rem;color:var(--inkt-zacht);font-style:italic;max-width:32ch}
.scrollhint{margin-top:3.5rem;font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;color:var(--inkt-zacht)}
.scrollhint span{display:inline-block;animation:wieg 2.2s ease-in-out infinite}
@keyframes wieg{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

.jaartal{
  font-family:var(--hand);font-weight:400;
  font-size:clamp(3rem,11vw,5rem);
  color:var(--inkt-zacht);line-height:1.05;
  overflow-wrap:break-word;
}
.hoofdstuk h2{
  font-weight:400;font-style:italic;
  font-size:clamp(1.5rem,6vw,2rem);
  color:var(--gilt);margin-top:.4rem;
}
.hoofdstuk .tekst{margin-top:1.1rem;color:var(--inkt-zacht);max-width:42ch}
.gilt-lijn{width:0;height:1px;background:var(--gilt);opacity:.6;margin:1.6rem 0 2.4rem;transition:width .8s ease .2s, opacity .9s ease}
.gilt-lijn.zichtbaar{width:52px}
/* rustige cascade bij het openen van een hoofdstuk */
.hoofdstuk h2.onthul{transition-delay:.1s}
.hoofdstuk .gilt-lijn.onthul{transition-delay:.2s}
.hoofdstuk > .tekst.onthul{transition-delay:.28s}

/* ---------- foto's met fotohoekjes ---------- */
.foto{
  position:relative;
  background:var(--print);
  padding:12px 12px 14px;
  width:min(100%,440px);
  margin:2.8rem auto 0;
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}
.foto.links{transform:rotate(-1.6deg);margin-left:0}
.foto.rechts{transform:rotate(1.4deg);margin-right:0}
.foto{transition:transform .18s ease, box-shadow .18s ease}
/* Op desktop (muis): de foto groeit fors én rechtop zolang de muis erop staat,
   en klapt snel terug bij weggaan. Op telefoon/tablet bestaat hover niet — daar
   blijft de tik-lightbox (zie album.js). Specificiteit ≥ de reveal-regels. */
@media (hover: hover) and (pointer: fine){
  .foto img{cursor:default}
  .foto.onthul.zichtbaar:hover,
  .foto.links.onthul.zichtbaar:hover,
  .foto.rechts.onthul.zichtbaar:hover{
    transform:rotate(0deg) scale(1.9);
    box-shadow:0 40px 90px rgba(0,0,0,.7);
    z-index:25;
    transition:transform 1.5s cubic-bezier(.25,.46,.45,.94), box-shadow 1.5s ease;
  }
}
.foto.staand{width:min(78%,330px)}
.foto img{display:block;width:100%;height:auto}
.hoek{position:absolute;width:36px;height:36px;background:var(--hoekje);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));z-index:2}
.hoek.h1{top:-7px;left:-7px;clip-path:polygon(0 0,100% 0,0 100%)}
.hoek.h2{top:-7px;right:-7px;clip-path:polygon(0 0,100% 0,100% 100%)}
.hoek.h3{bottom:-7px;left:-7px;clip-path:polygon(0 0,0 100%,100% 100%)}
.hoek.h4{bottom:-7px;right:-7px;clip-path:polygon(100% 0,0 100%,100% 100%)}
.plek{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  border:2px dashed rgba(90,70,45,.4);
  background:linear-gradient(150deg,#d8cbb2,#bcab8d 55%,#cbbb9e);
  color:#5d4a33;text-align:center;padding:1rem;
}
.plek .cam{font-size:1.9rem;opacity:.75}
.plek p{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.liggend{aspect-ratio:4/3}
.portret{aspect-ratio:4/5}
.bijschrift{
  font-family:var(--hand);font-size:clamp(1.25rem,4.5vw,1.5rem);
  color:var(--inkt);text-align:center;margin-top:1rem;
  overflow-wrap:break-word;
}
.foto.links + .bijschrift{text-align:left;padding-left:.35em}
.foto.rechts + .bijschrift{text-align:right;padding-right:.35em}

/* ---------- de lege foto: onze nieuwe herinnering (het cadeau) ---------- */
.nieuwe-herinnering{text-align:center}
.nieuwe-herinnering h2{font-weight:400;font-style:italic;font-size:clamp(1.5rem,6vw,2rem);color:var(--gilt)}
.nieuwe-herinnering .tekst{margin:1.1rem auto 0;color:var(--inkt-zacht);max-width:42ch}
.plek.nieuw{
  background:linear-gradient(150deg,#efe6d1,#e2d4b6 55%,#efe6d1);
  border-color:rgba(217,164,65,.7);
  color:#6b5327;
}
.plek.nieuw .cam{opacity:.9}
.plek.nieuw p{font-family:var(--hand);font-size:1.15rem;letter-spacing:.02em;text-transform:none;line-height:1.4}

/* ---------- ingeplakte briefjes ---------- */
.briefjes h2{font-weight:400;font-style:italic;font-size:clamp(1.5rem,6vw,2rem);color:var(--gilt)}
.briefjes .tekst{margin-top:1rem;color:var(--inkt-zacht)}
.briefje{
  color:#3a2f22;
  padding:1.4rem 1.5rem 1.2rem;
  margin:2.4rem auto 0;
  width:min(100%,430px);
  box-shadow:0 10px 26px rgba(0,0,0,.4);
  background-image:repeating-linear-gradient(transparent, transparent 1.9rem, rgba(120,95,60,.18) 1.9rem, rgba(120,95,60,.18) calc(1.9rem + 1px));
  background-color:#f4ecdb;
}
.briefje:nth-child(odd){transform:rotate(1.2deg)}
.briefje:nth-child(even){transform:rotate(-1.4deg)}
.briefje p{font-family:var(--hand);font-size:1.45rem;line-height:1.9rem}
.briefje .van{display:block;margin-top:.6rem;font-family:var(--hand);font-size:1.2rem;color:#7a5c36;text-align:right}
.plakstrip{
  display:block;width:90px;height:26px;margin:0 auto;
  background:rgba(240,230,205,.28);
  transform:translateY(13px) rotate(-2deg);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}

/* ---------- finale ---------- */
.finale{min-height:90vh;min-height:90dvh;display:flex;flex-direction:column;justify-content:center;text-align:center}
.finale .hoera{font-family:var(--hand);font-weight:600;font-size:clamp(2.8rem,12vw,5rem);color:var(--gilt);line-height:1.1;overflow-wrap:break-word}
.finale h2{font-weight:300;font-style:italic;font-size:clamp(1.4rem,5.5vw,1.9rem);margin-top:1.4rem}
.finale .van-ons{margin-top:2.2rem;font-family:var(--hand);font-size:1.5rem;color:var(--inkt-zacht)}
.finale .hart{font-size:1.6rem;margin-top:1.2rem}
#meerConfetti{
  display:none;margin:2.2rem auto 0;
  font-family:var(--serif);font-size:1rem;letter-spacing:.08em;
  color:var(--gilt);background:transparent;
  border:1px solid var(--gilt);border-radius:2px;
  padding:.7rem 1.5rem;cursor:pointer;
  transition:background .3s, color .3s;
}
#meerConfetti.zichtbaar{display:inline-block;animation:opkomen .6s ease}
#meerConfetti:hover, #meerConfetti:focus-visible{background:var(--gilt);color:var(--leer)}
#meerConfetti:focus-visible{outline:2px solid var(--inkt);outline-offset:3px}
@keyframes opkomen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- onthullen bij scrollen ---------- */
.onthul{opacity:0;transform:translateY(26px);transition:opacity .9s ease, transform .9s ease}
.onthul.zichtbaar{opacity:1;transform:none}
.foto.onthul{transform:translateY(26px)}
.foto.links.onthul{transform:translateY(26px) rotate(-1.6deg)}
.foto.rechts.onthul{transform:translateY(26px) rotate(1.4deg)}
.foto.onthul.zichtbaar{transform:none}
.foto.links.onthul.zichtbaar{transform:rotate(-1.6deg)}
.foto.rechts.onthul.zichtbaar{transform:rotate(1.4deg)}

/* ---------- muziekknop en confetti ---------- */
#muziekKnop{
  position:fixed;right:1rem;bottom:1rem;z-index:40;
  width:52px;height:52px;border-radius:50%;
  background:var(--album-diep);border:1px solid rgba(217,164,65,.6);
  color:var(--gilt);font-size:1.25rem;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .5s;
}
#muziekKnop.aan{opacity:1;pointer-events:auto}
#muziekKnop:focus-visible{outline:2px solid var(--inkt);outline-offset:3px}
/* Op telefoon/tablet geen dempknop in beeld: geluid regel je met de
   volumeknop van het toestel. */
@media (hover: none) and (pointer: coarse){
  #muziekKnop{display:none !important}
}
#confetti{position:fixed;inset:0;z-index:30;pointer-events:none;display:none}

/* ---------- foto groot bekijken (lightbox) ---------- */
.foto img{cursor:zoom-in}
#lightbox{
  position:fixed;inset:0;z-index:60;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  background:rgba(20,15,10,.82);padding:6vw 5vw;cursor:zoom-out;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:opacity .45s ease, visibility .45s;
}
#lightbox.open{opacity:1;visibility:visible}
#lightbox img{max-width:92vw;max-height:78vh;background:var(--print);
  border:6px solid var(--print);box-shadow:0 22px 60px rgba(0,0,0,.6);will-change:transform}
#lightbox p{font-family:var(--hand);color:var(--inkt);font-size:1.4rem;text-align:center;margin:0}

footer{padding:0 0 4rem;text-align:center;font-family:var(--hand);font-size:1.2rem;color:var(--inkt-zacht)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .onthul{opacity:1;transform:none;transition:none}
  .foto.links.onthul,.foto.links.onthul.zichtbaar{transform:rotate(-1.6deg)}
  .foto.rechts.onthul,.foto.rechts.onthul.zichtbaar{transform:rotate(1.4deg)}
  .scrollhint span{animation:none}
  .gilt-lijn,.gilt-lijn.zichtbaar{width:52px;transition:none}
  .hoofdstuk h2.onthul,.hoofdstuk .gilt-lijn.onthul,.hoofdstuk > .tekst.onthul{transition-delay:0s}
  #lightbox.open{animation:none}
  #lightbox.open img{animation:none}
  .foto{transition:none}
  .foto.onthul.zichtbaar:hover,
  .foto.links.onthul.zichtbaar:hover,
  .foto.rechts.onthul.zichtbaar:hover{transition:none}
  #kaft{transition:opacity .5s ease}
  #kaft.open{transform:none;opacity:0}
}