/* ============================================================
   AquaPro Plumbing — animations.css
   ============================================================ */

/* ---------- Scroll Reveal Base States ---------- */
.fade-up    { opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.fade-left  { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.fade-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.scale-in   { opacity: 0; transform: scale(0.92); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }

/* Revealed state */
.fade-up.visible,
.fade-left.visible,
.fade-right.visible,
.scale-in.visible { opacity: 1; transform: none; }

/* Delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-left, .fade-right, .scale-in {
    opacity: 1; transform: none; transition: none;
  }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Page Transition ---------- */
body { animation: pageEnter 0.5s var(--ease-out) both; }
@keyframes pageEnter { from{opacity:0} to{opacity:1} }

/* ---------- Hover Shimmer on Glass Cards ---------- */
.glass-card { position: relative; overflow: hidden; }
.glass-card::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
  transform: skewX(-15deg);
  transition: left 0.6s var(--ease);
  pointer-events: none;
}
.glass-card:hover::before { left: 160%; }

/* ---------- Typing Cursor ---------- */
#typed-text::after {
  content: '|'; color: var(--color-cyan); animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }