/* =========================================================
   Bet Your Bud — Animations (Royal Badge)
   File: /assets/css/animations.css
   Purpose: Motion polish (hover lift, glow pulse, reveal anims,
            floating phones, premium micro-interactions).
   Respects reduced motion preferences.
   ========================================================= */

/* ---------- Scroll reveal ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
}

[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- Hover lift (cards & buttons) ---------- */
.card,
.btn{
  will-change: transform, box-shadow;
}

.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

.btn:hover{
  transform: translateY(-1px);
}

/* ---------- Hero glow blobs ---------- */
.hero__blob{
  position: absolute;
  width: 520px;
  height: 520px;
  filter: blur(var(--blur-2));
  opacity: 0.42;
  pointer-events: none;
  animation: float 20s ease-in-out infinite;
}

.hero__blob--a{
  top: -140px;
  left: -140px;
  background: var(--g-glow);
}

.hero__blob--b{
  bottom: -180px;
  right: -140px;
  background: var(--g-glow-2);
  animation-duration: 26s;
}

/* ---------- Floating phone UI chips ---------- */
.phone__float{
  position: absolute;
  display: flex;
  gap: var(--sp-8);
  animation: bob 4.5s ease-in-out infinite;
}

.phone__float--top{
  top: 14%;
  left: -8%;
}

.phone__float--bottom{
  bottom: 12%;
  right: -10%;
  animation-delay: 1.8s;
}

/* ---------- Badge / status pulse ---------- */
.badge--anim{
  position: relative;
}

.badge--anim::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(245,200,76,0.35), rgba(245,200,76,0) 65%);
  opacity: 0;
  animation: pulse 2.8s ease-in-out infinite;
}

/* ---------- Subtle tilt hook (JS optional) ---------- */
[data-tilt]{
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

/* ---------- Scroll hint ---------- */
.scrollHint__dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-text-2);
  animation: scrollDot 1.8s ease-in-out infinite;
}

/* ---------- Keyframes ---------- */
@keyframes float{
  0%   { transform: translate(0,0); }
  50%  { transform: translate(22px,-32px); }
  100% { transform: translate(0,0); }
}

@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

@keyframes pulse{
  0%,100%{ opacity: 0; transform: scale(0.9); }
  50%{ opacity: 1; transform: scale(1); }
}

@keyframes scrollDot{
  0%{ opacity: 0; transform: translateY(-6px); }
  50%{ opacity: 1; }
  100%{ opacity: 0; transform: translateY(8px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity: 1;
    transform: none;
  }

  .hero__blob,
  .phone__float,
  .badge--anim::after{
    animation: none;
  }
}