/* ============================================================
   Wazir Towing — Animations & Illustrations
   Loaded AFTER css/style.css. Everything in this file is
   decorative: remove the <link> and the site still looks and
   works correctly — nothing here is load-bearing layout.

   All motion is switched off in one block at the bottom of the
   file for visitors who ask for reduced motion.
   ============================================================ */

/* ============================================================
   1. Keyframe library
   ============================================================ */

@keyframes wt-fade-up    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes wt-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes wt-pop-in     { 0% { opacity: 0; transform: scale(.72); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes wt-slide-in-r { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

/* Illustration motion */
@keyframes wt-wheel      { to { transform: rotate(360deg); } }
@keyframes wt-bob        { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes wt-drive      { from { transform: translateX(-340px); } to { transform: translateX(1340px); } }
@keyframes wt-road-dash  { to { stroke-dashoffset: -120; } }
@keyframes wt-beacon     { 0%, 100% { opacity: .12; } 45% { opacity: 1; } }
@keyframes wt-beacon-2   { 0%, 100% { opacity: 1; } 45% { opacity: .12; } }
@keyframes wt-exhaust    { 0% { opacity: .5; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-26px, -14px) scale(1.8); } }
@keyframes wt-swing      { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes wt-ping       { 0% { opacity: .85; transform: scale(.35); } 80%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes wt-sweep      { to { transform: rotate(360deg); } }
@keyframes wt-pin-drop   { 0% { opacity: 0; transform: translateY(-16px); } 60% { opacity: 1; transform: translateY(3px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes wt-ring-wave  { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes wt-draw       { to { stroke-dashoffset: 0; } }
@keyframes wt-twinkle    { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes wt-float      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes wt-shine      { 0% { transform: translateX(-130%) skewX(-18deg); } 55%, 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes wt-spin       { to { transform: rotate(360deg); } }
@keyframes wt-shake      { 10%, 90% { transform: rotate(-6deg); } 30%, 70% { transform: rotate(7deg); } 50% { transform: rotate(-4deg); } }
@keyframes wt-underline  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wt-smoke      { 0% { opacity: .5; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(7px, -30px) scale(1.7); } }
@keyframes wt-blink      { 0%, 45% { opacity: 1; } 55%, 100% { opacity: .18; } }

/* ============================================================
   2. Hero entrance — runs once on load.
   Gated on html.js, so a browser without JavaScript shows
   everything immediately, exactly as before.
   ============================================================ */

.js .hero-kicker,
.js .hero h1,
.js .hero p.lead,
.js .hero-serving,
.js .hero-actions,
.js .hero-stats,
.js .hero-card {
  animation: wt-fade-up .85s cubic-bezier(.16, 1, .3, 1) both;
}
.js .hero-kicker  { animation-delay: .05s; }
.js .hero h1      { animation-delay: .15s; }
.js .hero p.lead  { animation-delay: .27s; }
.js .hero-serving { animation-delay: .36s; }
.js .hero-actions { animation-delay: .45s; }
.js .hero-stats   { animation-delay: .55s; }
.js .hero-card    { animation: wt-slide-in-r .9s cubic-bezier(.16, 1, .3, 1) .35s both; }

/* Red sweep under the highlighted words of the H1 */
.hero h1 em { position: relative; }
.js .hero h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .02em;
  height: 4px;
  background: var(--red);
  border-radius: 3px;
  transform-origin: left center;
  animation: wt-underline .7s cubic-bezier(.16, 1, .3, 1) 1s both;
}

/* Inner-page hero */
.js .page-hero h1      { animation: wt-fade-up .8s cubic-bezier(.16, 1, .3, 1) .05s both; }
.js .page-hero .crumbs { animation: wt-fade-up .8s cubic-bezier(.16, 1, .3, 1) .18s both; }

/* ============================================================
   3. Scroll reveal — stagger + direction variants
   .reveal itself lives in style.css; this adds the per-item
   delay (--i, set by main.js) and the directional starts.
   ============================================================ */

.js .reveal { transition-delay: calc(var(--i, 0) * 90ms); }

.js .reveal.rv-left  { transform: translateX(-38px); }
.js .reveal.rv-right { transform: translateX(38px); }
.js .reveal.rv-zoom  { transform: scale(.9); }
.js .reveal.rv-left.visible,
.js .reveal.rv-right.visible,
.js .reveal.rv-zoom.visible { transform: none; }

/* ============================================================
   4. Scroll progress bar + sticky header behaviour
   ============================================================ */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--red), var(--red-lite));
  z-index: 400;
  pointer-events: none;
}

.header { transition: box-shadow .25s, background .25s; }
.header .nav { transition: height .25s ease; }
.header.scrolled { box-shadow: 0 6px 24px rgba(14, 15, 18, .16); }
.header.scrolled .nav { height: 66px; }
.header.scrolled .logo-mark { transform: scale(.92); }

.logo-mark { transition: transform .25s ease; }
.logo-mark svg { transition: transform .25s ease; }
.logo:hover .logo-mark svg { transform: translateX(2px); }

/* ============================================================
   5. Navigation
   ============================================================ */

.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}
.nav-links a:hover::after  { transform: scaleX(1); transform-origin: left center; }
.nav-links a.active::after { transform: scaleX(1); }

/* Mobile menu: the panel drops in, links follow one by one */
@media (max-width: 768px) {
  .nav-links.open { animation: wt-fade-up .28s ease both; }
  .nav-links.open a { animation: wt-fade-up .34s ease both; }
  .nav-links.open a:nth-child(1) { animation-delay: .04s; }
  .nav-links.open a:nth-child(2) { animation-delay: .09s; }
  .nav-links.open a:nth-child(3) { animation-delay: .14s; }
  .nav-links.open a:nth-child(4) { animation-delay: .19s; }
  .nav-links a::after { display: none; }
}

/* ============================================================
   6. Buttons & links
   ============================================================ */

.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: translateX(-130%) skewX(-18deg);
  z-index: -1;
  opacity: 0;
}
.btn:hover::before { opacity: 1; animation: wt-shine .9s ease forwards; }
.btn:active { transform: translateY(1px) scale(.985); }

.btn-red svg { transform-origin: center; transition: transform .3s ease; }
.btn-red:hover svg { animation: wt-shake .6s ease; }
.btn-outline svg { transition: transform .25s ease; }
.btn-outline:hover svg { transform: translateX(4px); }

/* Phone rows in the hero card */
.hero-phone { position: relative; overflow: hidden; }
.hero-phone .ico { transition: transform .3s ease, background .3s ease; }
.hero-phone:hover .ico { transform: scale(1.08) rotate(-8deg); }
.hero-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(217, 38, 50, .07), transparent 60%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.hero-phone:hover::after { opacity: 1; }

/* ============================================================
   7. Cards
   ============================================================ */

/* Service cards: icon pops, a red bar grows across the top */
.service-card { position: relative; overflow: hidden; transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s, border-color .2s; }
.service-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--red), var(--red-lite));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s cubic-bezier(.16, 1, .3, 1);
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 44px rgba(14, 15, 18, .16); }
.service-card:hover::after { transform: scaleX(1); }
.service-card .ico { transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .3s; }
.service-card .ico svg { transition: fill .3s, transform .35s ease; }
.service-card:hover .ico { transform: translateY(-4px) rotate(-7deg); background: var(--red); }
.service-card:hover .ico svg { fill: var(--white); transform: scale(1.1); }

/* Why-us rows: the icon fills in */
.why-item .ico { transition: background .3s, transform .35s cubic-bezier(.16, 1, .3, 1), border-color .3s; }
.why-item .ico svg { transition: fill .3s; }
.why-item:hover .ico { background: var(--red); border-color: var(--red); transform: rotate(-8deg) scale(1.06); }
.why-item:hover .ico svg { fill: var(--white); }

/* Step cards */
.step-card { transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s, background .3s; }
.step-card::before { transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s, color .3s; }
.step-card:hover { transform: translateY(-6px); border-color: rgba(255, 80, 89, .45); }
.step-card:hover::before { transform: translateY(-4px) scale(1.06); background: var(--red); color: var(--white); }

/* Testimonials: stars light up one by one as the card arrives */
.testi-card { transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.testi-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(14, 15, 18, .16); }
.testi-card .avatar { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.testi-card:hover .avatar { transform: rotate(-8deg) scale(1.07); }
.js .testi-card .stars span { display: inline-block; opacity: 0; }
.js .testi-card.visible .stars span { animation: wt-pop-in .45s cubic-bezier(.16, 1, .3, 1) both; }
.js .testi-card.visible .stars span:nth-child(1) { animation-delay: .12s; }
.js .testi-card.visible .stars span:nth-child(2) { animation-delay: .22s; }
.js .testi-card.visible .stars span:nth-child(3) { animation-delay: .32s; }
.js .testi-card.visible .stars span:nth-child(4) { animation-delay: .42s; }
.js .testi-card.visible .stars span:nth-child(5) { animation-delay: .52s; }

/* Value cards (about) */
.value-card { transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s, border-color .3s; }
.value-card:hover { border-color: rgba(217, 38, 50, .4); }
.value-card .ico { transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.value-card:hover .ico { transform: rotate(360deg) scale(1.08); box-shadow: 0 10px 24px rgba(217, 38, 50, .38); }

/* Service detail rows (services page) */
.svc-detail { transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.svc-detail .ico { transition: transform .38s cubic-bezier(.16, 1, .3, 1), background .3s; }
.svc-detail:hover { transform: translateX(6px); box-shadow: 0 18px 40px rgba(14, 15, 18, .14); }
.svc-detail:hover .ico { transform: rotate(-7deg) scale(1.05); background: var(--red); }
.svc-detail li::before { transition: transform .3s ease, background .3s; }
.svc-detail li:hover::before { transform: rotate(135deg) scale(1.25); }

/* Coverage tags pop in one after another, and glow on hover */
.js .coverage.visible .coverage-tags span { animation: wt-pop-in .5s cubic-bezier(.16, 1, .3, 1) both; }
.js .coverage .coverage-tags span:nth-child(1) { animation-delay: .10s; }
.js .coverage .coverage-tags span:nth-child(2) { animation-delay: .18s; }
.js .coverage .coverage-tags span:nth-child(3) { animation-delay: .26s; }
.js .coverage .coverage-tags span:nth-child(4) { animation-delay: .34s; }
.js .coverage .coverage-tags span:nth-child(5) { animation-delay: .42s; }
.js .coverage .coverage-tags span:nth-child(6) { animation-delay: .50s; }
.js .coverage .coverage-tags span:nth-child(7) { animation-delay: .58s; }
.js .coverage .coverage-tags span:nth-child(n+8) { animation-delay: .66s; }
.coverage-tags span { transition: background .25s, color .25s, transform .25s, box-shadow .25s; }
.coverage-tags span:hover {
  background: var(--red);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(217, 38, 50, .35);
}

/* Footer */
.footer .f-contact li svg { transition: transform .25s ease; }
.footer .f-contact li:hover svg { transform: scale(1.25) rotate(-8deg); }

/* ============================================================
   8. Contact form motion
   ============================================================ */

.form-group { position: relative; }
.form-group label { transition: color .2s ease; }
.form-group:focus-within label { color: var(--red-dark); }
.form-group input,
.form-group select,
.form-group textarea { transition: border-color .2s, background .2s, box-shadow .25s, transform .2s; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { box-shadow: 0 6px 18px rgba(217, 38, 50, .14); }

.form-status.ok,
.form-status.err { animation: wt-pop-in .45s cubic-bezier(.16, 1, .3, 1) both; }

/* Spinner shown inside the submit button while the form posts */
.btn.is-sending { pointer-events: none; opacity: .85; }
.btn .btn-spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: wt-spin .7s linear infinite;
  flex: none;
}

/* ============================================================
   9. Floating call button
   ============================================================ */

.float-call { transition: transform .25s cubic-bezier(.16, 1, .3, 1), background .25s; }
.float-call:hover { transform: scale(1.1); background: var(--red-dark); }
.float-call svg { animation: wt-shake 1.6s ease-in-out 3s infinite; transform-origin: center; }
.float-call::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(217, 38, 50, .55);
  border-radius: 50%;
  animation: wt-ring-wave 2.4s ease-out infinite;
  pointer-events: none;
}

/* Back-to-top button, created by main.js */
.to-top {
  position: fixed;
  right: clamp(14px, 3vw, 22px);
  bottom: calc(clamp(14px, 3vw, 22px) + 74px + env(safe-area-inset-bottom, 0px));
  z-index: 200;
  width: 46px; height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, visibility .3s, background .25s;
  box-shadow: 0 8px 22px rgba(14, 15, 18, .34);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--black-3); transform: translateY(-3px); }
.to-top svg { width: 20px; height: 20px; fill: var(--white); }

/* ============================================================
   10. Illustrations
   ============================================================ */

/* ---- 10a. Hero night scene: skyline, road, passing truck ---- */
.hero-scene {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Short, dim and faded at the top, so the hero copy always wins the
     contrast fight — the motion is what makes the scene readable, not weight */
  height: clamp(100px, 15vw, 170px);
  z-index: 0;
  pointer-events: none;
  opacity: .32;
  -webkit-mask-image: linear-gradient(to top, #000 45%, rgba(0, 0, 0, .3) 78%, transparent);
  mask-image: linear-gradient(to top, #000 45%, rgba(0, 0, 0, .3) 78%, transparent);
}
.hero-scene svg { width: 100%; height: 100%; display: block; }
.hero-scene .hs-windows rect { animation: wt-twinkle 4s ease-in-out infinite; }
.hero-scene .hs-windows rect:nth-child(2n) { animation-delay: .8s; }
.hero-scene .hs-windows rect:nth-child(3n) { animation-delay: 1.7s; }
.hero-scene .hs-windows rect:nth-child(5n) { animation-delay: 2.6s; }
.hero-scene .hs-dashes { animation: wt-road-dash 1.6s linear infinite; }
.hero-scene .hs-truck  { animation: wt-drive 19s linear infinite; }
.hero-scene .hs-wheel  { transform-box: fill-box; transform-origin: center; animation: wt-wheel 1s linear infinite; }
.hero-scene .hs-beacon { animation: wt-beacon .9s steps(1, end) infinite; }

/* ---- 10b. Road divider strip between sections ---- */
.road-divider {
  height: 30px;
  background: linear-gradient(180deg, #1b1e26, #101219);
  border-top: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  position: relative;
  overflow: hidden;
}
.road-divider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  background: repeating-linear-gradient(90deg, var(--red-lite) 0 44px, transparent 44px 88px);
  animation: wt-road-strip 1.6s linear infinite;
}
@keyframes wt-road-strip { to { background-position-x: -88px; } }

/* ---- 10c. Tow-truck scene (why-us / about) ---- */
.why-visual svg.truck-art { width: 84%; }
.truck-art .ta-truck   { transform-box: fill-box; transform-origin: center; animation: wt-bob 2.2s ease-in-out infinite; }
.truck-art .ta-wheel   { transform-box: fill-box; transform-origin: center; animation: wt-wheel 1.4s linear infinite; }
.truck-art .ta-beacon-a{ animation: wt-beacon 1s steps(1, end) infinite; }
.truck-art .ta-beacon-b{ animation: wt-beacon-2 1s steps(1, end) infinite; }
/* Pivots at the top-right of its own box — exactly where the cable meets
   the boom tip — so the car swings from the hook. */
.truck-art .ta-hooked  { transform-box: fill-box; transform-origin: 100% 0; animation: wt-swing 3.4s ease-in-out infinite; }
/* fill-box, or the scale in the keyframe would grow from the SVG's own
   centre and throw the smoke sideways instead of straight up */
.truck-art .ta-puff,
.truck-art .ta-puff-2,
.truck-art .ta-puff-3  { transform-box: fill-box; transform-origin: center; }
.truck-art .ta-puff    { animation: wt-exhaust 2.2s ease-out infinite; }
.truck-art .ta-puff-2  { animation: wt-exhaust 2.2s ease-out .7s infinite; }
.truck-art .ta-puff-3  { animation: wt-exhaust 2.2s ease-out 1.4s infinite; }
.truck-art .ta-dashes  { animation: wt-road-dash 1.1s linear infinite; }
.truck-art .ta-speed   { animation: wt-blink .55s steps(1, end) infinite; }
.truck-art .ta-speed-2 { animation: wt-blink .55s steps(1, end) .27s infinite; }

/* ---- 10d. Step illustrations (how it works) ---- */
.step-card .step-art {
  width: 104px;
  height: 88px;
  display: block;
  margin-bottom: 16px;
}
.step-art .sa-wave { transform-box: fill-box; transform-origin: left center; animation: wt-ring-wave 1.8s ease-out infinite; }
.step-art .sa-wave-2 { animation-delay: .45s; }
.step-art .sa-wave-3 { animation-delay: .9s; }
.step-art .sa-phone { transform-box: fill-box; transform-origin: center; animation: wt-shake 2.4s ease-in-out infinite; }
/* view-box units so the radar sweeps around the dish centre, not its own box */
.step-art .sa-sweep { transform-box: view-box; transform-origin: 60px 50px; animation: wt-sweep 3s linear infinite; }
.step-art .sa-pin   { transform-box: fill-box; animation: wt-pin-drop 2.6s ease-out infinite; }
.step-art .sa-ping  { transform-box: fill-box; transform-origin: center; animation: wt-ping 2.2s ease-out infinite; }
.step-art .sa-wheel { transform-box: fill-box; transform-origin: center; animation: wt-wheel 1.2s linear infinite; }
.step-art .sa-truck { transform-box: fill-box; transform-origin: center; animation: wt-bob 2s ease-in-out infinite; }
.step-art .sa-check {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: wt-draw 1s ease-out 1.6s infinite;
}

/* ---- 10e. Coverage map ---- */
.coverage-map { width: 100%; max-width: 340px; height: auto; }
.coverage-map .cm-road { stroke-dasharray: 6 6; animation: wt-road-dash 3s linear infinite; }
.coverage-map .cm-ping { transform-box: fill-box; transform-origin: center; animation: wt-ping 2.6s ease-out infinite; }
.coverage-map .cm-ping-2 { animation-delay: .9s; }
.coverage-map .cm-ping-3 { animation-delay: 1.8s; }
.coverage-map .cm-pin  { transform-box: fill-box; animation: wt-pin-drop 3.4s ease-out infinite; }
.coverage-map .cm-pin-2 { animation-delay: .5s; }
.coverage-map .cm-pin-3 { animation-delay: 1s; }
.coverage-map .cm-truck { animation: wt-float 3.6s ease-in-out infinite; }

/* Coverage block gets the map beside the copy */
.coverage.has-map { grid-template-columns: 1fr .9fr 1fr; }
.coverage .coverage-art { display: grid; place-items: center; }
@media (max-width: 1024px) {
  .coverage.has-map { grid-template-columns: 1fr; }
  .coverage .coverage-art { order: -1; }
  .coverage-map { max-width: 260px; }
}

/* ---- 10f. Contact / map-note locator ---- */
.map-note .locator-art { width: 92px; height: 92px; flex: none; }
.locator-art .lo-sweep { transform-box: view-box; transform-origin: 50px 50px; animation: wt-sweep 3.4s linear infinite; }
.locator-art .lo-ring  { transform-box: fill-box; transform-origin: center; animation: wt-ping 2.6s ease-out infinite; }
.locator-art .lo-ring-2 { animation-delay: .85s; }
.locator-art .lo-pin   { transform-box: fill-box; animation: wt-pin-drop 3s ease-out infinite; }

/* ---- 10g. Services page: the icons breathe when in view ---- */
.js .svc-detail.visible .ico svg { animation: wt-pop-in .55s cubic-bezier(.16, 1, .3, 1) .15s both; }
.js .service-card.visible .ico svg { animation: wt-pop-in .55s cubic-bezier(.16, 1, .3, 1) .2s both; }
.js .value-card.visible .ico svg { animation: wt-pop-in .55s cubic-bezier(.16, 1, .3, 1) .2s both; }
.js .why-item.visible .ico svg { animation: wt-pop-in .55s cubic-bezier(.16, 1, .3, 1) .15s both; }

/* ---- 10h. Counter numbers ---- */
.hero-stat strong,
.why-visual .years strong { font-variant-numeric: tabular-nums; }
.js .why-visual.visible .years { animation: wt-pop-in .6s cubic-bezier(.16, 1, .3, 1) .35s both; }

/* ============================================================
   11. Reduced motion — one switch turns all of the above off
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal,
  .js .reveal.rv-left,
  .js .reveal.rv-right,
  .js .reveal.rv-zoom { opacity: 1 !important; transform: none !important; }
  .js .testi-card .stars span { opacity: 1; }
  .float-call::after, .btn::before { display: none; }
  .hero-scene { opacity: .4; }
}