/*
 * YippeeBates Animations
 * css/animations.css
 * ---------------------------------------------------------------
 */

/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes yb-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes yb-slide-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes yb-slide-in-right {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes yb-float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes yb-float-y-sm {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

@keyframes yb-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.78); }
}

@keyframes yb-spin {
  to { transform: rotate(360deg); }
}

@keyframes yb-pop-in {
  0%   { transform: scale(0.88); opacity: 0; }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes yb-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes yb-bar-grow {
  from { width: 0; }
  to   { width: var(--w, 100%); }
}

@keyframes yb-blob-morph {
  0%, 100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
  33%       { border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%; }
  66%       { border-radius: 70% 30% 60% 40% / 40% 50% 60% 50%; }
}

@keyframes yb-count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes yb-toast-slide {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes yb-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

@keyframes yb-draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}


/* ============================================================
   ANIMATION UTILITY CLASSES
   ============================================================ */

/* On-load fade up — used on hero sections */
.yb-au   { animation: yb-fade-up var(--yb-duration-slow) var(--yb-ease-out) both; }
.yb-ai   { animation: yb-fade-in var(--yb-duration-slow) ease both; }

/* Stagger delays */
.yb-d1 { animation-delay: 0.07s; }
.yb-d2 { animation-delay: 0.14s; }
.yb-d3 { animation-delay: 0.21s; }
.yb-d4 { animation-delay: 0.28s; }
.yb-d5 { animation-delay: 0.35s; }
.yb-d6 { animation-delay: 0.42s; }
.yb-d7 { animation-delay: 0.49s; }
.yb-d8 { animation-delay: 0.56s; }

/* Persistent motion */
.yb-float      { animation: yb-float-y    6s ease-in-out infinite; }
.yb-float-sm   { animation: yb-float-y-sm 4s ease-in-out infinite; }
.yb-pulse      { animation: yb-pulse-dot  2s ease infinite; }
.yb-spin       { animation: yb-spin 0.8s linear infinite; }
.yb-blob       { animation: yb-blob-morph 12s ease-in-out infinite; }

/* Marquee ticker */
.yb-marquee    { animation: yb-marquee 28s linear infinite; }
.yb-marquee-fast { animation: yb-marquee 16s linear infinite; }

/* Shimmer (loading skeleton) */
.yb-shimmer {
  background: linear-gradient(
    90deg,
    var(--yb-ink-100) 25%,
    var(--yb-ink-50) 50%,
    var(--yb-ink-100) 75%
  );
  background-size: 600px 100%;
  animation: yb-shimmer 1.5s ease-in-out infinite;
}