/* Shared motion system: progressive enhancement over stable, visible content. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-duration: 780ms;
}
.motion-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, #92b75b, #d4f48c 55%, #b8d77d);
  box-shadow: 0 0 12px rgba(175, 218, 112, .45);
}
.has-scrolled .site-header,
.has-scrolled .demo-topbar {
  box-shadow: 0 9px 28px rgba(27, 39, 23, .055);
}
html.motion-enabled [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.99);
  transition:
    opacity 760ms var(--motion-ease),
    transform 920ms var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.motion-enabled [data-reveal="left"] { transform: translate3d(-42px, 0, 0) scale(.99); }
html.motion-enabled [data-reveal="right"] { transform: translate3d(42px, 0, 0) scale(.99); }
html.motion-enabled [data-reveal="scale"] { transform: scale(.92); }
html.motion-enabled [data-reveal="soft"] { transform: translate3d(0, 20px, 0); }
html.motion-enabled [data-reveal="clip"] {
  clip-path: inset(12% 0 12% 0 round 12px);
  transform: scale(1.035);
  transition:
    opacity 760ms var(--motion-ease),
    transform 1100ms var(--motion-ease),
    clip-path 1100ms var(--motion-ease);
}
html.motion-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  clip-path: inset(0 0 0 0 round 0);
  will-change: auto;
}
html.motion-enabled .design-card.is-visible,
html.motion-enabled .demo-card.is-visible,
html.motion-enabled .demo-product.is-visible,
html.motion-enabled .demo-course.is-visible,
html.motion-enabled .demo-post.is-visible {
  transition:
    opacity 760ms var(--motion-ease),
    transform 920ms var(--motion-ease),
    box-shadow 320ms ease,
    border-color 320ms ease;
}
html.motion-enabled .design-card.is-visible:hover,
html.motion-enabled .demo-card.is-visible:hover,
html.motion-enabled .demo-product.is-visible:hover,
html.motion-enabled .demo-course.is-visible:hover {
  transform: translate3d(0, -7px, 0) scale(1.005);
}
html.motion-enabled .category-pill.is-visible:hover {
  transform: translate3d(0, -3px, 0);
  border-color: #a6c56d;
  background: #fff;
}
html.motion-enabled .step-card.is-visible:hover,
html.motion-enabled .testimonial-card.is-visible:hover {
  transform: translate3d(0, -5px, 0);
  box-shadow: 0 16px 38px rgba(25, 40, 20, .08);
}
.motion-enabled .design-preview img,
.motion-enabled .design-preview .preview-image,
.motion-enabled .demo-card img,
.motion-enabled .demo-product img,
.motion-enabled .demo-hero-image img,
.motion-enabled .editorial-feature img {
  transition: transform 1000ms var(--motion-ease), filter 700ms ease;
}
.design-card:hover .preview-image,
.demo-card:hover img,
.demo-product:hover img {
  transform: scale(1.055);
  filter: saturate(1.08);
}
.card-actions .btn span,
.demo-primary,
.demo-secondary,
.demo-nav-action,
.filter-chip,
.category-pill,
.step-card,
.testimonial-card,
.search-box,
.form-grid input,
.form-grid textarea,
.form-grid select {
  transition:
    transform 320ms var(--motion-ease),
    box-shadow 320ms ease,
    border-color 260ms ease,
    background-color 260ms ease,
    color 260ms ease;
}
.card-actions .btn:hover span { transform: translate(3px, -2px); }
.btn:active,
.demo-primary:active,
.demo-secondary:active,
.demo-nav-action:active { transform: scale(.97); }
.text-link,
.nav-links a,
.demo-nav-links a,
.footer-col a {
  position: relative;
}
.text-link:after,
.nav-links a:after,
.demo-nav-links a:after,
.footer-col a:after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--motion-ease);
}
.text-link:hover:after,
.nav-links a:hover:after,
.demo-nav-links a:hover:after,
.footer-col a:hover:after { transform: scaleX(1); }

@keyframes browserFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -11px; }
}
@keyframes browserFloatSide {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 12px; }
}
@keyframes stickerFloat {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -9px; rotate: 5deg; }
}
@keyframes noteFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
@keyframes orbitSpin { to { rotate: 360deg; } }
@keyframes shimmerLine {
  0% { transform: scaleX(.2); transform-origin: left; opacity: .45; }
  55% { transform: scaleX(1); transform-origin: left; opacity: 1; }
  56% { transform-origin: right; }
  100% { transform: scaleX(.2); transform-origin: right; opacity: .45; }
}
@keyframes scrollProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero-orbit.orbit-one { animation: orbitSpin 72s linear infinite; }
.hero-orbit.orbit-two { animation: orbitSpin 54s linear infinite reverse; }
.browser-main { animation: browserFloat 7.5s ease-in-out infinite; }
.browser-side { animation: browserFloatSide 8.5s ease-in-out infinite; }
.hero-sticker { animation: stickerFloat 6.2s ease-in-out infinite; }
.float-note { animation: noteFloat 5.8s ease-in-out infinite; }
.note-bottom { animation-delay: -2.6s; }
.mock-line { transform-origin: left; animation: shimmerLine 5.5s ease-in-out infinite; }
.hero-sticker i { display: inline-block; animation: orbitSpin 16s linear infinite; }

.demo-hero-image img { transform: scale(1.035); }
.demo-hero-image:hover img { transform: scale(1.075); }
.editorial-feature img { transform: scale(1.035); transition: transform 1.2s var(--motion-ease); }
.editorial-feature:hover img { transform: scale(1.075); }
.demo-band { position: relative; overflow: hidden; }
.demo-band:after {
  position: absolute;
  top: -55%;
  right: -12%;
  width: 36vw;
  min-width: 240px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--demo-accent, #95ae69) 22%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.demo-hero .demo-kicker { letter-spacing: .19em; }
.demo-hero .demo-kicker:before {
  display: inline-block;
  width: 22px;
  height: 1px;
  margin: 0 9px 3px 0;
  content: "";
  background: currentColor;
}
.demo-dashboard .dash-charts i { transform-origin: bottom; animation: chartRise 900ms var(--motion-ease) both; }
.demo-dashboard .dash-charts i:nth-child(2n) { animation-delay: 90ms; }
.demo-dashboard .dash-charts i:nth-child(3n) { animation-delay: 180ms; }
@keyframes chartRise { from { transform: scaleY(.08); opacity: .25; } to { transform: scaleY(1); opacity: 1; } }

@supports (animation-timeline: scroll()) {
  .motion-progress {
    transform: scaleX(0);
    animation-name: scrollProgress;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
  }
}
@supports ((animation-timeline: view()) and (animation-range: entry 0% cover 45%)) {
  .demo-hero-image img,
  .editorial-feature img,
  .demo-card img,
  .demo-product img {
    animation: mediaScrollReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
  @keyframes mediaScrollReveal {
    from { transform: scale(1.13) translateY(14px); }
    to { transform: scale(1) translateY(0); }
  }
}
@supports (animation-timeline: view()) {
  .hero-art {
    animation: heroScrollDepth linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 85%;
  }
  @keyframes heroScrollDepth {
    to { opacity: .35; translate: 0 45px; }
  }
}
@media (min-width: 761px) {
  .demo-card,
  .demo-product,
  .demo-course,
  .testimonial-card,
  .step-card { transform-origin: 50% 80%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .motion-progress { display: none !important; animation: none !important; }
  html.motion-enabled [data-reveal],
  html.motion-enabled [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .hero-orbit,
  .browser-main,
  .browser-side,
  .hero-sticker,
  .float-note,
  .mock-line,
  .demo-dashboard .dash-charts i {
    animation: none !important;
  }
  .hero-art,
  .demo-hero-image img,
  .editorial-feature img,
  .demo-card img,
  .demo-product img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
@media (max-width: 680px) {
  .hero-orbit.orbit-one { animation-duration: 95s; }
  .hero-orbit.orbit-two { animation-duration: 78s; }
  .browser-main { animation-duration: 9s; }
  .browser-side { animation-duration: 10s; }
}