/* AIPL Scroll Showcase V2 — Elementor widget
   Layout: CSS grid 50/50, zero padding, wipe + zoom image, blur-slide text */

.aipl-s2 {
  --aipl-bg: #000;
  --aipl-header-h: 0px;
  --aipl-grad-a: #C39556;
  --aipl-grad-b: #F1D4AE;
  --aipl-left: 50%;
  --aipl-mh: 50;
  --aipl-dur: 1.1s;
  --aipl-space-top: 0px;
  --aipl-adj: 0px;
  --aipl-pt: 0px;
  --aipl-pr: 0px;
  --aipl-pb: 0px;
  --aipl-pl: 0px;
  --aipl-ease: cubic-bezier(.77, 0, .18, 1);
  position: relative;
  width: 100%;
}
.aipl-s2 *, .aipl-s2 *::before, .aipl-s2 *::after { box-sizing: border-box; }

/* full-width mode: JS sets exact width + offset; this avoids a flash before JS runs */
.aipl-s2--full {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
}

.aipl-s2-sentinel {
  position: relative;
  width: 100%;
}

/* ===== PINNED STAGE: 50 / 50 grid ===== */
.aipl-s2-section {
  position: sticky;
  top: var(--aipl-sticky-top, 0px);
  width: 100%;
  height: var(--aipl-h, 100vh);
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--aipl-left) minmax(0, 1fr);
  background: var(--aipl-bg);
}

/* ===== LEFT PANEL ===== */
.aipl-s2-left {
  order: 1;
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  background-color: var(--aipl-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* text starts just below the visible header; extra padding defaults to 0 */
  padding:
    max(0px, calc(var(--aipl-header-h) + var(--aipl-space-top) + var(--aipl-pt) + var(--aipl-adj)))
    var(--aipl-pr)
    var(--aipl-pb)
    var(--aipl-pl);
  overflow: hidden;
  z-index: 2;
}

.aipl-s2-top {
  position: relative;
  z-index: 2;
  width: 100%;
}

.aipl-s2-title {
  margin: 0;
  font-family: "Gambetta Font", serif;
  font-size: clamp(1.85rem, 3.3vw, 2.9rem);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.12;
  max-width: 14ch;
}

.aipl-s2-bottom {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ===== CHANGING TEXT: all slides share one grid cell (height = tallest) ===== */
.aipl-s2-copy {
  position: relative;
  width: 100%;
  display: grid;
  align-items: end;
}
.aipl-s2-item {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(6px);
  pointer-events: none;
  transition:
    opacity calc(var(--aipl-dur) * .75) ease,
    transform var(--aipl-dur) var(--aipl-ease),
    filter calc(var(--aipl-dur) * .75) ease;
}
.aipl-s2-item.is-before { transform: translateY(-40px); }
.aipl-s2-item.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
  transition-delay: calc(var(--aipl-dur) * .22);   /* waits for the old text to leave */
}

/* ===== GOLD HEADING ===== */
.aipl-s2-heading {
  margin: 0 0 12px 0;
  font-family: "Gambetta Font", serif;
  font-size: 40px;
  font-weight: 600;
  background-image: linear-gradient(90deg, var(--aipl-grad-a) 0%, var(--aipl-grad-b) 43%, var(--aipl-grad-a) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  line-height: 1;
}

/* ===== DESCRIPTION ===== */
.aipl-s2-desc {
  width: 100%;
  max-width: 320px;
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: rgba(255,255,255,0.9);
  line-height: 1.1;
}

/* ===== DOTS ===== */
.aipl-s2-dots { display: none; gap: 8px; width: 100%; margin-top: 28px; }
.aipl-s2--dots .aipl-s2-dots { display: flex; }
.aipl-s2-dot {
  display: block;
  height: 2px;
  width: 22px;
  background: rgba(255,255,255,0.2);
  transition: background 0.4s, width 0.4s;
}
.aipl-s2-dot.is-active { background: #c9a96e; width: 44px; }

/* ===== RIGHT PANEL ===== */
.aipl-s2-right {
  order: 2;
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #111;
}

/* wipe (default): each later image is revealed upward over the previous one */
.aipl-s2-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--aipl-dur) var(--aipl-ease);
}
.aipl-s2-slide.is-active,
.aipl-s2-slide.is-before { clip-path: inset(0 0 0 0); }

.aipl-s2-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
  transform: scale(1.15);
  transition: transform calc(var(--aipl-dur) * 1.8) var(--aipl-ease);
}
.aipl-s2-slide.is-active img { transform: scale(1); }

/* cross fade option */
.aipl-s2-fx-fade .aipl-s2-slide {
  clip-path: none;
  opacity: 0;
  transition: opacity var(--aipl-dur) ease;
}
.aipl-s2-fx-fade .aipl-s2-slide.is-active { opacity: 1; }

.aipl-s2-counter {
  position: absolute;
  bottom: 28px;
  left: 28px;
  font-family: "Cormorant Garamond", serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  letter-spacing: 2px;
  z-index: 60;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .aipl-s2-title { font-size: clamp(1.5rem, 3vw, 2.2rem); }
}

/* ===== MOBILE: text first (order 1), image second (order 2) ===== */
@media (max-width: 767px) {
  .aipl-s2-section {
    top: 0;
    height: 100vh;
    grid-template-columns: minmax(0, 1fr);
    /* text block = header + a share of what is left below the header */
    grid-template-rows:
      calc(var(--aipl-header-h) + (100% - var(--aipl-header-h)) * var(--aipl-mh) / 100)
      minmax(0, 1fr);
  }
  .aipl-s2-left {
    order: 1;
    width: 100%;
    background-image: none !important;
  }
  .aipl-s2-right { order: 2; width: 100%; }

  .aipl-s2-bottom { max-width: none; }
  .aipl-s2-title { max-width: none; font-size: 32px; }
  .aipl-s2-heading { font-size: 28px; margin-bottom: 8px; }
  .aipl-s2-desc { font-size: 16px; }
  .aipl-s2-dots { margin-top: 18px; }

  /* wipe in from the side on mobile */
  .aipl-s2-slide { clip-path: inset(0 0 0 100%); }
  .aipl-s2-slide.is-active,
  .aipl-s2-slide.is-before { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .aipl-s2-item, .aipl-s2-slide, .aipl-s2-slide img {
    transition-duration: .01s !important;
    transition-delay: 0s !important;
  }
}

/* iPhone: JS pins the section with position:fixed; keep image moves transform-free */
.aipl-s2--ios .aipl-s2-slide,
.aipl-s2--ios .aipl-s2-slide img {
  transform: none !important;
  -webkit-transform: none !important;
}