/* =========================================================
   SOGNAREYACHTS — TIER 2: scroll-storytelling
   Showcase (gepind), vakmanschap-galerij, paginatransities
   ========================================================= */

/* ── Paginatransitie-overlay ────────────────────────────── */
#page-exit {
  position: fixed;
  inset: 0;
  z-index: 12500;
  background: #16202B;
  transform: translateY(100%);
  pointer-events: none;
}

/* ── Hero cinematische scroll-out ───────────────────────── */
.hero { will-change: clip-path; }

/* ── SHOWCASE: gepinde Amalfi-storytelling ──────────────── */
.showcase {
  position: relative;
  height: 340vh;
  background: #16202B;
}
.showcase-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  overflow: hidden;
}
.showcase-media {
  position: relative;
  height: 100%;
}
.showcase-media picture {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.showcase-media picture.active { opacity: 1; }
.showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94);
}
.showcase-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(22,32,43,0) 55%, #16202B 100%);
}
.showcase-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(28px, 6vw, 96px);
  color: #F7F5F1;
}
.showcase-copy .label { color: #1A8FA0; margin-bottom: 8vh; }
.showcase-slides { position: relative; min-height: 46vh; }
.showcase-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.showcase-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.showcase-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(4.2rem, 9vw, 8.5rem);
  line-height: 1;
  color: #fff;
  letter-spacing: 0.01em;
}
.showcase-num small {
  font-size: 0.32em;
  color: #D4AA74;
  font-style: italic;
  margin-left: 0.15em;
}
.showcase-slide h3 {
  color: #F7F5F1;
  font-weight: 300;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  margin: 26px 0 14px;
}
.showcase-slide p {
  color: rgba(247, 245, 241, 0.62);
  font-size: 0.95rem;
  line-height: 1.85;
  max-width: 420px;
}
.showcase-progress {
  position: absolute;
  left: clamp(28px, 6vw, 96px);
  bottom: 9vh;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: rgba(247, 245, 241, 0.4);
}
.showcase-progress .track {
  width: 160px;
  height: 1px;
  background: rgba(247, 245, 241, 0.18);
  overflow: hidden;
}
.showcase-progress .fill {
  height: 100%;
  width: 100%;
  background: #D4AA74;
  transform: scaleX(0);
  transform-origin: left;
}

/* ── VAKMANSCHAP: horizontale galerij ───────────────────── */
.craft {
  position: relative;
  background: #F7F5F1;
  padding: clamp(70px, 10vh, 130px) 0 0;
  overflow: hidden;
}
.craft-head {
  padding: 0 var(--pad, 6vw) clamp(36px, 5vh, 64px);
}
.craft-head h2 { margin-top: 10px; }
.craft-track {
  display: flex;
  gap: clamp(18px, 2.5vw, 38px);
  padding: 0 var(--pad, 6vw) clamp(70px, 10vh, 120px);
  width: max-content;
  will-change: transform;
}
.craft-panel {
  position: relative;
  width: clamp(300px, 38vw, 560px);
  flex-shrink: 0;
}
.craft-panel picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius, 14px);
}
.craft-panel img {
  width: 100%;
  height: clamp(340px, 56vh, 600px);
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.craft-panel:hover img { transform: scale(1.045); }
.craft-caption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--mid, #6B6259);
}
.craft-caption .idx {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: #1A8FA0;
}

/* Swipe-fallback voor touch-apparaten op elke breedte (o.a. iPad) */
.craft.craft-scroll .craft-track {
  overflow-x: auto;
  width: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.craft.craft-scroll .craft-panel { scroll-snap-align: center; }

/* Mobiel: native horizontaal scrollen met snap i.p.v. pin */
@media (max-width: 900px) {
  .showcase { height: auto; background: #16202B; }
  .showcase-sticky { position: relative; height: auto; grid-template-columns: 1fr; }
  .showcase-media { height: 46vh; }
  .showcase-media picture { position: absolute; }
  .showcase-copy { padding: 40px 24px 70px; }
  .showcase-copy .label { margin-bottom: 24px; }
  .showcase-slides { min-height: 0; }
  .showcase-slide {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-bottom: 44px;
  }
  .showcase-progress { display: none; }

  .craft-track {
    overflow-x: auto;
    width: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .craft-panel { scroll-snap-align: center; width: 78vw; }
}