/* ============================================================
   OLA DEVELOPMENT — Homepage Animations
   Premium, award-worthy motion design
   Desktop + Mobile — separate where needed
   ============================================================ */

/* ---------- HERO ENTRANCE SEQUENCE ---------- */
/* Everything fades in with staggered timing on first load */

.hero-eyebrow {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.hero-headline {
  opacity: 0;
  transform: translateY(40px);
  animation: heroFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

.hero-search {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  animation: heroSearchIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}

.hero-search-hint {
  opacity: 0;
  animation: simpleFade 0.6s ease 1.4s forwards;
}

.hero-cat:nth-child(1) { opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards; }
.hero-cat:nth-child(2) { opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards; }
.hero-cat:nth-child(3) { opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards; }
.hero-cat:nth-child(4) { opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; }
.hero-cat:nth-child(5) { opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards; }
.hero-cat:nth-child(6) { opacity: 0; transform: translateY(24px); animation: heroFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards; }

.hero-scroll-hint {
  opacity: 0;
  animation: simpleFade 0.8s ease 2s forwards;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(var(--from-y, 40px)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroSearchIn {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

/* ---------- HERO VIDEO ZOOM ---------- */
/* Slow Ken Burns effect on the background video */
.hero-video {
  animation: slowZoom 25s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes slowZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Search glow removed — clean focus state only */

/* ---------- CATEGORY ICON HOVER ---------- */

/* ---------- SCROLL-TRIGGERED REVEALS ---------- */
/* Elements with [data-reveal] animate in when visible */

[data-reveal] {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide from left */
[data-reveal="left"] {
  transform: translateX(-60px) translateY(0);
}
[data-reveal="left"].is-visible {
  transform: translateX(0) translateY(0);
}

/* Slide from right */
[data-reveal="right"] {
  transform: translateX(60px) translateY(0);
}
[data-reveal="right"].is-visible {
  transform: translateX(0) translateY(0);
}

/* Scale up */
[data-reveal="scale"] {
  transform: scale(0.92);
}
[data-reveal="scale"].is-visible {
  transform: scale(1);
}

/* Stagger children — add data-stagger to parent */
[data-stagger] > [data-reveal]:nth-child(1) { transition-delay: 0s; }
[data-stagger] > [data-reveal]:nth-child(2) { transition-delay: 0.1s; }
[data-stagger] > [data-reveal]:nth-child(3) { transition-delay: 0.2s; }
[data-stagger] > [data-reveal]:nth-child(4) { transition-delay: 0.3s; }
[data-stagger] > [data-reveal]:nth-child(5) { transition-delay: 0.4s; }
[data-stagger] > [data-reveal]:nth-child(6) { transition-delay: 0.5s; }

/* Property card tilt removed */

/* ---------- STAT COUNTER ---------- */
.stat-number {
  display: inline-block;
}

/* ---------- SECTION TITLE WIPE ---------- */
/* A thin accent line draws across below section titles */
.section-title {
  position: relative;
  display: inline-block;
}
.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  opacity: 0.4;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-title.is-visible::after {
  width: 60px;
}

/* ---------- INSIGHT CARDS IMAGE PARALLAX ---------- */
/* Subtle vertical shift on images within cards on scroll */
.insight-image-wrap {
  overflow: hidden;
}
.insight-image-wrap img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ---------- NEWSLETTER SECTION ---------- */
/* Subtle background gradient shift */
.newsletter-section {
  position: relative;
  overflow: hidden;
}
.newsletter-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(196,90,60,0.08) 0%, transparent 60%);
  animation: ambientDrift 15s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes ambientDrift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(5%, 3%) rotate(2deg); }
}

/* ---------- FOOTER LINK HOVER SLIDE ---------- */
.footer-link {
  position: relative;
  overflow: hidden;
}
.footer-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-link:hover::after {
  width: 100%;
}

/* ---------- SMOOTH IMAGE LOAD ---------- */
/* Insight + value images fade in when loaded — property cards show immediately */
.insight-image-wrap img {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.insight-image-wrap img.loaded {
  opacity: 1;
}
/* Value image — no zoom on hover, just overlay darkens */
.value-image img {
  transition: none;
}

/* ---------- MOBILE-SPECIFIC ANIMATIONS ---------- */
@media (max-width: 768px) {
  /* Faster, subtler entrance on mobile */
  .hero-eyebrow   { animation-delay: 0.1s; animation-duration: 0.6s; }
  .hero-headline   { animation-delay: 0.2s; animation-duration: 0.7s; }
  .hero-search     { animation-delay: 0.4s; animation-duration: 0.7s; }
  .hero-search-hint { animation-delay: 0.8s; }

  .hero-cat:nth-child(1) { animation-delay: 0.6s; }
  .hero-cat:nth-child(2) { animation-delay: 0.65s; }
  .hero-cat:nth-child(3) { animation-delay: 0.7s; }
  .hero-cat:nth-child(4) { animation-delay: 0.75s; }
  .hero-cat:nth-child(5) { animation-delay: 0.8s; }
  .hero-cat:nth-child(6) { animation-delay: 0.85s; }

  /* Less aggressive reveal distance on mobile */
  [data-reveal] {
    transform: translateY(32px);
  }
  [data-reveal="left"] {
    transform: translateX(-30px) translateY(0);
  }
  [data-reveal="right"] {
    transform: translateX(30px) translateY(0);
  }

  /* Disable Ken Burns on mobile for performance */
  .hero-video {
    animation: none;
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-video {
    animation: none !important;
  }
}