/* ==========================================================================
   DEALCENTRAL — motion layer
   --------------------------------------------------------------------------
   Purposeful animation aimed at conversion: an orchestrated hero entrance,
   scroll reveals that bring proof into view as the visitor scrolls, count-up
   on the social-proof figures, and restrained hover feedback.

   Two rules govern everything here:

   1. NOTHING IS HIDDEN WITHOUT JAVASCRIPT. Every "hidden until revealed"
      state is scoped to html.dc-motion, a class added by dc-motion.js. If the
      script fails, is blocked, or the browser is old, all content renders
      normally — an animation bug can never cost you a visitor.

   2. prefers-reduced-motion is honoured completely. Vestibular disorders are
      common; a site that ignores the setting is unusable for those visitors.
   ========================================================================== */

/* 1. KEYFRAMES ============================================================ */
@keyframes dcRiseIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

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

/* A single slow sweep across the primary CTA. Draws the eye without
   the button appearing to blink or demand attention continuously. */
@keyframes dcSheen {
  0%        { left: -60%; }
  55%, 100% { left: 130%; }
}

/* Breathing ring on the trial CTA — 3 cycles then rest, so it reads as an
   invitation rather than a permanent alarm. */
@keyframes dcHalo {
  0%   { box-shadow: 0 0 0 0 rgba(228, 98, 46, .40); }
  70%  { box-shadow: 0 0 0 12px rgba(228, 98, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(228, 98, 46, 0); }
}

/* 2. SCROLL REVEAL ========================================================
   Applied by dc-motion.js. The stagger index (--dc-i) is set per element so
   groups cascade instead of all arriving at once.
   ========================================================================= */
html.dc-motion .dc-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}

html.dc-motion .dc-reveal.dc-in {
  animation: dcRiseIn .62s cubic-bezier(.22, .68, .36, 1) forwards;
  animation-delay: calc(var(--dc-i, 0) * 85ms);
}

/* Reveal finished — drop the hint so we stop holding a compositor layer */
html.dc-motion .dc-reveal.dc-done { will-change: auto; }

/* 3. HERO ENTRANCE ========================================================
   The one orchestrated moment on the page: eyebrow, headline, subcopy, CTA
   and trust row arrive in reading order over ~0.8s total.
   ========================================================================= */
html.dc-motion .split-hero-content > * {
  animation: dcRiseIn .7s cubic-bezier(.22, .68, .36, 1) both;
}
html.dc-motion .split-hero-content > *:nth-child(1) { animation-delay: .05s; }
html.dc-motion .split-hero-content > *:nth-child(2) { animation-delay: .16s; }
html.dc-motion .split-hero-content > *:nth-child(3) { animation-delay: .27s; }
html.dc-motion .split-hero-content > *:nth-child(4) { animation-delay: .38s; }
html.dc-motion .split-hero-content > *:nth-child(5) { animation-delay: .49s; }
html.dc-motion .split-hero-content > *:nth-child(6) { animation-delay: .60s; }

html.dc-motion .split-hero-visual,
html.dc-motion .split-hero-media {
  animation: dcFadeIn .9s ease .35s both;
}

/* 4. PRIMARY CTA ==========================================================
   The trial button is the single most valuable control on the site, so it
   gets the only sustained motion treatment — and it stops after three cycles.
   ========================================================================= */
.btn-animated {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

html.dc-motion .btn-animated::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 45%;
  height: 200%;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .32) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  animation: dcSheen 4.5s ease-in-out 1.6s infinite;
}

html.dc-motion .split-hero-actions .btn-animated {
  animation: dcHalo 2.4s ease-out 1.2s 3;
}

/* Hover: lift and firm up. Small enough to feel like feedback, not a jump. */
.btn, .btn-animated, .nav-cta, .pricing-cta {
  transition: transform .16s cubic-bezier(.22, .68, .36, 1),
              box-shadow .16s ease,
              background .16s ease,
              border-color .16s ease;
}
.btn:hover, .nav-cta:hover, .pricing-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14, 33, 25, .16);
}
.btn:active, .nav-cta:active, .pricing-cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(14, 33, 25, .12);
}

/* Arrow nudge on any CTA that ends in one */
.btn .dc-arrow, .nav-cta .dc-arrow {
  display: inline-block;
  transition: transform .16s cubic-bezier(.22, .68, .36, 1);
}
.btn:hover .dc-arrow, .nav-cta:hover .dc-arrow { transform: translateX(3px); }

/* 5. CARDS ================================================================
   Deal cards are the thing visitors scan. Lift + a warmer border on hover
   tells them the whole card is clickable.
   ========================================================================= */
.deal-card, .property-card, .card, .pricing-card, .stat-card {
  transition: transform .18s cubic-bezier(.22, .68, .36, 1),
              box-shadow .18s ease,
              border-color .18s ease;
}
.deal-card:hover, .property-card:hover, .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(14, 33, 25, .12);
  border-color: var(--dc-rule-strong, #BEC9C0);
}

/* The recommended plan lifts slightly on hover but never rescales —
   rescaling reflows the text and looks cheap. */
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(14, 33, 25, .13);
}

/* 6. STATS ================================================================ */
.stats-strip .stat-item {
  transition: transform .18s cubic-bezier(.22, .68, .36, 1);
}
.stats-strip .stat-item:hover { transform: translateY(-2px); }

/* Figures are mid-count while this is set — keep the width stable so the
   strip does not jitter as digits are added. */
.stat-text strong[data-dc-counting] {
  font-variant-numeric: tabular-nums;
}

/* 7. NAV ================================================================== */
.nav-link, .nav-links a { transition: color .14s ease, background .14s ease; }

.nav-dropdown-content {
  transform-origin: top left;
  animation: dcRiseIn .18s ease both;
}

/* 8. IMAGES =============================================================== */
html.dc-motion .deal-card img,
html.dc-motion .property-card img {
  transition: transform .4s cubic-bezier(.22, .68, .36, 1);
}
html.dc-motion .deal-card:hover img,
html.dc-motion .property-card:hover img { transform: scale(1.035); }

/* 9. REDUCED MOTION =======================================================
   Everything above resolves to its final state instantly. Content is never
   hidden, no animation runs, and the site remains fully usable.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html.dc-motion .dc-reveal,
  html.dc-motion .dc-reveal.dc-in,
  html.dc-motion .split-hero-content > *,
  html.dc-motion .split-hero-visual,
  html.dc-motion .split-hero-media {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  html.dc-motion .btn-animated::after,
  html.dc-motion .split-hero-actions .btn-animated { animation: none !important; }
  .btn:hover, .nav-cta:hover, .pricing-cta:hover,
  .deal-card:hover, .property-card:hover, .card:hover, .pricing-card:hover,
  .stats-strip .stat-item:hover { transform: none !important; }
  html.dc-motion .deal-card:hover img,
  html.dc-motion .property-card:hover img { transform: none !important; }
}