/* ═══════════════════════════════════════════════════════════
   ANIMATIONS — site-wide layer
   Auto-applied via animations.js (IntersectionObserver-based)
   ═══════════════════════════════════════════════════════════ */

/* Initial hidden state — elements start invisible, animate on scroll */
[data-anim]{opacity:0;will-change:transform,opacity;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}

/* Variants */
[data-anim="fade-up"]{transform:translateY(40px)}
[data-anim="fade-down"]{transform:translateY(-40px)}
[data-anim="fade-left"]{transform:translateX(40px)}
[data-anim="fade-right"]{transform:translateX(-40px)}
[data-anim="zoom-in"]{transform:scale(.92)}
[data-anim="fade"]{transform:none}

/* Visible state */
[data-anim].in-view{opacity:1;transform:translate(0,0) scale(1)}

/* Stagger delays — applied via :nth-child for grids */
.stagger-children > *{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.stagger-children.in-view > *{opacity:1;transform:translateY(0)}
.stagger-children.in-view > *:nth-child(1){transition-delay:.05s}
.stagger-children.in-view > *:nth-child(2){transition-delay:.12s}
.stagger-children.in-view > *:nth-child(3){transition-delay:.19s}
.stagger-children.in-view > *:nth-child(4){transition-delay:.26s}
.stagger-children.in-view > *:nth-child(5){transition-delay:.33s}
.stagger-children.in-view > *:nth-child(6){transition-delay:.40s}
.stagger-children.in-view > *:nth-child(7){transition-delay:.47s}
.stagger-children.in-view > *:nth-child(8){transition-delay:.54s}
.stagger-children.in-view > *:nth-child(9){transition-delay:.61s}
.stagger-children.in-view > *:nth-child(10){transition-delay:.68s}
.stagger-children.in-view > *:nth-child(11){transition-delay:.75s}
.stagger-children.in-view > *:nth-child(12){transition-delay:.82s}

/* Page load — body fade in */
@keyframes pageLoad{from{opacity:0}to{opacity:1}}
body{animation:pageLoad .5s ease-out}

/* Hover lift — universal upgrade for clickable cards */
.service-card,.area-pill,.testimonial-card,.review-card,.area-card{
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s cubic-bezier(.16,1,.3,1),border-color .35s ease!important;
  will-change:transform
}
.service-card:hover,.area-card:hover,.testimonial-card:hover,.review-card:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 24px 60px rgba(10,10,15,.12)!important
}
.area-pill:hover{transform:translateY(-3px) scale(1.02)!important}

/* Service card icon — subtle rotate on hover */
.service-card{position:relative;overflow:hidden}
.service-card .service-icon{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.service-card:hover .service-icon{transform:rotate(-8deg) scale(1.12)}

/* Service card glow sweep on hover */
.service-card::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,107,53,.08),transparent);
  transition:left .8s cubic-bezier(.16,1,.3,1);pointer-events:none
}
.service-card:hover::before{left:100%}

/* Trust strip items — pop in sequence */
.trust-strip-items > *{transition:transform .25s ease}
.trust-strip-items > *:hover{transform:translateY(-2px)}

/* Hero stat numbers — slight pulse on load */
.hero-stat-num{animation:statPop .9s cubic-bezier(.34,1.56,.64,1) backwards}
.hero-stat:nth-child(1) .hero-stat-num{animation-delay:.4s}
.hero-stat:nth-child(2) .hero-stat-num{animation-delay:.55s}
.hero-stat:nth-child(3) .hero-stat-num{animation-delay:.7s}
.hero-stat:nth-child(4) .hero-stat-num{animation-delay:.85s}
@keyframes statPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* Hero headline — fade in word by word feel via blur */
.hero-headline{animation:heroIn 1.1s cubic-bezier(.16,1,.3,1) backwards}
.hero-sub{animation:heroIn 1.1s cubic-bezier(.16,1,.3,1) .15s backwards}
.hero-actions{animation:heroIn 1.1s cubic-bezier(.16,1,.3,1) .3s backwards}
.hero-social{animation:heroIn 1.1s cubic-bezier(.16,1,.3,1) .45s backwards}
.hero-badge{animation:heroIn .9s cubic-bezier(.16,1,.3,1) backwards}
@keyframes heroIn{from{opacity:0;transform:translateY(20px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}

/* Hero portrait — slide in from right with scale */
.hero-portrait .portrait-img{animation:portraitIn 1.4s cubic-bezier(.16,1,.3,1) backwards}
@keyframes portraitIn{from{opacity:0;transform:scale(.85) translateX(40px)}to{opacity:1;transform:scale(1) translateX(0)}}

/* Buttons — gentle press on click */
.btn,.action-btn,button[type="submit"]{transition:transform .15s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,background .2s ease,color .2s ease!important}
.btn:active,button[type="submit"]:active{transform:translateY(1px) scale(.98)}

/* Link underline animation */
nav a:not(.nav-cta):not(.nav-phone):not(.nav-logo){position:relative}
nav a:not(.nav-cta):not(.nav-phone):not(.nav-logo)::after{
  content:"";position:absolute;left:50%;bottom:6px;width:0;height:2px;background:#FF6B35;transition:all .3s cubic-bezier(.16,1,.3,1);transform:translateX(-50%);border-radius:2px
}
nav a:not(.nav-cta):not(.nav-phone):not(.nav-logo):hover::after{width:60%}

/* Section title — gradient shimmer on first reveal */
.section-title.in-view{
  background:linear-gradient(90deg,#1F1F2E,#1F1F2E,#FF6B35,#1F1F2E,#1F1F2E);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmerText 3s linear .3s 1
}
@keyframes shimmerText{0%{background-position:-200% center}100%{background-position:200% center}}

/* Form inputs — focus glow */
input,select,textarea{transition:border-color .25s ease,box-shadow .25s ease,transform .15s ease!important}

/* Floating call icon — premium nav phone subtle pulse */
.nav-phone svg,.topbar a:first-of-type{animation:callPulse 3s ease-in-out infinite}
@keyframes callPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Mobile sticky CTA — slide up on first appearance */
.mobile-sticky-cta{animation:slideUp .6s cubic-bezier(.16,1,.3,1) .8s backwards}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* Scroll-down indicator (added by JS to hero) */
.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.5);font-size:11px;text-transform:uppercase;letter-spacing:2px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3;animation:fadeIn 1s ease 1.5s backwards;pointer-events:none}
.scroll-hint .arrow{width:1px;height:32px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.6));animation:scrollDown 2s ease-in-out infinite}
@keyframes scrollDown{0%{transform:translateY(-10px);opacity:0}30%{opacity:1}100%{transform:translateY(10px);opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-anim]{opacity:1!important;transform:none!important}
}