/* ============ Base (mobile-first) ============ */
  :root{
    --pink:#FF4DA6; --turq:#4DFFFF; --violet:#A64DFF; --orange:#FF884D; --gold:#FFD84D; --ink:#000;
  }
  html,body{
    height:100%;
    margin:0;
    background:#000;
    color:#fff;
    font-family:system-ui, Arial, sans-serif;
    overflow:hidden; /* geen onzichtbare scroll onderaan de pagina */
  }
  /* Achtergrond-canvas */
  #bg{
    position:fixed; inset:0;
    width:100vw; height:100svh;
    z-index:0; display:block; pointer-events:none;
  }

  /* ======= MOBILE LAYOUT ======= */
  header.mobile{
    position:relative; z-index:1;
    height:100svh; display:grid; grid-template-rows: 1fr auto;
    padding:2rem 1.25rem 6.5rem; /* ruimte voor bottom nav */
    text-align:center;
    align-items:center; justify-items:center;
  }
  .brand h1{ margin:0 0 .35rem 0; font-size:2rem; font-weight:900; letter-spacing:.5px }
  .brand p{ margin:0; opacity:.85 }
  .cta{
    margin-top:1rem;
    padding:12px 20px; border-radius:16px; border:0;  cursor: url('/assets/images/favicon-16.png') 16 16, auto;;
    background:linear-gradient(90deg,var(--pink),var(--turq),var(--violet),var(--orange),var(--gold));
    color:#000; font-weight:800; font-size:1rem;
    filter:drop-shadow(0 0 12px rgba(255,255,255,.25));
    font-family: "bmx-radical", sans-serif;
  }
  /* Bottom nav (mobile) */
  nav.mobile{
    position:fixed; left:12px; right:12px; bottom:12px; z-index:2;
    background:rgba(0,0,0,.6);
    border:1px solid rgba(255,255,255,.12);
    border-radius:16px; backdrop-filter: blur(6px);
    display:grid; grid-template-columns: repeat(4,1fr); gap:8px;
    padding:10px;
  }
  nav.mobile a{
    display:flex; align-items:center; justify-content:center;
    height:44px; border-radius:12px; text-decoration:none; color:#fff;
    background:rgba(255,255,255,.06);
    font-weight:700; letter-spacing:0.1rem;
    transition:transform .08s ease, background .2s ease;
    font-family: "bmx-radical", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  }
  nav.mobile a:active{ transform:scale(.98) }
  nav.mobile a:hover{ background:rgba(255,255,255,.12) }

  /* Klein statusknopje om auto-spray te togglen (optioneel) */
  .auto{
    position:fixed; top:60px; right:12px; z-index:3;
    background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.15);
    color:#fff; border-radius:999px; padding:8px 12px; font-size:.9rem;  cursor: url('/assets/images/favicon-16.png') 16 16, auto;
    backdrop-filter: blur(6px);
  }

   /* Basis voor menu-links */
.menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-right: 2.2rem; /* ruimte maken voor vlinder rechts */
  transition: background 0.2s ease;
  font-family: "bmx-radical", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
} 

/* Vlinder styling via ::after */
.menu a::after {
  content: "";
  position: absolute;
  right: -2px; /* afstand tot rechterrand knop */
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  width: 40px;
  height: 40px;
  background: url("/assets/images/ButterflyLogo.svg") no-repeat center/contain;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none; /* vlinder mag geen muisinteractie blokkeren */
}

/* Hover: laat vlinder inzoomen en zien */
.menu a:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Actieve pagina: vlinder blijft staan */
.menu a.active::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Mobile menu links */
nav.mobile a {
  position: relative;
  padding-right: 1rem; /* ruimte voor vlinder */
}

/* Vlinder op mobiel */
nav.mobile a::after {
  content: "";
  position: absolute;
  right: -2px; 
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  width: 30px;
  height: 30px;
  background: url("/assets/images/ButterflyLogo.svg") no-repeat center/contain;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

/* Hover (werkt op mobiel alleen als er een tap/hover event is) */
nav.mobile a:hover::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Actieve pagina: vlinder altijd zichtbaar */
nav.mobile a.active::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.chaos {
  background: linear-gradient(
    90deg,
    var(--pink),
    var(--turq),
    var(--violet),
    var(--orange),
    var(--gold)
  );
  background-size: 300%; /* maakt de animatie vloeiender */
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chaosShift 5s ease infinite;
}

@keyframes chaosShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


  /* ======= DESKTOP / FULLSCREEN MENU - HERO INDEX PAGE  ======= */
  @media (min-width: 900px){
    /* verberg mobile header & nav; toon desktop header */
    header.mobile{ display:none; }
    nav.mobile{ display:none; }

    header.desktop{
      position:relative; z-index:1;
      height:100svh; display:flex; flex-direction:column;
      padding:1.25rem 3rem;
    }
    .topbar{
      display:flex; align-items:center; justify-content:space-between; gap:1rem;
    }
    .logo{
      font-weight:900; letter-spacing:.5px; font-size:1.1rem; opacity:.9;
    }
    .bmxFont{
      font-family: "bmx-radical", sans-serif;
      font-weight: 400;
      font-style: normal;
    }
    .mobile .brand p{
    font-family: "bmx-radical", sans-serif;
    font-weight: 400;  /* match met wat je @font-face heeft */
    margin: 0;
  }
    .menu{
      display:flex; gap:.75rem;
    }
    .menu a{
      color:#fff; text-decoration:none; font-weight:700;
      padding:14px 22px; border-radius:10px; background:rgba(255,255,255,.06);
      transition:background .2s ease;
    }
    .menu a:hover{ background:rgba(255,255,255,.12) }

    .hero{
      flex:1; display:flex; align-items:center; justify-content:space-between; gap:2rem;
    }
    .hero .brand{
      max-width: 56ch;
    }
    .hero .brand h1{ font-size:3.2rem }
    .hero .brand p{ font-size:1.25rem; opacity:.85 }
    .right{
      display:flex; flex-direction:column; align-items:flex-end; gap:1rem;
    }
    .cta{ font-size:1.1rem; padding:14px 24px; letter-spacing: 0.1rem; }
    
    .socials a{
      color:#fff; text-decoration:none; opacity:.8; margin-left:14px;
    }
    .socials a:hover{ opacity:1 }
  }


/* ======= 3 PAGES COMMON STYLES ======= */

.wrap h1 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  font-family: "bmx-radical", sans-serif;
  letter-spacing: 0.2rem;
}

/* ======= ABOUT PAGE SPECIFIC STYLES ======= */
:root{
  --neon-pink:#FF4DA6; --neon-cyan:#4DFFFF; --neon-purple:#A64DFF; --neon-orange:#FF884D; --neon-yellow:#FFD84D;
}

/* Layout blokken */
.about-row{
  display: grid;
  gap: 16px;
  margin: 1.25rem 0 2rem;
}

/* Neon kaartstijl */
.neon-card{
  background: rgba(0,0,0,.35);
  /*border: 2px solid var(--neon-pink);*/
  border-radius: 16px;
  padding: 16px;
  margin: 20px;
  background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.12);
    border-color:white;/* NEW ADDED */
  backdrop-filter: blur(6px);
  box-shadow: 0 0 10px var(--neon-pink), 0 0 18px var(--neon-cyan), 0 0 26px var(--neon-purple);
}

/* Tekst accenten */
h2{
  margin: 0 0 .5rem 0;
  color: var(--neon-orange);
  text-shadow: 0 0 8px var(--neon-orange);
}
.about-text p{ color:#fff; opacity:.9; }
.neon-list{ margin:.25rem 0 0; padding-left:1rem; }
.neon-list li{
  margin:.25rem 0;
  color: var(--neon-yellow);
  text-shadow: 0 0 6px rgba(255,216,77,.35);
}

/* ===== Carousel (neon, layered, clickable) ===== */
.about-photos { overflow: hidden; }
.carousel { position: relative; border-radius: 12px; touch-action: pan-y;}

.carousel .track{
  position: relative;
  z-index: 1;
  display: flex;             /* stabiel */
  width: 100%;
  transform: translateX(0%);
  transition: transform .45s ease;
}
.carousel .slide{ flex: 0 0 100%; }
.carousel img{
  width: 100%;
  height: 52svh;
  object-fit: contain;
  display: block;
  pointer-events: none;      /* laat knoppen/dots klikken */
  filter: contrast(1.05) saturate(1.1);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 12px rgba(255,77,166,.25),
    0 0 18px rgba(77,255,255,.15);
}

/* Fade overlay bij wissel */
.carousel.is-fading::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%);
  pointer-events:none;
  animation: neonFade .35s ease;
}
@keyframes neonFade { from{opacity:0} to{opacity:1} }

/* Prev/Next knoppen boven alles */
.carousel .nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  background: rgba(0,0,0,.55);
  color: #fff; border:1px solid rgba(255,255,255,.2);
  padding: .5rem .7rem; border-radius: 10px;  cursor: url('/assets/images/favicon-16.png') 16 16, auto;
  box-shadow: 0 0 8px rgba(255,255,255,.15);
}
.carousel .prev{ left: 10px; }
.carousel .next{ right: 10px; }
.carousel .nav:hover{
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px var(--neon-cyan), 0 0 18px var(--neon-pink);
}

/* Dots boven track */
.carousel .dots{
  position:absolute; left:50%; bottom:10px; transform: translateX(-50%);
  z-index: 6; display:flex; gap:8px;
}
.carousel .dots button{
  width:10px; height:10px; border-radius:50%;
  border:1px solid var(--neon-purple); background: rgba(0,0,0,.5);  cursor: url('/assets/images/favicon-32.png') 32 32, auto;
  box-shadow: 0 0 6px var(--neon-purple);
}
.carousel .dots button[aria-current="true"]{
  background: var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink), 0 0 16px var(--neon-cyan);
}

/* Desktop: twee kolommen, tekst links, foto’s rechts */
@media (min-width: 900px){
  .about-row{
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
    gap: 24px;
  }
  .neon-card{ padding: 22px; }
  .carousel img{ height: 48svh; }
}


/* ======= PORTFOLIO PAGE SPECIFIC STYLES ======= */

.card a{
  text-decoration: none;
  color: #fff;
}

/* ======= CONTACT PAGE SPECIFIC STYLES ======= */

/* Neon accent kleuren */
:root {
  --neon-pink: #ff4da6;
  --neon-cyan: #4dffff;
  --neon-purple: #a64dff;
  --neon-orange: #ff884d;
  --neon-yellow: #ffd84d;
}

/* Grid: mobiel onder elkaar, desktop naast elkaar */
.contact-grid{
  display: grid;
  gap: 18px;
}

/* Kaart-stijl met neon border glow */
.contact-panel{
  background: rgba(0,0,0,.35);
  /*border: 2px solid var(--neon-pink);*/
  border-radius: 16px;
  padding: 18px;
  margin: 20px;
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 10px var(--neon-pink),
    0 0 20px var(--neon-cyan),
    0 0 30px var(--neon-purple);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.contact-panel:hover{
  border-color: var(--neon-cyan);
  box-shadow:
    0 0 15px var(--neon-cyan),
    0 0 25px var(--neon-purple),
    0 0 35px var(--neon-orange);
}

/* Form layout */
.contact-form{ display:grid; gap:16px; max-width: 100%; }
.contact-form h2{
  color: var(--neon-pink);
  text-shadow: 0 0 8px var(--neon-orange);
  margin: 0;
  padding: 0;
}
.contact-form p{
  margin: 0;
  padding: 0;
}
.field{ display:grid; gap:6px }
.field label{ font-size:.9rem; color:var(--neon-cyan); }

/* Neon inputs */
.neon-input{
  background: rgba(255,255,255,.06);
  color: var(--neon-yellow);
  /*border: 1px solid var(--neon-purple);*/
  border-radius: 12px;
  padding: 14px 14px;
  outline: none;
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease, color .25s ease;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 5px var(--neon-purple);
}
.neon-input:focus,
.neon-input:focus-visible{
  background: rgba(255,255,255,.09);
  border-color: var(--neon-cyan);
  color: var(--neon-pink);
  box-shadow:
    0 0 12px 2px var(--neon-pink),
    0 0 18px 4px var(--neon-cyan),
    0 0 28px 6px var(--neon-purple),
    inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Contact-info lijst in neon stijl */
.contact-info h2, 
.contact-info h3{ 
  margin: 0 0 .5rem 0; 
  color: var(--neon-pink); 
  text-shadow: 0 0 8px var(--neon-orange);
}

.contact-list{ list-style:none; padding:0; margin:0 0 1rem 0; display:grid; gap:.4rem; }
.contact-list a{
  color: var(--neon-yellow);
  text-decoration: none;
  border-bottom: 1px dashed var(--neon-purple);
  text-shadow: 0 0 5px var(--neon-yellow);
}
.contact-list a:hover{
  color: var(--neon-pink);
  border-bottom-color: var(--neon-pink);
  text-shadow: 0 0 10px var(--neon-pink);
}

/* CTA button glow */
button.cta{
  box-shadow:
    0 0 8px var(--neon-pink),
    0 0 12px var(--neon-cyan),
    0 0 18px var(--neon-purple);
  transition: transform .08s ease, box-shadow .25s ease, filter .25s ease;
}
button.cta:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 12px var(--neon-cyan),
    0 0 20px var(--neon-pink),
    0 0 28px var(--neon-orange);
}

/* Desktop: 2 kolommen en extra padding */
@media (min-width:900px){
  .contact-grid{
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 24px;
  }
  .contact-panel{
    padding: 24px;
  }
  .wrap{ padding: 6rem 6rem 5rem; }
}


.centered{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ======= 404 PAGE SPECIFIC STYLES ======= */

  /* Container voor 404 content */
  .page404{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;   /* i.p.v. center */
    justify-content: center;
    padding-top: clamp(24px,4vw,52px); /* alleen bovenruimte */
    padding-bottom: clamp(24px,4vw,52px);
    min-height: 100%;
  }
  .card404{
    max-width:880px; width:min(100%, 880px);
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:28px; padding:34px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow:0 10px 40px rgba(0,0,0,.35);
    text-align:left;
  }
  .card404 .eyebrow{
    font-size:14px; text-transform:uppercase; letter-spacing:.16em; opacity:.8;
  }
  .card404 h1{
    font-size:clamp(42px,8vw,96px); line-height:1; margin:6px 0 10px; font-weight:800;
  }
  .card404 h1 .chaos{
    font-family: 'bmx-radical', sans-serif; font-weight:400; font-style:normal;
  }
  .card404 p{
    font-size:clamp(16px,2.2vw,22px); opacity:.92; margin:0 0 18px;
  }
  .actions{
    display:flex; flex-wrap:wrap; gap:12px; margin-top:14px;
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 18px; border-radius:16px; text-decoration:none; font-weight:700;
    border:1px solid rgba(255,255,255,.14);
  }
  
  .toggles{ display:flex; align-items:center; gap:10px; margin-top:10px; opacity:.9; font-size:14px; }


/* ======= 404 Page: improved centering & readability ======= */
:root{
  --card-bg: rgba(0,0,0,.45);
  --card-border: rgba(255,255,255,.14);
}

@media (min-width: 900px){
  header.desktop{
    display: grid;
    grid-template-rows: auto 1fr; /* topbar + centered content */
  }
}

.page404{
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: clamp(24px,4vw,52px);
  height: 100%; /* fill remaining height below topbar */
}

.card404{
  text-align: center;
  padding: clamp(22px,3.5vw,44px);
  width: min(920px, 92vw);
  margin: 0 auto;
  border-radius: 24px;
}

.card404 .eyebrow{
  font-size: 0.9rem;
  letter-spacing: .18em;
  opacity: .9;
}

.card404 h1{
  line-height: 1.05;
  margin: .35rem 0 .65rem;
}

.card404 p{
  max-width: 68ch;
  margin-inline: auto;
  line-height: 1.6;
  opacity: .95;
}

.actions{
  justify-content: center;
}

.btn{
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn:focus-visible{
  box-shadow:
    0 0 0 3px rgba(255,255,255,.25),
    0 0 0 6px rgba(77,255,255,.25);
}

.toggles{
  justify-content: center;
  text-align: center;
}

/* Small screens (if the 404 is ever used outside desktop) */
@media (max-width: 899.98px){
  .card404{
    width: min(94vw, 680px);
  }
}