/* =============================================================
   VISTA HUB v3 — ANIMATIONS
   GPU-friendly (transform/opacity only). No layout thrash.
   ============================================================= */

/* ---------- Keyframes ---------- */
@keyframes vh-pulse{
  0%,100%{ transform:scale(1);   opacity:1;   }
  50%    { transform:scale(1.18); opacity:.78; }
}
@keyframes vh-fade-up{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:translateY(0);    }
}
@keyframes vh-fade-in{
  from{ opacity:0; }
  to  { opacity:1; }
}
@keyframes vh-shimmer{
  0%  { background-position:-150% 0; }
  100%{ background-position:250% 0;  }
}
@keyframes vh-bounce{
  0%,100%{ transform:translateY(0); }
  40%    { transform:translateY(-5px); }
  70%    { transform:translateY(-2px); }
}
@keyframes vh-glow-pulse{
  0%,100%{ box-shadow:0 0 0 rgba(229,57,53,0); }
  50%    { box-shadow:0 0 18px rgba(229,57,53,.45); }
}
@keyframes vh-ticker{
  0%  { transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@keyframes vh-story-reveal{
  from{ opacity:0; transform:scale(.96) translateY(8px); }
  to  { opacity:1; transform:scale(1)   translateY(0);   }
}
@keyframes vh-btt-pop{
  from{ transform:translateY(12px) scale(.85); opacity:0; }
  to  { transform:translateY(0)    scale(1);   opacity:1; }
}
@keyframes vh-new-badge{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.12); }
}

/* ---------- Logo breathing pulse ---------- */
.logo-arrow{ animation:vh-pulse 1.8s ease-in-out infinite; }

/* ---------- Page load fade ---------- */
body{ animation:vh-fade-in .4s ease both; }

/* ---------- Scroll / load reveal ---------- */
html.js [data-reveal]{ opacity:0; transform:translateY(18px); }
html.js [data-reveal].in-view{ animation:vh-fade-up .55s cubic-bezier(.22,.61,.36,1) both; }
.posts-grid [data-reveal].in-view{ animation-delay:calc(var(--i,0) * 55ms); }

/* ---------- Section heading shimmer (one-shot) ---------- */
.section-heading.in-view h1,
.section-heading.in-view h2{
  background:linear-gradient(100deg,#fff 30%,var(--accent) 50%,#fff 70%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:vh-shimmer 1.4s ease-out 1;
}

/* ---------- Cat tile icon bounce ---------- */
.cat-grid-item:hover .cat-grid-icon{ animation:vh-bounce .5s ease; }

/* ---------- Post card hover glow ---------- */
.post-card:hover{
  border-color:rgba(229,57,53,.5);
  animation:vh-glow-pulse 1.6s ease-in-out infinite;
}

/* ---------- Trending ticker (single seamless engine) ---------- */
.ticker-inner{
  display:flex;
  align-items:center;
  gap:0;
  width:max-content;
  animation:vh-ticker 30s linear infinite;
}
.ticker-wrap:hover .ticker-inner{ animation-play-state:paused; }

/* ---------- Story cards reveal ---------- */
.story-card{ animation:vh-story-reveal .4s ease both; }

/* ---------- NEW badge pulse ---------- */
.new-badge{ animation:vh-new-badge 1.4s ease-in-out infinite; }

/* ---------- Back-to-top pop-in ---------- */
#back-to-top.show{ animation:vh-btt-pop .3s cubic-bezier(.34,1.56,.64,1) both; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .logo-arrow{ animation:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .section-heading.in-view h1,
  .section-heading.in-view h2{
    -webkit-text-fill-color:#fff; background:none; animation:none;
  }
  .ticker-inner{ animation:none !important; }
}