/* =========================================================
   Cairo Prime — Animations & Scroll Effects
   ========================================================= */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cp-reveal, .cp-stagger > *, .cp-fade-in { opacity: 1 !important; transform: none !important; }
  .cp-count { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────
   Scroll-reveal: fade up
   ───────────────────────────────────────────────────────── */
.cp-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms cubic-bezier(.2,.7,.2,1),
              transform 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.cp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variants */
.cp-reveal--left  { transform: translateX(-40px); }
.cp-reveal--right { transform: translateX(40px); }
.cp-reveal--scale { transform: scale(0.94); }
.cp-reveal--left.is-visible,
.cp-reveal--right.is-visible,
.cp-reveal--scale.is-visible {
  transform: translate(0,0) scale(1);
}

/* Delays for staggered reveals */
.cp-reveal[data-delay="100"] { transition-delay: 100ms; }
.cp-reveal[data-delay="200"] { transition-delay: 200ms; }
.cp-reveal[data-delay="300"] { transition-delay: 300ms; }
.cp-reveal[data-delay="400"] { transition-delay: 400ms; }
.cp-reveal[data-delay="500"] { transition-delay: 500ms; }
.cp-reveal[data-delay="600"] { transition-delay: 600ms; }

/* ─────────────────────────────────────────────────────────
   Stagger animation — for grids (listings cards, trust stats)
   ───────────────────────────────────────────────────────── */
.cp-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(.2,.7,.2,1),
              transform 600ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.cp-stagger.is-visible > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 60ms; }
.cp-stagger.is-visible > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 130ms; }
.cp-stagger.is-visible > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
.cp-stagger.is-visible > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 270ms; }
.cp-stagger.is-visible > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 340ms; }
.cp-stagger.is-visible > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 410ms; }
.cp-stagger.is-visible > *:nth-child(7)  { opacity: 1; transform: translateY(0); transition-delay: 480ms; }
.cp-stagger.is-visible > *:nth-child(8)  { opacity: 1; transform: translateY(0); transition-delay: 550ms; }
.cp-stagger.is-visible > *:nth-child(n+9){ opacity: 1; transform: translateY(0); transition-delay: 620ms; }

/* ─────────────────────────────────────────────────────────
   Page fade-in on load
   ───────────────────────────────────────────────────────── */
.cp-page {
  animation: cpPageIn 700ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cpPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────
   3D tilt hover (listings cards)
   ───────────────────────────────────────────────────────── */
.cp-tilt {
  transform-style: preserve-3d;
  transition: transform 300ms cubic-bezier(.2,.7,.2,1),
              box-shadow 300ms ease,
              border-color 300ms ease;
  will-change: transform;
}
.cp-tilt:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,0.5),
              0 0 0 1px rgba(201,162,39,0.4),
              0 8px 24px rgba(201,162,39,0.15);
}
/* Inner content gets a slight elevation when card tilts */
.cp-tilt > * {
  transform: translateZ(0);
  transition: transform 300ms cubic-bezier(.2,.7,.2,1);
}
.cp-tilt:hover > .card-img,
.cp-tilt:hover > .card-body {
  transform: translateZ(20px);
}

/* ─────────────────────────────────────────────────────────
   Count-up animation (trust stats)
   ───────────────────────────────────────────────────────── */
.cp-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────
   Image lazy fade-in
   ───────────────────────────────────────────────────────── */
.cp-img-fade {
  opacity: 0;
  transition: opacity 500ms ease;
}
.cp-img-fade.is-loaded { opacity: 1; }

/* ─────────────────────────────────────────────────────────
   Underline animation (text links)
   ───────────────────────────────────────────────────────── */
.cp-link {
  position: relative;
  text-decoration: none;
  color: var(--cp-gold, #C9A227);
}
.cp-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms ease;
}
.cp-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ─────────────────────────────────────────────────────────
   Gold pulse — for highlight elements (badges, indicators)
   ───────────────────────────────────────────────────────── */
.cp-pulse {
  position: relative;
}
.cp-pulse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--cp-gold, #C9A227);
  opacity: 0;
  animation: cpPulseRing 2s ease-out infinite;
}
@keyframes cpPulseRing {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.4); }
}

/* ─────────────────────────────────────────────────────────
   Scrolled nav state
   ───────────────────────────────────────────────────────── */
nav.cp-scrolled {
  background: rgba(14, 14, 14, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 162, 39, 0.2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}