@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garant:ital,wght@0,300;0,400;1,300&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #f5f4f0;
  font-family: 'Cormorant Garant', 'Palatino Linotype', serif;
  font-weight: 300;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* ===== KLOK SCHERM ===== */
#klok-scherm {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f5f4f0;
  z-index: 10;
  transition: opacity 1s ease;
}
#klok-scherm.fade-out { opacity: 0; pointer-events: none; }

#countdown { display: none; }

.klok-container {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px;
}

.klok-blok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.land-naam {
  font-size: 0.75rem;
  color: rgba(20,20,20,0.45);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-weight: 300;
}

.digitaal {
  font-size: 2.4rem;
  color: rgba(20,20,20,0.82);
  letter-spacing: 0.12em;
  font-weight: 300;
}

.klok-datum {
  font-size: 0.68rem;
  color: rgba(20,20,20,0.25);
  letter-spacing: 0.16em;
  font-weight: 300;
  text-transform: uppercase;
}

/* ===== SLIDESHOW SCHERM ===== */
#slideshow-scherm {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  background: #f5f4f0;
}
#slideshow-scherm.zichtbaar {
  opacity: 1;
  pointer-events: all;
}

#foto-gebied {
  position: absolute;
  inset: 0;
}

/* Slide */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf9f7;
  overflow: hidden;
  will-change: transform, opacity;
  padding: 28px 36px; /* altijd ruimte rondom de foto */
}
.slide.actief { opacity: 1; }

/* Swipe cleanup: voorkom opacity-flicker bij loslaten (desktop + mobiel) */
#foto-gebied.swiping .slide { transition: none !important; }

/* Desktop: zoom-cursor op de slideshow (mobiel/touch: geen cursor-stijl) */
@media (hover: hover) and (pointer: fine) {
  #foto-gebied { cursor: zoom-in; }
}

/* Laag 1 — foto: eerst organisch vervormd, dan geblurd + donker gemaakt. */
.slide-bg {
  position: absolute;
  inset: -50px;
  background-size: cover;
  background-position: center;
  filter: blur(55px) brightness(3.8) saturate(0.04);
  opacity: 0.35;
  z-index: 0;
}

/* Laag 2 — golflijnen (uitgeschakeld voor licht thema) */
.slide-wave {
  display: none;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='320'><path d='M-200 160 C-80 120 80 200 200 160 C320 120 480 200 600 160 C720 120 880 200 1000 160 C1120 120 1280 200 1400 160' stroke='white' stroke-opacity='0.14' stroke-width='1.6' fill='none'/><path d='M-200 185 C-80 145 80 225 200 185 C320 145 480 225 600 185 C720 145 880 225 1000 185 C1120 145 1280 225 1400 185' stroke='white' stroke-opacity='0.07' stroke-width='1.1' fill='none'/><path d='M-200 135 C-80 95 80 175 200 135 C320 95 480 175 600 135 C720 95 880 175 1000 135 C1120 95 1280 175 1400 135' stroke='white' stroke-opacity='0.07' stroke-width='1.1' fill='none'/><path d='M-200 210 C-80 170 80 250 200 210 C320 170 480 250 600 210 C720 170 880 250 1000 210 C1120 170 1280 250 1400 210' stroke='white' stroke-opacity='0.04' stroke-width='0.7' fill='none'/><path d='M-200 110 C-80 70 80 150 200 110 C320 70 480 150 600 110 C720 70 880 150 1000 110 C1120 70 1280 150 1400 110' stroke='white' stroke-opacity='0.04' stroke-width='0.7' fill='none'/><path d='M-200 235 C-80 195 80 275 200 235 C320 195 480 275 600 235 C720 195 880 275 1000 235 C1120 195 1280 275 1400 235' stroke='white' stroke-opacity='0.02' stroke-width='0.5' fill='none'/><path d='M-200 85 C-80 45 80 125 200 85 C320 45 480 125 600 85 C720 45 880 125 1000 85 C1120 45 1280 125 1400 85' stroke='white' stroke-opacity='0.02' stroke-width='0.5' fill='none'/></svg>");
  background-size: 900px 320px;
  background-repeat: repeat;
}

.slide img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  will-change: transform;
}

.placeholder-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  color: rgba(20,20,20,0.35);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-align: center;
}
.placeholder-slide .placeholder-icon { font-size: 3rem; opacity: 0.25; }

/* Navigatie pijlen */
.pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  background: rgba(0,0,0,0.07);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: background 0.25s;
}
.pijl:hover { background: rgba(0,0,0,0.1); }

/* Verberg pijltjes wanneer album-menu actief is */
#foto-gebied.toont-menu .pijl { display: none !important; }

/* Progress-ring SVG rondom de pijlknoppen */
.progress-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  pointer-events: none;
  overflow: visible;
}

.pijl .chevron {
  width: 19px; height: 19px;
  stroke: rgba(20,20,20,0.45);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.25s;
  position: relative;
  z-index: 1;
}
.pijl:hover .chevron { stroke: rgba(20,20,20,0.82); }
#pijl-links  { left: 20px; }
#pijl-rechts { right: 20px; }

/* ===== GRID SCHERM — landen-navigator ===== */
#grid-scherm {
  position: fixed;
  inset: 0;
  background: #f2f1ee;
  z-index: 8;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  scrollbar-width: none;
}
#grid-scherm::-webkit-scrollbar { display: none; }
#grid-scherm.zichtbaar { opacity: 1; pointer-events: all; }

#grid-kolom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2fr 1fr;   /* top 2/3 portret, onder 1/3 landschap */
  gap: 6px;
  background: #dedad4;
  height: 100vh;                  /* precies één scherm */
}

.grid-kaart {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #e4e3de;
}

/* Derde kaart (India) over volledige breedte */
.grid-kaart:nth-child(3) { grid-column: 1 / -1; }

.grid-kaart-foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity  0.55s ease;
}
.grid-kaart:hover .grid-kaart-foto { transform: scale(1.04); }

.grid-kaart-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 70px 16px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: rgba(255,255,255,0.9);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ===== TERUG KNOP ===== */
#terug-knop {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 10;
  background: rgba(0,0,0,0.07);
  border: none;
  border-radius: 50%;
  width: 44px; height: 44px;
  color: rgba(20,20,20,0.65);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.2s ease, color 0.2s ease;
  pointer-events: none;
}
#slideshow-scherm:hover #terug-knop { opacity: 1; pointer-events: all; }
#terug-knop:hover { background: rgba(0,0,0,0.1); color: rgba(20,20,20,0.9); }

/* ===== TITEL ===== */
#klok-titel {
  font-size: 0.6rem;
  letter-spacing: 0.55em;
  color: rgba(20,20,20,0.2);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 28px;
  user-select: none;
}

/* ===== KLOK INFO WRAPPER =====
   display:contents = kinderen gedragen zich als directe flex-items van klok-blok. */
.klok-info { display: contents; }
.land-naam  { order: -1; }
.digitaal   { order:  1; }
.klok-datum { order:  2; }

/* ===== MOBIEL ===== */
@media (max-width: 640px) {
  /* Klok-scherm: verticale kolom met klokken */
  .klok-container {
    flex-direction: column;
    gap: 22px;
    padding: 0 28px;
    align-items: stretch;
    width: 100%;
    max-width: 380px;
  }
  /* Elke klok: horizontale rij  [analoog | naam + tijd + datum] */
  .klok-blok {
    flex-direction: row;
    gap: 20px;
    align-items: center;
  }
  .klok-blok canvas {
    width: 80px !important;
    height: 80px !important;
    flex-shrink: 0;
    order: 0;
  }
  /* Klok-info zichtbaar als kolom op mobiel */
  .klok-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
  }
  .land-naam  { font-size: 0.65rem; letter-spacing: 0.22em; order: 0; }
  .digitaal   { font-size: 1.35rem; order: 0; }
  .klok-datum { font-size: 0.6rem;  letter-spacing: 0.04em; order: 0; }

  /* Slideshow: pijlen verbergen op mobiel (gebruik swipe) */
  .pijl { display: none; }

  /* 7. Strakke uitlijning slideshow */
  .slide { padding: 6px 8px; }

  /* 3. Custom pinch-to-zoom via JS (touch-action: none) */
  #foto-gebied { touch-action: none; }
  /* Album-menu: verticaal scrollen toestaan */
  #foto-gebied.toont-menu { touch-action: pan-y; }

  /* ── Album menu: twee-per-view scroll-kolom op mobiel ── */
  #album-menu {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, calc(50vh - 5px));
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    background: #f2f1ee;
    touch-action: pan-y;
  }
  #album-menu::-webkit-scrollbar { display: none; }

  /* Snap alleen op oneven kaarten (1 + 3) → 2 per view */
  .alb-wrap             { scroll-snap-align: none; perspective: none;
                          transform: translateY(28px); }
  .alb-wrap:nth-child(odd) { scroll-snap-align: start; }
  /* Inkomende animatie: omhoog i.p.v. inzoomen */
  .alb-wrap.in          { transform: translateY(0) !important; }

  /* Geen 3D flip op mobiel */
  .alb-kaart            { transform-style: flat !important; }
  .alb-kaart.flip       { transform: none !important; transition: none !important; }
  .alb-achter           { display: none !important; }

  /* 2. Foto-achtergrond sterker zichtbaar (ook 3e/4e kaart) */
  .alb-voor-bg          { filter: blur(10px) brightness(2.0) saturate(0.15) !important;
                          transition: opacity 0.3s ease !important; }
  .alb-voor-bg.in       { opacity: 0.35 !important; }

  /* Actief-feedback op aanraken */
  .alb-wrap:active .alb-voor { background: #d8d7d1 !important; }

  /* Typografie */
  .alb-voor             { gap: 14px; }
  .alb-titel            { font-size: clamp(0.6rem, 3.8vw, 1.25rem) !important;
                          letter-spacing: 0.13em !important;
                          line-height: 1.5 !important; }
  .alb-nr               { font-size: 0.62rem !important; letter-spacing: 0.42em; }

  /* 6. Terug-knop verbergen op mobiel (browser back i.p.v.) */
  #terug-knop { display: none !important; }


  /* 1. Grid: exact schermvullend, alle 3 landen zichtbaar */
  /* height: 100% van parent (#grid-scherm = fixed inset:0) is betrouwbaarder dan 100vh op mobiel */
  #grid-kolom { height: 100%; grid-template-rows: 3fr 2fr; }
  .grid-kaart-label { font-size: 0.52rem; padding: 30px 10px 12px; }

}

/* ===== ALBUM MENU ===== */
#album-menu {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: #dedad4;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#album-menu.zichtbaar { opacity: 1; pointer-events: all; }

/* Perspective wrapper per kaart */
.alb-wrap {
  perspective: 1400px;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.93);
}
.alb-wrap.in {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* De kaart zelf (flipbaar) */
.alb-kaart {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.alb-kaart.flip { transform: rotateY(180deg); }

/* Gedeelde stijlen voor voor- en achterkant */
.alb-voor, .alb-achter {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* Voorkant */
.alb-voor {
  background: #f0efeb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 18px;
  transition: background 0.3s ease;
}
.alb-wrap:hover .alb-voor { background: #e8e7e2; }

/* Geblurde foto achter de titel (laadt async in) */
.alb-voor-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  filter: blur(30px) brightness(3.2) saturate(0.05);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.alb-voor-bg.in { opacity: 0.25; }

/* <img> vult de bg-div als cover */
.alb-voor-bg-img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  object-fit: cover;
  pointer-events: none;
}

.alb-nr { display: none; }
.alb-titel {
  position: relative;
  font-size: clamp(1.5rem, 4.5vw, 3rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20,20,20,0.85);
  text-align: center;
  line-height: 1.35;
  font-weight: 400;
}

/* Achterkant */
.alb-achter {
  transform: rotateY(180deg);
  background: #f0efeb;
}
.alb-pile {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.alb-pile-img {
  position: absolute;
  width: 76%;
  aspect-ratio: 3/2;
  object-fit: cover;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8);
}

/* Scherm-vullende uitbrei-overlay (na flip) */
#alb-overlay {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  background: #f0efeb;
  overflow: hidden;
  opacity: 0;
  width: 0; height: 0;
}

/* ===== ZOOM OVERLAY (desktop klik-zoom + pan) ===== */
#zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: #f5f4f0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  cursor: grab;
}
#zoom-overlay.actief  { opacity: 1; pointer-events: all; }
#zoom-overlay.sleept  { cursor: grabbing; }

/* Afbeelding: positie en grootte volledig via JS */
#zoom-overlay > img {
  position: absolute;
  max-width: none;
  max-height: none;
  user-select: none;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Hover-zones links/rechts — verborgen (zoom heeft geen foto-navigatie) */
.zoom-zone { display: none; }

/* Terug-knop (←) linksboven, verschijnt bij hover */
#zoom-sluit {
  position: absolute;
  top: 18px; left: 18px;
  z-index: 3;
  background: rgba(245,244,240,0.82);
  border: none;
  border-radius: 50%;
  width: 44px; height: 44px;
  color: rgba(20,20,20,0.65);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease, background 0.2s ease;
}
#zoom-overlay:hover #zoom-sluit { opacity: 1; }
#zoom-sluit:hover { background: rgba(245,244,240,0.96); color: rgba(20,20,20,0.9); }

/* ── Touch-apparaten ── */
@media (hover: none), (pointer: coarse) {
  #zoom-overlay { display: none !important; }

  /* 6. Terug-knop verbergen op touch (browser back i.p.v.) */
  #terug-knop { display: none !important; }

  /* Snelle tap: verwijder 300ms vertraging op klikbare kaarten */
  .grid-kaart,
  .alb-wrap { touch-action: manipulation; }
}

/* ── Slide-voortgangsbalk (mobiel) ── */
#slide-voortgang {
  display: none;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(20,20,20,0.08);
  z-index: 6;
  pointer-events: none;
}
#slide-voortgang-vul {
  height: 100%;
  width: 0%;
  background: rgba(20,20,20,0.28);
  transition: width 0.5s ease;
}
@media (hover: none), (pointer: coarse) {
  #slide-voortgang { display: block; }
  #foto-gebied.toont-menu #slide-voortgang { display: none; }
}