/* ============================================================
   MEAT MAX · animations.css
   Reveal-on-scroll, keyframes & motion utilities
   ============================================================ */

/* --- Scroll reveal base --- */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 1.05s cubic-bezier(.22,.61,.36,1) var(--d, 0ms),
    transform 1.05s cubic-bezier(.22,.61,.36,1) var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal--left  { transform: translateX(-50px); }
.reveal--right { transform: translateX(50px); }
.reveal--scale { transform: scale(.94); }
.reveal--left.is-revealed,
.reveal--right.is-revealed { transform: translateX(0); }
.reveal--scale.is-revealed { transform: scale(1); }

/* --- Word-by-word reveal (used in hero) --- */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--wd, 0ms);
}
.is-revealed .word > span,
.hero.is-ready .word > span { transform: translateY(0); }

/* --- Keyframes --- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slow-zoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.14); }
}
@keyframes drift {
  0%   { transform: translate3d(-2%, 0, 0); }
  50%  { transform: translate3d(2%, -1%, 0); }
  100% { transform: translate3d(-2%, 0, 0); }
}
@keyframes flicker {
  0%, 100% { opacity: .85; filter: blur(0px); }
  45%      { opacity: 1;   filter: blur(.3px); }
  60%      { opacity: .7;  filter: blur(.6px); }
  72%      { opacity: 1;   filter: blur(.2px); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-x-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(232,93,26,.45); }
  100% { box-shadow: 0 0 0 22px rgba(232,93,26,0); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes star-twinkle {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 0 transparent); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(255,193,7,.55)); }
}
@keyframes loader-letter {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes loader-line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes loader-out {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(100% 0 0 0); }
}

/* --- Utility hooks --- */
.anim-fade-up    { animation: fade-up .9s cubic-bezier(.22,.61,.36,1) both; }
.anim-fade-in    { animation: fade-in 1.2s ease both; }
.anim-bob        { animation: bob 3.4s ease-in-out infinite; }
.anim-flicker    { animation: flicker 4s ease-in-out infinite; }
.anim-pulse      { animation: pulse-ring 2.4s ease-out infinite; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .word > span { transform: none !important; }
  .anim-fade-up,
  .anim-fade-in,
  .anim-bob,
  .anim-flicker,
  .anim-pulse { animation: none !important; }
}