/* ============================================================
   FOUNDER COCKPIT — Scroll Animation System v1.0
   World-class bidirectional scroll animations
   Premium luxury consulting aesthetic
   ============================================================ */

/* ─── Performance hint ───────────────────────────────────── */
[data-sa] {
  will-change: opacity, transform;
}

/* ─── Hidden states — per animation type ────────────────── */
[data-sa] { transition-property: opacity, transform; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); transition-duration: 0.72s; }

/* fade-up */
[data-sa="fade-up"].sa-hidden       { opacity:0; transform:translateY(52px); }
[data-sa="fade-up"].sa-exit-up      { opacity:0; transform:translateY(-44px); }
[data-sa="fade-up"].sa-exit-down    { opacity:0; transform:translateY(52px); }

/* fade-down */
[data-sa="fade-down"].sa-hidden     { opacity:0; transform:translateY(-52px); }
[data-sa="fade-down"].sa-exit-up    { opacity:0; transform:translateY(44px); }
[data-sa="fade-down"].sa-exit-down  { opacity:0; transform:translateY(-52px); }

/* fade-left (from right side) */
[data-sa="fade-left"].sa-hidden,
[data-sa="fade-left"].sa-exit-up,
[data-sa="fade-left"].sa-exit-down  { opacity:0; transform:translateX(64px); }

/* fade-right (from left side) */
[data-sa="fade-right"].sa-hidden,
[data-sa="fade-right"].sa-exit-up,
[data-sa="fade-right"].sa-exit-down { opacity:0; transform:translateX(-64px); }

/* scale */
[data-sa="scale"].sa-hidden,
[data-sa="scale"].sa-exit-up,
[data-sa="scale"].sa-exit-down      { opacity:0; transform:scale(0.80); }

/* scale-up */
[data-sa="scale-up"].sa-hidden,
[data-sa="scale-up"].sa-exit-down   { opacity:0; transform:scale(0.82) translateY(40px); }
[data-sa="scale-up"].sa-exit-up     { opacity:0; transform:scale(0.86) translateY(-30px); }

/* rotate */
[data-sa="rotate"].sa-hidden,
[data-sa="rotate"].sa-exit-up,
[data-sa="rotate"].sa-exit-down     { opacity:0; transform:rotate(-10deg) scale(0.88); }

/* flip (3D tilt) */
[data-sa="flip"].sa-hidden,
[data-sa="flip"].sa-exit-up,
[data-sa="flip"].sa-exit-down       { opacity:0; transform:perspective(900px) rotateX(22deg); }

/* zoom-out (hero ambient) */
[data-sa="zoom"].sa-hidden          { opacity:0; transform:scale(1.12); }
[data-sa="zoom"].sa-exit-up,
[data-sa="zoom"].sa-exit-down       { opacity:0; transform:scale(0.92); }

/* slide-up (subtle for text within cards) */
[data-sa="slide-up"].sa-hidden,
[data-sa="slide-up"].sa-exit-down   { opacity:0; transform:translateY(28px); }
[data-sa="slide-up"].sa-exit-up     { opacity:0; transform:translateY(-22px); }

/* ─── Visible state ─────────────────────────────────────── */
[data-sa].sa-visible {
  opacity: 1;
  transform: none;
}

/* ─── Delay utilities ───────────────────────────────────── */
[data-sa-delay="50"]  { transition-delay: 50ms; }
[data-sa-delay="100"] { transition-delay: 100ms; }
[data-sa-delay="150"] { transition-delay: 150ms; }
[data-sa-delay="200"] { transition-delay: 200ms; }
[data-sa-delay="250"] { transition-delay: 250ms; }
[data-sa-delay="300"] { transition-delay: 300ms; }
[data-sa-delay="350"] { transition-delay: 350ms; }
[data-sa-delay="400"] { transition-delay: 400ms; }
[data-sa-delay="500"] { transition-delay: 500ms; }
[data-sa-delay="600"] { transition-delay: 600ms; }

/* ─── Duration utilities ────────────────────────────────── */
[data-sa-dur="400"] { transition-duration: 0.4s; }
[data-sa-dur="600"] { transition-duration: 0.6s; }
[data-sa-dur="800"] { transition-duration: 0.8s; }
[data-sa-dur="1000"]{ transition-duration: 1.0s; }
[data-sa-dur="1200"]{ transition-duration: 1.2s; }

/* ─── Split text ─────────────────────────────────────────── */
.sa-split-wrap {
  display: inline;
}
.sa-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.15;
}
.sa-word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              opacity   0.45s ease;
}
.sa-words-visible .sa-word-inner {
  transform: translateY(0);
  opacity: 1;
}
/* Exit: words slide back */
.sa-words-exit-up .sa-word-inner   { transform: translateY(-80%); opacity: 0; }
.sa-words-exit-down .sa-word-inner { transform: translateY(110%);  opacity: 0; }

/* ─── Gold rule draw ─────────────────────────────────────── */
/* Only animate gold-rules that carry the .sa-animate class (added by JS) */
.gold-rule.sa-animate {
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.90s cubic-bezier(0.22, 1, 0.36, 1),
              opacity   0.40s ease;
}
.gold-rule.sa-rule-visible {
  transform: scaleX(1) !important;
  opacity: 1 !important;
}

/* ─── Section label slide ────────────────────────────────── */
/* Hidden only when JS is active (js class on <html>) */
.js .section-label {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.55s ease,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-label.sa-label-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* ─── Image clip-path reveal ─────────────────────────────── */
.sa-img-reveal {
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
  -webkit-transition: -webkit-clip-path 1.0s cubic-bezier(0.22, 1, 0.36, 1);
          transition: clip-path 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}
.sa-img-reveal.sa-img-visible {
  -webkit-clip-path: inset(0% 0 0 0);
          clip-path: inset(0% 0 0 0);
}

/* ─── Parallax layers ────────────────────────────────────── */
[data-parallax] {
  will-change: transform;
}

/* ─── Magnetic button prep ───────────────────────────────── */
/* Extend btn transition to include color so btn-outline hover works */
.btn {
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.18s ease,
              box-shadow 0.18s ease,
              border-color 0.18s ease,
              color 0.18s ease;
}

/* ─── Stats counter pop ──────────────────────────────────── */
.metric-number,
.hero-stage-stat-num {
  will-change: transform;
}

/* ─── Card hover depth enhancement ──────────────────────── */
.pain-card,
.service-card,
.testimonial-card,
.pillar-card,
.outcome-card,
.case-card {
  transition:
    transform 0.50s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.50s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.40s ease;
}

/* ─── Hero stage parallax frame ──────────────────────────── */
.hero-stage-frame {
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ─── Floating continuous animation ─────────────────────── */
@keyframes sa-float {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-9px); }
}
.sa-float {
  animation: sa-float 5s ease-in-out infinite;
}

/* ─── Pulse glow ─────────────────────────────────────────── */
@keyframes sa-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0);  }
  50%       { box-shadow: 0 0 32px 8px rgba(201,168,76,0.18); }
}

/* ─── Line draw keyframe (for SVG paths) ─────────────────── */
@keyframes sa-draw-path {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
.sa-draw-path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}
.sa-draw-path.sa-path-visible {
  animation: sa-draw-path 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ─── Page transition shimmer ────────────────────────────── */
@keyframes sa-shimmer-sweep {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ─── Stat card pop-in (used for hero-stage-stats) ───────── */
@keyframes sa-pop {
  0%   { opacity:0; transform:scale(0.88) translateY(16px); }
  60%  { transform:scale(1.03) translateY(-3px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
.sa-pop-visible {
  animation: sa-pop 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── Number counter highlight ───────────────────────────── */
@keyframes sa-num-flash {
  0%   { color: var(--gold-bright); }
  100% { color: inherit; }
}

/* ─── Reduced motion override ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-sa],
  [data-sa].sa-hidden,
  [data-sa].sa-visible,
  [data-sa].sa-exit-up,
  [data-sa].sa-exit-down { transition:none!important; animation:none!important; transform:none!important; opacity:1!important; }

  .gold-rule,
  .section-label { transition:none!important; transform:none!important; opacity:1!important; }

  .sa-word-inner { transition:none!important; transform:none!important; opacity:1!important; }

  .sa-float       { animation:none!important; }
  .sa-pop-visible { animation:none!important; }
  .sa-img-reveal  { -webkit-clip-path:none!important; clip-path:none!important; }
}