/* ============================================
   Calgary Roofing Repairs - Animations
   crr-animations.css
   ============================================ */

/* ---- Entry Animations ---- */
.crr-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.crr-animate.crr-animate-left {
  transform: translateX(-30px);
}

.crr-animate.crr-animate-right {
  transform: translateX(30px);
}

.crr-animate.crr-animate-scale {
  transform: scale(0.92);
}

.crr-animate.crr-in-view {
  opacity: 1;
  transform: none;
}

/* Staggered delays */
.crr-delay-1 { transition-delay: 0.1s; }
.crr-delay-2 { transition-delay: 0.2s; }
.crr-delay-3 { transition-delay: 0.3s; }
.crr-delay-4 { transition-delay: 0.4s; }
.crr-delay-5 { transition-delay: 0.5s; }
.crr-delay-6 { transition-delay: 0.6s; }

/* ---- Hover Lifts ---- */
.crr-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.crr-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(26,35,50,0.18);
}

/* ---- Pulse (CTA attention) ---- */
.crr-pulse {
  animation: crr-pulse-anim 2.5s infinite;
}
@keyframes crr-pulse-anim {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.35); }
  50% { box-shadow: 0 0 0 12px rgba(192,57,43,0); }
}

/* ---- Spin ---- */
.crr-spin {
  animation: crr-spin-anim 1s linear infinite;
}
@keyframes crr-spin-anim {
  to { transform: rotate(360deg); }
}

/* ---- Counter number roll ---- */
.crr-count-anim {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1);
}

/* ---- Shimmer skeleton ---- */
.crr-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: crr-shimmer-anim 1.6s infinite;
}
@keyframes crr-shimmer-anim {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Image reveal ---- */
.crr-img-reveal {
  overflow: hidden;
}
.crr-img-reveal img {
  transform: scale(1.08);
  transition: transform 0.8s ease;
}
.crr-img-reveal.crr-in-view img {
  transform: scale(1);
}

/* ---- Typewriter cursor ---- */
.crr-cursor-blink {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: crr-blink 0.7s step-end infinite;
}
@keyframes crr-blink {
  50% { opacity: 0; }
}

/* ---- Float subtle ---- */
.crr-float {
  animation: crr-float-anim 4s ease-in-out infinite;
}
@keyframes crr-float-anim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---- Gradient text ---- */
.crr-gradient-text {
  background: linear-gradient(135deg, var(--crr-red) 0%, #e88070 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- SVG Dividers ---- */
.crr-divider-slate-to-white path {
  fill: #f7f8fa;
}
.crr-divider-white-to-slate path {
  fill: #1a2332;
}

/* ---- Page load fade ---- */
.crr-page-enter {
  animation: crr-page-enter-anim 0.6s ease forwards;
}
@keyframes crr-page-enter-anim {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Underline draw ---- */
.crr-underline-draw {
  position: relative;
  display: inline-block;
}
.crr-underline-draw::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 3px;
  background: var(--crr-red);
  border-radius: 2px;
  transition: width 0.5s ease;
}
.crr-underline-draw.crr-in-view::after {
  width: 100%;
}

/* ---- Border animate on hover ---- */
.crr-border-animate {
  position: relative;
}
.crr-border-animate::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--crr-red);
  opacity: 0;
  transform: scale(1.04);
  transition: all 0.3s ease;
}
.crr-border-animate:hover::before {
  opacity: 1;
  transform: scale(1);
}