/* Animations */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
}

.animate-fade-in.delay-100 {
    animation-delay: 0.2s;
}

.animate-fade-in.delay-200 {
    animation-delay: 0.4s;
}

.animate-bounce {
    animation: bounce 2s infinite;
}


/* ===== Urbanist webfont (local) =====
   Plaats de uitgepakte Urbanist.zip in: assets/fonts/Urbanist/
   zodat deze paden bestaan:
   - assets/fonts/Urbanist/static/Urbanist-Regular.ttf
   - assets/fonts/Urbanist/static/Urbanist-ExtraBold.ttf
*/
@font-face{
  font-family: "Urbanist";
  src: url("assets/fonts/Urbanist/static/Urbanist-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Urbanist";
  src: url("assets/fonts/Urbanist/static/Urbanist-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Typography defaults */
body{
  font-family: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
}
/* Custom styles */
/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0B0B0B;
}

::-webkit-scrollbar-thumb {
    background: rgba(187,205,215,0.55);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(187,205,215,0.75);
}

/* Custom form styles */
.form-input {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.form-input:focus {
    border-color: var(--b079-accent);
    box-shadow: 0 0 0 3px rgba(187,205,215,0.25);
}

/* Portfolio hover effect */
.portfolio-item {
    transition: transform 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
}

/* Anchor offset for fixed navbar */
section[id] { scroll-margin-top: 80px; }


/* ===== Bureau079 dark + pixel-noise theme ===== */
:root{
  --b079-accent: #BBCDD7; /* huisstijlkleur */
  --accent: #BBCDD7;
  --b079-bg: #0B0B0B;
}

/* Global background */
html{ background: var(--b079-bg); min-height: 100%; position: relative; }
body{
  background: transparent;
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.92);
}

/* Pixel-noise overlay (cross-browser, fixed behind content) */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image: url("assets/deeltjes2.png");
  background-repeat: no-repeat;
  background-position: center center;
  /* Slightly larger tile = calmer noise */
  background-size: 1280px 1280px;
  image-rendering: pixelated;
  pointer-events: none;
  /* Subtle, as requested */
  opacity: 0.3;
  z-index: 0;
}

/* Optional vignette for depth */
html::after{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 50% 20%, rgba(187,205,215,0.06), transparent 60%),
    radial-gradient(900px 500px at 10% 80%, rgba(187,205,215,0.04), transparent 55%),
    radial-gradient(900px 500px at 90% 80%, rgba(187,205,215,0.03), transparent 55%),
    radial-gradient(1200px 800px at 50% 50%, transparent 35%, rgba(0,0,0,0.65) 100%);
  pointer-events:none;
  z-index:0;
}




/* Heading weights:
   - Hero H1 (grote kop): Urbanist 800
   - Alle overige koppen (h2–h6): Urbanist 400
   (force overrides Tailwind utilities such as font-bold/font-semibold)
*/
#home h1{
  font-family: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 800 !important;
}
:is(h2,h3,h4,h5,h6){
  font-family: "Urbanist", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* Accent typography + highlights */
/* Headings: always accent (override Tailwind utilities like text-white / text-gray-900) */
body.b079-dark :is(h1,h2,h3,h4,h5,h6){
  color: var(--b079-accent) !important;
}

/* Small section kickers / labels */
body.b079-dark .b079-kicker{
  color: rgba(187,205,215,0.88) !important;
}
body.b079-dark .text-indigo-700,
body.b079-dark .text-indigo-800{
  color: var(--b079-accent) !important;
}

body.b079-dark .bg-indigo-100{
  background-color: rgba(187,205,215,0.10) !important;
  border: 1px solid rgba(187,205,215,0.18);
}

body.b079-dark a{
  color: rgba(255,255,255,0.90);
}
body.b079-dark a:hover{
  color: var(--b079-accent);
}
/* Utility classes used in HTML/components */
.b079-noise{
  background: transparent !important;
}
.b079-accent-text{ color: var(--b079-accent) !important; }
.b079-accent-bg{
  background-color: var(--b079-accent) !important;
  color: #0B0B0B !important;
}
.b079-accent-bg:hover{ filter: brightness(1.05); }
.b079-soft-surface{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.b079-soft-surface:hover{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* ===== Tailwind class remaps for dark theme (minimal HTML changes) ===== */
body.b079-dark main > section.bg-white,
body.b079-dark main > section.bg-gray-50{
  background: transparent !important;
}

body.b079-dark .bg-white,
body.b079-dark .bg-gray-50{
  background: rgba(255,255,255,0.04) !important;
}

body.b079-dark .text-gray-900{ color: rgba(255,255,255,0.95) !important; }
body.b079-dark .text-gray-700{ color: rgba(255,255,255,0.75) !important; }
body.b079-dark .text-gray-600{ color: rgba(255,255,255,0.70) !important; }
body.b079-dark .text-gray-500{ color: rgba(255,255,255,0.60) !important; }

body.b079-dark .border-gray-100,
body.b079-dark .border-gray-200{
  border-color: rgba(255,255,255,0.10) !important;
}

/* Indigo utility colors -> Bureau079 accent */
body.b079-dark .text-indigo-700,
body.b079-dark .hover\:text-indigo-700:hover{ color: var(--b079-accent) !important; }

body.b079-dark .hover\:text-indigo-800:hover{ color: rgba(187,205,215,0.90) !important; }

body.b079-dark .bg-indigo-100{ background: rgba(187,205,215,0.10) !important; }

/* Project cards as buttons */
button[data-project]{ text-align:left; width:100%; }
button[data-project]:focus{ outline:none; }


/* Modal gallery */
.b079-thumb-active{ outline: 2px solid var(--b079-accent); outline-offset: 2px; }


/* Horizontal thumbnail scroller */
.b079-thumbs{ scrollbar-width: thin; scrollbar-color: rgba(187,205,215,0.55) transparent; }
.b079-thumbs::-webkit-scrollbar{ height: 8px; }
.b079-thumbs::-webkit-scrollbar-track{ background: transparent; }
.b079-thumbs::-webkit-scrollbar-thumb{ background: rgba(187,205,215,0.35); border-radius: 999px; }
.b079-thumbs::-webkit-scrollbar-thumb:hover{ background: rgba(187,205,215,0.55); }