/* === Core canvas & variables === */
:root{
  --W: 644; --H: 1136;
  --sx: calc(100% / var(--W));
  --sy: calc(100% / var(--H));

  /* foto-kaarten */
  --cardW: 150.4; --cardH: 217.6; /* 20% kleiner dan originele 188x272 */
  --border: 12;
  --angle-left: -16deg; --angle-mid: 5deg; --angle-right: 17deg;

  /* kleuren */
  --ink: 255,255,255;
  --bg-top:#2b2d30; --bg-bottom:#15171a;
  --sparkle:255,255,255;

  /* posities */
  --sig-top: 320;                 /* positie van de naam */
  --gap-after-signature: 200;     /* afstand: Titel → copy1 */
  --cta-gap: 140;                 /* afstand: copy1 → CTA */
  --after-cta-gap: 120;           /* afstand: CTA → copy2 */

  /* titel-schaduw (links 3px, omlaag 3px) */
  --sig-shadow-x: -3px; --sig-shadow-y: 3px;

  /* Button theme */
  --btn-bg-1: #4cc6ff;
  --btn-bg-2: #7e77ff;
  --btn-text: #ffffff;
  --btn-ring: rgba(255,255,255,.55);
  --btn-glow: rgba(124,186,255,.35);
}

@font-face{
  font-family: "Abuget";
  src: url("../assets/fonts/Abuget.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*{ box-sizing:border-box; }
html, body{ min-height:100vh; }
body{
  margin:0;
  display:flex; justify-content:center; align-items:flex-start;
  color: rgb(var(--ink));
  background: linear-gradient(var(--bg-top), var(--bg-bottom));
  overflow:auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  position: relative;
}

/* Background sparkle/dot layers fixed to viewport so they don't end while scrolling */
body::before, body::after{
  content:""; position: fixed; inset:0; pointer-events:none; z-index:0;
}
body::before{
  background-image:
    radial-gradient(800px 360px at 50% 18%, rgba(var(--sparkle), .06), transparent 65%),
    radial-gradient(620px 300px at 75% 60%, rgba(var(--sparkle), .05), transparent 65%),
    radial-gradient(700px 320px at 28% 78%, rgba(var(--sparkle), .05), transparent 65%);
  mix-blend-mode: screen; opacity:1;
}
body::after{
  background-image: radial-gradient(rgba(var(--sparkle), .12) 1px, transparent 1px);
  background-size: 6px 6px; opacity:.18; mix-blend-mode: screen;
}

.poster{
  width: min(92vw, 760px);
  aspect-ratio: var(--W) / var(--H);
  position: relative;
  margin: 36px 0 120px;
  z-index: 1;
}

/* === Photos === */
.polaroid{
  position:absolute; transform-origin: top left;
  width: calc(var(--cardW) * var(--sx)); height: calc(var(--cardH) * var(--sy));
}
.frame{
  position:absolute; inset:0; background:#fff;
  padding: calc(var(--border) * var(--sx));
  border-radius:2px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  display:flex;
}
.frame img{ width:100%; height:100%; object-fit:cover; border-radius:1px; }

#p-left  { left: calc(54 * var(--sx)); top: calc(100 * var(--sy)); transform: rotate(var(--angle-left));  z-index:1; }
#p-mid   { left: calc(((var(--W) - var(--cardW)) / 2) * var(--sx)); top: calc(56 * var(--sy)); transform: rotate(var(--angle-mid)); z-index:3; }
#p-right { left: calc(416 * var(--sx)); top: calc(75 * var(--sy)); transform: rotate(var(--angle-right)); z-index:2; }

/* === Name === */
.signature{
  position:absolute; left:0; width:100%;
  top: calc(var(--sig-top) * var(--sy));
  text-align:center;
  font-family:"Abuget", cursive;
  font-size: clamp(52px, 9vw, 88px);
  font-weight:400; line-height:1.06; letter-spacing:.006em;
  color:#fff; z-index:10;
  text-shadow: var(--sig-shadow-x) var(--sig-shadow-y) 0 rgba(0,0,0,.85);
}

/* === Text blocks === */
.copy{
  position:absolute; left:0; width:100%;
  text-align:center; color:#fff; text-transform:uppercase;
  letter-spacing:.10em; font-weight:800; line-height:1.45;
  text-shadow:0 2px 8px rgba(0,0,0,.48);
  padding: 0 3%; z-index:5;
}
.copy p{ margin:0 0 8px; }
.copy.lead{ font-size: clamp(14px, 2.8vw, 22px); }
.copy:not(.lead){ font-size: clamp(13px, 2.4vw, 20px); }

/* copy1 staat altijd --gap-after-signature onder de titel */
#copy1{ top: calc((var(--sig-top) + var(--gap-after-signature)) * var(--sy)); }

/* CTA staat altijd --cta-gap onder copy1 */
.cta-wrap{
  position:absolute; width:100%; text-align:center;
  top: calc((var(--sig-top) + var(--gap-after-signature) + var(--cta-gap)) * var(--sy));
  z-index:6;
}
.btn{
Margin-top: 30px;
Margin-bottom: 30px;
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.25em; border-radius:999px;
  font-weight:800; letter-spacing:.07em; text-transform:uppercase; text-decoration:none;
  border:1px solid rgba(255,255,255,.35);
  color:var(--btn-text);
  box-shadow: 0 10px 30px var(--btn-glow), inset 0 0 0 1px rgba(255,255,255,.15);
  background: linear-gradient(135deg, var(--btn-bg-1), var(--btn-bg-2));
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn .btn__icon{ display:inline-flex; }
.btn:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.btn:active{ transform: translateY(0); filter: brightness(.98); }
.btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px var(--btn-ring), 0 10px 30px var(--btn-glow); }

/* copy2 staat altijd --after-cta-gap onder de CTA */
#copy2{
  top: calc((var(--sig-top) + var(--gap-after-signature) + var(--cta-gap) + var(--after-cta-gap)) * var(--sy));
}

/* === Responsive guards === */
@media (max-width: 430px){
  :root{
    --gap-after-signature: 260;
    --cta-gap: 190;
    --after-cta-gap: 140;
  }
  .copy{ letter-spacing:.08em; line-height:1.5; }
  .copy.lead{ font-size: clamp(13px, 3.6vw, 18px); }
  .copy:not(.lead){ font-size: clamp(12px, 3.2vw, 17px); }
}

@media (max-width: 360px){
  :root{
    --gap-after-signature: 300;
    --cta-gap: 220;
    --after-cta-gap: 160;
  }
  .copy{ letter-spacing:.07em; line-height:1.55; }
  .copy.lead{ font-size: clamp(12px, 3.8vw, 16px); }
  .copy:not(.lead){ font-size: clamp(11px, 3.6vw, 15px); }
}