/* A5IDC V2.7 — original banner bounce and split-panel entrance effects. Independent of WOW runtime.
   Hero CSS animates without JavaScript. Product section uses a small observer for scroll timing.
   All effects are disabled for reduced-motion preferences and for mobile/tablet. */
/* V2.7: Original www/common/banner/default.html uses
   "wow animate__animated animate__bounce" on the entire text container.
   The original animate.min.css (v4.1.1) already defines the bounce keyframes.
   Do not stagger/fade/slide the label, title, description and button separately. */
@keyframes a5SplitLeftEnter {
  from {opacity:0; transform:translate3d(-130px,0,0)}
  to {opacity:1; transform:translate3d(0,0,0)}
}
@keyframes a5SplitRightEnter {
  from {opacity:0; transform:translate3d(130px,0,0)}
  to {opacity:1; transform:translate3d(0,0,0)}
}
@media (min-width:1025px) and (prefers-reduced-motion:no-preference) {
  /* Exactly one whole-container bounce, matching the original www theme.
     No JS or a failed JS load => static, readable banner text. */
  .a5-desktop-home.a5-motion-enabled .swiper-slide:first-child .a5-hero-intro.a5-hero-play {
    animation-name:bounce;
    animation-duration:1000ms;
    animation-fill-mode:both;
    transform-origin:center bottom;
  }
  .a5-desktop-home.a5-motion-enabled .swiper-slide:first-child .a5-hero-intro.a5-hero-play .Label-container,
  .a5-desktop-home.a5-motion-enabled .swiper-slide:first-child .a5-hero-intro.a5-hero-play .Title-container,
  .a5-desktop-home.a5-motion-enabled .swiper-slide:first-child .a5-hero-intro.a5-hero-play .Button-container {
    animation:none;
  }
  /* Pending is only applied by JS after it has successfully started. No JS -> visible content. */
  .a5-desktop-home.a5-motion-enabled .systemproducts.active .a5-split-left.a5-motion-waiting {
    opacity:0; transform:translate3d(-130px,0,0);
  }
  .a5-desktop-home.a5-motion-enabled .systemproducts.active .a5-split-right.a5-motion-waiting {
    opacity:0; transform:translate3d(130px,0,0);
  }
  .a5-desktop-home .systemproducts.active .a5-split-left.a5-motion-entering {
    animation:a5SplitLeftEnter 1050ms cubic-bezier(.18,.75,.24,1) both;
  }
  .a5-desktop-home .systemproducts.active .a5-split-right.a5-motion-entering {
    animation:a5SplitRightEnter 1050ms 110ms cubic-bezier(.18,.75,.24,1) both;
  }
  .a5-desktop-home.a5-motion-enabled .wow.a5-motion-waiting {
    opacity:0; visibility:hidden;
  }
  .a5-desktop-home .wow.a5-motion-entering {
    visibility:visible;
    --animate-duration:850ms;
    animation-fill-mode:both;
  }
}
@media (max-width:1024px), (prefers-reduced-motion:reduce) {
  .a5-desktop-home .a5-hero-intro,
  .a5-desktop-home .a5-hero-intro *,
  .a5-desktop-home .a5-split-left,
  .a5-desktop-home .a5-split-right,
  .a5-desktop-home .wow {
    animation:none !important; opacity:1 !important; visibility:visible !important;
    transform:none !important;
  }
}

/* V2.6: Progressive reveal for every major homepage section.
   No elements are hidden until JS has initialized. DOM stays server-rendered for SEO. */
@keyframes a5RevealUp {
  from {opacity:0; transform:translate3d(0,54px,0)}
  to {opacity:1; transform:translate3d(0,0,0)}
}
@keyframes a5RevealLeft {
  from {opacity:0; transform:translate3d(-95px,0,0)}
  to {opacity:1; transform:translate3d(0,0,0)}
}
@keyframes a5RevealRight {
  from {opacity:0; transform:translate3d(95px,0,0)}
  to {opacity:1; transform:translate3d(0,0,0)}
}
@media (min-width:1025px) and (prefers-reduced-motion:no-preference) {
  .a5-desktop-home.a5-motion-enabled .a5-reveal-pending {
    opacity:0; visibility:hidden;
  }
  .a5-desktop-home.a5-motion-enabled .a5-reveal-visible {
    opacity:1; visibility:visible;
    animation-duration:880ms;
    animation-timing-function:cubic-bezier(.17,.75,.25,1);
    animation-fill-mode:both;
    animation-delay:var(--a5-reveal-delay,0ms);
    will-change:opacity,transform;
  }
  .a5-desktop-home.a5-motion-enabled .a5-reveal-visible[data-a5-reveal="up"] {
    animation-name:a5RevealUp;
  }
  .a5-desktop-home.a5-motion-enabled .a5-reveal-visible[data-a5-reveal="left"] {
    animation-name:a5RevealLeft;
  }
  .a5-desktop-home.a5-motion-enabled .a5-reveal-visible[data-a5-reveal="right"] {
    animation-name:a5RevealRight;
  }
}
@media (max-width:1024px), (prefers-reduced-motion:reduce) {
  .a5-desktop-home .a5-reveal-pending,
  .a5-desktop-home .a5-reveal-visible {
    opacity:1 !important; visibility:visible !important;
    animation:none !important; transform:none !important;
  }
}