/* Digital Edge motion layer (motion-design skill tokens). Enhancement only: every rule here is optional;
   the site is complete without it, and prefers-reduced-motion switches it all off. */
:root{
  --dur-1:120ms;--dur-2:180ms;--dur-3:240ms;--dur-4:300ms;--dur-5:500ms;
  --ease-out-quad:cubic-bezier(.25,.46,.45,.94);--ease-out-quart:cubic-bezier(.165,.84,.44,1);--ease-out-expo:cubic-bezier(.19,1,.22,1);
  --ease-in-out-quad:cubic-bezier(.455,.03,.515,.955);--ease-in-out-cubic:cubic-bezier(.645,.045,.355,1);
}

/* 1. Scroll entrances (existing data-reveal blocks): same timing, a calmer landing */
[data-reveal]{transition-timing-function:var(--ease-out-expo)!important}

/* 2. Service-page hero: copy and image arrive in sequence on load (illustrative, once per page) */
@keyframes dmUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes dmIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.sp-hero .sp-crumbs,.sp-hero .sp-kick,.sp-hero h1,.sp-hero .sp-lead,.sp-hero .sp-ctas,.sp-hero .sp-stats,.sp-hero .sp-trust{animation:dmUp .9s var(--ease-out-expo) both}
.sp-hero .sp-kick{animation-delay:.06s}.sp-hero h1{animation-delay:.12s}.sp-hero .sp-lead{animation-delay:.22s}
.sp-hero .sp-ctas{animation-delay:.3s}.sp-hero .sp-stats{animation-delay:.38s}.sp-hero .sp-trust{animation-delay:.44s}
.sp-hero .sp-hero-img{animation:dmIn 1.1s var(--ease-out-expo) .18s both}
/* living detail: the hero picture drifts very slowly (image-hero recipe) */
@keyframes dmDrift{from{transform:scale(1)}to{transform:scale(1.06)}}
.sp-hero-img img{animation:dmDrift 20s var(--ease-in-out-quad) -6s infinite alternate}

/* 3. Staggered lists (cards, steps, photos, FAQs): added by motion.js only for blocks below the fold */
.dm-on .dm-item{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out-quart),transform .6s var(--ease-out-quart)!important}
.dm-on .dm-item.dm-in{opacity:1;transform:none}

/* 4. Press feedback on buttons (responsiveness, 120ms) */
.sp-btn:active,.sp-rel a:active,.dey-topics button:active,.dey-actions button:active,.dey-compose button:active,#de-dw .f a:active,.deq-nav:active{transform:scale(.97)!important;transition-duration:var(--dur-1)!important}

/* 5. Hover lifts only where a real pointer exists (no sticky hover on phones) */
@media (hover:none){.sp-card:hover,.sp-btn:hover,.dey-topics button:hover,#de-dw .it:hover{transform:none}.sp-fig:hover img{transform:none}}

/* 6. FAQ answers ease in when opened */
@keyframes dmFaq{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
details.de-faq[open] .de-faq-a{animation:dmFaq var(--dur-3) var(--ease-out-quart)}

/* 7. Service drawer: exits faster than it enters */
#de-dw{transition-timing-function:var(--ease-out-expo)}
#de-dw:not(.open){transition-duration:.26s;transition-timing-function:var(--ease-out-quart)}
#de-dw-bg:not(.open){transition-duration:.2s}
#de-dw.open .it{animation:dmUp .45s var(--ease-out-quart) both}
#de-dw.open .it:nth-child(2){animation-delay:.03s}#de-dw.open .it:nth-child(3){animation-delay:.06s}#de-dw.open .it:nth-child(4){animation-delay:.09s}
#de-dw.open .it:nth-child(5){animation-delay:.12s}#de-dw.open .it:nth-child(6){animation-delay:.15s}#de-dw.open .it:nth-child(n+7){animation-delay:.18s}

/* 8. Links: colour changes ease (subtle state change, 150ms ease) */
.sp-rel a,.sp-crumbs a,.dey-person,.dey-wa{transition:color 150ms ease,border-color 150ms ease,background-color 150ms ease}

@media (prefers-reduced-motion:reduce){
  .sp-hero *,.sp-hero-img img,#de-dw .it,details.de-faq[open] .de-faq-a{animation:none!important}
  .dm-on .dm-item{opacity:1!important;transform:none!important;transition:none!important}
}

/* Showreel sound toggle: top-right of the hero on phones, clear of the stats and Yasmeen */
@media (max-width:880px){.dm-sound{top:84px!important;bottom:auto!important;right:16px!important;padding:9px 13px!important;font-size:12px!important}}
.dm-sound{transition:background-color 150ms ease,border-color 150ms ease}.dm-sound:hover{border-color:rgba(255,255,255,.6)!important}

/* Phones: menu links are hidden, so the header is just logo | hamburger (keeps the quote and theme buttons off the logo) */
@media (max-width:880px){#de-nav{grid-template-columns:1fr auto!important}}