/* Additions on top of the original Webflow styles (webflow.css). */

/* Manrope is stored on the site itself, so no Google Fonts request is needed. */
@font-face {
  font-family: Manrope;
  src: url("../fonts/manrope.woff") format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Images keep their proportions; width/height in the HTML only reserve space. */
:where(img[height]) { height: auto; }

.rec-text { grid-area: span 1 / span 2 / span 1 / span 2; }

.plain-link { color: inherit; text-decoration: none; }
.plain-link:hover { text-decoration: underline; }

.not-found { padding-top: 120px; }

/* Keyboard focus stays visible */
a:focus-visible, button:focus-visible { outline: 2px solid var(--primary--black); outline-offset: 3px; }

/* ---------- Animations (same as on the Webflow site) ----------
   They play for everyone, also when "Reduce motion" is on, like on Webflow. */

.js [data-anim] { opacity: 0; will-change: transform, opacity; }
.js [data-anim="slide-right"] { transform: translateX(100px); }
.js [data-anim="slide-bottom"] { transform: translateY(100px); }
.js [data-anim="grow"] { transform: scale(.75); }
.js [data-anim="drop"] { transform: translateY(-500px); }
.js [data-anim="intro-down"] { transform: translateY(-73px); }
.js [data-anim="intro-right"] { transform: translateX(500px); }

.js [data-anim].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1s cubic-bezier(.165, .84, .44, 1), transform 1s cubic-bezier(.165, .84, .44, 1);
}
.js [data-anim="drop"].is-in { transition: opacity 1s cubic-bezier(.165, .84, .44, 1); animation: drop-in 1s linear both; }
.js [data-anim="intro-down"].is-in { transition: opacity .5s ease, transform .5s cubic-bezier(.55, .085, .68, .53); }
.js [data-anim="intro-right"].is-in { transition: opacity .5s ease .5s, transform .5s cubic-bezier(.455, .03, .515, .955) .5s; }

/* little arrow wiggle on hover */
.card:hover .image-5, .special-button:hover .image-5 { animation: arrow-wiggle .8s linear; }
/* social icons jiggle on hover */
.jiggle:hover, a:hover > .jiggle { animation: jiggle 1.1s ease; }

@keyframes drop-in { /* "bounce" ending, like Webflow's Drop In */
  0% { transform: translateY(-500px); }
  36% { transform: translateY(0); }
  54% { transform: translateY(-56px); }
  72% { transform: translateY(0); }
  81% { transform: translateY(-14px); }
  90% { transform: translateY(0); }
  95% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
@keyframes arrow-wiggle {
  0%, 50%, 100% { transform: translate(0, 0); }
  25% { transform: translate(3px, -3px); }
  75% { transform: translate(-3px, 3px); }
}
@keyframes jiggle {
  0%, 18%, 36%, 54%, 72%, 90% { transform: rotate(-5deg); }
  9%, 27%, 45%, 63%, 81% { transform: rotate(5deg); }
  100% { transform: rotate(0); }
}

/* ---------- Lightbox for the project visuals ---------- */

.lb {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .9);
  opacity: 0; transition: opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.lb.is-open { opacity: 1; }
.lb img {
  max-width: min(92vw, 1600px); max-height: 86vh;
  width: auto; height: auto; border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  user-select: none;
}
.lb button {
  position: absolute; border: 0; cursor: pointer;
  width: 48px; height: 48px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #fff;
  font: 400 26px/48px Manrope, sans-serif; text-align: center;
  transition: background .2s;
}
.lb button:hover { background: rgba(255, 255, 255, .25); }
.lb .lb-close { top: 20px; right: 20px; }
.lb .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lb .lb-count { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7); font: 15px Manrope, sans-serif; }
@media (max-width: 767px) {
  .lb .lb-prev, .lb .lb-next { top: auto; bottom: 12px; transform: none; }
  .lb .lb-prev { left: 16px; } .lb .lb-next { right: 16px; }
}
body.lb-lock { overflow: hidden; }

/* Project cards and gallery: line items up in rows. The original float layout
   left gaps when one card was taller than its neighbour (e.g. a title on two lines). */
.collection-list-3.w-row,
.collection-list-5.w-row { display: flex; flex-flow: row wrap; align-items: flex-start; }
.collection-list-3.w-row::before, .collection-list-3.w-row::after,
.collection-list-5.w-row::before, .collection-list-5.w-row::after { display: none; }
.collection-list-3 > .w-col, .collection-list-5 > .w-col { float: none; }

/* All project cards are equally tall (as tall as the tallest one):
   the info part grows to fill the space. */
.collection-list-3.w-row { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; align-items: stretch; }
@media (max-width: 767px) { .collection-list-3.w-row { grid-template-columns: 1fr; } }
.collection-list-3 > .collection-item { display: flex; flex-direction: column; width: auto; }
.collection-list-3 .card { flex: 1; }
.collection-list-3 .card-info { flex: 1; }

/* The white corner shape behind the arrow button (btn-background.svg, 110x107)
   covers the image's top-right corner. Cut the area under that shape (staying
   just inside its curves) out of the image, so the image's edges can't show
   through as thin lines, also not when the card grows on hover. */
.card-img .image {
  clip-path: polygon(
    0 0, calc(100% - 105px) 0, calc(100% - 97px) 0.5px, calc(100% - 88px) 5px,
    calc(100% - 82px) 14px, calc(100% - 79px) 26px, calc(100% - 79px) 49px,
    calc(100% - 76px) 60px, calc(100% - 69px) 68px, calc(100% - 59px) 76px,
    calc(100% - 46px) 79px, calc(100% - 24px) 79px, calc(100% - 13px) 82px,
    calc(100% - 6px) 87px, 100% 103px, 100% 100%, 0 100%
  );
}