/* ================================================
   SARA VAN SCHOOT — PORTFOLIO
   style.css
   ================================================ */

/* ------------------------------------------------
   CUSTOM FONT — Ekamai (alleen voor Portfolio-titel)
   ------------------------------------------------ */
@font-face {
  font-family: 'Ekamai';
  src: url('Ekamai.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DiaryStory';
  src: url('DiaryStory.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------
   CSS CUSTOM PROPERTIES (kleurpalet)
   ------------------------------------------------ */
:root {
  --kleur-achtergrond: #FFFFE0;
  --kleur-creme:       #FFF4CC;
  --kleur-roze:        #F4C9D6;
  --kleur-bruin:       #3E2723;
  --kleur-olijf:       #7A8450;

  --font-handschrift: 'Caveat', cursive;  /* koppen en accenten */
  --font-display:     'DiaryStory', 'Caveat', cursive;  /* portfolio-titel */
  --font-body:        'Inter', sans-serif;

  --nav-height: 64px;
}

/* ------------------------------------------------
   RESET & BASIS
   ------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--kleur-bruin);
  /* Transparant zodat de vaste achtergrond zichtbaar is */
  background: transparent;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------
   VASTE GESTREEPTE ACHTERGROND — handgetekend gevoel
   Inline SVG met feTurbulence + feDisplacementMap
   maakt de strepen grillig, als pennetjes op papier.
   ------------------------------------------------ */
.bg-stripes {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Basiskleur achter de SVG */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--kleur-achtergrond);
}

/* ------------------------------------------------
   NAVIGATIE
   ------------------------------------------------ */
.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  background: rgba(255, 255, 224, 0.75);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--kleur-roze);
}

.nav-logo {
  font-family: var(--font-handschrift);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--kleur-bruin);
  letter-spacing: 0.02em;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.nav-links a {
  font-family: var(--font-handschrift);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 600;
  color: var(--kleur-bruin);
  position: relative;
  transition: color 0.2s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: var(--kleur-olijf);
  transition: width 0.25s ease;
}

.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: var(--kleur-olijf); }
.nav-links a.actief  { color: var(--kleur-olijf); }
.nav-links a.actief::after { width: 100%; }

/* ------------------------------------------------
   GEDEELDE SECTIE-STIJLEN
   ------------------------------------------------ */
section {
  position: relative;
  width: 100%;
}

.section-title {
  font-family: var(--font-handschrift);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 700;
  color: var(--kleur-bruin);
  line-height: 1.1;
}

/* ------------------------------------------------
   ANIMATIES — spring-easing (Emil Kowalski stijl)
   cubic-bezier(0.34, 1.56, 0.64, 1) = lichte overshoot
   zodat elementen "landen" als papier dat neervalt.
   ------------------------------------------------ */

/* Spring easings */
:root {
  --spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Beginstand — jitter via CSS-variabele zodat CSS in-view hem kan overschrijven */
.animate-up {
  opacity: 0;
  transform: translateY(52px) rotate(var(--jitter, 0.4deg));
  transition:
    opacity   0.75s var(--ease-out-expo),
    transform 0.75s var(--spring);
}

.animate-left {
  opacity: 0;
  transform: translateX(-48px) rotate(var(--jitter, -0.6deg));
  transition:
    opacity   0.7s var(--ease-out-expo),
    transform 0.7s var(--spring);
}

.animate-right {
  opacity: 0;
  transform: translateX(48px) rotate(var(--jitter, 0.6deg));
  transition:
    opacity   0.7s var(--ease-out-expo),
    transform 0.7s var(--spring);
}

/* Eindstand — altijd recht, ongeacht de jitter beginstand */
.animate-up.in-view,
.animate-left.in-view,
.animate-right.in-view {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
}

/* Work-banners: staggered via CSS-variabele, altijd recht (geen rotatie) */
.work-banner.animate-up {
  transition-delay: var(--delay, 0s);
  transform: translateY(52px); /* beginstand zonder rotatie */
}

.work-banner.animate-up.in-view {
  transform: translateY(0) rotate(0deg);
}

/* Hero-titel: opkomt vanuit iets lager */
.landing-title.animate-up {
  transform: translate(-50%, calc(-50% + 70px)) scale(0.97);
  transition:
    opacity   1s var(--ease-out-expo),
    transform 1s var(--spring);
}

.landing-title.animate-up.in-view {
  transform: translate(-50%, -50%);
}

/* ------------------------------------------------
   SECTIE 1 — LANDING
   Gelijke marge aan alle kanten via --landing-gap.
   De kaart vult de ruimte die overblijft na de nav
   en de marges exact.
   ------------------------------------------------ */
:root {
  --landing-gap: clamp(2rem, 5vw, 5rem);
}

.section-landing {
  min-height: 100vh;
  /* boven: nav + gap  |  rechts/onder/links: gap */
  padding: calc(var(--nav-height) + var(--landing-gap))
           var(--landing-gap)
           var(--landing-gap);
  display: flex;
  align-items: stretch;
}

/* Wrapper is nu in de flow — niet meer absoluut */
.landing-title {
  position: relative;
  top: unset;
  left: unset;
  transform: none;
  z-index: 2;
  flex: 1;   /* vult de volledige breedte binnen de padding */
}

/* Beginstand animatie (geen absolute transform meer nodig) */
.landing-title.animate-up {
  opacity: 0;
  transform: translateY(60px) scale(0.97);
}

.landing-title.animate-up.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Het rechthoekige kader vult de wrapper volledig */
.hero-card {
  position: relative;
  width: 100%;
  height: 100%;
  /* hoogte = viewport min nav min boven+onder gap */
  min-height: calc(100vh - var(--nav-height) - 2 * var(--landing-gap));
  background: #FFFFE0;
  overflow: hidden;
  border-radius: 0;
}

/* Foto: volledige hoogte, onderkant verankerd aan kader,
   horizontaal gecentreerd — geen bijsnijding */
.hero-card-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
}

/* Gedeelde stijl voor PORT en FOLIO */
.hero-port,
.hero-folio {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(4rem, 22vw, 26rem);
  font-weight: normal;
  color: #F4C9D6;
  line-height: 0.9;
  letter-spacing: 0.02em;
  pointer-events: none;
  padding: clamp(1.2rem, 4vw, 3.5rem);
}

/* PORT — linksboven, ACHTER de foto */
.hero-port {
  top: 0;
  left: 0;
  z-index: 1;   /* onder de foto (foto zit op z-index 2) */
}

/* FOLIO — rechtsonder, VOOR de foto */
.hero-folio {
  bottom: 0;
  right: 0;
  z-index: 3;   /* boven de foto */
}

/* Foto op z-index 2: tussen PORT en FOLIO */
.hero-card-img {
  z-index: 2;
}

/* ------------------------------------------------
   RESPONSIVE LANDING
   ------------------------------------------------ */
@media (max-width: 600px) {
  .hero-card {
    width: 88vw;
    height: 72vh;
  }

  .hero-title {
    font-size: clamp(2.5rem, 14vw, 6rem);
  }
}

/* ------------------------------------------------
   SECTIE 2 — ABOUT ME
   ------------------------------------------------ */
.section-about {
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 6vw, 6rem);
  max-width: 1400px;
  margin: 0 auto;
}

.about-heading {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  /* iets rechts, versprongen */
  padding-left: clamp(0rem, 8vw, 8rem);
}

.about-content {
  display: flex;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: flex-start;
}

.about-text {
  flex: 1;
  margin-top: clamp(1rem, 3vw, 3rem);
  /* Kader om de tekst */
  background: var(--kleur-achtergrond);
  padding: clamp(1.4rem, 3vw, 2.5rem);
}

.about-text p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 200;
  line-height: 1.8;
  color: var(--kleur-bruin);
  max-width: 520px;
}

.about-text p + p {
  margin-top: 1.2rem;
}

.about-photo {
  flex: 1;
  transform: rotate(-2deg) translateY(20px);
}

.about-img {
  width: 100%;
  max-width: 480px;
  border-radius: 4px;
  box-shadow: 6px 10px 32px rgba(62, 39, 35, 0.15);
}

/* ------------------------------------------------
   SECTIE 3 — MY WORK
   ------------------------------------------------ */
.section-work {
  /* Zelfde marge als de landing: --landing-gap aan alle kanten */
  padding: var(--landing-gap);
  padding-top: calc(var(--nav-height) + var(--landing-gap));
}

/* Kader: zelfde breedte en hoogte als het hero-kader */
.work-card {
  width: 100%;
  min-height: calc(100vh - var(--nav-height) - 2 * var(--landing-gap));
  background: #FFFFE0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 3vw, 2.5rem);
  gap: clamp(1rem, 2vw, 1.8rem);
}

.work-heading {
  /* Koptekst bovenin het kader */
}

/* Drie banners naast elkaar binnen het kader */
.work-banners {
  display: flex;
  flex: 1;
  gap: clamp(0.6rem, 1.2vw, 1.2rem);   /* ruimte tussen de banners */
  align-items: stretch;
}

.work-banner {
  position: relative;
  flex: 1;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  cursor: pointer;
  /* Randje om elke banner */
  outline: 1.5px solid rgba(62, 39, 35, 0.25);
}

/* Foto vult de banner */
.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.work-banner:hover .banner-img {
  transform: scale(1.05);
}

/* Donkere overlay voor leesbaarheid van label */
.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(62, 39, 35, 0.28);
  transition: background 0.4s ease;
}

.work-banner:hover .banner-overlay {
  background: rgba(62, 39, 35, 0.45);
}

/* Categorienaam: horizontaal én verticaal gecentreerd */
.banner-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-handschrift);
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  font-weight: 700;
  color: var(--kleur-achtergrond);
  text-align: center;
  padding: 1rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  letter-spacing: 0.03em;
}

/* ------------------------------------------------
   SECTIE 4 — CONTACT
   ------------------------------------------------ */
.section-contact {
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 6vw, 6rem) 3rem;
  text-align: center;
}

.contact-inner {
  max-width: 600px;
  margin: 0 auto;
}

.contact-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 200;
  color: var(--kleur-bruin);
  margin-top: 1rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  line-height: 1.6;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.contact-link {
  font-family: var(--font-handschrift);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 600;
  color: var(--kleur-bruin);
  padding: 0.5rem 1.8rem;
  border: 2px solid var(--kleur-bruin);
  border-radius: 100px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.contact-link:hover {
  background: var(--kleur-bruin);
  color: var(--kleur-achtergrond);
}

.contact-insta {
  border-color: var(--kleur-olijf);
  color: var(--kleur-olijf);
}

.contact-insta:hover {
  background: var(--kleur-olijf);
  color: var(--kleur-achtergrond);
}

/* ------------------------------------------------
   FOOTER
   ------------------------------------------------ */
.site-footer {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--kleur-roze);
  font-family: var(--font-handschrift);
  font-size: 1rem;
  color: var(--kleur-olijf);
  text-align: center;
}

/* ------------------------------------------------
   RESPONSIVE — TABLET (max 900px)
   ------------------------------------------------ */
@media (max-width: 900px) {

  /* Landing: gap iets kleiner op tablet, kader vult zichzelf */
  :root { --landing-gap: 1.2rem; }

  /* About: tekst boven foto */
  .about-content {
    flex-direction: column;
  }

  .about-photo {
    transform: rotate(-1deg) translateY(0);
  }

  .about-img {
    max-width: 100%;
  }

  /* Work-banners: aspect-ratio 3/5 blijft actief op tablet */
}

/* ------------------------------------------------
   RESPONSIVE — TELEFOON (max 600px)
   ------------------------------------------------ */
@media (max-width: 600px) {


  /* Nav: logo kleiner, links compacter */
  .main-nav {
    padding: 0 1rem;
  }

  .nav-links {
    gap: 1rem;
  }

  /* Work: banners verticaal gestapeld op telefoon */
  .work-banners {
    flex-direction: column;
  }

  .work-banner {
    aspect-ratio: unset;
    height: clamp(220px, 60vw, 360px);
    flex: none;
  }

  .work-card {
    padding: clamp(0.8rem, 2vw, 1.2rem);
  }

  /* About tekst maximale breedte opheffen */
  .about-text p {
    max-width: 100%;
  }

  /* Contact links: vol breedte op telefoon */
  .contact-link {
    width: 100%;
    text-align: center;
  }
}