/**
 * Animations , Bourne Builders
 * Subtle, premium feel. All respect prefers-reduced-motion.
 */

/* ── Keyframes ───────────────────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes goldPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

@keyframes heroTextReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroSubReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── IntersectionObserver scroll classes ─────────────────────────────────── */
/* Apply [data-animate] to any element. JS adds .is-visible when in viewport. */

[data-animate] {
  opacity: 0;
  transition:
    opacity var(--transition-slower) var(--ease-out),
    transform var(--transition-slower) var(--ease-out),
    filter var(--transition-slower) var(--ease-out);
}

[data-animate="fade-in"] {
  transform: none;
}

[data-animate="fade-up"] {
  transform: translateY(30px);
}

[data-animate="fade-down"] {
  transform: translateY(-20px);
}

[data-animate="fade-left"] {
  transform: translateX(-30px);
}

[data-animate="fade-right"] {
  transform: translateX(30px);
}

[data-animate="scale-in"] {
  transform: scale(0.95);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger children with [data-stagger] on the parent */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
}

[data-stagger].is-visible > *:nth-child(1)  { transition-delay:   0ms; }
[data-stagger].is-visible > *:nth-child(2)  { transition-delay:  80ms; }
[data-stagger].is-visible > *:nth-child(3)  { transition-delay: 160ms; }
[data-stagger].is-visible > *:nth-child(4)  { transition-delay: 240ms; }
[data-stagger].is-visible > *:nth-child(5)  { transition-delay: 320ms; }
[data-stagger].is-visible > *:nth-child(6)  { transition-delay: 400ms; }

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* ── Hero animations (auto-play on load) ─────────────────────────────────── */

.hero-eyebrow-anim {
  animation: fadeInDown 500ms var(--ease-out) 120ms both;
}

.hero-title-anim {
  animation: heroTextReveal 650ms var(--ease-out) 220ms both;
}

.hero-sub-anim {
  animation: heroSubReveal 520ms var(--ease-out) 340ms both;
}

.hero-cta-anim {
  animation: fadeInUp 520ms var(--ease-out) 460ms both;
}

.hero-scroll-hint {
  animation: fadeIn 420ms var(--ease-out) 620ms both;
}

/* ── Gold line decoration ─────────────────────────────────────────────────── */

.gold-line {
  display: block;
  height: 1px;
  background: var(--color-gold);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 600ms var(--ease-out);
}

[data-animate].is-visible .gold-line,
.is-visible .gold-line {
  transform: scaleX(1);
}

/* ── Card hover lift ─────────────────────────────────────────────────────── */

.hover-lift {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
}

/* ── Image zoom on hover ─────────────────────────────────────────────────── */

.img-zoom {
  overflow: hidden;
}

.img-zoom img,
.img-zoom .photo-placeholder {
  transition: transform 600ms var(--ease-out);
}

.img-zoom:hover img,
.img-zoom:hover .photo-placeholder {
  transform: scale(1.04);
}

/* ── Loading shimmer for placeholders ────────────────────────────────────── */

.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-ivory-dark) 25%,
    var(--color-ivory) 50%,
    var(--color-ivory-dark) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
}

/* ── Reduced motion override ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-stagger] > *,
  .hero-eyebrow-anim,
  .hero-title-anim,
  .hero-sub-anim,
  .hero-cta-anim,
  .hero-scroll-hint,
  .hover-lift,
  .img-zoom img {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}