/* Schibsted Grotesk (SIL Open Font License, zie fonts/OFL-schibsted-grotesk.txt), van onze eigen server */
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/schibsted-grotesk-latin-ext-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/schibsted-grotesk-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/schibsted-grotesk-latin-ext-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/schibsted-grotesk-latin-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/schibsted-grotesk-latin-ext-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/schibsted-grotesk-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/schibsted-grotesk-latin-ext-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';src:url(fonts/schibsted-grotesk-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

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

/* --tint en --accent worden door het script uit de achtergrond gehaald, zodat
   de kaart met de kleuren van de foto meekleurt. Dit zijn de waardes zolang er
   (nog) geen foto is, of als de browser de kleuren niet mag uitlezen. */
:root{
  --tint:22,18,30;
  --accent:150,90,230;
  --ink:#fff;
  --ink-soft:rgba(255,255,255,.72);
  --font:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{-webkit-text-size-adjust:100%;background:#0c0c0e}
body{
  min-height:100vh;min-height:100svh;
  font-family:var(--font);color:var(--ink);
  background:#0c0c0e;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:#fff;color:#000}
:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:10px}

/* ---------- achtergrond ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0c0c0e}
.bg-media{
  position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);
  max-width:none;object-fit:cover;
  opacity:0;transform:translate3d(var(--px,0px),var(--py,0px),0) scale(1.04);
  transition:opacity 1.2s var(--ease);
  will-change:transform;
}
.bg-media.is-ready{opacity:1}

/* Zolang er geen foto is: donkere grond met langzaam drijvende kleurvlekken. */
.bg-fallback{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.bg.no-media .bg-fallback{opacity:1}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.blob--a{width:60vmax;height:60vmax;left:-14vmax;top:-18vmax;background:#6b2fd6;animation:drift 26s ease-in-out infinite alternate}
.blob--b{width:52vmax;height:52vmax;right:-16vmax;bottom:-20vmax;background:#d6337f;animation:drift 32s ease-in-out infinite alternate-reverse}
.blob--c{width:36vmax;height:36vmax;left:38%;top:44%;background:#1f6fd1;opacity:.35;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to  {transform:translate3d(6vmax,4vmax,0) scale(1.12)}
}

/* Het fijne rasterpatroon over de foto, zoals op guns.lol, plus een vignet. */
.screen{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(rgba(0,0,0,.42) 1px, transparent 1.3px) 0 0/3px 3px,
    radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%),
    rgba(0,0,0,.18);
}

/* ---------- kaart ---------- */
.stage{
  position:relative;z-index:2;
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));
}
.card-wrap{width:100%;max-width:560px;perspective:1200px}
/* Binnenkomst via opacity, translate en scale op de kaart zelf. Niet op een
   laag erboven: dan valt het glaseffect weg zolang die laag doorzichtig is.
   transform blijft vrij voor het kantelen. */
.js .card{opacity:0;translate:0 26px;scale:.96}
.entered .card{
  opacity:1;translate:0 0;scale:1;
  transition:opacity 1s var(--ease),translate 1.1s var(--ease),scale 1.1s var(--ease),background 1.2s var(--ease);
}

.card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(44px,7vw,60px) clamp(22px,5vw,44px) clamp(56px,8vw,66px);
  border-radius:26px;
  /* De kaart neemt de kleur van de foto over: een donkere versie van het
     gemiddelde, met bovenin een zweem van de felste kleur. Het glas eronder
     laat de foto zelf ook nog doorschemeren. */
  background:
    linear-gradient(160deg, rgba(var(--accent),.14) 0%, rgba(var(--accent),0) 55%),
    rgba(var(--tint),.3);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 30px 80px -20px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,0,0,.2);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:background 1.2s var(--ease);
  will-change:transform;
}
/* lichtvlek die met de muis meeloopt */
.sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.09), transparent 60%);
  opacity:0;transition:opacity .5s var(--ease);
}
.card.is-hover .sheen{opacity:1}

/* binnenkomst van de onderdelen, na elkaar */
.js .reveal{opacity:0;transform:translateY(12px)}
.entered .reveal{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .9s var(--ease);
  transition-delay:calc(.18s + var(--i,0) * .08s);
}

.avatar{
  width:clamp(96px,22vw,128px);
  filter:drop-shadow(0 0 12px rgba(255,255,255,.28));
  transform-origin:50% 88%;
}
/* DoeMaarDelen: "Maak avatar wit" (zoals een zwart logo) en een ronde avatar voor foto's */
.avatar.is-invert{filter:invert(1) drop-shadow(0 0 12px rgba(255,255,255,.28))}
.avatar.is-round{aspect-ratio:1;object-fit:cover;border-radius:50%;transform-origin:50% 50%}
.avatar[hidden]{display:none}
.avatar:hover{animation:wobble 2.4s ease-in-out infinite}
@keyframes wobble{
  0%,100%{transform:rotate(0) translate3d(0,0,0) scale(1)}
  18%    {transform:rotate(-3.2deg) translate3d(-3px,-5px,0) scale(1.025)}
  42%    {transform:rotate(2.4deg) translate3d(4px,1px,0) scale(1.015)}
  68%    {transform:rotate(-1.6deg) translate3d(-2px,-3px,0) scale(1.02)}
  86%    {transform:rotate(.8deg) translate3d(1px,1px,0) scale(1.005)}
}

h1{
  margin-top:clamp(18px,3vw,26px);
  font-size:clamp(44px,11vw,62px);font-weight:600;line-height:1.05;letter-spacing:-.025em;
  text-shadow:0 0 10px rgba(255,255,255,.55),0 0 28px rgba(255,255,255,.28);
}
/* DoeMaarDelen: lange namen breken netjes af en laten ruimte voor het vinkje */
h1{max-width:calc(100% - 1.3em);text-align:center;overflow-wrap:anywhere}
h1.is-long{font-size:clamp(32px,8vw,46px)}
.avatar[hidden] + h1{margin-top:0}

/* verified vinkje naast de naam, valt buiten het midden zodat de naam zelf
   precies gecentreerd blijft */
h1{position:relative}
.badge{
  position:absolute;left:100%;top:50%;
  width:.46em;height:.46em;margin-left:.16em;
  transform:translateY(-38%);
}
.badge svg{display:block;width:100%;height:100%;overflow:visible}
.badge-seal{fill:#2f9bff;filter:drop-shadow(0 0 6px rgba(47,155,255,.65))}
.badge-check{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.badge::after{
  content:attr(data-label);
  position:absolute;left:50%;bottom:calc(100% + 8px);
  padding:6px 11px;border-radius:9px;
  font-size:13px;font-weight:500;letter-spacing:0;line-height:1.5;white-space:nowrap;text-shadow:none;
  background:rgba(10,10,12,.82);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0;transform:translate(-50%,4px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .3s var(--ease);
}
.badge:hover::after{opacity:1;transform:translate(-50%,0)}
@media(hover:none){.badge::after{display:none}}

.loc{
  display:flex;align-items:center;gap:7px;
  margin-top:clamp(16px,2.6vw,22px);
  font-size:clamp(16px,2.4vw,18px);color:var(--ink-soft);
}
.loc svg{width:17px;height:17px;fill:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.5))}
.loc svg{flex:none}
.loc{max-width:100%;overflow-wrap:anywhere;text-align:center}
.loc[hidden],.bio[hidden]{display:none}

/* DoeMaarDelen: de @username op Discord, klein onder de naam */
.handle{
  display:flex;align-items:center;gap:7px;
  margin-top:clamp(8px,1.4vw,10px);max-width:100%;
  font-size:clamp(14px,2vw,15px);font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,.62);overflow-wrap:anywhere;
}
.handle[hidden]{display:none}
.handle svg{flex:none;width:15px;height:15px;fill:#fff;opacity:.85;filter:drop-shadow(0 0 5px rgba(255,255,255,.4))}
.handle + .loc{margin-top:clamp(12px,2vw,16px)}

/* DoeMaarDelen: bio, zelfde zachte witte tekst als de locatie */
.bio{
  margin-top:clamp(12px,2vw,16px);
  max-width:36ch;
  font-size:clamp(15px,2.2vw,17px);line-height:1.5;
  color:var(--ink-soft);text-align:center;
  overflow-wrap:anywhere;white-space:normal;
}
.loc[hidden] + .bio{margin-top:clamp(16px,2.6vw,22px)}

/* ---------- socials ---------- */
.socials{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,2.6vw,16px);
  margin-top:clamp(26px,4.4vw,34px);
}
.icon{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:clamp(46px,11vw,52px);height:clamp(46px,11vw,52px);
  border-radius:14px;
  transition:transform .35s var(--ease);
}
.icon svg{
  width:clamp(32px,8vw,38px);height:clamp(32px,8vw,38px);fill:#fff;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.55));
  transition:filter .35s var(--ease);
}
.icon:hover,.icon:focus-visible{transform:translateY(-4px) scale(1.08)}
.icon:hover svg,.icon:focus-visible svg{filter:drop-shadow(0 0 10px rgba(255,255,255,.85)) drop-shadow(0 0 22px rgba(var(--brand),.7))}
.icon:active{transform:translateY(-1px) scale(1.02)}

/* label boven het icoon bij hover */
.icon::after{
  content:attr(data-label);
  position:absolute;left:50%;bottom:calc(100% + 10px);
  padding:6px 11px;border-radius:9px;
  font-size:13px;font-weight:500;white-space:nowrap;
  background:rgba(10,10,12,.82);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  opacity:0;transform:translate(-50%,4px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .3s var(--ease);
}
.icon:hover::after,.icon:focus-visible::after{opacity:1;transform:translate(-50%,0)}
@media(hover:none){.icon::after{display:none}}

/* ---------- views ---------- */
.views{
  position:absolute;left:clamp(20px,4vw,26px);bottom:clamp(18px,3.4vw,22px);
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-variant-numeric:tabular-nums;color:var(--ink-soft);
  transition:opacity .6s var(--ease);
}
.views[hidden]{display:none}
.views svg{width:20px;height:20px;fill:#fff;fill-rule:evenodd}

/* ---------- muziek knop (alleen als er muziek is ingesteld) ---------- */
.sound{
  position:fixed;z-index:3;
  top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;
  background:rgba(var(--tint),.45);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.sound[hidden]{display:none}
.sound:hover{background:rgba(var(--tint),.7);transform:scale(1.05)}
.sound svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .card,.js .reveal{opacity:1;translate:none;scale:none;transform:none}
}

/* DoeMaarDelen: links in max twee blokken, elk met een optioneel kopje.
   Eén blok zonder kopje ziet er precies zo uit als één rij socials. */
.links{
  display:flex;flex-direction:column;align-items:center;width:100%;
  gap:clamp(20px,3.4vw,26px);
  margin-top:clamp(26px,4.4vw,34px);
}
.links[hidden]{display:none}
.links .socials{margin-top:0}
.link-block{display:flex;flex-direction:column;align-items:center;width:100%}
.link-block + .link-block::before{
  content:'';display:block;width:44px;height:1px;margin-bottom:clamp(20px,3.4vw,26px);
  background:rgba(255,255,255,.2);
}
.block-title{
  margin-bottom:14px;max-width:100%;
  font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);text-align:center;overflow-wrap:anywhere;
  text-shadow:0 0 8px rgba(255,255,255,.3);
}

/* klein linkje naar de privacyverklaring, onderin */
.legal-link{position:fixed;z-index:3;right:max(14px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));
  font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.legal-link a{color:inherit;text-decoration:none}
.legal-link a:hover{color:rgba(255,255,255,.85)}