/* assets/css/style.css */

/* 1) Custom font-faces */
@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* 2) Global resets */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Syne', sans-serif;
}

/* 3) Clip-path helper for bottom-right cut */
.clip-br {
  display: block; /* ensure it’s block-level */
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 100%, 0 100%);
}


/* 4) Smooth clip-path transition on hover (optional) */
.project-hover:hover .project-tile {
  transition: clip-path 0.3s ease;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 100%, 0 100%) !important;
  transform: scale(1.08);
}

/* ─── Smooth transforms everywhere ────────────────────────── */
.project-hover .project-tile,
.splide__slide img {
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1),
              clip-path 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform, clip-path;
}

/* ─── 1) Zoom in on hover ─────────────────────────────────── */
.project-hover:hover .project-tile,
#heroSplide .splide__slide:hover img {
  transform: scale(1.08);
}

.bg-pattern {
  background-image: url('../images/muster.png');
  background-repeat: repeat-x;
  background-position: top;
  background-size: auto;
}

/* Base tile */
.gallery-hover .gallery-tile {
  clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 100%, 0 100%);
  transition:
    clip-path 0.6s ease-in-out,
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: clip-path, transform;
}

/* Hover state */
.gallery-hover:hover .gallery-tile {
  clip-path: polygon(0 0, 100% 0, 100% 40%, 50% 100%, 0 100%);
  transform: scale(1.08);
}

/* Optional clip-bar */
.clip-bar {
  height: 6px;
  background: #333;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s ease-in-out;
}

/* Reveal bar on gallery hover */
.gallery-hover:hover .clip-bar {
  clip-path: inset(0 0 0 0);
}