/* Concrete Impressions — motion layer.
   Content is visible by default; everything here is an enhancement and
   is disabled for users who prefer reduced motion. */

/* ---- CTA buttons: deepen shadow on hover (the lift already exists) ---- */
.btn{transition:background .25s ease, transform .25s ease, box-shadow .25s ease}
.btn:hover{box-shadow:0 16px 36px rgba(214,13,27,.34)}

/* ---- Gallery hover refinement: ~3% zoom + subtle caption nudge ---- */
.gallery figure img{transition:transform .45s ease}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{transition:transform .3s ease, color .3s ease}
.gallery figure:hover figcaption{transform:translateY(-2px)}

/* ---- Hero: "Built To Last." lands last with a small scale reveal ---- */
@keyframes ciBuiltReveal{0%{opacity:0;transform:scale(.9)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
.hero h1 span{display:inline-block;animation:ciBuiltReveal .5s cubic-bezier(.22,.9,.35,1) both;animation-delay:.5s}

/* ---- How It Works: steps fade in on scroll + red line draws 01 -> 04 ---- */
.anim-ready .how-step{opacity:0;transform:translateY(18px);transition:opacity .45s ease, transform .45s ease}
.anim-ready.in .how-step{opacity:1;transform:none}
.anim-ready.in .how-step:nth-child(1){transition-delay:.04s}
.anim-ready.in .how-step:nth-child(2){transition-delay:.14s}
.anim-ready.in .how-step:nth-child(3){transition-delay:.24s}
.anim-ready.in .how-step:nth-child(4){transition-delay:.34s}
@media (min-width:901px){
  .anim-ready .how-grid{position:relative}
  .anim-ready .how-grid::before{content:"";position:absolute;top:33px;left:7%;right:7%;height:2px;
    background:linear-gradient(90deg,var(--red),rgba(214,13,27,.35));
    transform:scaleX(0);transform-origin:left;
    transition:transform .8s cubic-bezier(.4,0,.2,1) .25s;z-index:0}
  .anim-ready.in .how-grid::before{transform:scaleX(1)}
  .anim-ready .how-step{position:relative;z-index:1}
}

/* ---- Estimator: selection confirmation + price reveal ---- */
.est-opt{transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease}
@keyframes ciOptPop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.est-opt.sel{animation:ciOptPop .3s ease}
@keyframes ciPriceIn{0%{opacity:0;transform:translateY(6px) scale(.98)}100%{opacity:1;transform:none}}
#estPrice.price-anim{animation:ciPriceIn .45s cubic-bezier(.22,.9,.35,1)}

/* ---- Respect reduced-motion: turn it all off ---- */
@media (prefers-reduced-motion: reduce){
  .hero h1 span{animation:none}
  .gallery figure:hover img{transform:none}
  .gallery figure:hover figcaption{transform:none}
  .btn:hover{transform:none}
  .anim-ready .how-step{opacity:1;transform:none;transition:none}
  .anim-ready .how-grid::before{transition:none;transform:scaleX(1)}
  .est-opt.sel{animation:none}
  #estPrice.price-anim{animation:none}
}