/* DOSTLAB motion layer — subtle, premium, performance-safe */
:root{
  --motion-ease:cubic-bezier(.22,.8,.24,1);
  --motion-fast:.45s;
  --motion-base:.72s;
}
.motion-ready .hero .eyebrow,
.motion-ready .hero h1,
.motion-ready .hero .lead,
.motion-ready .hero .strong,
.motion-ready .hero .actions,
.motion-ready .hero-results-link,
.motion-ready .hero-media{
  opacity:0;
  transform:translateY(18px);
  filter:blur(7px);
}
.motion-ready .hero-media{
  transform:translateY(14px) scale(.985);
}
.motion-ready.motion-loaded .hero .eyebrow,
.motion-ready.motion-loaded .hero h1,
.motion-ready.motion-loaded .hero .lead,
.motion-ready.motion-loaded .hero .strong,
.motion-ready.motion-loaded .hero .actions,
.motion-ready.motion-loaded .hero-results-link,
.motion-ready.motion-loaded .hero-media{
  opacity:1;
  transform:none;
  filter:none;
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease),
    filter var(--motion-base) var(--motion-ease);
}
.motion-ready.motion-loaded .hero h1{transition-delay:.06s}
.motion-ready.motion-loaded .hero .lead{transition-delay:.11s}
.motion-ready.motion-loaded .hero .strong{transition-delay:.16s}
.motion-ready.motion-loaded .hero .actions{transition-delay:.21s}
.motion-ready.motion-loaded .hero-results-link{transition-delay:.26s}
.motion-ready.motion-loaded .hero-media{transition-delay:.12s}

.motion-ready .motion-reveal{
  opacity:0;
  transform:translateY(22px);
  filter:blur(5px);
}
.motion-ready .motion-reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none;
  transition:
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease),
    filter var(--motion-base) var(--motion-ease);
}
.motion-ready .motion-stagger > *{
  opacity:0;
  transform:translateY(18px);
}
.motion-ready .motion-stagger.is-visible > *{
  opacity:1;
  transform:none;
  transition:opacity .62s var(--motion-ease),transform .62s var(--motion-ease);
}
.motion-ready .motion-stagger.is-visible > *:nth-child(2){transition-delay:.06s}
.motion-ready .motion-stagger.is-visible > *:nth-child(3){transition-delay:.12s}
.motion-ready .motion-stagger.is-visible > *:nth-child(4){transition-delay:.18s}
.motion-ready .motion-stagger.is-visible > *:nth-child(5){transition-delay:.24s}
.motion-ready .motion-stagger.is-visible > *:nth-child(6){transition-delay:.30s}
.motion-ready .motion-stagger.is-visible > *:nth-child(7){transition-delay:.36s}

.casebox .fill{
  transform-origin:left center;
  transition:width .65s var(--motion-ease),transform .65s var(--motion-ease);
}
.motion-ready .casebox:not(.is-visible) .fill{transform:scaleX(.12)}
.motion-ready .casebox.is-visible .fill{transform:scaleX(1)}

.btn{
  position:relative;
  overflow:hidden;
}
.btn:after{
  content:'';
  position:absolute;
  inset:-2px;
  background:linear-gradient(110deg,transparent 20%,#ffffff35 45%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .65s var(--motion-ease);
  pointer-events:none;
}
.btn:hover:after{transform:translateX(130%)}

.hero-media img{
  transition:transform 1.1s var(--motion-ease);
}
.hero-media:hover img{transform:scale(1.018)}
.hero-chip{
  transition:transform .35s var(--motion-ease),background .35s ease,border-color .35s ease;
}
.hero-chip:hover{
  transform:translateY(-3px);
  background:#101713ee;
  border-color:#ffffff36;
}
.compare .handle{
  animation:compare-nudge 4.8s ease-in-out 1.1s 2;
}
@keyframes compare-nudge{
  0%,100%{transform:translate(-50%,-50%)}
  46%{transform:translate(-43%,-50%)}
  54%{transform:translate(-57%,-50%)}
}
@media (prefers-reduced-motion:reduce){
  .motion-ready .hero .eyebrow,
  .motion-ready .hero h1,
  .motion-ready .hero .lead,
  .motion-ready .hero .strong,
  .motion-ready .hero .actions,
  .motion-ready .hero-results-link,
  .motion-ready .hero-media,
  .motion-ready .motion-reveal,
  .motion-ready .motion-stagger > *{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
  .compare .handle{animation:none!important}
  .hero-media img{transition:none!important}
  .btn:after{display:none!important}
}

/* Smooth before/after switching: keep the current frame while the next pair decodes */
.compare img{will-change:clip-path;backface-visibility:hidden}
.compare.is-switching:after{
  content:'';
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,#ffffff10 50%,transparent 65%);
  transform:translateX(-100%);
  animation:compare-loading-sheen .75s ease-in-out infinite;
}
.compare.is-switching .handle{opacity:.58;pointer-events:none}
@keyframes compare-loading-sheen{to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){
  .compare.is-switching:after{display:none}
}