/* ==========================================================================
   PEREGRINE INDUSTRIES — ANIMATIONS (Core Keyframes & Reveals Systems)
   ========================================================================== */

/* 1. Core Reveal System States */
[data-reveal] {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* Delay Steps Utilities */
[data-delay="1"] { transition-delay: 0.15s; }
[data-delay="2"] { transition-delay: 0.3s; }
[data-delay="3"] { transition-delay: 0.45s; }
[data-delay="4"] { transition-delay: 0.6s; }

/* 2. Keyframes Construct Definitions */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes pulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); }
  50% { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
}

/* 3. Infinite Functional Loops */
.marquee-ticker-strip .marquee-scroller-node {
  animation: marquee 35s linear infinite;
}

/* Skeleton Loaders Animation Pattern */
.skeleton-shimmer-block {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--linen) 25%, var(--cream) 50%, var(--linen) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  z-index: 5;
  transition: opacity 0.6s ease-out;
}