:root{
  --motion-ease-out:cubic-bezier(.23,1,.32,1);
  --motion-ease-in-out:cubic-bezier(.77,0,.175,1);
  --motion-fast:160ms;
  --motion-ui:220ms;
  --motion-marketing:600ms;
}

/* One calm first impression instead of several unrelated infinite floats. */
.hero-bg-left,.hero-bg-right{
  animation:motionHeroBreath 16s var(--motion-ease-in-out) infinite alternate!important;
}
.editor-card,.hero-tag,.hero-note i,.editor-body aside button.active,
.case-art,.offer-visual,.section-in-view .section-visual{
  animation:none!important;
}

.hero .eyebrow,.hero h1,.hero .hero-copy>p,.hero .hero-actions,.hero .hero-note,
.hero .hero-editor-wrap{
  opacity:0;
  animation:motionHeroEnter 620ms var(--motion-ease-out) forwards;
}
.hero h1{animation-delay:50ms}
.hero .hero-copy>p{animation-delay:100ms}
.hero .hero-actions{animation-delay:150ms}
.hero .hero-note{animation-delay:190ms}
.hero .hero-editor-wrap{animation-delay:220ms}

@keyframes motionHeroEnter{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes motionHeroBreath{
  from{transform:scale(1.005)}
  to{transform:scale(1.018)}
}

/* Marketing sections reveal once, with a restrained 30–80 ms group stagger. */
.motion-ready .reveal-item{
  opacity:0!important;
  translate:none!important;
  scale:1!important;
  filter:none!important;
  clip-path:inset(0 0 14% 0);
  transition:
    opacity 420ms var(--motion-ease-out),
    clip-path var(--motion-marketing) var(--motion-ease-in-out)!important;
  transition-delay:var(--reveal-delay,0ms)!important;
}
.motion-ready .reveal-item.is-visible{
  opacity:1!important;
  clip-path:inset(0 0 0 0);
}

/* Direct feedback stays fast and interruptible. */
.button,.role-tabs button,.gallery-tabs button,.case-card>a,.catalog-button{
  transition:
    transform var(--motion-fast) var(--motion-ease-out),
    background-color var(--motion-ui) ease,
    border-color var(--motion-ui) ease,
    color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease,
    opacity var(--motion-ui) ease!important;
}
.button:hover,.role-tabs button:hover,.gallery-tabs button:hover,
.tool-card:hover,.case-card:hover,.gallery-card:hover,.structure-list article:hover{
  transform:none!important;
}
.button:active,.role-tabs button:active,.gallery-tabs button:active,
.case-card>a:active,.catalog-button:active{
  transform:scale(.97)!important;
}

@media(hover:hover) and (pointer:fine){
  .button:hover{transform:translateY(-2px)!important}
  .tool-card:hover,.case-card:hover,.gallery-card:hover{transform:translateY(-6px)!important}
  .structure-list article:hover{transform:translateX(6px)!important}
}

/* Accordion state change is short; the plus rotation remains interruptible. */
.faq-accordion details{
  transition:
    border-color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease,
    background-color var(--motion-ui) ease!important;
}
.faq-accordion summary span{
  transition:
    transform 200ms var(--motion-ease-out),
    background-color var(--motion-ui) ease,
    color var(--motion-ui) ease!important;
}
.faq-accordion details>.faq-answer{
  transition:
    grid-template-rows 200ms var(--motion-ease-out),
    opacity 180ms var(--motion-ease-out)!important;
}
.faq-accordion .faq-answer p{
  transition:transform 200ms var(--motion-ease-out)!important;
}

@media(prefers-reduced-motion:reduce){
  .hero-bg-left,.hero-bg-right,.hero .eyebrow,.hero h1,.hero .hero-copy>p,
  .hero .hero-actions,.hero .hero-note,.hero .hero-editor-wrap{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .motion-ready .reveal-item{
    opacity:0!important;
    clip-path:none!important;
    transition:opacity 180ms ease!important;
    transition-delay:0ms!important;
  }
  .motion-ready .reveal-item.is-visible{opacity:1!important}
  .button,.role-tabs button,.gallery-tabs button,.case-card>a,.catalog-button,
  .faq-accordion details,.faq-accordion summary span,.faq-accordion details>.faq-answer,
  .faq-accordion .faq-answer p{
    transition-duration:120ms!important;
  }
}