/* =====================================================================
   Motion Layer — agency-tier animations
   Load AFTER odoo-shared.css + polish-layer.css
   Source: github.com/boraoztunc/skills (css-animations + make-interfaces-feel-better)
   Companion: motion-layer.js (IntersectionObserver + count-up + nav-glass + ticker)
   ===================================================================== */

/* ---------------------------------------------------------------------
   Motion tokens
   --------------------------------------------------------------------- */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 400ms;
  --duration-slow: 600ms;
  --duration-reveal: 700ms;
}

/* ---------------------------------------------------------------------
   Hero text reveal on page load
   Split into lines/words, stagger 80ms apart
   --------------------------------------------------------------------- */
.hero .eyebrow,
.hero h1,
.hero .hero-sub,
.hero .hero-ctas,
.hero .hero-trust {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-reveal var(--duration-reveal) var(--ease-out) forwards;
}
.hero .eyebrow      { animation-delay: 0ms; }
.hero h1            { animation-delay: 100ms; }
.hero .hero-sub     { animation-delay: 250ms; }
.hero .hero-ctas    { animation-delay: 400ms; }
.hero .hero-trust   { animation-delay: 550ms; }

.hero .hero-visual {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  animation: hero-visual-reveal 900ms var(--ease-out) forwards;
  animation-delay: 300ms;
}

@keyframes hero-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-visual-reveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ---------------------------------------------------------------------
   Floating cards — ambient float (continuous, infinite)
   --------------------------------------------------------------------- */
.hero-floating {
  animation: float-ambient 6s var(--ease-in-out) infinite;
  will-change: transform;
}
.hero-floating.f1 { animation-delay: 0s; }
.hero-floating.f2 { animation-delay: -3s; }  /* offset for natural rhythm */

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

/* ---------------------------------------------------------------------
   Vis-card row ticker — highlights cycle through rows
   --------------------------------------------------------------------- */
.vis-card .vis-row {
  position: relative;
  transition: background-color 400ms var(--ease-standard);
}

.vis-card[data-animate-rows="true"] .vis-row {
  animation: row-highlight 5s linear infinite;
}
.vis-card[data-animate-rows="true"] .vis-row:nth-child(2) { animation-delay: 0s; }
.vis-card[data-animate-rows="true"] .vis-row:nth-child(3) { animation-delay: 1s; }
.vis-card[data-animate-rows="true"] .vis-row:nth-child(4) { animation-delay: 2s; }
.vis-card[data-animate-rows="true"] .vis-row:nth-child(5) { animation-delay: 3s; }
.vis-card[data-animate-rows="true"] .vis-row:nth-child(6) { animation-delay: 4s; }

@keyframes row-highlight {
  0%, 16%  { background-color: transparent; }
  20%      { background-color: rgba(80, 185, 70, 0.10); }
  35%      { background-color: rgba(80, 185, 70, 0.04); }
  100%     { background-color: transparent; }
}

/* Soft pulse on the .v.good values when row highlights */
.vis-card[data-animate-rows="true"] .vis-row .v.good {
  animation: value-pulse 5s linear infinite;
}
.vis-card[data-animate-rows="true"] .vis-row:nth-child(2) .v.good { animation-delay: 0s; }
.vis-card[data-animate-rows="true"] .vis-row:nth-child(3) .v.good { animation-delay: 1s; }
.vis-card[data-animate-rows="true"] .vis-row:nth-child(4) .v.good { animation-delay: 2s; }
.vis-card[data-animate-rows="true"] .vis-row:nth-child(5) .v.good { animation-delay: 3s; }
.vis-card[data-animate-rows="true"] .vis-row:nth-child(6) .v.good { animation-delay: 4s; }

@keyframes value-pulse {
  0%, 16%  { transform: scale(1); }
  20%      { transform: scale(1.08); }
  35%      { transform: scale(1); }
  100%     { transform: scale(1); }
}

/* ---------------------------------------------------------------------
   Reveal on scroll — applied via IntersectionObserver
   Elements get .reveal class initially, then .reveal-in when in viewport
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition-property: opacity, transform;
  transition-duration: var(--duration-reveal);
  transition-timing-function: var(--ease-out);
  will-change: opacity, transform;
}
.reveal.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children — use --i custom property per child */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;
  transition-duration: var(--duration-reveal);
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.reveal-stagger.reveal-in > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------
   Count-up animation — runs once when in viewport
   --------------------------------------------------------------------- */
.count-up {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ---------------------------------------------------------------------
   Nav — glass on scroll
   --------------------------------------------------------------------- */
header {
  transition-property: background-color, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: var(--ease-standard);
}

header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  /* backdrop-filter removed for perf — was repainting on every scroll frame */
  box-shadow:
    0 1px 0 rgba(65, 62, 62, 0.06),
    0 8px 32px rgba(65, 62, 62, 0.04);
}

/* ---------------------------------------------------------------------
   Methodology — Caveat numbers slide in
   --------------------------------------------------------------------- */
.process-grid .process-step .step-num {
  opacity: 0;
  transform: translateX(-12px) rotate(-4deg);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.process-grid.reveal-in .process-step .step-num {
  opacity: 1;
  transform: translateX(0) rotate(0);
  transition-delay: calc(var(--i, 0) * 120ms + 200ms);
}

/* ---------------------------------------------------------------------
   Tab panel — keep existing fade but use motion tokens
   --------------------------------------------------------------------- */
.tab-panel[aria-hidden="false"] {
  animation: tab-fade-in 250ms var(--ease-standard);
}

@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------
   Outcome stats — soft glow on the numbers
   --------------------------------------------------------------------- */
.outcome-stat .num {
  position: relative;
  text-shadow: 0 0 32px rgba(255, 209, 104, 0.3);
}

/* ---------------------------------------------------------------------
   Comparison table — row stagger reveal
   Trigger: the parent .compare-detail gets .reveal-in from IO
   --------------------------------------------------------------------- */
.compare-detail.reveal .comp-table table tbody tr {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.compare-detail.reveal-in .comp-table table tbody tr {
  opacity: 1;
  transform: translateY(0);
}
.compare-detail.reveal-in .comp-table table tbody tr:nth-child(1) { transition-delay: 50ms; }
.compare-detail.reveal-in .comp-table table tbody tr:nth-child(2) { transition-delay: 150ms; }
.compare-detail.reveal-in .comp-table table tbody tr:nth-child(3) { transition-delay: 250ms; }
.compare-detail.reveal-in .comp-table table tbody tr:nth-child(4) { transition-delay: 350ms; }
.compare-detail.reveal-in .comp-table table tbody tr:nth-child(5) { transition-delay: 450ms; }
.compare-detail.reveal-in .comp-table table tbody tr:nth-child(6) { transition-delay: 550ms; }

/* ---------------------------------------------------------------------
   Reduced motion — kill everything
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero h1, .hero .hero-sub,
  .hero .hero-ctas, .hero .hero-trust, .hero .hero-visual,
  .hero-floating,
  .vis-card .vis-row, .vis-card .vis-row .v.good {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal, .reveal-stagger > *,
  .comp-table table tbody tr,
  .process-grid .process-step .step-num {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}