/* ==========================================================================
   Scroll animations — data-animate system + promo widget
   ========================================================================== */

/* ── Base animation states ── */
[data-animate] {
  opacity: 0;
  transition:
    opacity    0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform  0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-animate="from-left"]   { transform: translateX(-56px); }
[data-animate="from-right"]  { transform: translateX(56px);  }
[data-animate="from-bottom"] { transform: translateY(44px);  }
[data-animate="from-top"]    { transform: translateY(-32px); }
[data-animate="zoom-in"]     { transform: scale(0.92);       }
[data-animate="fade"]        { /* opacity only */             }

[data-animate].is-visible {
  opacity:   1;
  transform: translateX(0) translateY(0) scale(1);
}

/* ── Stagger delays ── */
[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }

/* ── Grid stagger — nth-child delays for card grids ── */
.listings-grid .listing-card:nth-child(2),
.blog-grid     .blog-card:nth-child(2)    { transition-delay: 0.1s; }

.listings-grid .listing-card:nth-child(3),
.blog-grid     .blog-card:nth-child(3)    { transition-delay: 0.2s; }

.listings-grid .listing-card:nth-child(4) { transition-delay: 0.12s; }
.listings-grid .listing-card:nth-child(5) { transition-delay: 0.22s; }
.listings-grid .listing-card:nth-child(6) { transition-delay: 0.32s; }

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Promo widget — polaroid photo + text split
   ========================================================================== */
.promo-section {
  padding-block: var(--sp-24);
  background: var(--color-white);
  overflow: hidden;
}
.promo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

/* ── Text side ── */
.promo-content { max-width: 520px; }
.promo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-primary);
  margin-bottom: var(--sp-5);
}
.promo-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-primary);
  flex-shrink: 0;
}
.promo-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--sp-5);
  color: var(--color-dark);
}
.promo-desc {
  font-size: var(--text-lg);
  color: var(--color-grey);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-8);
}

/* ── Photo/frame side ── */
.promo-frame {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-8) var(--sp-6) var(--sp-8) var(--sp-4);
}

/* Polaroid */
.polaroid {
  position: relative;
  background: var(--color-white);
  padding: var(--sp-4) var(--sp-4) var(--sp-14);
  box-shadow:
    0 4px 6px rgba(0,0,0,.04),
    0 12px 40px rgba(0,0,0,.14),
    0 2px 8px  rgba(0,0,0,.06);
  transform: rotate(3.5deg);
  max-width: 380px;
  width: 100%;
  transition: transform 0.4s ease;
  z-index: 1;
}
.polaroid:hover { transform: rotate(1deg) scale(1.02); }
.polaroid__img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}
.polaroid__img--placeholder {
  height: 300px;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light));
}
.polaroid__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--color-grey);
  letter-spacing: 0.02em;
}

/* Brushstroke tag */
.polaroid__tag {
  position: absolute;
  bottom: -20px;
  right: -28px;
  z-index: 2;
  transform: rotate(-6deg);
  filter: drop-shadow(2px 4px 10px rgba(0,0,0,.18));
}
.polaroid__tag-inner {
  position: relative;
  background: var(--color-accent);
  padding: var(--sp-3) var(--sp-6);
  clip-path: polygon(
    2% 10%, 8% 0%, 96% 2%, 100% 8%,
    98% 92%, 92% 100%, 4% 98%, 0% 90%
  );
}
.polaroid__tag-inner::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: var(--color-accent-dark);
  clip-path: polygon(
    3% 12%, 10% 2%, 94% 4%, 100% 10%,
    97% 90%, 90% 100%, 6% 96%, 0% 88%
  );
  z-index: -1;
  opacity: 0.5;
}
.polaroid__tag-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-dark);
  white-space: nowrap;
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
}

/* Decorative dot behind polaroid */
.promo-frame::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  top: 50%;
  left: 50%;
  transform: translate(-55%, -50%);
  z-index: 0;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .promo-inner { gap: var(--sp-10); }
  .polaroid { max-width: 320px; }
  .polaroid__img { height: 260px; }
}

@media (max-width: 768px) {
  .promo-section { padding-block: var(--sp-16); }
  .promo-inner { grid-template-columns: 1fr; gap: var(--sp-12); }
  .promo-content { max-width: 100%; }
  .promo-frame { padding: var(--sp-8) var(--sp-4) var(--sp-12); }
  .polaroid { max-width: 300px; transform: rotate(2deg); }
  .polaroid__img { height: 240px; }
  .polaroid__tag { right: -12px; bottom: -16px; }
  .promo-frame::before { width: 200px; height: 200px; }
}