/* WEB FONTS */
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Overused';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/OverusedGrotesk-Bold.woff2') format('woff2');
}

:root { 
  --blob-1: #f9c8d9; /* rosa */
  --blob-2: #c8e6f9; /* hellblau */
  --blob-3: #d4f9c8; /* mintgrün */
  --blob-4: #f9eac8; /* pfirsich */
  --blob-5: #e4c8f9; /* lavendel */
  --blob-6: #c8f9f2; /* aqua */

  --offwhite: #f6f4f0;
  --cream: #efe9c8;
  --cream-dark: #e7deb7;
  --black: #262823;
  --gold: #d49600;
  --blue: #024567;
  --cream: #296A86;
  --blue: #1A4D67;
  --red: #C34B43;
  
  --bs-link-color-rgb: var(--red);

}

.font-overused {
  font-family: "Overused";
}
.letter-0125 {
  letter-spacing: -0.125rem;
}
.tracking-tight {
  letter-spacing: -4%;
}

.color-gold { color: var(--gold) !important; }
.color-blue { color: var(--blue) !important; }
.color-red { color: var(--red) !important; }
.bg-cream { background-color: var(--cream) !important; }
.bg-cream-dark { background-color: var(--cream-dark) !important; }


.site-body {
  color: var(--black);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
}
.section-heading {
  z-index: 2;
  height: 70px;
  background-color: white;
}
.bvsl-signet {
  top: -4px;
  left: 0;
  z-index: 2;
  mix-blend-mode: multiply;
}
.bvsl-signet img {
  height: 75px;
}

.work-list {
  margin-top: 70px;
  mix-blend-mode: multiply;
}

.project-section {
  position: relative;
  overflow: hidden;
  height: auto;
  margin-bottom: 1px;
}

.project-section:nth-child(3n+1):before {
  background-color: #FFC451;
  transition: all .25s;
}
.project-section:nth-child(3n+2):before {
  background-color: #FEA56A;
  transition: all .25s;
}
.project-section:nth-child(3n+3):before {
  background-color: #99AFC5;
  transition: all .25s;
}

.project-section:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--cream-dark);
  transition: all .25s;
}
.project-section:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all .25s;
  z-index: -1;
  opacity: 0.60;
  mix-blend-mode: soft-light;
  background: transparent url('../images/noise.png') repeat;
}

.project-section:hover:after {
  opacity: 1;
  mix-blend-mode: soft-light;
  transition: all .25s;
} 

.project-link {
  color: inherit;
  padding: 1.5rem 0;
  text-decoration: none;
}

.project-title {
  color: var(--red);
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 1.125;
  margin: 0;
  transition: color 0.3s ease;
}

.arrow-cursor:hover {
  cursor: url('../images/arrow.svg'), auto;
}

.project-group:hover .project-meta p {
  transition: color 0.3s ease;
}

.project-group:hover .project-title,
.project-group:hover .project-meta p  {
  color: white;
  transition: color 0.3s ease;
}

.info-section .project-group:hover .project-title {
  color: var(--cream);
}

.info-section .project-group:hover .project-title a,
.info-section .project-group:hover .project-title a:hover {
  color: var(--red);
}

.project-meta {
  gap: 0.625rem;
}

.dotted-divider {
  border: 0;
  border-bottom: 1px dotted black;
  margin: 0;
}

.footer-panel {
  text-align: right;
  z-index: 10;
  padding: 4rem 2rem 4rem 1rem;
  width: 18rem;
}

.lh-relaxed {
  line-height: 1.6;
}

.link-hover-underline:hover {
  text-decoration: underline;
}

.footer-archive {
  padding-right: 1rem;
}

/* ===== MEDIA QUERIES ===== */

@media (min-width: 576px) {
  .project-link {
    padding: 2rem 0;
  }
}

@media (min-width: 768px) {
  .project-link {
    padding: 3rem 0;
  }
  /* .project-group {
    transition: all 0.3s ease-in-out;
  }
  .project-group:hover {
    transform: translateX(2rem);
    transition: all 0.3s ease-in-out;
  } */
}

@media (min-width: 992px) { 
  .section-heading {
    top: -7px;
    height: 140px;
  }
  .bvsl-signet img {
    height: 205px;
  }
  .work-list {
    margin-top: 130px;
  }
  .project-section {
    position: relative;
    overflow: hidden;
    margin-bottom: 1px;
  }
  .project-link {
    padding: 3.5rem 0;
  }
  
  .project-section:nth-child(3n+1):before,
  .project-section:nth-child(3n+2):before,
  .project-section:nth-child(3n+3):before {
    background-color: var(--cream-dark);
    transition: all .25s;
  }
  .project-section:nth-child(3n+1):hover:before {
    background-color: #FFC451;
    transition: all .25s;
  }
  .project-section:nth-child(3n+2):hover:before {
    background-color: #FEA56A;
    transition: all .25s;
  }
  .project-section:nth-child(3n+3):hover:before {
    background-color: #99AFC5;
    transition: all .25s;
  }

}

@media (min-width: 1200px) {
  .project-link {
    padding: 4.5rem 0;
  }

}

@media (min-width: 1400px) { }


/* ===== BLOBS ===== */

.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.75;
  mix-blend-mode: multiply;
  will-change: transform, border-radius;
}

.blob-1 {
  width: 520px;
  height: 480px;
  background: var(--blob-1);
  animation:
    morph-1 18s ease-in-out infinite,
    drift-1 22s ease-in-out infinite;
}

.blob-2 {
  width: 440px;
  height: 500px;
  background: var(--blob-2);
  animation:
    morph-2 14s ease-in-out infinite,
    drift-2 26s ease-in-out infinite;
}

.blob-3 {
  width: 380px;
  height: 420px;
  background: var(--blob-3);
  animation:
    morph-3 20s ease-in-out infinite,
    drift-3 18s ease-in-out infinite;
}

.blob-4 {
  width: 460px;
  height: 400px;
  background: var(--blob-4);
  animation:
    morph-4 16s ease-in-out infinite,
    drift-4 30s ease-in-out infinite;
}

.blob-5 {
  width: 300px;
  height: 320px;
  background: var(--blob-5);
  animation:
    morph-5 12s ease-in-out infinite,
    drift-5 24s ease-in-out infinite;
}

.blob-6 {
  width: 260px;
  height: 280px;
  background: var(--blob-6);
  animation:
    morph-1 17s ease-in-out infinite reverse,
    drift-6 20s ease-in-out infinite;
}

/* ===== MORPH-ANIMATIONEN (border-radius) ===== */
@keyframes morph-1 {
  0%   { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; }
  20%  { border-radius: 40% 60% 30% 70% / 70% 30% 60% 40%; }
  40%  { border-radius: 70% 30% 50% 50% / 30% 70% 50% 60%; }
  60%  { border-radius: 30% 70% 60% 40% / 60% 40% 70% 30%; }
  80%  { border-radius: 50% 50% 40% 60% / 40% 60% 30% 70%; }
  100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; }
}

@keyframes morph-2 {
  0%   { border-radius: 40% 60% 50% 50% / 60% 40% 70% 30%; }
  25%  { border-radius: 70% 30% 40% 60% / 40% 60% 30% 70%; }
  50%  { border-radius: 30% 70% 60% 40% / 70% 30% 50% 50%; }
  75%  { border-radius: 60% 40% 30% 70% / 30% 70% 60% 40%; }
  100% { border-radius: 40% 60% 50% 50% / 60% 40% 70% 30%; }
}

@keyframes morph-3 {
  0%   { border-radius: 50% 50% 60% 40% / 70% 30% 50% 50%; }
  33%  { border-radius: 30% 70% 40% 60% / 50% 50% 30% 70%; }
  66%  { border-radius: 70% 30% 50% 50% / 30% 70% 60% 40%; }
  100% { border-radius: 50% 50% 60% 40% / 70% 30% 50% 50%; }
}

@keyframes morph-4 {
  0%   { border-radius: 65% 35% 45% 55% / 45% 55% 65% 35%; }
  30%  { border-radius: 35% 65% 55% 45% / 65% 35% 45% 55%; }
  60%  { border-radius: 55% 45% 35% 65% / 35% 65% 55% 45%; }
  100% { border-radius: 65% 35% 45% 55% / 45% 55% 65% 35%; }
}

@keyframes morph-5 {
  0%   { border-radius: 45% 55% 65% 35% / 55% 45% 35% 65%; }
  40%  { border-radius: 65% 35% 45% 55% / 35% 65% 55% 45%; }
  70%  { border-radius: 35% 65% 55% 45% / 65% 35% 45% 55%; }
  100% { border-radius: 45% 55% 65% 35% / 55% 45% 35% 65%; }
}

/* ===== DRIFT-ANIMATIONEN (translate) ===== */
@keyframes drift-1 {
  0%   { transform: translate(0px, 0px) scale(1); }
  25%  { transform: translate(40px, 60px) scale(1.05); }
  50%  { transform: translate(80px, 20px) scale(0.97); }
  75%  { transform: translate(20px, 80px) scale(1.03); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes drift-2 {
  0%   { transform: translate(0px, 0px) scale(1); }
  30%  { transform: translate(-50px, 40px) scale(1.04); }
  60%  { transform: translate(-20px, 80px) scale(0.96); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes drift-3 {
  0%   { transform: translate(0px, 0px) scale(1); }
  20%  { transform: translate(60px, -30px) scale(1.06); }
  50%  { transform: translate(30px, -60px) scale(0.98); }
  80%  { transform: translate(70px, -20px) scale(1.02); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes drift-4 {
  0%   { transform: translate(0px, 0px) scale(1); }
  35%  { transform: translate(-40px, -50px) scale(1.03); }
  70%  { transform: translate(-70px, -20px) scale(0.97); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes drift-5 {
  0%   { transform: translate(0px, 0px) scale(1); }
  25%  { transform: translate(-30px, 50px) scale(1.08); }
  50%  { transform: translate(50px, 30px) scale(0.95); }
  75%  { transform: translate(20px, -40px) scale(1.05); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes drift-6 {
  0%   { transform: translate(0px, 0px) scale(1); }
  40%  { transform: translate(40px, -60px) scale(1.07); }
  80%  { transform: translate(-30px, -30px) scale(0.96); }
  100% { transform: translate(0px, 0px) scale(1); }
}

/* ===== fadeInUp-animation ===== */
@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
.fadeInUp-animation {
  opacity: 0;
}
.fadeInUp-animation.is-visible {
  animation: .75s fadeInUp both;
}