/* ==========================================================
   KallzStore — Animation System
   ========================================================== */

/* Scroll-reveal base: elements start hidden, JS toggles .in-view */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].in-view{
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="scale"]{ transform: scale(.94); }
[data-reveal="scale"].in-view{ transform: scale(1); }
[data-reveal="left"]{ transform: translateX(-28px); }
[data-reveal="left"].in-view{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(28px); }
[data-reveal="right"].in-view{ transform: translateX(0); }

/* Stagger children automatically via JS-assigned --reveal-delay,
   but provide manual utility classes too */
.d-1{ --reveal-delay: .08s; }
.d-2{ --reveal-delay: .16s; }
.d-3{ --reveal-delay: .24s; }
.d-4{ --reveal-delay: .32s; }

/* Ambient float for the hero rig graphic */
@keyframes float-y{
  0%,100%{ translate: 0 0; }
  50%{ translate: 0 -10px; }
}
.float{ animation: float-y 5s ease-in-out infinite; }

/* Pulse glow — used on status dot / rig lights */
@keyframes pulse-glow{
  0%,100%{ box-shadow: 0 0 6px 1px rgba(255,45,58,.55); }
  50%{ box-shadow: 0 0 16px 4px rgba(255,45,58,.9); }
}
.pulse{ animation: pulse-glow 2.2s ease-in-out infinite; }

/* Shimmer sweep for hero accent word */
@keyframes shimmer{
  0%{ background-position: 200% center; }
  100%{ background-position: -200% center; }
}
.shimmer-text{
  background: linear-gradient(90deg, var(--red-glow) 0%, #fff 50%, var(--red-glow) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}

/* Card hover lift already in home.css; add icon-tile micro interaction */
.card:hover .icon-tile{
  transform: scale(1.08) rotate(-4deg);
  transition: transform .25s ease;
}
.icon-tile{ transition: transform .25s ease; }

/* Button ripple-ish hover shine */
.btn-primary{ position: relative; overflow: hidden; }
.btn-primary::after{
  content:''; position:absolute; top:0; left:-60%;
  width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
}
.btn-primary:hover::after{ left: 130%; }

/* Navbar scroll state (toggled via JS by adding .scrolled) */
.navbar{ transition: background .25s ease, box-shadow .25s ease; }
.navbar.scrolled{ box-shadow: 0 6px 24px -12px rgba(0,0,0,.6); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1 !important; transform: none !important; }
  .float, .pulse, .shimmer-text{ animation: none !important; }
}