:root{
  --text:#f2f5f9;
  --muted:#d9dde4;
  --card:#eceff4;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:22px;
  --max:1100px;
  --bg-deep:#0a0a12;
  --bg-light: #00346B;
  /* --bg-light: linear-gradient(90deg, #00346B 90%, #082859 100% ); */
}

#swup { transition: opacity .35s ease; }
html.is-animating.is-leaving #swup,
html.is-animating.is-rendering #swup { opacity: 0; }


#progress-bar {
  position: fixed;
  top: 75px;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, #ff6a95, #ffc773);
  width: 0%;
  z-index: 999999;
  transition: width 0.1s ease;
}

.chaos {
  padding-bottom: 40px !important;
}

*{box-sizing:border-box}
body{
  margin:0 0;
  font-family: Marcellus, serif;
  color:var(--text);
  background:var(--bg-light);
  background-image: none; /* tenzij je bewust een image wilt */
}

.bg-color {
  background-image: url('../images/Untitled.webp');
  background-size: cover;
  background-repeat: no-repeat;
}

html{
  scroll-behavior:smooth;
}

.hero{
  text-align:center;
}

.arrow {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(10px);
  }
  60% {
    transform: translateY(5px);
  }
}

.name{
  font-family:Kristi, cursive;
  margin:0 0 .15em; 
  /* padding-top:100px; */
  font-size: clamp(48px, 12vw, 160px);
  line-height: 70%;
  padding-top: 15vh; /* i.p.v. 100px / 140px */
  }
  

.roles{
  font-family:marcellus SC, serif;
  font-size:21px !important; margin:0;
}
.tagline-wrap{
  /* margin-top:22px; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0px;  
}

.tagline{
  font-size:32px !important; 
  font-weight:600; 
  opacity:.95; 
  margin:.25rem 0;
  text-align: center;
  padding-bottom: 10px;
  font-family: "Marcellus", serif;
}

#tag {
  padding-bottom: 40px;
}

/* --- Projects grid fix --- */
.projects{ 
  padding: 24px 100px !important;
  /* margin:0 100px; */
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.grid{
  display:grid;
  grid-template-columns: repeat(13, minmax(0,1fr));
  gap: 20px;
}

/* basiskaart: halfbreed in desktop, nette hoogte */
.card{
  grid-column: span 6;
  /* background:#eceff4; */
  color: white;
  border-radius:24px;
  box-shadow:0 20px 30px rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-decoration: none;
  
  }

  #zuiderbad:hover {
    cursor: url("../images/zd-logo.cur") 16 16, pointer;
  }

  .card {
    width: 100%; 
    height: 15em;
    object-fit: contain;
    position: relative;
    height: 20em;
  }

  .card1 {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), url(../images/ecopick-mockup.png);
    background-size: cover;
    grid-column: span 8 !important;
  }

  .card2 {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), url(../images/mockuuups-macbook-air-mockup-on-a-modern-dark-surface.webp);
      background-size: cover;
      background-position:  center;
      grid-column: span 5 !important;
    }

  .card-wide {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), url(../images/zuiderbad-mockup1.jpeg);
    background-size: cover;
    grid-column: span 13 !important;
    margin: 0;
  }


  .card-left {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), url(../images/portfolio-mockup.png);
    background-size: cover;
    background-position: center;
    grid-column: span 5 !important;
  }

  .card-bottom {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), url(../images/foodkiosk.webp);
    background-size: cover;
    background-position: center;
    grid-column: span 8 !important;
  }

  .card-title, .card-meta {
    position: relative;
    z-index: 2;
  }

  .card .thumb{ height: 250px ; }
  .card-footer{
    padding: 20px;
    position: absolute;
    bottom: 0;
  }

  .card-title{ margin:0 0; font-size:20px;
   }
  .card-meta{ margin:0; color:rgb(237, 237, 237); font-size:14px; }

  .hero{ 
    padding-top: 56px;
    position: relative; 
  } 

  .viewheight {
    position: relative;
    min-height: 80vh !important; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    pointer-events:none;
  }
  
  /* Unicorn embed als achtergrond */
  .viewheight .unicorn-embed {
    position: absolute;
    inset: 0;        
    z-index: 0; 
    inline-size: 100%;
    block-size: 100%;
  }
  
  
  /* Zorg dat content erboven staat */
  .viewheight .hero,
  .viewheight .tagline-wrap {
    position: relative;
    z-index: 1;
  }

  .scroll-down {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .chaos {
    padding-bottom: 30px;
  }
  

/* About */
.about{
  padding:100px 10px 50px 10px; 
  margin:0 5em;
}

.about-inner{
  display:grid; 
  grid-template-columns: auto 1fr;
  align-items: center;
  gap:50px; 
}
.avatar img{
  width:200px; 
  height:auto; 
  border-radius:50% !important;
  box-shadow:var(--shadow);
}

.about-copy p{
  font-size: 24px;
  color: white;
}

.figma {background-color: #f24e1e !important;}
.html {background-color: #e34f26 !important;}
.css {background-color: #264de4 !important;}
.js {background-color: #e0cd56 !important;}
.react {background-color: #5bcae6 !important;}
.php {background-color: #777bb4 !important;}
.illustrator {background-color: #ff9a00 !important;}
.aftereffects {background-color: #9999ff !important;}

.stack{
  list-style:none; 
  padding:0; 
  margin:20px 0 0; 
  display:flex; 
  flex-wrap:wrap; 
  gap:10px;
}

.stack li{
  background:#ffffff20; 
  border:1px solid #ffffff44; 
  padding:.4rem 1.3rem;
  border-radius:999px;
  font-weight:200; 
  backdrop-filter: blur(2px);
  text-wrap: nowrap;
}

@media (min-width: 1800px) {
  .bg-color { padding: 0 20%; }
}

@media (min-width: 1200px) {
  .projects { padding: 3em 10em; }
}

/* Tablet */
@media (max-width: 1024px) {
  .hero-inner p {
    font-size: 24px;
  }
  .hero-inner h1 {
    font-size: 100px;
  }
  .tagline {
    font-size: 30px !important;
  }
  .about { margin: 0 40px; }
  .site-footer { padding: 40px 60px; }
}


/* responsive: stapel onder 900px */
@media (max-width: 900px){
  .card .thumb{ height: 160px; }
  .projects { padding: 3em 4em !important; }
}

@media (max-width: 800px){
  .projects { padding: 3em 3em !important; }
  .grid { gap: 25px; }
}


@media (max-width: 720px) {
  .chaos {padding-bottom: 20px;}
  .mouse {display: none;}
  .name { 
    font-size: 6em !important;
    padding-top:140px;
  }

  .viewheight {
    min-height: 80vh !important; 
  }

  .tagline { font-size: 28px; }
  .projects { 
    margin: 0 30px; 
    padding: 24px 2em !important; 
  }
  .grid { gap: 30px; }
  .card .thumb { height: 140px; }

  .about { margin: 0 20px; padding: 60px 10px; }
  .about-copy p { font-size: 20px; }
  .socials { justify-content: center; }

  .about-inner{grid-template-columns: 1fr}
  .avatar{margin:auto}
  .card {
    grid-column: span 13 !important;
  }
}

@media (max-width: 600px) {
  .projects { padding: 24px 3em; }
  .card {
    height: 14em;
  }
}

@media (max-width: 530px) {
  .name { font-size: 80px !important; margin: 0 0.5em;}
  .roles { font-size: 18px !important; }
  .tagline { font-size: 22px !important; }
  .chaos { font-size: 24px !important; }
  .projects {
    padding: 2em 0.5em;
  }
  .card-title { font-size: 18px !important; }
  .card-meta { font-size: 12px !important; }

  .about-copy p { font-size: 18px !important; }
  .chip { font-size: 14px; padding: .3rem .6rem; }
}

@media (max-width: 460px) {
  .card {
    height: 12em;
    grid-column: span 9 !important;
  }

  .grid {
    grid-template-columns: repeat(1, minmax(0,1fr)) !important;
  }

  .projects {
    padding: 2em 0em !important;
  }
}
 
.card:hover {
  transform: scale(1.3) translateZ(0);
  transition: transform 0.1s ease;
  background-blend-mode: lighten;
}

.grid:hover > .card:not(:hover) {
  transform: scale(0.93);
  transition: transform 0.1s ease;
}