/* DON Roofing motion (November 5, 2026).
   Hidden starting states only exist under html.dr-anim, which dr-motion.js adds,
   so the page stays fully visible if the script never runs. */
:root{--dr-ease:cubic-bezier(.16,1,.3,1)}

/* Hero: the one authored moment. Lines rise out of a mask, the photo settles. */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .ln>span{display:inline-block}
.dr-anim .hero h1 .ln>span{transform:translateY(105%);transition:transform .9s var(--dr-ease)}
.dr-anim .hero.in h1 .ln>span{transform:none}
.dr-anim .hero h1 .ln:nth-child(2)>span{transition-delay:.09s}
.dr-anim .hero h1 .ln:nth-child(3)>span{transition-delay:.18s}
.dr-anim .hero .crumbs,.dr-anim .hero .sub,.dr-anim .hero .ctas{opacity:0;transform:translateY(14px);transition:opacity .7s var(--dr-ease),transform .7s var(--dr-ease)}
.dr-anim .hero.in .crumbs,.dr-anim .hero.in .sub,.dr-anim .hero.in .ctas{opacity:1;transform:none}
.dr-anim .hero.in .sub{transition-delay:.38s}
.dr-anim .hero.in .ctas{transition-delay:.48s}
.dr-anim .hero .bg{transform:scale(1.07);transition:transform 2.2s var(--dr-ease)}
.dr-anim .hero.in .bg{transform:none}
/* A single light sweep across the gold word once the line has landed. */
.dr-anim .hero.in h1 em{animation:dr-sheen 1.4s .85s cubic-bezier(.16,1,.3,1) both}

/* Numbers that count up get a fixed width so nothing shifts while they change. */
.dr-count{font-variant-numeric:tabular-nums}

/* Process timeline: the gold line draws down, then each step arrives in order. */
.dr-anim .steps::before{transform:scaleY(0);transform-origin:top;transition:transform 1.1s var(--dr-ease) .1s}
.dr-anim .steps.in::before{transform:none}
.dr-anim .steps li{opacity:0;transform:translateY(12px);transition:opacity .6s var(--dr-ease),transform .6s var(--dr-ease)}
.dr-anim .steps .n{transform:scale(.4);transition:transform .6s var(--dr-ease)}
.dr-anim .steps.in li{opacity:1;transform:none}
.dr-anim .steps.in .n{transform:none}
.dr-anim .steps.in li:nth-child(2),.dr-anim .steps.in li:nth-child(2) .n{transition-delay:.22s}
.dr-anim .steps.in li:nth-child(3),.dr-anim .steps.in li:nth-child(3) .n{transition-delay:.44s}
.dr-anim .steps.in li:nth-child(4),.dr-anim .steps.in li:nth-child(4) .n{transition-delay:.66s}

/* Lists that read as lists: a short, capped stagger as they enter. */
.dr-anim .dr-rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--dr-ease),transform .7s var(--dr-ease);transition-delay:var(--dr-d,0s)}
.dr-anim .dr-rise.in{opacity:1;transform:none}

/* Hover and press feedback. */
.svc{--z:1}
.svc img{transition:transform .5s var(--dr-ease),filter .5s var(--dr-ease)}
@media (hover:hover){
  .svc:hover img{transform:scale(1.035);filter:brightness(1.06)}
  .card{transition:transform .35s var(--dr-ease),box-shadow .35s var(--dr-ease)}
  .card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(5,5,5,.22)}
}
.dr .btn{transition:background .2s,color .2s,border-color .2s,transform .12s}
.dr .btn:active{transform:scale(.97)}

@media (prefers-reduced-motion:reduce){
  /* Keep the fades, drop the movement. */
  .dr-anim .hero h1 .ln>span,.dr-anim .hero .bg,.dr-anim .steps::before,.dr-anim .steps .n{transform:none!important}
  .dr-anim .hero .crumbs,.dr-anim .hero .sub,.dr-anim .hero .ctas,.dr-anim .steps li,.dr-anim .dr-rise{transform:none!important;transition-property:opacity!important;transition-duration:.3s!important}
  .dr-anim .hero.in h1 em{animation:none}
  .svc:hover img,.card:hover,.dr .btn:active{transform:none}
}