/* ============================================================
   HeartWest Advisors — Animations & Effects
   ============================================================ */

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

@keyframes scrollWheel {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(14px); }
}

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

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

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

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

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

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

@keyframes borderPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(245,158,11,0); }
}

@keyframes goldLine {
  from { transform: scaleX(0); transform-origin: left; }
  to { transform: scaleX(1); transform-origin: left; }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

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

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

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

@keyframes dash {
  to { stroke-dashoffset: 0; }
}

@keyframes drawLine {
  from { width: 0; }
  to { width: 100%; }
}

/* ============================================================
   AOS CUSTOM OVERRIDES
   ============================================================ */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }

[data-aos="fade-up-gold"] {
  transform: translateY(40px);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="fade-up-gold"].aos-animate {
  transform: translateY(0);
  opacity: 1;
}

[data-aos="slide-right"] {
  transform: translateX(-50px);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="slide-right"].aos-animate {
  transform: translateX(0);
  opacity: 1;
}

[data-aos="zoom-gold"] {
  transform: scale(0.9);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="zoom-gold"].aos-animate {
  transform: scale(1);
  opacity: 1;
}

/* ============================================================
   PAGE LOAD ANIMATIONS
   ============================================================ */
.page-load .hero-badge    { animation: slideInDown 0.6s var(--ease) 0.2s both; }
.page-load .hero-headline { animation: fadeInUp 0.8s var(--ease) 0.4s both; }
.page-load .hero-sub      { animation: fadeInUp 0.8s var(--ease) 0.6s both; }
.page-load .hero-actions  { animation: fadeInUp 0.8s var(--ease) 0.8s both; }
.page-load .hero-trust    { animation: fadeInUp 0.8s var(--ease) 1.0s both; }
.page-load .hero-stats-panel { animation: fadeInRight 0.9s var(--ease) 0.5s both; }
.page-load .scroll-indicator { animation: fadeInUp 0.8s var(--ease) 1.4s both; }

/* ============================================================
   NAVBAR ANIMATIONS
   ============================================================ */
.navbar { animation: slideInDown 0.6s var(--ease) both; }

/* ============================================================
   FLOATING ANIMATION
   ============================================================ */
.float { animation: float 6s ease-in-out infinite; }
.float-delay-1 { animation-delay: 1s; }
.float-delay-2 { animation-delay: 2s; }

/* ============================================================
   COUNTER ANIMATION
   ============================================================ */
.counter-animate { animation: countUp 0.3s ease both; }

/* ============================================================
   HOVER EFFECTS
   ============================================================ */

/* Magnetic button effect */
.btn-gold {
  position: relative;
  overflow: hidden;
}

.btn-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-gold:hover::before { opacity: 1; }

/* Ripple effect on buttons */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,0.3);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* Card hover shimmer */
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}

.card:hover::after { left: 100%; }

/* Link underline animation */
.animated-link {
  position: relative;
  display: inline-block;
}

.animated-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s var(--ease);
}

.animated-link:hover::after { width: 100%; }

/* ============================================================
   SECTION DIVIDERS
   ============================================================ */

/* Diagonal — white to light */
.divider-diagonal {
  position: relative;
}

.divider-diagonal::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--light);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Wave bottom */
.divider-wave::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23F8FAFC' fill-opacity='1' d='M0,30 C360,60 720,0 1080,30 C1260,45 1350,37 1440,30 L1440,60 L0,60 Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
}

/* ============================================================
   GRADIENT ANIMATIONS
   ============================================================ */
.gradient-text {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 50%, var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

.animated-gradient-bg {
  background: linear-gradient(-45deg, var(--navy-dark), var(--navy), var(--navy-mid), var(--navy-dark));
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

/* ============================================================
   PROCESS STEP ANIMATIONS
   ============================================================ */
.process-step { opacity: 0; transform: translateY(30px); transition: all 0.6s var(--ease); }
.process-step.animated { opacity: 1; transform: translateY(0); }

.process-step:nth-child(1) { transition-delay: 0s; }
.process-step:nth-child(2) { transition-delay: 0.2s; }
.process-step:nth-child(3) { transition-delay: 0.4s; }

/* ============================================================
   STAGGER ANIMATIONS
   ============================================================ */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.5s var(--ease);
}

.stagger.animated > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.0s; }
.stagger.animated > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.1s; }
.stagger.animated > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.2s; }
.stagger.animated > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.3s; }
.stagger.animated > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.4s; }
.stagger.animated > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 0.5s; }

/* ============================================================
   PARALLAX
   ============================================================ */
.parallax-bg {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ============================================================
   LOADING SPINNER
   ============================================================ */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

.btn.loading .btn-text { opacity: 0; }
.btn.loading .spinner { display: inline-block; position: absolute; }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-bar-wrap {
  background: var(--light);
  border-radius: 50px;
  height: 8px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
  border-radius: 50px;
  width: 0;
  transition: width 1.5s var(--ease-out);
}

.progress-bar.animated { width: var(--progress-width, 0%); }

/* ============================================================
   INTERSECTION OBSERVER TRIGGERS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ============================================================
   CURSOR FOLLOWER (Desktop Only)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .cursor-follower {
    width: 12px;
    height: 12px;
    background: var(--gold);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    mix-blend-mode: difference;
    opacity: 0;
  }

  .cursor-follower.active { opacity: 1; }
  .cursor-follower.hovering { width: 40px; height: 40px; opacity: 0.5; }
}

/* ============================================================
   NOISE TEXTURE OVERLAY
   ============================================================ */
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ============================================================
   NUMBER TICKER
   ============================================================ */
.ticker-wrap {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}

/* ============================================================
   GEOMETRIC DECORATIONS
   ============================================================ */
.geo-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(245,158,11,0.12);
  pointer-events: none;
}

.geo-circle-1 { width: 300px; height: 300px; top: -80px; right: -80px; }
.geo-circle-2 { width: 180px; height: 180px; bottom: 40px; left: -40px; }
.geo-circle-3 { width: 500px; height: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; }

/* ============================================================
   SCROLL PROGRESS INDICATOR
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  z-index: 9999;
  width: 0;
  transition: width 0.1s linear;
}

/* ============================================================
   GOLD ACCENT DIVIDERS
   ============================================================ */
.gold-accent-line {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  border-radius: 2px;
  margin: 1.5rem 0;
}

.gold-accent-line.centered { margin: 1.5rem auto; }

/* ============================================================
   GRADIENT BORDER
   ============================================================ */
.gradient-border {
  position: relative;
  background: var(--white);
  background-clip: padding-box;
  border: 2px solid transparent;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--gold), var(--navy));
  z-index: -1;
}