:root {
  --fx-out: cubic-bezier(.22, 1, .36, 1);
  --fx-expo: cubic-bezier(.16, 1, .3, 1);
  --fx-in-out: cubic-bezier(.76, 0, .24, 1);
}

.fx-progress { position: fixed; z-index: 100; inset: 0 0 auto; height: 3px; transform: scaleX(0); transform-origin: left; background: var(--lime); pointer-events: none; }
[data-fx~="press"] { transition: transform 140ms var(--fx-out), background-color 180ms ease, color 180ms ease; }
[data-fx~="press"]:active { transform: scale(.97); }

@media (prefers-reduced-motion: no-preference) {
  .fx-on [data-fx="hero"] { animation: hero-in 700ms var(--fx-expo) calc(var(--i, 0) * 120ms) both; }
  .fx-on [data-fx="reveal"] { opacity: 0; transform: translateY(24px); transition: opacity 760ms var(--fx-expo), transform 760ms var(--fx-expo); }
  .fx-on [data-fx="reveal"].is-in { opacity: 1; transform: none; }
  .fx-on .hero-stage[data-fx="hero"] { animation: hero-shutter 1100ms var(--fx-in-out) 120ms both; }
  .fx-on .hero-stage[data-fx="hero"] > * { animation: hero-settle 1300ms var(--fx-expo) 80ms both; }
  .fx-on [data-fx="step"] { opacity: .48; transition: opacity 320ms ease, background-color 320ms ease; }
  .fx-on [data-fx="step"].is-on { opacity: 1; }
}

@keyframes hero-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hero-shutter { from { clip-path: polygon(0 100%, 17% 100%, 100% 100%, 100% 100%, 0 100%); } to { clip-path: var(--hero-shape); } }
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  [data-fx], [data-fx] * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .fx-progress { display: none; }
}