/* ============================================================
   ACE GTM Advisors — Premium Animation System
   Cinematic scroll reveals, hover effects, parallax, counters
   ============================================================ */

/* --- Keyframes --- */

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

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

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

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

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

@keyframes revealBlur {
  from { opacity: 0; filter: blur(12px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes revealRotate {
  from { opacity: 0; transform: rotate(-4deg) translateY(30px); }
  to   { opacity: 1; transform: rotate(0) translateY(0); }
}

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(201,165,82,0.1); }
  50%      { box-shadow: 0 0 40px rgba(201,165,82,0.3); }
}

@keyframes borderDraw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes counterPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

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

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

@keyframes blinkCaret {
  0%, 100% { border-color: transparent; }
  50%      { border-color: var(--gold, #C9A552); }
}

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


/* --- Scroll-Reveal Base ---
   Elements start hidden, JS adds .revealed when in viewport */

[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition: none;
}

[data-reveal].revealed {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reveal types */
[data-reveal="up"].revealed    { animation-name: revealUp; }
[data-reveal="down"].revealed  { animation-name: revealDown; }
[data-reveal="left"].revealed  { animation-name: revealLeft; }
[data-reveal="right"].revealed { animation-name: revealRight; }
[data-reveal="scale"].revealed { animation-name: revealScale; }
[data-reveal="blur"].revealed  { animation-name: revealBlur; }
[data-reveal="rotate"].revealed { animation-name: revealRotate; }
[data-reveal="fade"].revealed  { animation-name: revealUp; }

/* Duration */
[data-reveal].revealed             { animation-duration: 0.8s; }
[data-reveal-speed="fast"].revealed  { animation-duration: 0.5s; }
[data-reveal-speed="slow"].revealed  { animation-duration: 1.2s; }
[data-reveal-speed="cinematic"].revealed { animation-duration: 1.6s; }

/* Stagger delays — applied via data-reveal-delay or .stagger-N */
[data-reveal-delay="1"].revealed, .stagger-1.revealed { animation-delay: 0.1s; }
[data-reveal-delay="2"].revealed, .stagger-2.revealed { animation-delay: 0.2s; }
[data-reveal-delay="3"].revealed, .stagger-3.revealed { animation-delay: 0.3s; }
[data-reveal-delay="4"].revealed, .stagger-4.revealed { animation-delay: 0.4s; }
[data-reveal-delay="5"].revealed, .stagger-5.revealed { animation-delay: 0.55s; }
[data-reveal-delay="6"].revealed, .stagger-6.revealed { animation-delay: 0.7s; }
[data-reveal-delay="7"].revealed, .stagger-7.revealed { animation-delay: 0.85s; }
[data-reveal-delay="8"].revealed, .stagger-8.revealed { animation-delay: 1.0s; }


/* --- Stagger Groups ---
   Parent with [data-stagger] auto-staggers children */

[data-stagger] > [data-reveal].revealed:nth-child(1) { animation-delay: 0.05s; }
[data-stagger] > [data-reveal].revealed:nth-child(2) { animation-delay: 0.15s; }
[data-stagger] > [data-reveal].revealed:nth-child(3) { animation-delay: 0.25s; }
[data-stagger] > [data-reveal].revealed:nth-child(4) { animation-delay: 0.35s; }
[data-stagger] > [data-reveal].revealed:nth-child(5) { animation-delay: 0.45s; }
[data-stagger] > [data-reveal].revealed:nth-child(6) { animation-delay: 0.55s; }
[data-stagger] > [data-reveal].revealed:nth-child(7) { animation-delay: 0.65s; }
[data-stagger] > [data-reveal].revealed:nth-child(8) { animation-delay: 0.75s; }
[data-stagger] > [data-reveal].revealed:nth-child(9) { animation-delay: 0.85s; }
[data-stagger] > [data-reveal].revealed:nth-child(10) { animation-delay: 0.95s; }


/* --- Hover Effects --- */

/* Lift — card rises with shadow */
.hover-lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.1);
}

/* Glow — gold border glow */
.hover-glow {
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 30px rgba(201,165,82,0.2), 0 0 60px rgba(201,165,82,0.08);
  border-color: rgba(201,165,82,0.4);
}

/* Emerald glow */
.hover-glow-emerald {
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.hover-glow-emerald:hover {
  box-shadow: 0 0 30px rgba(52,211,153,0.15), 0 0 60px rgba(52,211,153,0.06);
  border-color: rgba(52,211,153,0.3);
}

/* Scale — subtle zoom */
.hover-scale {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-scale:hover {
  transform: scale(1.03);
}

/* Tilt — 3D perspective tilt */
.hover-tilt {
  transition: transform 0.4s ease;
  transform-style: preserve-3d;
  perspective: 800px;
}

/* Shimmer overlay on hover */
.hover-shimmer {
  position: relative;
  overflow: hidden;
}
.hover-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(201,165,82,0.08) 50%, transparent 100%);
  transition: left 0.6s ease;
  pointer-events: none;
}
.hover-shimmer:hover::after {
  left: 100%;
}

/* Button magnetic pulse */
.hover-pulse {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-pulse:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(201,165,82,0.35);
}

/* Border draw on hover */
.hover-border-draw {
  position: relative;
}
.hover-border-draw::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--gold, #C9A552);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-border-draw:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* --- Parallax --- */

.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}


/* --- Line Grow (dividers that animate in) --- */

.line-grow {
  transform: scaleX(0);
  transform-origin: left;
}
.line-grow.revealed {
  animation: lineGrow 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.line-grow-center {
  transform: scaleX(0);
  transform-origin: center;
}
.line-grow-center.revealed {
  animation: lineGrow 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* --- Counter Animation --- */

[data-counter] {
  display: inline-block;
}
[data-counter].counting {
  animation: counterPulse 0.3s ease;
}


/* --- Floating Elements --- */

.float-gentle {
  animation: floatY 4s ease-in-out infinite;
}
.float-gentle-delay {
  animation: floatY 4s ease-in-out 1s infinite;
}


/* --- Gradient Shift (living backgrounds) --- */

.gradient-shift {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}


/* --- Shimmer Bar (gold accent) --- */

.shimmer-bar {
  height: 2px;
  background: linear-gradient(90deg, #C9A552 0%, #fffbe6 50%, #C9A552 100%);
  background-size: 200% 100%;
  animation: shimmerSlide 3s linear infinite;
  border-radius: 2px;
}


/* --- Hero-Specific Entrance Animations --- */

.hero-title-reveal {
  opacity: 0;
  animation: revealBlur 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero-sub-reveal {
  opacity: 0;
  animation: revealUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.hero-cta-reveal {
  opacity: 0;
  animation: revealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

.hero-metrics-reveal {
  opacity: 0;
  animation: revealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.85s both;
}

.hero-badge-reveal {
  opacity: 0;
  animation: revealScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}


/* --- Section Divider Animation --- */

.section-divider-animated {
  width: 60px;
  height: 2px;
  background: var(--gold, #C9A552);
  margin: 0 auto;
  transform: scaleX(0);
  transform-origin: center;
}
.section-divider-animated.revealed {
  animation: lineGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}


/* --- Pulse Ring (for icons/badges) --- */

.pulse-ring {
  position: relative;
}
.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(201,165,82,0.3);
  animation: pulseGlow 3s ease-in-out infinite;
  pointer-events: none;
}


/* --- Reduced Motion ---
   Respect user's system preference */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].revealed,
  .hover-lift, .hover-glow, .hover-scale, .hover-shimmer,
  .hero-title-reveal, .hero-sub-reveal, .hero-cta-reveal,
  .hero-metrics-reveal, .hero-badge-reveal,
  .float-gentle, .float-gentle-delay,
  .shimmer-bar, .gradient-shift,
  .line-grow, .line-grow-center,
  .section-divider-animated {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}