/* ====== Huisstijl: marineblauw fluweel + goud, ridderlijk & feestelijk ====== */
:root {
  --blauw-donker: #0B1631;
  --blauw: #132348;
  --goud: #C9A24B;
  --goud-licht: #E8CB8A;
  --staal: #9AA3AE;
  --tekst: #F3EEE2;
}

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

html { scroll-behavior: smooth; }

body {
  background-color: var(--blauw-donker);
  /* subtiele fluweeltextuur via gelaagde gradients */
  background-image:
    radial-gradient(ellipse 90% 55% at 50% 8%, rgba(26, 45, 88, .5), transparent 72%),
    radial-gradient(ellipse 65% 50% at 12% 78%, rgba(17, 33, 68, .45), transparent 72%),
    radial-gradient(ellipse 55% 45% at 88% 55%, rgba(6, 12, 30, .75), transparent 72%);
  background-attachment: fixed;
  color: var(--tekst);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--goud-licht); text-decoration-color: rgba(201,162,75,.5); text-underline-offset: 3px; }
a:hover { color: #fff; text-decoration-color: var(--goud-licht); }

/* ====== Typografie ====== */
.kop {
  font-family: "Cinzel", "Cormorant Garamond", serif;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goud-licht);
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.cursief {
  font-style: italic;
  font-size: 1.25rem;
  color: var(--goud-licht);
}

/* Sierlijke divider — · ◇ · — */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  color: var(--goud);
  font-size: 1rem;
  letter-spacing: .2em;
  margin: 1.6rem auto;
  user-select: none;
}
.divider::before, .divider::after {
  content: "";
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--goud));
}
.divider::after { background: linear-gradient(90deg, var(--goud), transparent); }

/* ====== Gouden dubbel kader met klinknagels ====== */
.kader {
  position: relative;
  border: 1px solid rgba(201,162,75,.65);
  outline: 1px dotted rgba(201,162,75,.45);
  outline-offset: 6px;
  padding: 2.2rem 1.4rem;
  margin: 0 auto;
  max-width: 860px;
  background: rgba(10, 23, 48, .55);
  backdrop-filter: blur(2px);
}
/* ====== Watermerk 50 ====== */
.watermerk {
  position: relative;
  overflow: hidden;
}
.watermerk::before {
  content: "50";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(16rem, 40vw, 30rem);
  color: rgba(201,162,75,.07);
  pointer-events: none;
  z-index: 0;
}
.watermerk > * { position: relative; z-index: 1; }

/* ====== Knoppen: goud primair, geborsteld-staal randen ====== */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .95em 1.8em;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
  min-height: 52px;
}
.knop:focus-visible {
  outline: 2px solid var(--goud-licht);
  outline-offset: 3px;
}
.knop-primair {
  background: linear-gradient(180deg, var(--goud-licht), var(--goud));
  color: var(--blauw-donker);
  border: 1px solid #8a6c2a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.4);
}
.knop-primair:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 5px 14px rgba(0,0,0,.5); }
.knop-secundair {
  background: transparent;
  color: var(--goud-licht);
  border: 1px solid var(--goud);
  box-shadow: inset 0 0 0 1px rgba(154,163,174,.15);
}
.knop-secundair:hover { background: rgba(201,162,75,.12); }
.knop[disabled] { opacity: .6; cursor: wait; transform: none; }

/* ====== Formulier ====== */
.veld {
  width: 100%;
  padding: .85em 1em;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  color: var(--tekst);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(154,163,174,.45);
  border-radius: 2px;
  min-height: 52px;
}
.veld::placeholder { color: rgba(243,238,226,.45); font-style: italic; }
.veld:focus-visible {
  outline: 2px solid var(--goud);
  outline-offset: 1px;
  border-color: var(--goud);
}
.fout {
  color: #F2B8A0;
  font-style: italic;
  margin-top: .6rem;
}

/* verwijderknopje naast extra naamveld */
.verwijder {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  background: transparent;
  border: 1px solid rgba(154,163,174,.45);
  border-radius: 2px;
  color: var(--staal);
  font-size: 1.3rem;
  cursor: pointer;
}
.verwijder:hover { color: #fff; border-color: var(--goud); }
.verwijder:focus-visible { outline: 2px solid var(--goud); }

/* ====== Gastenlijst ====== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: "Cinzel", serif;
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--blauw-donker);
  background: linear-gradient(180deg, var(--goud-licht), var(--goud));
  border: 1px solid #8a6c2a;
  padding: .5em 1.1em;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 8px rgba(0,0,0,.35);
}
.badge-secundair {
  background: transparent;
  color: var(--goud-licht);
  border: 1px solid var(--goud);
  box-shadow: none;
}
.naamlijst { list-style: none; }
.naamlijst li {
  padding: .55em .2em;
  border-bottom: 1px dotted rgba(201,162,75,.3);
  font-size: 1.15rem;
}
.naamlijst li:last-child { border-bottom: none; }

/* verwijderknop per gast */
.prullenbak {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--staal);
  font-size: 1rem;
  cursor: pointer;
}
.prullenbak:hover { color: var(--goud-licht); border-color: rgba(201,162,75,.5); }
.prullenbak:focus-visible { outline: 2px solid var(--goud); outline-offset: 2px; }
.prullenbak[disabled] { opacity: .4; cursor: wait; }

/* ====== Discobal (thema) ====== */
.discobal-wrap {
  position: relative;
  width: 130px;
  height: 148px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* ophangdraadje */
.discobal-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 18px;
  background: linear-gradient(to bottom, transparent, var(--goud));
}
/* lichtbundels achter de bal, langzaam meedraaiend */
.discobal-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 340px;
  height: 340px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(232,203,138,.16) 0deg 3deg, transparent 3deg 45deg,
    rgba(255,255,255,.12) 45deg 47deg, transparent 47deg 90deg,
    rgba(232,203,138,.14) 90deg 93deg, transparent 93deg 140deg,
    rgba(255,255,255,.10) 140deg 142deg, transparent 142deg 195deg,
    rgba(232,203,138,.15) 195deg 198deg, transparent 198deg 250deg,
    rgba(255,255,255,.11) 250deg 252deg, transparent 252deg 305deg,
    rgba(232,203,138,.13) 305deg 308deg, transparent 308deg 360deg);
  -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 32%, transparent 70%);
  mask-image: radial-gradient(circle, transparent 18%, #000 32%, transparent 70%);
  animation: stralen-draai 24s linear infinite;
  pointer-events: none;
  z-index: 0;
}
/* echte spiegelbol (foto), zacht wiegend met glans */
.discobal {
  position: relative;
  z-index: 1;
  width: 118px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 16px rgba(232,203,138,.4)) drop-shadow(0 0 46px rgba(201,162,75,.22));
  transform-origin: 50% 6%;
  animation: bal-wiegen 7s ease-in-out infinite;
}
@keyframes bal-wiegen {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes stralen-draai {
  to { transform: translate(-50%, 50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .discobal, .discobal-wrap::after { animation: none; }
}

/* ====== Draaiende schijnwerpers (achtergrondsfeer) ====== */
.schijnwerpers {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.schijnwerpers span {
  position: absolute;
  width: 46vmax;
  height: 150vmax;
  top: -30vmax;
  transform-origin: 50% 22%;
  background: linear-gradient(to bottom, rgba(232,203,138,.14), rgba(232,203,138,.05) 40%, transparent 78%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%, #000 55%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 45%, #000 55%, transparent);
  filter: blur(6px);
}
.schijnwerpers span:nth-child(1) { left: -8vmax; animation: bundel-a 19s ease-in-out infinite; }
.schijnwerpers span:nth-child(2) { right: -8vmax; background: linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,.04) 40%, transparent 78%); animation: bundel-b 25s ease-in-out infinite; }
@keyframes bundel-a {
  0%, 100% { transform: rotate(-26deg); opacity: .55; }
  50% { transform: rotate(24deg); opacity: 1; }
}
@keyframes bundel-b {
  0%, 100% { transform: rotate(22deg); opacity: .9; }
  50% { transform: rotate(-20deg); opacity: .5; }
}

/* ====== Confetti ====== */
.confetti-laag {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}
.confetti-laag i {
  position: absolute;
  top: -20px;
  width: 7px;
  height: 11px;
  border-radius: 1px;
  opacity: .9;
  animation: confetti-val linear forwards;
}
@keyframes confetti-val {
  0%   { transform: translate3d(0, -5vh, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .95; }
  100% { transform: translate3d(var(--zij, 20px), 108vh, 0) rotate(var(--draai, 540deg)); opacity: .15; }
}
@media (prefers-reduced-motion: reduce) {
  .schijnwerpers span { animation: none; }
  .confetti-laag { display: none; }
}

/* ====== Stuiterende golfballen ====== */
.ballen-laag {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
}
.golfbal {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  background-color: #fff;
  background-image:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95), rgba(255,255,255,0) 45%),
    radial-gradient(circle at 2.5px 2.5px, rgba(0,0,0,.13) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 68% 72%, rgba(20,38,77,.22), transparent 60%);
  background-size: 100% 100%, 6px 6px, 100% 100%;
  box-shadow: inset -3px -4px 7px rgba(20,38,77,.28), 0 3px 10px rgba(0,0,0,.45);
  will-change: transform;
}

/* ====== Hulpjes ====== */
.gecentreerd { text-align: center; }
.verborgen { display: none !important; }
.container { padding: 0 1rem; }

@media (min-width: 700px) {
  body { font-size: 20px; }
  .kader { padding: 3rem 3.5rem; }
}