/* ============================================================
   Barbershop Varsseveld – vormgeving
   Kleuren en letters staan bovenaan, de rest volgt daaruit.
   ============================================================ */

@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --zwart: #111111;
  --wit: #FFFFFF;
  --rood: #C62B2E;
  --rood-licht: #E2595B;
  --blauw: #2B4C9B;
  --grijs-licht: #F7F7F7;
  --grijs: #EDEDED;
  --lijn: #E3E3E3;
  --tekst-zacht: #4A4A4A;
  --tekst-grijs: #6E6E6E;
  --tekst-op-zwart: #BDBDBD;
  --groen: #2E9E6A;
  --kop: "Anton", "Arial Narrow", Arial, sans-serif;
  --tekst: "Montserrat", Arial, sans-serif;
  --breed: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grijs-licht); color: var(--zwart); font-family: var(--tekst); font-size: 18px; line-height: 1.6; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: var(--rood); }
a:hover { color: var(--zwart); }
p, h1, h2, dl, dd, dt { margin: 0; }
:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 24px; }
.kop { font-family: var(--kop); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.98; }
.kop-groot { font-size: clamp(48px, 7vw, 96px); line-height: 0.92; }
.rood { color: var(--rood); }
.wit { color: var(--wit); font-weight: 600; }
.midden { text-align: center; }
.klein { font-size: 16px; color: var(--tekst-zacht); }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 17px; text-decoration: none; }
.knop-zwart { background: var(--zwart); color: var(--wit); }
.knop-zwart:hover { background: #333; color: var(--wit); }
.knop-licht { background: var(--grijs); color: var(--zwart); }
.knop-licht:hover { background: #E0E0E0; color: var(--zwart); }

/* ---------- Mededeling ---------- */
.mededeling { background: var(--rood); color: var(--wit); text-align: center; padding: 10px 20px; font-size: 16px; font-weight: 600; line-height: 1.4; }

/* ---------- Barberpaal (groeit mee met scrollen) ---------- */
.paalbalk { position: sticky; top: 0; z-index: 30; background: var(--zwart); padding: 5px 0; }
.paal { position: relative; height: 20px; width: 0; min-width: 34px; }
.paal-strepen { position: absolute; left: 10px; right: 10px; top: 2px; bottom: 2px; border-top: 1.5px solid var(--wit); border-bottom: 1.5px solid var(--wit);
  background: repeating-linear-gradient(135deg, var(--rood) 0 20px, var(--wit) 20px 40px, var(--blauw) 40px 60px, var(--wit) 60px 80px);
  animation: paal 6s linear infinite; }
.paal-kap { position: absolute; top: 0; width: 10px; height: 20px; background: var(--wit); }
.paal-kap-l { left: 0; border-radius: 7px 2px 2px 7px; }
.paal-kap-r { right: 0; border-radius: 2px 7px 7px 2px; }
@keyframes paal { from { background-position: 0 0; } to { background-position: 113.137px 0; } }

/* ---------- Header ---------- */
.hero { background: var(--zwart); color: var(--wit); }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 28px; }
.logo img { height: 56px; width: auto; }
.status { display: inline-flex; align-items: center; gap: 10px; background: #1E1E1E; border: 1.5px solid #3A3A3A; border-radius: 999px; padding: 8px 16px 8px 12px; font-weight: 600; font-size: 16px; }
.status-stip { width: 12px; height: 12px; border-radius: 50%; background: var(--tekst-grijs); flex-shrink: 0; }
.status.is-open .status-stip { background: var(--groen); }
.status.is-dicht .status-stip { background: var(--rood); }
.hero-inhoud { display: flex; flex-wrap: wrap; align-items: center; gap: 48px 64px; padding-top: 56px; padding-bottom: 72px; }
.hero-tekst { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero-tekst h1 { font-size: clamp(50px, 7.2vw, 112px); max-width: 820px; }
.hero-tekst p { font-size: 19px; color: var(--tekst-op-zwart); max-width: 440px; }
.spiegel { flex: 0 1 400px; max-width: 400px; aspect-ratio: 3 / 4; border-radius: 999px 999px 28px 28px; border: 10px solid var(--wit); overflow: hidden; background: var(--grijs); }
.spiegel svg { width: 100%; height: 100%; }

/* ---------- Bewegende band ---------- */
.band { background: var(--rood); color: var(--wit); padding: 22px 0; overflow: hidden; }
.band-rij { display: flex; gap: 40px; width: max-content; align-items: center; white-space: nowrap; animation: band 28s linear infinite; }
.band-rij span.kop { font-size: 52px; line-height: 1; letter-spacing: 0.04em; }
.band-stip { width: 14px; height: 14px; border-radius: 50%; background: var(--wit); flex-shrink: 0; }
@keyframes band { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Binnenlopen ---------- */
.inloop { padding: 110px 0 90px; }
.inloop-inhoud { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; max-width: 1100px; }
.ticket { flex: 0 0 auto; width: 340px; max-width: 100%; margin: 0 auto; background: var(--wit); border-radius: 18px; box-shadow: 0 18px 44px rgba(0,0,0,.14); transform: rotate(-4deg); }
.ticket-boven { padding: 28px 30px 22px; }
.ticket-label { font-size: 14px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tekst-grijs); }
.ticket-nr { font-family: var(--kop); font-size: 150px; line-height: .85; color: var(--rood); }
.ticket-scheur { border-top: 3px dashed var(--lijn); margin: 0 18px; }
.ticket-onder { padding: 20px 30px 26px; font-size: 15px; color: var(--tekst-zacht); }
.ticket-naam { font-family: var(--kop); font-size: 30px; letter-spacing: .06em; line-height: 1; text-transform: uppercase; color: var(--zwart); }
.inloop-tekst { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.inloop-tekst p { color: var(--tekst-zacht); max-width: 520px; }

/* ---------- Reviews ---------- */
.reviews { padding: 110px 0 90px; }
.reviews .wrap { display: flex; flex-direction: column; gap: 44px; }
.score { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.score-cijfer { font-size: clamp(120px, 16vw, 220px); line-height: .8; }
.sterren { color: var(--rood); font-size: 30px; letter-spacing: 5px; }
.score-tekst { font-weight: 700; font-size: 22px; }
.review-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.review { border-radius: 6px; padding: 30px 28px; box-shadow: 0 14px 30px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 14px; background: var(--wit); }
.review:nth-child(1) { transform: rotate(-2deg); }
.review:nth-child(2) { transform: rotate(1.5deg); background: var(--zwart); color: var(--wit); }
.review:nth-child(3) { transform: rotate(-1deg); background: var(--grijs); }
.review-quote { font-family: var(--kop); font-size: 64px; line-height: .6; }
.review-naam { font-size: 15px; font-weight: 600; }
.reviews .midden a { color: var(--zwart); font-weight: 600; }

/* ---------- Instagram ---------- */
.insta { background: var(--wit); padding: 100px 0 120px; overflow: hidden; }
.insta-kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.polaroids { display: flex; gap: 26px; padding: 52px 40px 0; width: max-content; }
.polaroid { background: var(--wit); padding: 12px 12px 44px; box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.polaroid:nth-child(odd) { transform: rotate(-2.5deg); }
.polaroid:nth-child(even) { transform: rotate(2deg); }
.polaroid-foto { width: 220px; height: 220px; background: var(--grijs); object-fit: cover; }

/* ---------- Openingstijden ---------- */
.tijden { padding: 110px 0; }
.tijden-inhoud { display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start; max-width: 1100px; }
.bord-houder { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.bord-ketting { width: 200px; height: 70px; }
.bord { width: 380px; max-width: 100%; background: var(--zwart); color: var(--wit); border-radius: 22px; padding: 30px 34px 34px; transform: rotate(2deg); box-shadow: 0 20px 44px rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 14px; }
.bord.is-dicht { background: var(--rood); }
.bord-status { font-size: 92px; line-height: .85; text-align: center; min-height: 78px; display: flex; align-items: center; justify-content: center; }
.bord.is-dicht .bord-status { font-size: 61px; }
.bord-tijden { display: grid; grid-template-columns: 1fr auto; }
.bord-tijden dt, .bord-tijden dd { padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: 18px; color: var(--tekst-op-zwart); font-weight: 500; }
.bord.is-dicht .bord-tijden dt, .bord.is-dicht .bord-tijden dd { color: rgba(255,255,255,.75); }
.bord-tijden dd { text-align: right; }
.bord-tijden .vandaag { color: var(--wit) !important; font-weight: 800; }
.route { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding-top: 40px; }
.route > p { color: var(--tekst-zacht); }
.knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.footer { background: var(--zwart); color: var(--tekst-op-zwart); padding: 80px 0 150px; overflow: hidden; }
.footer .wrap { display: flex; flex-direction: column; gap: 40px; }
.footer-plaats { font-size: clamp(80px, 15vw, 220px); line-height: .8; color: transparent; -webkit-text-stroke: 2px #333; }
.footer-rij { display: flex; flex-wrap: wrap; gap: 32px 64px; justify-content: space-between; align-items: flex-end; }
.footer-logo { height: 110px; width: auto; }
.footer-kolommen { display: flex; gap: 48px; flex-wrap: wrap; font-size: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 4px; }
.footer-links a { color: var(--wit); }

/* ---------- Zwevende balk ---------- */
.dock { position: fixed; z-index: 50; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 6px; background: var(--wit); padding: 6px; border-radius: 999px; box-shadow: 0 12px 34px rgba(0,0,0,.25); }
.dock-boek { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--rood); color: var(--wit); font: 700 17px var(--tekst); cursor: pointer; white-space: nowrap; }
.dock-boek:hover { background: #A92326; }
.dock-boek .icoon-kruis { display: none; }
.dock-rond { width: 52px; height: 52px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.dock-licht { background: var(--grijs); color: var(--zwart); }
.dock-donker { background: var(--zwart); color: var(--wit); }
/* Boekvenster open (desktop): de balk krimpt tot een ronde sluitknop */
body.boek-open .dock { padding: 0; background: transparent; box-shadow: none; }
body.boek-open .dock .dock-rond, body.boek-open .dock .dock-boek-tekst, body.boek-open .dock .icoon-agenda { display: none; }
body.boek-open .dock-boek { width: 60px; height: 60px; padding: 0; justify-content: center; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
body.boek-open .dock-boek .icoon-kruis { display: block; }

/* ---------- Menu ---------- */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--zwart); color: var(--wit); display: flex; flex-direction: column; padding: 22px 24px 40px; overflow-y: auto; }
.menu-kop { display: flex; justify-content: space-between; align-items: center; max-width: var(--breed); width: 100%; margin: 0 auto; }
.menu-kop img { height: 44px; width: auto; }
.menu-sluit { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--wit); color: var(--zwart); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.menu-links { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; max-width: var(--breed); width: 100%; margin: 0 auto; padding: 40px 0; }
.menu-links a { font-size: clamp(52px, 9vw, 110px); line-height: 1.05; color: var(--wit); text-decoration: none; }
.menu-links a.rood { color: var(--rood-licht); }
.menu-links a:hover { color: var(--rood-licht); }

/* ---------- Boekvenster ---------- */
.boek-achtergrond { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45); }
.boekvenster { position: fixed; z-index: 45; right: 24px; bottom: 100px; width: 420px; height: min(720px, calc(100dvh - 140px)); background: var(--grijs-licht); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.boekvenster iframe { width: 100%; height: 100%; border: 0; display: block; }
.boek-sluit-mobiel { display: none; }

/* ---------- Telefoon ---------- */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .paalbalk { display: none; }
  .mededeling { font-size: 13px; padding: 8px 16px; }
  .wrap { padding: 0 20px; }
  .hero-top { padding-top: 18px; }
  .logo img { height: 40px; }
  .status { font-size: 12px; padding: 6px 11px 6px 9px; gap: 7px; }
  .status-stip { width: 9px; height: 9px; }
  .status .lang { display: none; }
  .hero-inhoud { padding-top: 22px; padding-bottom: 40px; gap: 22px; }
  .hero-tekst { gap: 22px; }
  .hero-tekst h1 { font-size: 50px; }
  .hero-tekst p { font-size: 16px; }
  .spiegel { flex-basis: auto; width: 250px; margin: 0 auto; border-width: 8px; border-radius: 999px 999px 22px 22px; }
  .band { padding: 14px 0; }
  .band-rij { gap: 22px; animation-duration: 24s; }
  .band-rij span.kop { font-size: 34px; }
  .band-stip { width: 10px; height: 10px; }
  .inloop { padding: 64px 0 56px; }
  .inloop-inhoud { gap: 32px; }
  .ticket { width: 260px; }
  .ticket-boven { padding: 20px 24px 14px; }
  .ticket-nr { font-size: 110px; }
  .ticket-onder { padding: 14px 24px 18px; font-size: 13px; }
  .ticket-naam { font-size: 22px; }
  .kop-groot { font-size: 50px; }
  .reviews { padding: 60px 0 64px; background: var(--wit); }
  .reviews .wrap { padding: 0; gap: 28px; }
  .score { padding: 0 20px; }
  .score-cijfer { font-size: 120px; }
  .score-tekst { font-size: 18px; }
  .review-rij { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 12px 20px 20px; }
  .review { flex: 0 0 290px; scroll-snap-align: center; padding: 24px 22px; }
  .insta { background: var(--grijs-licht); padding: 60px 0 64px; }
  .polaroids { width: auto; overflow-x: auto; padding: 32px 24px 24px; gap: 18px; }
  .polaroid { flex: 0 0 auto; padding: 9px 9px 34px; }
  .polaroid-foto { width: 170px; height: 170px; }
  .tijden { padding: 40px 0 64px; background: var(--wit); }
  .tijden-inhoud { gap: 28px; }
  .bord { width: 100%; max-width: 330px; padding: 24px; transform: rotate(1.5deg); }
  .bord-status { font-size: 76px; min-height: 68px; }
  .bord.is-dicht .bord-status { font-size: 50px; }
  .bord-tijden dt, .bord-tijden dd { font-size: 15px; padding: 8px 0; }
  .bord-ketting { width: 160px; height: 56px; }
  .route { padding-top: 0; gap: 12px; }
  .knoppen { flex-direction: column; }
  .knoppen .knop { width: 100%; }
  .klein { text-align: center; font-size: 15px; }
  .footer { padding: 48px 0 120px; }
  .footer-plaats { font-size: 68px; -webkit-text-stroke: 1.5px #333; }
  .footer-logo { height: auto; width: 260px; }
  .footer-kolommen { flex-direction: column; gap: 16px; font-size: 14px; }
  .footer-links { flex-direction: row; gap: 20px; }
  .dock { left: 12px; right: 12px; bottom: 16px; }
  .dock-boek { flex: 1 1 auto; justify-content: center; padding: 0 16px; font-size: 16px; }
  .dock-boek .icoon-agenda { display: none; }
  /* Boeken op de telefoon: schermvullend */
  .boekvenster { inset: 0; width: auto; height: 100dvh; border-radius: 0; }
  .boek-achtergrond { display: none !important; }
  body.boek-open .dock { display: none; }
  body.boek-open { overflow: hidden; }
  .boek-sluit-mobiel { display: flex; position: absolute; top: 14px; right: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #262626; color: var(--wit); align-items: center; justify-content: center; cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .paal-strepen, .band-rij { animation: none; }
}

/* ============================================================
   Animaties – soepel en verend, zoals het boekingssysteem
   ============================================================ */
:root { --veer: cubic-bezier(.22, 1, .36, 1); --veer-kort: cubic-bezier(.34, 1.56, .64, 1); }

/* Knoppen veren mee */
.knop, .dock-boek, .dock-rond, .menu-sluit, .boek-sluit-mobiel { transition: transform .35s var(--veer-kort), background-color .2s ease, box-shadow .3s var(--veer); }
.knop:hover, .dock-boek:hover, .dock-rond:hover { transform: scale(1.03); }
.knop:active, .dock-boek:active, .dock-rond:active, .menu-sluit:active { transform: scale(.96); transition-duration: .12s; }

/* Binnenkomst van de header */
.js .hero-top > *, .js .hero-tekst > *, .js .spiegel { opacity: 0; transform: translateY(28px); }
.js .spiegel { transform: translateY(60px) rotate(3deg); }
.js.geladen .hero-top > *, .js.geladen .hero-tekst > *, .js.geladen .spiegel { opacity: 1; transform: none; transition: opacity .8s var(--veer), transform 1s var(--veer); }
.js.geladen .hero-top > :nth-child(2) { transition-delay: .1s; }
.js.geladen .hero-tekst > :nth-child(1) { transition-delay: .15s; }
.js.geladen .hero-tekst > :nth-child(2) { transition-delay: .3s; }
.js.geladen .spiegel { transition-delay: .25s; transition-duration: .9s, 1.3s; }
.js .dock { transform: translateY(140%); }
.js.geladen .dock { transform: none; transition: transform .9s var(--veer) .6s; }

/* Inglijden bij het scrollen */
.js [data-in] { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--veer), transform 1s var(--veer); transition-delay: var(--vertraging, 0s); }
.js [data-in].in-beeld { opacity: 1; transform: none; }
.js .ticket[data-in] { transform: translateY(50px) rotate(-12deg); }
.js .ticket[data-in].in-beeld { transform: rotate(-4deg); }
.js .review[data-in]:nth-child(1).in-beeld { transform: rotate(-2deg); }
.js .review[data-in]:nth-child(2).in-beeld { transform: rotate(1.5deg); }
.js .review[data-in]:nth-child(3).in-beeld { transform: rotate(-1deg); }
.js .polaroid[data-in] { transform: translateY(60px) rotate(0deg); }
.js .polaroid[data-in].in-beeld:nth-child(odd) { transform: rotate(-2.5deg); }
.js .polaroid[data-in].in-beeld:nth-child(even) { transform: rotate(2deg); }

/* Kaartjes reageren op de muis */
@media (hover: hover) {
  .review, .polaroid, .ticket { transition: opacity .8s var(--veer), transform .6s var(--veer), box-shadow .4s var(--veer); }
  .review:hover { transform: translateY(-8px) rotate(0deg) !important; box-shadow: 0 24px 44px rgba(0,0,0,.18); }
  .polaroid:hover { transform: translateY(-10px) rotate(0deg) scale(1.03) !important; box-shadow: 0 24px 44px rgba(0,0,0,.22); }
  .ticket:hover { transform: rotate(0deg) scale(1.02) !important; }
}

/* Het OPEN-bordje schommelt zacht aan zijn ketting */
.bord-houder { transform-origin: 50% 10px; animation: schommel 5s ease-in-out infinite; }
@keyframes schommel { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }

/* Menu */
.menu { opacity: 0; transition: opacity .35s var(--veer); }
.menu.is-open { opacity: 1; }
.menu-links a { opacity: 0; transform: translateY(30px); transition: opacity .5s var(--veer), transform .7s var(--veer), color .2s; }
.menu.is-open .menu-links a { opacity: 1; transform: none; }
.menu.is-open .menu-links a:nth-child(2) { transition-delay: .05s; }
.menu.is-open .menu-links a:nth-child(3) { transition-delay: .1s; }
.menu.is-open .menu-links a:nth-child(4) { transition-delay: .15s; }
.menu.is-open .menu-links a:nth-child(5) { transition-delay: .2s; }

/* Boekvenster: groeit uit de knop rechtsonder */
.boekvenster { opacity: 0; transform: translateY(24px) scale(.92); transform-origin: 100% 100%; transition: opacity .25s ease, transform .5s var(--veer); }
.boekvenster.is-open { opacity: 1; transform: none; }
.boek-achtergrond { opacity: 0; transition: opacity .35s ease; }
.boek-achtergrond.is-open { opacity: 1; }
.dock-boek svg { transition: transform .4s var(--veer-kort); }
body.boek-open .dock-boek .icoon-kruis { animation: draai-in .45s var(--veer-kort); }
@keyframes draai-in { from { transform: rotate(-90deg) scale(.6); } to { transform: none; } }
@media (max-width: 700px) {
  .boekvenster { transform: translateY(40px); transform-origin: 50% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-top > *, .js .hero-tekst > *, .js .spiegel, .js [data-in], .js .dock, .menu-links a { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bord-houder { animation: none; }
  .boekvenster, .boek-achtergrond, .menu { transition: none; }
}