/* Progressive motion for the original homepage (layout=1).
   Nothing is hidden until JavaScript marks the page ready, so static export,
   crawlers and users without JavaScript always receive the complete content. */

/* Not gated behind body.home-motion (unlike the rest of this file): this
   decorative circle's own geometry has higher specificity than
   .v2-site-shell .welcome_area::after (layout-ver2.css) and always wins once
   the home-motion JS effect adds that class on mount — so gating it meant
   the pseudo-element started at .v2-site-shell's full-hero-sized box, then
   snapped to this small circle a beat later, which was the page's largest
   layout shift (score ~0.109 of the ~0.121 total CLS). Applying it
   unconditionally makes both the first paint and the post-JS state agree —
   only the animated parallax transform is still JS-driven, and transform
   changes don't count toward CLS. */
.welcome_area {
  overflow: hidden;
  isolation: isolate;
}

.welcome_area::after {
  position: absolute;
  z-index: -1;
  top: -12rem;
  right: -10rem;
  width: clamp(20rem, 37vw, 43rem);
  height: clamp(20rem, 37vw, 43rem);
  content: '';
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 149, 255, .18) 0%, rgba(79, 149, 255, .07) 43%, transparent 70%);
  transform: translate3d(0, var(--home-parallax-slow, 0px), 0);
  will-change: transform;
  pointer-events: none;
}

body.home-motion .welcome_area .illas_box {
  transform: translate3d(0, var(--home-parallax-fast, 0px), 0);
  will-change: transform, opacity;
}

body.home-motion .welcome_area .illas_wrap {
  animation: home-motion-float 7s ease-in-out infinite;
  will-change: transform;
}

body.home-motion .welcome_area .home-hero-cycle-image {
  animation: home-hero-image-in 620ms ease both;
}

body.home-motion .single_about_icon,
body.home-motion .more_feature_icon {
  transition: transform 260ms ease, box-shadow 260ms ease;
}

body.home-motion .single_about:hover .single_about_icon,
body.home-motion .single_more_feature:hover .more_feature_icon {
  transform: translateY(-5px) rotate(-3deg);
}

html.home-motion-ready body.home-motion [data-home-reveal] {
  opacity: 0;
  transform: translate3d(0, 2.25rem, 0);
  transition: opacity 620ms ease, transform 720ms cubic-bezier(.22, 1, .36, 1);
}

html.home-motion-ready body.home-motion [data-home-reveal].is-motion-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* The hero image already owns its transform for parallax, so only fade it. */
html.home-motion-ready body.home-motion .illas_box[data-home-reveal] {
  opacity: 0;
  transition: opacity 760ms ease 120ms;
}

html.home-motion-ready body.home-motion .illas_box[data-home-reveal].is-motion-visible {
  opacity: 1;
  transform: translate3d(0, var(--home-parallax-fast, 0px), 0);
}

html.home-motion-ready body.home-motion [data-motion-delay='1'] { transition-delay: 90ms; }
html.home-motion-ready body.home-motion [data-motion-delay='2'] { transition-delay: 180ms; }
html.home-motion-ready body.home-motion [data-motion-delay='3'] { transition-delay: 270ms; }

/* Homepage product video: reserved 16:9 space prevents layout shift while
   loading="lazy" keeps YouTube out of the initial page load. */
.adcast-how-video {
  width: min(100%, 920px);
  margin: 1.5rem auto 0;
}

.adcast-how-video-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(32, 48, 72, .12);
  border-radius: 1.35rem;
  background: #edf3fa;
  box-shadow: 0 20px 52px rgba(26, 48, 74, .12);
}

.adcast-how-video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.adcast-how-video-preview { position: relative; display: grid; width: 100%; height: 100%; place-items: center; isolation: isolate; }
.adcast-how-video-preview > img { object-fit: cover; opacity: .78; filter: saturate(.9); }
.adcast-how-video-preview::after { position: absolute; inset: 0; z-index: -1; background: linear-gradient(125deg, rgba(14, 30, 56, .42), rgba(19, 105, 222, .28)); content: ''; }
.adcast-how-video-preview-content { position: relative; z-index: 1; display: grid; justify-items: center; gap: .8rem; padding: 1.5rem; text-align: center; }
.adcast-how-video-play, .adcast-how-video-settings { border-radius: 999px; font: inherit; font-size: .95rem; font-weight: 800; cursor: pointer; }
.adcast-how-video-play { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.35rem; border: 0; background: #1675e5; color: #fff; box-shadow: 0 10px 24px rgba(0, 68, 163, .3); }
.adcast-how-video-play span { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .22); font-size: .68rem; }
.adcast-how-video-settings { padding: .25rem .65rem; border: 0; background: transparent; color: #fff; text-decoration: underline; text-underline-offset: .2em; }

@keyframes home-motion-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(-.7deg); }
}

@keyframes home-hero-image-in {
  from { opacity: .25; transform: scale(.975); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 767px) {
  .welcome_area::after { top: -8rem; right: -13rem; }
  /* The three How-it-works cards sit in Bootstrap's narrow mobile container.
     Let the video span the same visual width as two use-case cards instead. */
  .adcast-how-video {
    width: calc(100vw - 2.5rem);
    max-width: none;
    /* No transform here: the reveal animation owns transform on this element. */
    margin: .5rem 0 0 calc(50% - 50vw + 1.25rem);
  }
  .adcast-how-video-frame { border-radius: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.home-motion *,
  body.home-motion *::before,
  body.home-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}