/* ==========================================================================
   RYKOLO ADVISORY — ANIMATIONS
   ========================================================================== */

/* Scroll reveal (JS toggles .is-visible via IntersectionObserver) */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(0.22,1,0.36,1), transform 900ms cubic-bezier(0.22,1,0.36,1);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-visible { transform: scale(1); }

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.22,1,0.36,1), transform 700ms cubic-bezier(0.22,1,0.36,1);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0); }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 450ms; }
[data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 540ms; }
[data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 630ms; }

/* Hero entrance */
.hero-inner .eyebrow,
.hero-inner h1,
.hero-inner .lede,
.hero-inner .btn-row {
  opacity: 0;
  animation: hero-rise 900ms cubic-bezier(0.22,1,0.36,1) forwards;
}
.hero-inner .eyebrow { animation-delay: 120ms; }
.hero-inner h1 { animation-delay: 260ms; }
.hero-inner .lede { animation-delay: 420ms; }
.hero-inner .btn-row { animation-delay: 560ms; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-skyline {
  animation: skyline-fade 1600ms ease-out forwards;
  opacity: 0;
}
@keyframes skyline-fade {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 0.5; transform: translateY(0); }
}

/* Card lift already in style.css via transition; add subtle icon rotation */
.card-icon { transition: transform 480ms cubic-bezier(0.22,1,0.36,1), background 480ms, color 480ms; }
.card:hover .card-icon { background: var(--accent); color: var(--primary); transform: rotate(90deg); }

/* Industry tile sweep */
.industry-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms cubic-bezier(0.22,1,0.36,1);
}
.industry-tile:hover::before { transform: scaleX(1); }

/* Button shimmer */
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 600ms ease;
}
.btn-gold:hover::after { left: 130%; }

/* Ticker pause on hover */
.ticker-band:hover .ticker-track { animation-play-state: paused; }

/* Counter pulse accent */
.stat { position: relative; }
.stat .stat-number.counted { animation: count-pop 500ms ease; }
@keyframes count-pop {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Nav scroll transition already handled inline; add logo pulse */
.brand-mark { transition: transform 500ms ease; }
.brand:hover .brand-mark { transform: rotate(225deg); }

/* Loading fade-in for whole page */
body { animation: page-in 500ms ease; }
@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Form success pop */
.form-msg.success, .form-msg.error {
  animation: msg-slide 400ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes msg-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}