:root {
  --interaction-ease-out: cubic-bezier(.23, 1, .32, 1);
}

.fx-on [data-motion-split] .motion-word { display: inline-block; vertical-align: top; }
.fx-on [data-motion-split="rise"] .motion-word { overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.fx-on [data-motion-split="rise"] .motion-word-inner {
  display: inline-block; transform: translateY(112%);
  transition: transform .85s var(--interaction-ease-out);
  transition-delay: calc(var(--word-index) * 55ms);
}
.fx-on [data-motion-split="rise"].is-motion-visible .motion-word-inner { transform: none; }
.fx-on [data-motion-split="fade"] .motion-word-inner {
  display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(.45em);
  transition: opacity .7s var(--interaction-ease-out), filter .7s var(--interaction-ease-out), transform .7s var(--interaction-ease-out);
  transition-delay: calc(var(--word-index) * 22ms);
}
.fx-on [data-motion-split="fade"].is-motion-visible .motion-word-inner { opacity: 1; filter: blur(0); transform: translateY(0); }
.fx-on .page-hero-content h1[data-motion-split] { animation: none; opacity: 1; transform: none; }
.fx-on .section-head [data-motion-split="rise"] .motion-word-inner {
  background: linear-gradient(172deg, #fd8703 0%, #ffb454 22%, #03b7bd 50%, #029398 68%, #fd8703 100%) 0 0 / 100vw 260vh fixed;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.fx-on .section-head .eyebrow { position: relative; padding-bottom: 8px; }
.fx-on .section-head .eyebrow::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 2.6em; height: 3px;
  border-radius: 3px; background: var(--naranja); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--interaction-ease-out) .1s;
}
.fx-on .section-head .eyebrow.is-motion-visible::after { transform: scaleX(1); }

.fx-on .motion-card {
  position: relative; will-change: transform;
  transition: transform .35s var(--interaction-ease-out), box-shadow .35s ease;
}
.fx-on .motion-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(340px circle at var(--motion-x, 50%) var(--motion-y, 50%), rgba(255,255,255,.22), transparent 62%);
}
.fx-on .motion-card.is-motion-active::after { opacity: 1; }

.fx-on .field label { transition: color .2s ease, transform .25s var(--interaction-ease-out); }
.fx-on .field:focus-within label { color: var(--turquesa); transform: translateX(4px); }
.fx-on .field input:focus, .fx-on .field textarea:focus, .fx-on .field select:focus {
  box-shadow: 0 0 0 4px rgba(2,147,152,.16);
}

.fx-on .btn, .fx-on .btn-sm, .fx-on .filter-tab, .fx-on .news-more, .fx-on .resource-download {
  position: relative; overflow: hidden;
}
.fx-ripple {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.38); transform: scale(.2);
  animation: interaction-ripple .6s var(--interaction-ease-out) forwards;
}
@keyframes interaction-ripple { to { transform: scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fx-on .motion-card { will-change: auto; }
  .fx-ripple { animation: none; display: none; }
}