@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Inter:wght@300;400;500;600;700&family=Questrial&family=Space+Mono:wght@400;700&display=swap');

/* --- DESIGN SYSTEM & CSS VARIABLES --- */
:root {
  --bg-dark: #0B0B0B;
  --bg-nav: rgba(22, 22, 22, 0.7);
  --text-primary: #FFFFFF;
  --text-muted: #8E8E93;
  --text-muted-dark: #48484A;
  --accent-blue: #007AFF;
  --accent-glow: rgba(255, 255, 255, 0.05);
  
  --font-heading: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-project: 'Space Mono', monospace;
  --font-brand-22: 'Questrial', sans-serif;

  /* --- TYPOGRAPHY WEIGHTS --- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* --- CENTRALIZED LINE HEIGHTS --- */
  --lh-tight: 1.2;
  --lh-heading: 1.35;
  --lh-body: 1.7;

  /* --- CENTRALIZED RESPONSIVE TYPOGRAPHIC SCALE (Desktop Default) --- */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 26px;
  --fs-xxl: 32px;
  
  --border-glass: 1px solid rgba(255, 255, 255, 0.08);
  --border-glass-hover: 1px solid rgba(255, 255, 255, 0.18);
  --shadow-nav: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.6);
  
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
  scrollbar-gutter: stable; /* Voorkomt layout shift bij verschijnen scrollbar */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: #2C2C2E;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3A3A3C;
}

/* --- HEADER & FLOATING NAVIGATION --- */
.header {
  position: sticky;
  top: 24px;
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  z-index: 1000;
  padding: 0 20px;
  pointer-events: none; /* Make wrapper click-through */
}

.nav-pill {
  pointer-events: auto; /* Re-enable clicks for the nav itself */
  display: flex;
  align-items: center;
  background: var(--bg-nav);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: var(--border-glass);
  border-radius: 100px;
  padding: 8px 16px;
  box-shadow: var(--shadow-nav);
  gap: 8px;
  transition: var(--transition-smooth);
}

.nav-pill:hover {
  border: var(--border-glass-hover);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
}

.nav-link {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 100px;
  letter-spacing: 0.02em;
  transition: var(--transition-fast);
  position: relative;
}

.nav-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.nav-link.active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* --- HERO SECTION --- */
.hero {
  width: 100%;
  max-width: 1200px;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 80px 20px 40px 20px;
  position: relative;
  isolation: isolate;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* 3D Balloon Typography Container */
.hero-balloon-container {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1100px; /* Takes up almost the entire screen width */
  margin-bottom: 32px;
  padding: 20px 0;
  pointer-events: none; /* Make click-through so user can click cards easily */
  transform-style: preserve-3d;
}

/* Ensure individual letters inside the pinned container allow hover trigger in chaos mode */
.balloon-letter {
  pointer-events: auto;
}

.balloon-letter {
  width: 30%; /* Scaled up for maximum screen presence */
  height: auto;
  object-fit: contain;
  margin: 0 -7%; /* Squeeze letters deeply together for overlap */
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.85));
  user-select: none;
  transition: filter 0.4s ease;
  transform-origin: 50% 88%;
  will-change: transform, filter;
}

.secret-trigger {
  position: relative;
  z-index: 3;
  cursor: pointer;
  display: inline-block;
  transform-origin: 50% 60%;
  transition: transform 0.3s ease;
}

.secret-trigger:hover {
  transform: scale(1.2);
}


/* Layering for 3D Overlap */
.letter-j {
  z-index: 5;
}

.letter-e {
  z-index: 4;
}

.letter-l1 {
  z-index: 3;
}

.letter-l2 {
  z-index: 2;
}

.letter-e2 {
  z-index: 1;
}

/* Text block below image, aligned left with the image bounding box */
.hero-text-block {
  width: 100%;
  max-width: 1100px; /* Matches the wide balloon container! */
  padding-left: 48px; /* Left align matching the visual edge of the letters */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hero-subtitle {
  font-family: var(--font-heading);
  font-size: var(--fs-xl); /* High-presence subtitle */
  font-weight: 800; /* Extra bold for maximum presence */
  color: var(--text-primary);
  letter-spacing: -0.03em; /* Slightly tighter for a punchy look */
  /* text-transform: uppercase; */
  line-height: var(--lh-tight);
}

/* Interactive Glitch Element */
.hero-role-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-role {
  font-family: var(--font-heading);
  font-size: var(--fs-lg); /* High-presence role description */
  font-weight: 800; /* Matching extra bold weight */
  color: var(--text-muted);
  letter-spacing: -0.01em;
  /* text-transform: uppercase; */
  position: relative;
  cursor: pointer;
  user-select: none;
  min-height: 24px;
}

.hero-role:hover {
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.terminal-cursor {
  display: inline-block;
  width: 10px;
  height: 18px;
  background-color: var(--text-muted);
  animation: blink 1s step-end infinite;
  margin-left: 4px;
}

/* Keyframes removed - GSAP handles float effects */

@keyframes blink {
  from, to { background-color: transparent }
  50% { background-color: var(--text-muted) }
}

/* --- MIJN WERK SECTION --- */
.werk {
  width: 100%;
  max-width: 1200px;
  padding: 20px 20px 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 10; /* Stack above background balloons */
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-extrabold);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-title.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --- BENTO GRID LAYOUT --- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  width: 100%;
}

/* --- BENTO CARD BASE --- */
.bento-card {
  --card-accent: var(--accent-blue);
  --card-bg-tint: rgba(255, 255, 255, 0.02);
  background: var(--card-bg-tint);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 28px;
  padding: 28px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px;
  min-height: 400px;
  transition: 
    border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Gradient glow layer on hover */
.bento-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.bento-card__icon {
  font-size: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
}

.bento-card__icon svg {
  width: 48px;
  height: 48px;
  display: block;
}

.card-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  box-shadow: 0 0 50px color-mix(in srgb, var(--card-accent) 8%, transparent);
}

.bento-card:hover::before {
  opacity: 1;
}

/* --- CARD SIZE VARIANTS --- */
.bento-card--wide {
  grid-column: span 2;
}

.bento-card--full {
  grid-column: span 3;
}

.bento-card--tall {
  grid-row: span 2;
  min-height: 560px;
}

/* --- ACCENT COLORS PER PROJECT (subtle dark tints) --- */
#card-upfront {
  --card-accent: orangered;
}

#card-locus {
  --card-accent: #30D158; /* Cyber green */
}

#card-22agency {
  --card-accent: rgb(126, 150, 107); /* Muted premium sage green */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
}

/* Custom text logo in Questrial font */
#card-22agency .bento-card__logo-text {
  font-family: var(--font-brand-22);
  font-size: var(--fs-lg); /* Elegant, clean text-logo size */
  font-weight: var(--fw-regular); /* Questrial regular weight */
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-transform: none;
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

#card-22agency:hover .bento-card__logo-text {
  color: var(--card-accent);
  text-shadow: 0 0 10px rgba(126, 150, 107, 0.4);
}

/* Ensure the text content occupies the top of the card */
#card-22agency .bento-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
  max-width: 60%; /* Prevent text from overlapping the phone mockup on the right */
}

/* Make mockup container absolutely positioned at the bottom right, cropped */
#card-22agency .bento-card__mockup {
  position: absolute;
  right: -24px;
  bottom: -36px;
  width: 58%; /* Narrower width for mobile aspect ratio */
  height: 78%; /* Taller height to show the vertical mobile mockup */
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  border-radius: 0 0 28px 0;
  z-index: 1;
  overflow: visible; /* Let the tilted phone rotate and float cleanly */
}

/* Style the mobile browser mockup image (rotated to the left like Tema mockup) */
#card-22agency .bento-card__mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 28px; /* High rounding to look like an iPhone frame */
  border: 4px solid #1C1C1E; /* Dark metallic phone border frame */
  box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.65);
  transform: translate(20px, 30px) rotate(-15deg) scale(0.96); /* Tilted left, shifted down/right like Tema mockup */
  transition: 
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s ease,
    filter 0.6s ease;
  filter: brightness(0.85);
}

/* Hover effect: phone floats up and left, straightens slightly, and lights up */
#card-22agency:hover .bento-card__mockup img {
  transform: translate(0px, 5px) rotate(-10deg) scale(1.05);
  border-color: var(--card-accent); /* Glow border frame with the brand accent color! */
  filter: brightness(1);
}

#card-schoolhub {
  --card-accent: #30D158;
}

#card-egolift {
  --card-accent: #FF9F0A;
}

#card-wereldmuseum {
  --card-accent: #FF5E00; /* Vibrant premium orange */
}

/* --- CARD CONTENT & HEADER --- */
.bento-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bento-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.bento-card__icon {
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
}

.card-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* --- CUSTOM UPFRONT SQUIRCLE APP ICON --- */
#card-upfront .bento-card__icon {
  width: 44px; /* larger app icon size */
  height: 44px;
  background-color: #FFFFFF;
  border-radius: 11px; /* perfect squircle-like radius for 44px */
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#card-upfront:hover .bento-card__icon {
  transform: scale(1.05) rotate(2deg); /* subtle premium micro-interaction */
}

#card-upfront .card-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bento-card__name {
  font-family: var(--font-project);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.4s ease;
}

.bento-card:hover .bento-card__name {
  color: var(--text-primary);
}

.bento-card__headline {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
  position: relative;
  z-index: 2;
  transition: color 0.4s ease;
}

/* --- MOCKUP CONTAINERS & IMAGES --- */
.bento-card__mockup {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Wide card layout (horizontal) */
.bento-card--wide {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.bento-card--wide .bento-card__content {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  position: relative;
  z-index: 2;
  padding-right: 16px;
}

.bento-card--wide .bento-card__headline {
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
}

.bento-card--wide .bento-card__mockup {
  flex: 1;
  margin-right: -28px;
  margin-bottom: -28px;
  margin-top: -28px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  border-radius: 0 28px 28px 0;
  z-index: 2;
  position: relative;
}

.bento-card--wide .bento-card__mockup .mockup-main {
  width: 92%;
  height: 92%;
  object-fit: cover;
  object-position: left top;
  border-radius: 20px 0 0 0;
  box-shadow: -12px -12px 35px rgba(0, 0, 0, 0.6);
  transform: translateY(28px) translateX(28px);
  transition: 
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.85);
  position: relative;
  z-index: 2;
}

.bento-card--wide:hover .bento-card__mockup .mockup-main {
  transform: translateY(18px) translateX(18px);
  filter: brightness(1);
}

.bento-card--wide .mockup-closeup {
  position: absolute;
  width: 38%; /* Larger visual presence (was 32%) */
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: -15px 15px 40px rgba(0, 0, 0, 0.7);
  z-index: 1;
  right: 5%;
  bottom: 5%;
  /* Start offset slightly higher to match new scale and larger dimensions */
  transform: translate(-60px, -70px) rotate(-8deg) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: 
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s ease;
  filter: brightness(0.85);
}

.bento-card--wide:hover .mockup-closeup {
  opacity: 1;
  /* Slides further to the left and even higher up on hover, scaled larger */
  transform: translate(-180px, -130px) rotate(-12deg) scale(1.12);
  filter: brightness(1);
}

/* --- LOCUS FLOATING SENTIMENT BADGES --- */
.locus-sticker {
  position: absolute;
  z-index: 3;
  padding: 6px 14px;
  border-radius: 100px;
  font-family: var(--font-project);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  user-select: none;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}

.locus-sticker--positive {
  left: -20px;
  top: 45%;
  transform: translateY(-50%) rotate(-15deg);
  background: rgba(48, 209, 88, 0.15);
  border: 1px solid rgba(48, 209, 88, 0.4);
  color: #30D158;
  text-shadow: 0 0 10px rgba(48, 209, 88, 0.3);
}

#card-locus:hover .locus-sticker--positive {
  transform: translateY(-50%) rotate(-5deg) scale(1.08) translateX(240px);
  box-shadow: 0 12px 25px rgba(48, 209, 88, 0.3);
}

.locus-sticker--negative {
  right: -20px;
  top: 38%;
  transform: translateY(-50%) rotate(15deg);
  background: rgba(255, 69, 58, 0.15);
  border: 1px solid rgba(255, 69, 58, 0.4);
  color: #FF453A;
  text-shadow: 0 0 10px rgba(255, 69, 58, 0.3);
}

#card-locus:hover .locus-sticker--negative {
  transform: translateY(-50%) rotate(5deg) scale(1.08) translateX(-240px);
  box-shadow: 0 12px 25px rgba(255, 69, 58, 0.3);
}

/* --- UPFRONT GEL FLY-IN FROM LEFT (WITH ROTATION) --- */
#card-upfront .mockup-gel {
  position: absolute;
  top: 50%;
  left: 28px; /* aligns perfectly with card padding */
  width: 48%; /* fits the left content column size nicely and stands out gorgeously */
  height: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform: translateY(-50%) translateX(-140%) rotate(-25deg); /* start outside on the left, rotated */
  transition: 
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
    opacity 0.6s ease;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5)); /* premium drop-shadow for transparent PNG */
}

#card-upfront:hover .mockup-gel {
  opacity: 1;
  transform: translateY(-50%) translateX(0) rotate(5deg); /* fly in and settle with a 5deg tilt */
}

/* --- 22AGENCY INSTAGRAM FLY-IN --- */
.mockup-instagram {
  position: absolute;
  left: 32px;
  bottom: 32px;
  width: 58px;
  height: 58px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.5));
  transform: translate(-80px, 80px) rotate(-30deg) scale(0.8);
  transition: 
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease,
    filter 0.6s ease;
}

#card-22agency:hover .mockup-instagram {
  opacity: 1;
  transform: translate(0, 0) rotate(8deg) scale(1.08);
  filter: drop-shadow(0 15px 30px rgba(250, 112, 154, 0.35));
}

/* Tall card layout (vertical) */
.bento-card--tall .bento-card__mockup {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px -28px;
  border-radius: 0;
}

.bento-card--tall .bento-card__mockup img {
  width: 88%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  transform: translateY(0);
  transition: 
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.85);
}

.bento-card--tall:hover .bento-card__mockup img {
  transform: translateY(-8px) scale(1.02);
  filter: brightness(1);
}

/* Square card layout (vertical) */
.bento-card:not(.bento-card--wide):not(.bento-card--tall) .bento-card__mockup {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px -28px;
  border-radius: 0;
}

.bento-card:not(.bento-card--wide):not(.bento-card--tall) .bento-card__mockup img {
  width: 82%;
  height: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  transform: translateY(0);
  transition: 
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: brightness(0.85);
}

.bento-card:not(.bento-card--wide):not(.bento-card--tall):hover .bento-card__mockup img {
  transform: translateY(-6px) scale(1.02);
  filter: brightness(1);
}

/* --- CUSTOM WIDGETS FOR NEW BENTO BOXES --- */

/* Het Wereldmuseum Spaced Mockup */
#card-wereldmuseum {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 16px;
}

#card-wereldmuseum .bento-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
  max-width: 60%;
}

.wereldmuseum-spaced-mockup {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 90%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: visible;
}

.wereldmuseum-spaced-mockup img {
  position: absolute;
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease, filter 0.6s ease;
  filter: brightness(0.85);
}

.wereldmuseum-mockup-card {
  width: 80%;
  height: auto;
  left: -35px;
  top: 15px;
  transform: rotate(-10deg) scale(0.85);
  z-index: 2;
}

.wereldmuseum-mockup-app {
  width: 60%;
  height: auto;
  right: -15px;
  bottom: -10px;
  transform: rotate(8deg) scale(0.9);
  z-index: 3;
}

#card-wereldmuseum:hover .wereldmuseum-mockup-card {
  transform: rotate(-14deg) translate(-15px, -10px) scale(0.92);
  box-shadow: -20px 25px 50px rgba(0, 0, 0, 0.55);
  filter: brightness(1);
}

#card-wereldmuseum:hover .wereldmuseum-mockup-app {
  transform: rotate(12deg) translate(15px, -15px) scale(0.98);
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.6);
  filter: brightness(1);
}

/* Sticker Note (Playground) */
#card-playground .bento-card__mockup {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}

.sticker-note {
  background: linear-gradient(135deg, #FFE082, #FFD54F);
  color: #0B0B0B;
  font-family: var(--font-project);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  padding: 16px 24px;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transform: rotate(-5deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.sticker-text {
  letter-spacing: 0.02em;
}

#card-playground:hover .sticker-note {
  transform: rotate(3deg) scale(1.06);
  box-shadow: 0 15px 40px rgba(255, 213, 79, 0.2);
}

/* Badge Cloud (Education) */
#card-education .bento-card__mockup {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}

.badge-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 85%;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tech-badge {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#card-education:hover .tech-badge {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.06);
}

/* Stagger tech badges float slightly */
#card-education:hover .tech-badge:nth-child(2n) {
  transform: translateY(-6px);
}
#card-education:hover .tech-badge:nth-child(3n) {
  transform: translateY(-3px);
}

/* Social buttons (Connect) */
#card-connect .bento-card__mockup {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
  margin-bottom: 0;
  margin-top: 0;
  border-radius: 28px;
}

.social-btn-container {
  display: flex;
  gap: 16px;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 16px;
  font-family: var(--font-project);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.linkedin-btn {
  background: rgba(0, 122, 255, 0.1);
  border: 1px solid rgba(0, 122, 255, 0.2);
  color: #007AFF;
}

.instagram-btn {
  background: rgba(191, 90, 242, 0.1);
  border: 1px solid rgba(191, 90, 242, 0.2);
  color: #BF5AF2;
}

.linkedin-btn:hover {
  background: #007AFF;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 122, 255, 0.3);
  transform: translateY(-4px);
}

.instagram-btn:hover {
  background: #BF5AF2;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(191, 90, 242, 0.3);
  transform: translateY(-4px);
}

@media (max-width: 480px) {
  .social-btn-container {
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 0 20px;
  }
  .social-btn {
    justify-content: center;
    width: 100%;
  }
}

/* --- VIEW TRANSITIONS (bento → project detail) --- */
@view-transition {
  navigation: auto;
}

body.overlay-open {
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-root-out 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  ::view-transition-new(root) {
    animation: vt-root-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  ::view-transition-group(project-card) {
    animation-duration: 0.72s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  ::view-transition-old(project-card) {
    animation: vt-card-morph-out 0.72s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  ::view-transition-new(project-card) {
    animation: vt-card-morph-in 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  ::view-transition-group(project-hero) {
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }

  ::view-transition-old(project-hero) {
    animation: vt-hero-out 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  ::view-transition-new(project-hero) {
    animation: vt-hero-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes vt-root-out {
  to {
    opacity: 0;
    filter: blur(10px) brightness(0.55);
    transform: scale(0.97);
  }
}

@keyframes vt-root-in {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}

@keyframes vt-card-morph-out {
  to {
    border-radius: 24px;
    filter: brightness(1.05);
  }
}

@keyframes vt-card-morph-in {
  from {
    border-radius: 28px;
    filter: brightness(0.9);
    transform: scale(0.92);
  }
}

@keyframes vt-hero-out {
  to {
    filter: brightness(1);
  }
}

@keyframes vt-hero-in {
  from {
    filter: brightness(0.85);
    transform: scale(0.88);
  }
}

  /* header/visit styles moved to main header block to avoid duplication */

/* --- PROJECT DETAIL OVERLAY --- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.overlay.active {
  display: flex;
}

.overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: 
    background 0.4s ease,
    backdrop-filter 0.4s ease,
    -webkit-backdrop-filter 0.4s ease;
}

.overlay.active .overlay__backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.overlay__panel {
  --overlay-accent: #007AFF;
  --overlay-top-margin: 64px;
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(85vh - var(--overlay-top-margin));
  margin-top: var(--overlay-top-margin);
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  overflow-y: auto;
  transform: translateY(100%);
  opacity: 0;
  z-index: 1;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;

  /* Custom scrollbar for overlay */
  scrollbar-width: thin;
  scrollbar-color: #2C2C2E #161616;
}

.overlay__panel.active {
  transform: translateY(0);
  opacity: 1;
}

body.overlay-vt .overlay__panel {
  transition: none;
}

.overlay__panel::-webkit-scrollbar {
  width: 6px;
}
.overlay__panel::-webkit-scrollbar-track {
  background: transparent;
}
.overlay__panel::-webkit-scrollbar-thumb {
  background: #2C2C2E;
  border-radius: 3px;
}

/* Accent glow at top of panel */
.overlay__panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: radial-gradient(
    ellipse at 50% 0%,
    color-mix(in srgb, var(--overlay-accent) 15%, transparent),
    transparent 80%
  );
  pointer-events: none;
  z-index: 0;
}

.overlay__close {
  position: sticky;
  top: 28px;
  float: right;
  margin: 28px 28px 0 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  z-index: 2;
}

.overlay__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.overlay__content {
  position: relative;
  z-index: 1;
  padding: 40px 36px 48px 36px;
}

.overlay__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-right: 80px; /* more space to avoid overlap with close button */
}

.overlay__icon {
  font-size: 36px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
}

.overlay__icon:has(.overlay-icon-img[src*="upfrontlogo"]) {
  min-width: 48px;
  height: 48px;
}

.overlay__icon--22agency {
  font-family: var(--font-brand-22) !important;
  font-size: var(--fs-lg) !important;
  font-weight: var(--fw-regular) !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary);
  text-transform: none !important;
  min-width: max-content !important;
}

.overlay-icon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.overlay-icon-img[src*="upfrontlogo"] {
  width: 48px; /* larger app icon size in overlay */
  height: 48px;
  background-color: #FFFFFF;
  border-radius: 12px; /* squircle radius */
  padding: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.overlay__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  color: var(--text-primary);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0; /* allow truncation in flex container */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay__visit {
  display: inline-block;
  background: var(--overlay-accent, #007AFF);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.95rem;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  margin: 18px 0; /* top/bottom spacing, left aligned */
  align-self: flex-start;
  width: max-content;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.06);
}

.overlay__visit:hover {
  filter: brightness(0.95);
}

.overlay__visit[hidden] {
  display: none !important;
}

.overlay__tags {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.overlay__tag {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--overlay-accent) 30%, transparent);
  background: color-mix(in srgb, var(--overlay-accent) 10%, transparent);
}

.overlay__image {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.overlay__image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Tall mobile mockups — 22agency & Wereldmuseum */
.overlay__image--portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  background: rgba(0, 0, 0, 0.2);
}

.overlay__image--portrait img {
  width: auto;
  max-width: min(240px, 68%);
  max-height: min(360px, 42vh);
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.overlay__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.overlay__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.overlay__section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.overlay__text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  line-height: var(--lh-body);
  opacity: 0.85;
}

.overlay__tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.overlay__tool {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: var(--transition-fast);
}

.overlay__tool:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

/* --- RESPONSIVENESS --- */
@media (max-width: 768px) {
  .header {
    top: 16px;
  }
  
  .nav-pill {
    padding: 6px 12px;
  }
  
  .nav-link {
    padding: 8px 16px;
  }
  
  .hero {
    min-height: auto;
    padding: 72px 16px 28px;
  }

  .hero-balloon-container {
    max-width: 100%;
    margin-bottom: 12px;
    padding: 4px 0;
  }

  .balloon-letter {
    width: 26%;
    margin: 0 -8%;
  }

  .hero-text-block {
    max-width: 100%;
    padding-left: 8px;
    gap: 8px;
  }

  .hero-subtitle {
    font-size: var(--fs-lg);
    line-height: 1.2;
  }

  .hero-role {
    font-size: var(--fs-md);
    min-height: 20px;
  }

  .terminal-cursor {
    height: 12px;
    width: 6px;
  }

  /* Bento Grid → 1 column on mobile */
  .werk {
    padding: 10px 16px 60px 16px;
  }

  .bento-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bento-card--wide,
  .bento-card--full {
    grid-column: span 1;
    flex-direction: column;
  }

  .bento-card--tall {
    grid-row: span 1;
    min-height: 360px;
  }

  /* Unified mobile stack: text block → mockup */
  .bento-card,
  .bento-card--wide,
  #card-22agency,
  #card-wereldmuseum {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 20px;
    height: auto;
    min-height: 0;
    border-radius: 20px;
    gap: 16px;
    overflow: hidden;
  }

  .bento-card__content,
  #card-22agency .bento-card__content,
  #card-wereldmuseum .bento-card__content,
  .bento-card--wide .bento-card__content {
    flex: 0 0 auto;
    order: 1;
    width: 100%;
    max-width: 100%;
    height: auto;
    gap: 10px;
    padding-right: 0;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
  }

  .bento-card__header {
    flex: 0 0 auto;
    gap: 10px;
    width: 100%;
  }

  .bento-card__headline,
  .bento-card--wide .bento-card__headline {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    position: static;
    font-size: 1.125rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
  }

  .bento-card__name {
    font-size: var(--fs-xs);
  }

  #card-22agency .bento-card__logo-text {
    font-size: 1.2rem;
    line-height: 1.2;
  }

  #card-upfront .bento-card__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .bento-card__mockup,
  .bento-card--wide .bento-card__mockup,
  #card-22agency .bento-card__mockup,
  #card-wereldmuseum .wereldmuseum-spaced-mockup,
  #card-upfront .bento-card__mockup,
  #card-locus .bento-card__mockup {
    order: 2;
    flex: 0 0 auto;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 160px;
    max-height: 220px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 16px;
  }

  #card-upfront .bento-card__mockup .mockup-main {
    position: relative;
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center top;
    transform: none;
    filter: brightness(0.95);
    opacity: 1;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  }

  #card-upfront:hover .bento-card__mockup .mockup-main {
    transform: none;
    filter: brightness(1);
  }

  .bento-card--wide .bento-card__mockup img:not(.mockup-bar) {
    width: min(100%, 280px);
    height: auto;
    border-radius: 12px;
    transform: none;
  }

  #card-22agency .bento-card__mockup img {
    width: auto;
    max-width: min(200px, 72%);
    height: auto;
    max-height: 200px;
    object-fit: contain;
    object-position: center;
    transform: none;
    margin: 0 auto;
    display: block;
    border-width: 3px;
    filter: brightness(0.9);
  }

  #card-22agency:hover .bento-card__mockup img {
    transform: none;
    filter: brightness(0.95);
  }

  .bento-card--wide:hover .bento-card__mockup img:not(.mockup-bar) {
    transform: none;
  }

  .bento-card--wide .mockup-gel,
  .bento-card--wide .mockup-closeup,
  .mockup-instagram,
  .locus-sticker {
    display: none;
  }

  #card-wereldmuseum .wereldmuseum-mockup-card {
    position: static;
    width: min(82%, 240px);
    left: auto;
    top: auto;
    bottom: auto;
    transform: rotate(-6deg);
  }

  #card-wereldmuseum .wereldmuseum-mockup-app {
    display: none;
  }

  .bento-card--tall .bento-card__mockup {
    order: 2;
    margin: 0;
  }

  .bento-card__mockup img,
  .bento-card:not(.bento-card--wide):not(.bento-card--tall) .bento-card__mockup img {
    width: min(100%, 280px);
    height: auto;
    max-height: 200px;
    object-fit: contain;
    transform: none;
  }

  /* Overlay → full width on mobile */
  .overlay__panel {
    --overlay-top-margin: 40px;
    max-width: 100%;
    max-height: calc(90vh - var(--overlay-top-margin));
    border-radius: 20px;
  }

  .overlay__content {
    padding: 32px 20px 36px 20px;
  }

  .overlay__close {
    top: 20px;
    margin: 20px 20px 0 0;
  }

  .overlay__header {
    padding-right: 48px;
  }

  .overlay__icon {
    font-size: 28px;
  }

  .overlay__image--portrait {
    padding: 20px 16px;
  }

  .overlay__image--portrait img {
    max-width: min(200px, 75%);
    max-height: min(300px, 38vh);
  }

}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-card--tall {
    grid-row: span 1;
    min-height: 360px;
  }

  .bento-card--wide,
  .bento-card--full {
    grid-column: span 2;
  }

  /* Narrow half-width columns: same text stack as mobile */
  .bento-card__content,
  #card-22agency .bento-card__content,
  #card-wereldmuseum .bento-card__content,
  .bento-card--wide .bento-card__content {
    max-width: 100%;
    width: 100%;
    height: auto;
    justify-content: flex-start;
  }

  .bento-card__headline,
  .bento-card--wide .bento-card__headline {
    width: 100%;
    max-width: 100%;
    position: static;
    font-size: 1.125rem;
    line-height: 1.35;
  }

  #card-22agency .bento-card__mockup {
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    min-height: 200px;
    margin-top: 12px;
    overflow: hidden;
  }

  #card-22agency .bento-card__mockup img {
    width: auto;
    max-width: min(220px, 65%);
    height: auto;
    max-height: 220px;
    object-fit: contain;
    transform: none;
    margin: 0 auto;
    display: block;
  }

  #card-wereldmuseum {
    flex-direction: column;
  }

  #card-wereldmuseum .wereldmuseum-spaced-mockup {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 200px;
    margin-top: 12px;
  }

  #card-upfront .bento-card__content {
    height: auto;
    max-width: 100%;
  }

  #card-upfront .bento-card__mockup {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    margin: 12px 0 0;
    min-height: 200px;
  }

  #card-upfront .bento-card__mockup .mockup-main {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
    transform: none;
    margin: 0 auto;
    display: block;
  }
}

/* --- ABOUT ME (OVER MIJ) SECTION --- */
.over {
  width: 100%;
  padding: 180px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 10; /* Keep it on top of the pinned balloons */
  background: var(--bg-dark); /* Solid background so balloons are covered when fully scrolled */
}

.over-centered-container {
  max-width: 960px;
  text-align: center;
}

.over-bio-text {
  font-family: var(--font-heading);
  font-size: var(--fs-xxl); /* Large Bricolage Grotesque (32px) */
  font-weight: var(--fw-bold);
  line-height: 1.6;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.bio-emoji {
  display: inline-block;
  font-family: initial; /* Use default emoji system font */
  margin: 0 4px;
  transform: translateY(2px);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
  font-size: 1.05em;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bio-emoji:hover {
  transform: translateY(-4px) scale(1.3) rotate(-8deg) !important;
}

/* --- INLINE STACKED PHOTO CLUSTER --- */
.bio-photo-stack {
  display: inline-block;
  position: relative;
  width: 48px;
  height: 0;          /* contributes nothing to line height */
  overflow: visible;  /* photos still render outside */
  vertical-align: middle;
  margin: 0 6px;
  flex-shrink: 0;
}

/* Invisible hit-area — covers the full photo area above the zero-height wrapper */
.bio-photo-stack::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  right: -80px;
  bottom: 20px;
}

.bio-photo {
  position: absolute;
  top: -24px;   /* shift up by half of 48px to center on the line */
  left: 0;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
  padding: 3px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
}

/* Stacked default tilts */
.bio-photo--1 { transform: rotate(-8deg);  z-index: 1; }
.bio-photo--2 { transform: rotate( 5deg);  z-index: 3; }
.bio-photo--3 { transform: rotate(-3deg);  z-index: 2; }

/* Fan out and grow on hover — spread around the center of the wrapper and scale up */
.bio-photo-stack:hover .bio-photo--1 {
  transform: scale(2.4) rotate(-6deg) translateX(-55px) translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.bio-photo-stack:hover .bio-photo--2 {
  transform: scale(2.5) rotate(0deg) translateY(-12px);
  z-index: 4;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65);
}
.bio-photo-stack:hover .bio-photo--3 {
  transform: scale(2.4) rotate(6deg) translateX(55px) translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* --- SKILL CHIPS (1) --- */
/* --- MONOSPACE CODE CHIP --- */
.code-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 4px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
  font-size: 0.72em;
  font-weight: 550;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #181818; /* Solid deep dark editor canvas background */
  color: #ffd700; /* Yellow brackets as default */
  vertical-align: middle;
  position: relative;
  top: -2px;
  cursor: default;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.code-chip:hover {
  border-color: rgba(96, 165, 250, 0.45);
  background: #121212;
  box-shadow: 
    0 4px 16px rgba(96, 165, 250, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1.5px);
}

/* Brackets that push out on hover and change syntax colorization */
.code-bracket {
  color: #ffd700; /* Gold */
  font-weight: 700;
  font-size: 1.05em;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.code-chip:hover .code-bracket {
  color: #da70d6; /* Purplish-pink colorized bracket on hover! */
}

.code-chip:hover .code-bracket:first-of-type {
  transform: translateX(-3px);
}

.code-chip:hover .code-bracket:last-of-type {
  transform: translateX(3px);
}

.code-text {
  color: #9cdcfe; /* IDE Variable/identifier cyan-blue */
  font-weight: 600;
  padding: 0 3px;
  transition: color 0.3s ease;
}

.code-chip:hover .code-text {
  color: #4fc1ff; /* Brighter editor cyan */
}

/* --- FIGMA COMPONENT CHIP --- */
.figma-component {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 3px 10px 4px 8px;
  border-radius: 4px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1.5px solid #a259ff;
  background: rgba(162, 89, 255, 0.06);
  color: #a259ff;
  vertical-align: middle;
  top: -2px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  gap: 4px;
}

/* Corner handles like Figma selection bounding box */
.figma-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #ffffff;
  border: 1px solid #a259ff;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.figma-dot--tl { top: -3.5px; left: -3.5px; }
.figma-dot--tr { top: -3.5px; right: -3.5px; }
.figma-dot--bl { bottom: -3.5px; left: -3.5px; }
.figma-dot--br { bottom: -3.5px; right: -3.5px; }

/* Show figma dots and scale up on hover */
.figma-component:hover {
  background: rgba(162, 89, 255, 0.12);
  box-shadow: 0 0 14px rgba(162, 89, 255, 0.25);
  transform: translateY(-1.5px);
}

.figma-component:hover .figma-dot {
  opacity: 1;
}

/* Figma component badge icon ❖ */
.figma-badge {
  font-size: 1.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.figma-component:hover .figma-badge {
  transform: scale(1.2) rotate(90deg);
}

/* --- ANIMATED STAT PILL (5) --- */
.bio-stat-pill {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  position: relative;
  top: -2px;
  cursor: default;
  gap: 0;
}

.bio-stat-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  padding: 2px 10px 3px;
  border-radius: 100px;
  font-size: 0.72em;
  font-weight: var(--fw-bold);
  font-family: var(--font-project);
  letter-spacing: 0.04em;
  background: rgba(255, 159, 10, 0.1);
  border: 1px solid rgba(255, 159, 10, 0.35);
  color: #FF9F0A;
  gap: 4px;
}

.bio-stat-count {
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
  display: inline-block;
  text-align: center;
}

/* --- DGTLMOTION TOOLTIP CARD (7) --- */
.bio-dgtl-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease;
}

.bio-dgtl-tooltip:hover {
  text-decoration-color: transparent;
}

.bio-dgtl-card {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  background: rgba(20, 20, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px 20px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition:
    opacity 0.25s ease,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 200;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255,255,255,0.06);
  white-space: nowrap;
}

/* Invisible bridge to close the gap and prevent premature hover loss */
.bio-dgtl-card::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  background: transparent;
}

/* Downward arrow */
.bio-dgtl-card::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(20, 20, 22, 0.96);
}

.bio-dgtl-tooltip:hover .bio-dgtl-card {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.bio-dgtl-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.bio-dgtl-card__role {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: var(--fw-regular);
}

.bio-dgtl-card__link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-project);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #60a5fa;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}

.bio-dgtl-card__link:hover {
  color: #fff;
}

/* --- SVG HANDWRITTEN UNDERLINE (4) --- */
.bio-underline {
  position: relative;
  display: inline;
}

.bio-underline__line {
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 10px;
  overflow: visible;
  pointer-events: none;
}

.bio-underline__line path {
  stroke-dasharray: 315;
  stroke-dashoffset: 315;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bio-underline:hover .bio-underline__line path {
  stroke-dashoffset: 0;
}

/* --- FOOTER & CONTACT --- */
.footer {
  width: 100%;
  max-width: 1200px;
  background: var(--bg-dark);
  border-top: var(--border-glass);
  padding: 80px 20px 48px;
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.footer-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.footer-brand {
  display: block;
  color: var(--text-primary);
  width: 100%;
}

.footer-brand__text {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 10vw, 5.5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 95, "wght" 800;
  letter-spacing: -0.04em;
  line-height: var(--lh-tight);
  color: var(--text-primary);
  max-width: 100%;
  transition: color 0.35s ease;
}

.footer-brand:hover .footer-brand__text {
  color: rgba(255, 255, 255, 0.75);
}

.footer-brand:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.35);
  outline-offset: 6px;
  border-radius: 4px;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 20px 32px;
}

.footer-meta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
}

.footer-meta__item,
.footer-meta__link {
  font-family: var(--font-heading);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.footer-meta__link {
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-meta__button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-heading);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.25s ease;
}

.footer-meta__link:hover {
  color: var(--text-primary);
}

.footer-meta__button:hover,
.footer-meta__button.is-copied {
  color: var(--text-primary);
}

.footer-meta__link:focus-visible,
.footer-meta__button:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.35);
  outline-offset: 3px;
}

/* --- RESPONSIVE STYLE ADJUSTMENTS --- */
@media (max-width: 768px) {
  .over {
    padding: 100px 20px;
  }
  
  .over-bio-text {
    font-size: var(--fs-lg); /* Punchy but legible on mobile (22px) */
    line-height: 1.6;
  }
  
  .bio-emoji {
    font-size: 1em;
  }
  
  .footer {
    padding: 60px 16px 36px;
  }

  .footer-brand__text {
    font-size: clamp(2.25rem, 12vw, 3.25rem);
  }

  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer-meta__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  /* Mobile Bio Photo Stack */
  .bio-photo-stack {
    width: 38px;
    margin: 0 4px;
  }
  .bio-photo {
    width: 38px;
    height: 38px;
    top: -19px;
    padding: 2px;
  }
  .bio-photo-stack:hover .bio-photo--1 {
    transform: scale(2.4) rotate(-6deg) translateX(-45px) translateY(-4px);
  }
  .bio-photo-stack:hover .bio-photo--2 {
    transform: scale(2.5) rotate(0deg) translateY(-10px);
  }
  .bio-photo-stack:hover .bio-photo--3 {
    transform: scale(2.4) rotate(6deg) translateX(45px) translateY(-4px);
  }
}

/* --- PREMIUM PRELOADER STYLES --- */

body.loading {
  overflow: hidden;
  height: 100vh;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-dark);
  z-index: 99999; /* Zorg dat dit absoluut boven alles zweeft */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.preloader-counter-wrapper {
  position: relative;
}

.preloader-percent {
  font-family: var(--font-project); /* Monospaced Space Mono */
  font-size: clamp(5rem, 12vw, 9rem); /* Schaalbaar op mobiel en desktop */
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums; /* Voorkomt trillen van de cijfers bij optellen */
  display: inline-block;
  position: relative;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.preloader-status-wrapper {
  min-height: 24px;
}

.preloader-log {
  font-family: var(--font-project); /* Space Mono */
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.8;
  position: relative;
}

/* Voorbereiding voor vloeiende intro van de website elementen */
.nav-pill {
  transform: translateY(-100px);
  opacity: 0;
}

.hero-balloon-container .balloon-letter {
  opacity: 0;
  transform: scale(0.3) translateY(100px);
}

.hero-text-block {
  opacity: 0;
  transform: translateY(30px);
}