/* ==========================================================================
   HansalDev Motion Layer
   Centralized motion tokens, progressive-enhancement initial states, the
   scroll progress indicator, product-showcase slider emphasis, and the
   hover micro-interaction surface. Everything here is safe to remove:
   content stays fully visible when JS or motion is disabled.

   Initial hidden states ONLY apply when:
     html.js-ready                       (JS is running)
     AND prefers-reduced-motion:no-preference
   ========================================================================== */

:root {
  --hs-motion-fast: 180ms;
  --hs-motion-base: 300ms;
  --hs-motion-slow: 600ms;
  --hs-motion-ambient: 3500ms;
}

/* --- Scroll progress indicator ------------------------------------------- */
.hs-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: transparent;
}
.hs-scroll-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #6D4AFF;
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* --- Progressive initial states (JS + motion enabled) -------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js-ready [data-animate]:not(.hs-revealed) { opacity: 0; }
  html.js-ready [data-animate="content"]:not(.hs-revealed) { transform: translateY(35px); }
  html.js-ready [data-animate="card"]:not(.hs-revealed) { transform: translateY(30px); }
  html.js-ready [data-animate="image"]:not(.hs-revealed) { transform: scale(.97); }
  html.js-ready [data-animate="divider"]:not(.hs-revealed) { transform: scaleX(.6); }

  /* Hero entrance state (matches the GSAP timeline start values). */
  html.js-ready .hero-eyebrow,
  html.js-ready .hero-title,
  html.js-ready .hero-description,
  html.js-ready .hero-actions,
  html.js-ready .hero-meta,
  html.js-ready .hero-visual,
  html.js-ready .hero-floating-card { opacity: 0; }
  html.js-ready .hero-eyebrow,
  html.js-ready .hero-title,
  html.js-ready .hero-description,
  html.js-ready .hero-actions,
  html.js-ready .hero-meta { transform: translateY(28px); }
  html.js-ready .hero-floating-card { transform: translateY(18px); }
  html.js-ready .hero-visual { transform: translate3d(40px, 0, 0) scale(.94); }
  html.js-ready .hd-hero .hs-glow-line { opacity: 0; transform: scaleX(.5); }
  html.js-ready .hd-about-hero .hs-about-breadcrumb { opacity: 0; transform: translateY(12px); }

  /* Gradient text needs an oversized background so GSAP's one-shot
     background-position shimmer is visible. Idle state stays static. */
  .hs-gradient-text { background-size: 200% 100%; }

  /* Card grids stagger on the grid children. */
  html.js-ready [data-card-reveal]:not(.hs-revealed) > * { opacity: 0; transform: translateY(30px); }
}

/* --- Product showcase slider -------------------------------------------- */
.hs-demo-swiper { padding-bottom: 28px; }
.product-showcase-swiper .swiper-slide {
  height: auto;
  opacity: .7;
  transition: opacity var(--hs-motion-slow) ease;
}
.product-showcase-swiper .swiper-slide-active { opacity: 1; }

.hs-showcase-slide { overflow: hidden; }
.hs-showcase-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--hs-bg-soft);
  border-bottom: 1px solid var(--hs-border);
}
.hs-showcase-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  transform: scale(.96);
  transition: transform var(--hs-motion-slow) ease;
}
.product-showcase-swiper .swiper-slide-active .hs-showcase-media img { transform: scale(1); }
.hs-showcase-media--placeholder {
  display: grid;
  place-items: center;
  background-image: var(--hs-grad-soft);
}
.hs-showcase-media--placeholder .hs-product-symbol { margin: 0; }
.hs-showcase-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.hs-showcase-body h3 { font-size: 22px; margin-bottom: 12px; }
.hs-showcase-body p { color: var(--hs-muted); }
.hs-showcase-body .btn { margin-top: auto; }

/* Showcase arrows carry the hs-swiper treatment plus a hover travel. */
@media (hover: hover) {
  .product-showcase-swiper .showcase-prev:hover { transform: translateX(-3px); }
  .product-showcase-swiper .showcase-next:hover { transform: translateX(3px); }
}

/* --- Premium button light sweep (primary CTAs) --------------------------- */
.hd-actions .btn-primary,
.hd-final .btn-primary,
.product-card .btn-primary,
.hs-btn-premium {
  position: relative;
  overflow: hidden;
}
.hd-actions .btn-primary::after,
.hd-final .btn-primary::after,
.product-card .btn-primary::after,
.hs-btn-premium::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -140%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-18deg);
  transition: left 450ms ease;
  pointer-events: none;
}
@media (hover: hover) {
  .hd-actions .btn-primary:hover::after,
  .hd-final .btn-primary:hover::after,
  .product-card .btn-primary:hover::after,
  .hs-btn-premium:hover::after { left: 140%; }
}

/* --- Product cards ------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .product-card {
    transition: transform var(--hs-card-transition), box-shadow var(--hs-card-transition), border-color var(--hs-card-transition);
  }
  .product-card:hover { transform: translateY(-7px); }
  .product-card .product-card-image { overflow: hidden; }
  .product-card .product-card-image img { transition: transform var(--hs-card-transition); }
  .product-card:hover .product-card-image img { transform: scale(1.025); }

  /* Subtle purple ambient highlight on product card hover. */
  .product-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--hs-card-transition);
    background:
      radial-gradient(360px circle at 50% 110%, rgba(109, 74, 255, .10), transparent 55%);
  }
  .product-card:hover::after { opacity: 1; }
}

/* --- Value / feature cards ----------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .hd-value,
  .hd-card {
    transition: transform var(--hs-card-transition), box-shadow var(--hs-card-transition), border-color var(--hs-card-transition);
  }
  .hd-value:hover,
  .hd-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hs-shadow-md);
    border-color: rgba(109, 74, 255, .25);
  }
}

/* --- Cursor-follow light uses the sanctioned px-based custom properties -- */
.hs-cursor-glow {
  --mouse-x: 50%;
  --mouse-y: 50%;
  background: radial-gradient(300px circle at var(--mouse-x) var(--mouse-y), rgba(109, 74, 255, .07), transparent 45%);
}

/* --- Resources / article cards ------------------------------------------- */
.hs-showcase-slide .hd-text-link,
.hs-showcase-slide .btn { margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
  .blog-list-card { overflow: hidden; }
  .blog-list-card .blog-list-card-image img { transition: transform var(--hs-card-transition); }
  .blog-list-card:hover .blog-list-card-image img { transform: scale(1.03); }
  .blog-list-card:hover .blog-list-card-link svg { transform: translateX(3px); }
  .blog-list-card .blog-list-card-link svg { transition: transform var(--hs-transition); }
}

/* --- CTA arrow micro-interaction (x: 0 -> 3px) --------------------------- */
@media (hover: hover) and (pointer: fine) {
  .hd-text-link > span,
  .hd-text-link svg { transition: transform var(--hs-transition); }
  .hd-text-link:hover > span,
  .hd-text-link:hover svg { transform: translateX(3px); }
  .hd-frame-product > i,
  .hs-frame-product > i { transition: transform var(--hs-transition); }
  .hs-frame-product:hover > i { transform: translateX(3px); }
  .product-card .hs-product-symbol i,
  .hd-card .hs-product-symbol i { transition: transform var(--hs-transition); }
  .product-card:hover .hs-product-symbol i,
  .hd-card:hover .hs-product-symbol i { transform: translateY(-2px); }
}

/* --- Hero product mockup float (GSAP drives y/rotation) ------------------ */
.hs-hero-visual-frame { will-change: transform; }

/* --- Final CTA atmosphere ------------------------------------------------ */
.final-cta-glow { will-change: transform; }

/* Gentle, repeating background drift for the final CTA gradient. */
@media (prefers-reduced-motion: no-preference) {
  .hs-final-cta {
    background-size: 160% 160%;
    background-position: 0% 0%;
    animation: hs-cta-breathe 14s ease-in-out infinite;
  }
}
@keyframes hs-cta-breathe {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 50%; }
}

/* --- FAQ chevron handled in premium.css; Bootstrap collapse provides motion */
.hs-faq .accordion-button { padding: 20px 8px; }
.hs-faq .accordion-button:not(.collapsed) { box-shadow: none; }

/* --- Section header divider placement ------------------------------------- */
.hd-section-heading .hs-glow-line { margin: 8px 0 0; }

/* --- Reduced motion: freeze everything, keep content ---------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js-ready [data-animate],
  html.js-ready [data-card-reveal] > *,
  html.js-ready .hero-eyebrow,
  html.js-ready .hero-title,
  html.js-ready .hero-description,
  html.js-ready .hero-actions,
  html.js-ready .hero-meta,
  html.js-ready .hero-visual,
  html.js-ready .hero-floating-card,
  html.js-ready .hd-hero .hs-glow-line,
  html.js-ready .hd-about-hero .hs-about-breadcrumb {
    opacity: 1 !important;
    transform: none !important;
  }
  .hs-gradient-text { background-size: 100% 100%; }
  .hs-final-cta { animation: none; }
  .hs-scroll-progress > span,
  .product-showcase-swiper .swiper-slide,
  .product-showcase-swiper .swiper-slide .hs-showcase-media img {
    transition: none !important;
  }
  .product-showcase-swiper .swiper-slide,
  .product-showcase-swiper .swiper-slide .hs-showcase-media img {
    opacity: 1;
    transform: none;
  }
}