/* =====================================================================
   RD Engineering — Animations
   Scroll-reveal, entrances, micro-interactions (CSS side)
   JS toggles .is-visible on .reveal elements (see js/animation.js)
   ===================================================================== */

/* ---- Base reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Directional variants */
.reveal-left  { transform: translateX(-46px); }
.reveal-right { transform: translateX(46px); }
.reveal-scale { transform: scale(.92); }
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible { transform: none; }

/* Stagger via inline --d (delay index) */
.reveal[style*="--d"] { transition-delay: calc(var(--d) * 90ms); }

/* ---- Hero entrance (runs on load) ---- */
.hero-anim { opacity: 0; transform: translateY(28px); animation: heroUp .9s var(--ease) forwards; }
.hero-anim.d1 { animation-delay: .12s; }
.hero-anim.d2 { animation-delay: .26s; }
.hero-anim.d3 { animation-delay: .40s; }
.hero-anim.d4 { animation-delay: .54s; }
.hero-anim.d5 { animation-delay: .68s; }
@keyframes heroUp { to { opacity: 1; transform: none; } }

.hero-bg img { animation: heroZoom 16s var(--ease) forwards; }
@keyframes heroZoom { from { transform: scale(1.14); } to { transform: scale(1.02); } }

/* ---- Floating spec chips (hero optional) ---- */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.floaty { animation: floaty 5s ease-in-out infinite; }

/* ---- Underline sweep for links ---- */
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- Button shine ---- */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  transition: left .6s var(--ease);
}
.btn:hover::before { left: 130%; }

/* ---- Card lift shadow already in style.css; add image zoom helper ---- */
.zoom-img { overflow: hidden; }
.zoom-img img { transition: transform .7s var(--ease); }
.zoom-img:hover img { transform: scale(1.07); }

/* ---- Counter flash when counting ---- */
.counting { color: #fff; }

/* ---- Fade-in page load ---- */
body { animation: pageFade .5s var(--ease); }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Spinner (contact submit) ---- */
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Subtle pulse for accent dots ---- */
@keyframes softPulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.pulse-soft { animation: softPulse 2.4s ease-in-out infinite; }

/* ---- Nav link stagger on mobile open ---- */
.nav-menu.open a { animation: navItem .4s var(--ease) both; }
.nav-menu.open a:nth-child(1) { animation-delay: .05s; }
.nav-menu.open a:nth-child(2) { animation-delay: .10s; }
.nav-menu.open a:nth-child(3) { animation-delay: .15s; }
.nav-menu.open a:nth-child(4) { animation-delay: .20s; }
.nav-menu.open a:nth-child(5) { animation-delay: .25s; }
.nav-menu.open .mobile-cta { animation: navItem .4s var(--ease) .3s both; }
@keyframes navItem { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

/* ---- Mobile: no horizontal reveal shift (prevents sideways scroll) ----
   Loaded last so it overrides the directional translateX above. */
@media (max-width: 900px) {
  .reveal-left,
  .reveal-right { transform: translateY(30px); }
  .reveal-left.is-visible,
  .reveal-right.is-visible { transform: none; }
}