/* ============================================================
   WISEQR — ANIMATIONS
   Scroll-triggered + Page-load + Loop animations
============================================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. KEYFRAME DEFINITIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(35px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(55px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-55px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* Loop: gentle vertical float */
@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-13px); }
}
@keyframes floatYOffset {
  0%, 100% { transform: translateY(-6px); }
  50%       { transform: translateY(8px); }
}

/* Loop: hero button glow pulse */
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 4px 18px rgba(226,159,41,0.22); }
  50%       { box-shadow: 0 4px 32px rgba(226,159,41,0.55); }
}

/* Loop: slow spin for QR icon */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Loop: 404 / thank-you number bob */
@keyframes floatNum {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* Page load: header slide down */
@keyframes headerIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. HEADER ENTRANCE (on inject)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#site-header {
  animation: headerIn 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. HERO SECTION — page-load stagger
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero-tag     { animation: fadeUp   0.65s cubic-bezier(0.4,0,0.2,1) 0.15s both; }
.hero-heading { animation: fadeUp   0.65s cubic-bezier(0.4,0,0.2,1) 0.30s both; }
.hero-desc    { animation: fadeUp   0.65s cubic-bezier(0.4,0,0.2,1) 0.45s both; }
.hero-btns    { animation: fadeUp   0.65s cubic-bezier(0.4,0,0.2,1) 0.58s both; }
.hero-phones  { animation: fadeLeft 0.75s cubic-bezier(0.4,0,0.2,1) 0.25s both; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. LOOP — floating images
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.phone-left  { animation: floatY       4.2s ease-in-out infinite; }
.phone-right { animation: floatYOffset 4.2s ease-in-out 0.7s infinite; }
.ts-phone    { animation: floatY       5s   ease-in-out infinite; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. LOOP — CTA button glow
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero-btn-primary {
  animation: btnGlow 2.8s ease-in-out infinite,
             fadeUp  0.65s cubic-bezier(0.4,0,0.2,1) 0.58s both;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. LOOP — Features banner QR spin
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.feat-banner-qr { animation: spinSlow 14s linear infinite; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. LOOP — 404 / Thank You page
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.error-number,
.ty-title {
  animation: floatNum 4s ease-in-out infinite;
}
.error-img,
.ty-img {
  animation: floatY 4.5s ease-in-out 0.4s infinite;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. SCROLL-TRIGGERED BASE CLASSES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.72s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-anim="fade-up"]    { transform: translateY(40px); }
[data-anim="fade-left"]  { transform: translateX(-30px); }
[data-anim="fade-right"] { transform: translateX(30px); }
[data-anim="zoom-in"]    { transform: scale(0.88); }
[data-anim="fade-in"]    { transform: none; }

[data-anim].anim-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delay helpers */
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="150"] { transition-delay: 0.15s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="250"] { transition-delay: 0.25s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="350"] { transition-delay: 0.35s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="500"] { transition-delay: 0.50s; }
[data-delay="600"] { transition-delay: 0.60s; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. 404 / THANK YOU — page load stagger
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.error-number,
.ty-title {
  animation: floatNum 4s ease-in-out infinite,
             zoomIn  0.65s cubic-bezier(0.4,0,0.2,1) 0.1s both;
}
.error-img,
.ty-img {
  animation: floatY  4.5s ease-in-out 0.4s infinite,
             fadeUp  0.65s cubic-bezier(0.4,0,0.2,1) 0.2s both;
}
.error-title,
.ty-heading { animation: fadeUp 0.65s cubic-bezier(0.4,0,0.2,1) 0.35s both; }
.error-desc,
.ty-desc    { animation: fadeUp 0.65s cubic-bezier(0.4,0,0.2,1) 0.50s both; }
.error-btns,
.ty-btns    { animation: fadeUp 0.65s cubic-bezier(0.4,0,0.2,1) 0.65s both; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. ACCESSIBILITY — reduced motion
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .hero-tag, .hero-heading, .hero-desc, .hero-btns, .hero-phones,
  .error-number, .ty-title, .error-img, .ty-img,
  .error-title, .ty-heading, .error-desc, .ty-desc,
  .error-btns, .ty-btns, #site-header {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .phone-left, .phone-right, .ts-phone,
  .hero-btn-primary, .feat-banner-qr { animation: none; }
}