/* ============================================================
   777in — Animations & Reveal System
   ============================================================ */

/* Keyframes */
@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.9); } to { opacity:1; transform:scale(1); } }
@keyframes floatPhone   { 0%,100% { transform:translateY(0px); } 50% { transform:translateY(-12px); } }
@keyframes goldGlow     { 0%,100% { box-shadow:0 0 20px rgba(212,175,55,0.2); } 50% { box-shadow:0 0 40px rgba(212,175,55,0.5); } }
@keyframes ticker       { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes countUp      { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseRing    { 0% { transform:scale(1); opacity:0.6; } 100% { transform:scale(1.4); opacity:0; } }
@keyframes shimmerGold  { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes borderGlow   { 0%,100% { border-color:rgba(212,175,55,0.25); } 50% { border-color:rgba(212,175,55,0.6); } }
@keyframes progressFill { from { width:0%; } to { width:var(--progress); } }
@keyframes networkPulse { 0%,100% { opacity:0.4; } 50% { opacity:1; } }
@keyframes slideDown    { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes rotateIn     { from { opacity:0; transform:rotate(-5deg) scale(0.95); } to { opacity:1; transform:rotate(0) scale(1); } }
@keyframes coinSpin     { 0% { transform:rotateY(0deg); } 100% { transform:rotateY(360deg); } }
@keyframes floatShape   { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-24px) rotate(8deg); } }

/* Scroll reveal */
.reveal       { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.reveal-left  { opacity:0; transform:translateX(-30px); transition:opacity .6s ease, transform .6s ease; }
.reveal-right { opacity:0; transform:translateX(30px); transition:opacity .6s ease, transform .6s ease; }
.reveal-scale { opacity:0; transform:scale(0.92); transition:opacity .5s ease, transform .5s ease; }
.reveal.revealed, .reveal-left.revealed, .reveal-right.revealed, .reveal-scale.revealed { opacity:1; transform:none; }

/* Stagger delays */
.stagger > *:nth-child(1) { transition-delay:0s; }
.stagger > *:nth-child(2) { transition-delay:.1s; }
.stagger > *:nth-child(3) { transition-delay:.2s; }
.stagger > *:nth-child(4) { transition-delay:.3s; }
.stagger > *:nth-child(5) { transition-delay:.4s; }
.stagger > *:nth-child(6) { transition-delay:.5s; }
.stagger > *:nth-child(7) { transition-delay:.6s; }
.stagger > *:nth-child(8) { transition-delay:.7s; }

/* Component animation helpers */
.anim-float-phone { animation: floatPhone 4s ease-in-out infinite; }
.anim-gold-glow   { animation: goldGlow 2.5s ease-in-out infinite; }
.anim-pulse-ring  { animation: pulseRing 2s ease-out infinite; }
.anim-shimmer     { background: linear-gradient(90deg, var(--gold-muted), var(--gold-light), var(--gold-muted)); background-size:200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation: shimmerGold 3s linear infinite; }
.anim-ticker      { animation: ticker 30s linear infinite; }
.anim-border-glow { animation: borderGlow 3s ease-in-out infinite; }
.anim-coin-spin   { animation: coinSpin 3s linear infinite; }
.anim-float-shape { animation: floatShape 8s ease-in-out infinite; }
.anim-fade-up     { animation: fadeInUp .8s ease both; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity:1; transform:none; }
}