/* ==========================================================================
   P Brookes Renovations LLC — motion layer
   CSS keyframes (Animista-style) for micro-interactions, plus the resting
   states GSAP/ScrollTrigger animates from.

   Everything here is additive: with JS off, or if the GSAP CDN fails, the
   page renders exactly as designed — reveal states only apply while
   <html> carries .has-anim, which animations.js sets and clears.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Keyframes
   -------------------------------------------------------------------------- */
@keyframes pbr-fade-in-bottom{
  0%{opacity:0;transform:translateY(28px);}
  100%{opacity:1;transform:translateY(0);}
}
@keyframes pbr-scale-in{
  0%{opacity:0;transform:scale(.94);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes pbr-pulse-ring{
  0%{opacity:.55;transform:translate(-50%,-50%) scale(1);}
  70%{opacity:0;transform:translate(-50%,-50%) scale(1.75);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.75);}
}
@keyframes pbr-shine{
  0%{transform:translateX(-120%) skewX(-18deg);}
  100%{transform:translateX(320%) skewX(-18deg);}
}
@keyframes pbr-kenburns{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.08) translate(0,-1.5%);}
}
@keyframes pbr-bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}

/* --------------------------------------------------------------------------
   2. Reveal resting states (only while JS is driving the page)
   -------------------------------------------------------------------------- */
.has-anim [data-anim]{opacity:0;will-change:transform,opacity;}
.has-anim [data-anim="up"]{transform:translateY(32px);}
.has-anim [data-anim="left"]{transform:translateX(-40px);}
.has-anim [data-anim="right"]{transform:translateX(40px);}
.has-anim [data-anim="scale"]{transform:scale(.94);}
.has-anim [data-anim="fade"]{transform:none;}

/* Children revealed as a stagger group */
.has-anim [data-anim-group] > *{opacity:0;transform:translateY(32px);will-change:transform,opacity;}

/* Once revealed, the element owns its resting state again.
   This MUST outrank the hidden states above: animations.js clears the inline
   props it tweened, so without this the CSS would hide the element again. */
.has-anim [data-anim].is-revealed,
.has-anim [data-anim-group] > .is-revealed{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* --------------------------------------------------------------------------
   3. Micro-interactions
   -------------------------------------------------------------------------- */

/* Buttons: light sweep on hover */
.btn{position:relative;overflow:hidden;}
.btn > *{position:relative;z-index:1;}
.btn::after{
  content:"";
  position:absolute;
  top:-50%;left:0;
  width:40%;height:200%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-120%) skewX(-18deg);
  pointer-events:none;
}
.btn:hover::after{animation:pbr-shine .75s ease-out forwards;}
.btn--dark:hover::after{background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);}

/* Play button: pulsing ring */
.play-btn{position:relative;}
.play-btn::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:100%;height:100%;
  border-radius:50%;
  background:var(--c-white);
  transform:translate(-50%,-50%);
  animation:pbr-pulse-ring 2.4s ease-out infinite;
  pointer-events:none;
}
.hero__video:hover .play-btn svg{animation:pbr-bob .6s ease-in-out;}

/* Service + team icon pop */
.service-card__icon{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.service-card:hover .service-card__icon{transform:translateY(-4px) rotate(-4deg);}

/* Stat numbers settle in */
.stats__num{display:inline-block;}

/* Step connector draws left to right (GSAP animates --line-scale on the label) */
.step:not(:last-child) .step__label::after{
  transform-origin:left center;
  transform:scaleX(var(--line-scale,1));
}
.has-anim .step:not(:last-child) .step__label{--line-scale:0;}

/* Parallax images need headroom inside their (overflow:hidden) frame */
.has-anim img[data-parallax]{
  position:absolute;
  top:-9%;left:0;
  width:100%;height:118%;
  object-fit:cover;
}

/* Nav underline */
.site-nav__list a{position:relative;}
.site-nav__list a::after{
  content:"";
  position:absolute;
  left:0;bottom:-6px;
  width:100%;height:2px;
  background:var(--c-accent);
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .3s ease;
}
.site-nav__list a:hover::after,
.site-nav__list a.is-active::after{transform:scaleX(1);transform-origin:left center;}

/* Card hover lift already in style.css — add the image zoom partners here */
.post__title a,
.widget__list a,
.breadcrumb a{transition:color .25s ease;}

/* Filter buttons */
.filter__btn{position:relative;overflow:hidden;}

/* --------------------------------------------------------------------------
   4. Reduced motion — kill everything, show everything
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .has-anim [data-anim],
  .has-anim [data-anim-group] > *{opacity:1 !important;transform:none !important;}
  .has-anim .step:not(:last-child) .step__label::after{transform:none !important;}
  .play-btn::before{animation:none;}
  .btn:hover::after{animation:none;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}