/* ============================================================
   Coopers Advisory — Animations & Scroll Reveals
   ============================================================ */

/* ---------- Base Reveal States ---------- */
/* Elements start hidden; JS adds .revealed when they enter viewport */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Staggered children — parent gets .reveal-stagger, children get delays */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-stagger.revealed > *:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.00s; }
.reveal-stagger.revealed > *:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.07s; }
.reveal-stagger.revealed > *:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.14s; }
.reveal-stagger.revealed > *:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.21s; }
.reveal-stagger.revealed > *:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.28s; }
.reveal-stagger.revealed > *:nth-child(6)  { opacity: 1; transform: none; transition-delay: 0.35s; }
.reveal-stagger.revealed > *:nth-child(7)  { opacity: 1; transform: none; transition-delay: 0.42s; }
.reveal-stagger.revealed > *:nth-child(8)  { opacity: 1; transform: none; transition-delay: 0.49s; }

/* Fade only (no translate) */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-fade.revealed { opacity: 1; }

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-left.revealed { opacity: 1; transform: none; }

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-right.revealed { opacity: 1; transform: none; }

/* Scale up */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* Delay modifiers — add alongside reveal classes */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .reveal-fade,
  .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Hero entrance animations ---------- */
@keyframes hero-in-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-in-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-badge      { animation: hero-in-up 0.6s 0.1s both cubic-bezier(0.4, 0, 0.2, 1); }
.hero h1         { animation: hero-in-up 0.7s 0.2s both cubic-bezier(0.4, 0, 0.2, 1); }
.hero .hero-sub  { animation: hero-in-up 0.7s 0.35s both cubic-bezier(0.4, 0, 0.2, 1); }
.hero-actions    { animation: hero-in-up 0.7s 0.48s both cubic-bezier(0.4, 0, 0.2, 1); }
.hero-shapes     { animation: hero-in-fade 1.2s 0.1s both; }
.hero-grid       { animation: hero-in-fade 1s 0.3s both; }
.hero-scroll     { animation: hero-in-fade 1s 0.9s both; }

/* ---------- Number counter animation ---------- */
.stat-number[data-count] {
  transition: transform 0.3s ease;
}

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

.animated-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ---------- Card hover lift (already in main.css,
   keep animation-specific here) ---------- */
@keyframes card-pop {
  0%   { transform: scale(1); }
  60%  { transform: scale(1.018); }
  100% { transform: scale(1.015); }
}

/* ---------- Shimmer loading skeleton (for async content) ---------- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--clr-bg-subtle) 25%,
    var(--clr-border)    50%,
    var(--clr-bg-subtle) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent;
}

@keyframes shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* ---------- Smooth page transitions ---------- */
.page-transition-enter {
  opacity: 0;
  transform: translateY(8px);
}

/* ---------- Pulse ring (for CTA buttons) ---------- */
.pulse-ring {
  position: relative;
}

.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid var(--clr-accent-mid);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.pulse-ring:hover::after {
  opacity: 0.3;
  transform: scale(1.06);
}

/* ---------- Geometric SVG illustration animations ---------- */
.geo-circle {
  transform-origin: center;
  animation: geo-rotate 20s linear infinite;
}

.geo-circle-2 {
  transform-origin: center;
  animation: geo-rotate 30s linear infinite reverse;
}

@keyframes geo-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.geo-float {
  animation: geo-float 6s ease-in-out infinite;
}

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

/* ---------- Form field focus ring ---------- */
@keyframes focus-ring-in {
  from { box-shadow: 0 0 0 0px rgba(37, 99, 235, 0); }
  to   { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
}

/* ---------- Success checkmark draw ---------- */
@keyframes check-draw {
  from { stroke-dashoffset: 50; }
  to   { stroke-dashoffset: 0; }
}

.check-path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: check-draw 0.4s 0.1s ease both;
}