/* ============================================================
   GAMING LOUNGE SYSTEM — Animations v4
   Philosophy: Resolve, don't snap. Feel, don't perform.
   ============================================================ */

/* ── Entrance animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Float animations — gentle, organic ── */
@keyframes floatA {
  0%, 100% { transform: perspective(1200px) rotateY(-5deg) rotateX(2deg) translateY(0px); }
  50%       { transform: perspective(1200px) rotateY(-5deg) rotateX(2deg) translateY(-10px); }
}
@keyframes floatCard1 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  33%       { transform: translateY(-6px) translateX(2px); }
  66%       { transform: translateY(3px) translateX(-1px); }
}
@keyframes floatCard2 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  40%       { transform: translateY(5px) translateX(-2px); }
  70%       { transform: translateY(-4px) translateX(1px); }
}
@keyframes floatCard3 {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ── Bar chart grow ── */
@keyframes growUp {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

/* ── Progress line ── */
@keyframes progressLine {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

/* ── Shimmer — for skeleton loaders ── */
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

/* ── Scroll-triggered reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.72s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal--left {
  transform: translateX(-22px);
}
.reveal--left.revealed {
  transform: translateX(0);
}
.reveal--right {
  transform: translateX(22px);
}
.reveal--right.revealed {
  transform: translateX(0);
}
.reveal--scale {
  transform: scale(0.95);
}
.reveal--scale.revealed {
  transform: scale(1);
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }
.reveal-delay-6 { transition-delay: 0.48s; }

/* ── Hero entrance ── */
.hero__eyebrow { animation: fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.1s both; }
.hero h1       { animation: fadeUp 0.8s cubic-bezier(0.4,0,0.2,1) 0.2s both; }
.hero__sub     { animation: fadeUp 0.8s cubic-bezier(0.4,0,0.2,1) 0.3s both; }
.hero__cta     { animation: fadeUp 0.8s cubic-bezier(0.4,0,0.2,1) 0.4s both; }
.hero__trust   { animation: fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.55s both; }

.hero__visual  { animation: fadeLeft 1s cubic-bezier(0.4,0,0.2,1) 0.25s both; }

/* Phone float */
.phone-frame { animation: floatA 8s ease-in-out infinite; }

/* Float cards */
.float-card--shift   { animation: floatCard1 5.8s ease-in-out infinite; }
.float-card--revenue { animation: floatCard2 6.4s ease-in-out infinite 0.8s; }
.float-card--balance { animation: floatCard3 7s ease-in-out infinite 1.4s; }

/* ── Bar chart animation on reveal ── */
.d-bar {
  animation: none;
}
.bars-revealed .d-bar {
  animation: growUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.bars-revealed .d-bar:nth-child(1)  { animation-delay: 0.02s; }
.bars-revealed .d-bar:nth-child(2)  { animation-delay: 0.06s; }
.bars-revealed .d-bar:nth-child(3)  { animation-delay: 0.10s; }
.bars-revealed .d-bar:nth-child(4)  { animation-delay: 0.14s; }
.bars-revealed .d-bar:nth-child(5)  { animation-delay: 0.18s; }
.bars-revealed .d-bar:nth-child(6)  { animation-delay: 0.22s; }
.bars-revealed .d-bar:nth-child(7)  { animation-delay: 0.26s; }

/* ── Scroll indicator ── */
.scroll-indicator { animation: fadeIn 1.2s ease 1.2s both; }
.scroll-indicator__dot { animation: floatCard3 2.6s ease-in-out infinite 1.4s; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}