/* atlas-motion.css — shared shell for AtlasMotion runtime
 * Phase 2 additions: sitewide shell motion — smooth scroll, body-scroll lock,
 * drawer base classes, header sticky/reveal transitions, stagger CSS.
 * Phase 3+: modal, cursor overlay. Popup skins come in their consumer phases.
 */

/* ── M31 — Smooth scroll ────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ── Body scroll lock — applied by bindDrawer / openModal ───────────── */
body.atlas-no-scroll {
  overflow: hidden;
}

/* ── Drawer base — shared by mobile menu + cart drawer ──────────────── */
/* Individual drawers control their own transform/width/placement.
   These base classes supply the transition timing shared across all drawers. */
.atlas-drawer {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Drawer backdrop overlay base */
.atlas-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99990;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.atlas-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ── Stagger CSS for mobile menu link items ─────────────────────────── */
.mobile-nav__links a,
.kh-mobile-panel__links a {
  transition-delay: var(--stagger, 0ms);
}

/* ── Reduced-motion: instant all drawer/overlay transitions ─────────── */
@media (prefers-reduced-motion: reduce) {
  .atlas-drawer,
  .atlas-drawer-overlay,
  .mobile-nav,
  .mobile-nav__overlay,
  .kh-mobile-panel,
  .kh-mobile-overlay {
    transition: none !important;
  }
  .mobile-nav__links a,
  .kh-mobile-panel__links a {
    transition-delay: 0ms !important;
  }
}

/* ── Modal root ──────────────────────────────────────────────────── */
.atlas-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--atlas-modal-backdrop, rgba(0, 0, 0, 0.6));
  align-items: center;
  justify-content: center;
  /* Transition properties for open/close animation */
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show the flex container when entering or open */
.atlas-modal.is-entering,
.atlas-modal.is-open {
  display: flex;
}

/* Entering: opacity 0 → next frame → is-open: opacity 1 */
.atlas-modal.is-open {
  opacity: 1;
}

/* Leaving: fade back out, then display:none removed by JS after transition */
.atlas-modal.is-leaving {
  opacity: 0;
  pointer-events: none;
}

/* ── Modal inner content container ──────────────────────────────── */
.atlas-modal__inner {
  position: relative;
  background: #fff;
  border-radius: 8px;
  max-width: min(90vw, 640px);
  max-height: 85vh;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(12px);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.atlas-modal.is-open .atlas-modal__inner {
  transform: translateY(0);
}

.atlas-modal.is-leaving .atlas-modal__inner {
  transform: translateY(12px);
}

/* ── Reduced-motion overrides ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .atlas-modal,
  .atlas-modal__inner {
    transition: none !important;
  }
}

/* ── Shared modal skin — video modal ─────────────────────────────── */
/* Layout specifics live in video_modal/styles.css.
 * These rules cover the structural overrides shared across all atlas-video-modal
 * instances: backdrop colour, inner padding reset, entry animation override. */
.atlas-video-modal {
  /* Slightly darker backdrop for video to minimise distraction */
  --atlas-modal-backdrop: rgba(0, 0, 0, 0.82);
  align-items: flex-end;
}
@media (min-width: 640px) {
  .atlas-video-modal {
    align-items: center;
  }
}
.atlas-video-modal .atlas-modal__inner {
  transform: translateY(24px);
}
.atlas-video-modal.is-open .atlas-modal__inner {
  transform: translateY(0);
}
.atlas-video-modal.is-leaving .atlas-modal__inner {
  transform: translateY(24px);
}

/* ── Shared modal skin — image zoom modal ────────────────────────── */
/* Layout specifics live in image_zoom_modal/styles.css. */
.atlas-zoom-modal {
  --atlas-modal-backdrop: rgba(0, 0, 0, 0.88);
  align-items: center;
  justify-content: center;
}
.atlas-zoom-modal .atlas-modal__inner {
  transform: scale(0.96);
  transition: transform 220ms ease;
}
.atlas-zoom-modal.is-open .atlas-modal__inner {
  transform: scale(1);
}
.atlas-zoom-modal.is-leaving .atlas-modal__inner {
  transform: scale(0.96);
}

/* ── Reduced-motion: no scale/translate on modal types ──────────── */
@media (prefers-reduced-motion: reduce) {
  .atlas-video-modal .atlas-modal__inner,
  .atlas-zoom-modal .atlas-modal__inner {
    transform: none !important;
    transition: none !important;
  }
  /* Swipe hint hidden when motion is reduced */
  [data-swipe-indicator] {
    display: none !important;
  }
}

/* ── Shared modal skin — promo popup ─────────────────────────────── */
/* Layout specifics live in promo_popup/styles.css.
 * These rules cover placement-variant positioning. */

/* center (default) — inherits the centered flex from .atlas-modal */
.atlas-modal.atlas-popup--center { /* no override needed */ }

/* bottom-left / bottom-right — position inner to corner */
.atlas-modal.atlas-popup--bottom-left .atlas-modal__inner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  max-width: 420px;
  align-self: flex-end;
}

.atlas-modal.atlas-popup--bottom-right .atlas-modal__inner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 420px;
  align-self: flex-end;
}

/* Reduced-motion: no slide-in, render in final position */
@media (prefers-reduced-motion: reduce) {
  .atlas-modal.atlas-popup--bottom-left .atlas-modal__inner,
  .atlas-modal.atlas-popup--bottom-right .atlas-modal__inner {
    transition: none !important;
  }
}

/* ── Popup width variants ─────────────────────────────────────────── */
/* Override .atlas-modal__inner max-width. Default is wider than the
 * base 640px to feel less cramped for the image-split layout. */
.atlas-popup.atlas-popup--narrow .atlas-modal__inner    { max-width: min(92vw, 480px); }
.atlas-popup.atlas-popup--default .atlas-modal__inner   { max-width: min(92vw, 720px); padding: 0; overflow: hidden; }
.atlas-popup.atlas-popup--wide .atlas-modal__inner      { max-width: min(94vw, 920px); padding: 0; overflow: hidden; }
.atlas-popup.atlas-popup--extra-wide .atlas-modal__inner { max-width: min(96vw, 1080px); padding: 0; overflow: hidden; }

/* ── Phase 4 — Shoppable image: hotspot pulse + modal sizing ─────── */

@keyframes shoppable-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Slightly narrower modal for the hotspot product card */
.atlas-hotspot-modal .atlas-modal__inner {
  max-width: min(92vw, 420px);
}

/* Reduced-motion guard for pulse */
@media (prefers-reduced-motion: reduce) {
  .shoppable-image__hotspot--pulse::before {
    animation: none;
  }
}

/* ── Custom cursor overlay (Phase 3) ─────────────────────────────── */
/* Touch/coarse pointer suppression: never show on touch devices. */
@media (hover: none), (pointer: coarse) {
  .atlas-custom-cursor {
    display: none !important;
  }
}

.atlas-custom-cursor {
  /* Controlled by --atlas-cursor-size (set inline by bindCursor runtime). */
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Center on pointer — top/left are set to cursor coords */
  transform: translate(-50%, -50%);
  transition: transform 200ms ease-out, opacity 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  /* Default size from CSS var — JS overrides per-brand */
  width: var(--atlas-cursor-size, 80px);
  height: var(--atlas-cursor-size, 80px);
  /* Keep above modals */
  will-change: transform, left, top;
}

/* Hidden state: invisible and scaled down */
.atlas-custom-cursor--hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: opacity 200ms ease, transform 200ms ease;
}

/* Slideshow mode: white bg + dark arrow, brand accent on shrink — matches CROTheme */
.atlas-custom-cursor--slideshow {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  color: #000;
  flex-direction: column;
}

/* Shrink over interactive elements: brand accent bg, white icon, scale down */
.atlas-custom-cursor--shrink {
  transform: translate(-50%, -50%) scale(0.6);
  background: var(--atlas-cursor-bg, rgba(242, 167, 195, 0.85));
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  color: #fff;
}

/* Direction: rotate arrow SVG 180deg when on left half of region */
.atlas-custom-cursor--left .atlas-cursor-icon {
  transform: rotate(180deg);
}

/* Reduced-motion: keep visibility logic, drop easing */
@media (prefers-reduced-motion: reduce) {
  .atlas-custom-cursor {
    transition: none !important;
  }
}

/* ── Phase 5 — scroll-to-top base (positioning + focus) ─────────── */
/* Visual shell (size, colors, shadow, hover) lives in scroll_to_top/styles.css.
 * This covers the fixed positioning, transition, and focus-visible shared base. */
.atlas-scroll-to-top {
  position: fixed;
  z-index: 9000;
  transition: opacity 220ms ease, transform 220ms ease;
}

.atlas-scroll-to-top:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* ── Phase 5 — copy-flash base ───────────────────────────────────── */
/* .atlas-copy-button can appear anywhere a copy-to-clipboard CTA is needed
 * (promo_popup discount card, inline code blocks, etc.). The binding is done
 * by bindCopyFlash() — auto-wired globally on DOM ready for .atlas-copy-button. */
.atlas-copy-button {
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

/* Success state — flash color during the 1.2s copy window */
.atlas-copy-button.is-flashing {
  color: var(--color-success, #2e7d32);
}

/* ── Phase 5 reduced-motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .atlas-scroll-to-top {
    transition: none !important;
  }
  .atlas-copy-button {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MIGRATED FROM css-generator.js (Phase 2 migration — one source of truth)
   These rules were previously inlined by generateDesignSystemCSS().
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page-load intro ────────────────────────────────────────────────
   A single gentle fade + rise on the document body, then staggered
   reveal of the hero children. CSS-only (no JS), runs on first paint.
   Everything disabled under prefers-reduced-motion. */
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-stage-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
body {
  animation: page-fade-in 600ms var(--motion-ease-out, ease-out) both;
}
/* Hero intro cascade: product-showcase is the Shrine-style wrapper emitted by
   renderer.js when hero_product + bundle_selector are adjacent. Children stage
   in 100ms apart, forwards-only so the animation holds its end state. */
.product-showcase > * > *,
.product-hero__info > *,
#bundle > * {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-stage-in 600ms var(--motion-ease-out, ease-out) both;
  animation-delay: calc(var(--stage, 0) * 45ms + 120ms);
}
.product-showcase__media { --stage: 0; }
.product-showcase__info  { --stage: 1; }
.product-hero__info > .product-hero__rating      { --stage: 2; }
.product-hero__info > .product-hero__title       { --stage: 3; }
.product-hero__info > .product-hero__subtitle    { --stage: 4; }
.product-hero__info > .product-hero__benefits    { --stage: 5; }
.product-hero__info > .product-hero__countdown   { --stage: 6; }
#bundle > .quantity-breaks                       { --stage: 7; }
#bundle > .bundle-atc                            { --stage: 8; }

/* Ornamental rule above section headings — draws out from 0 to full width on
   first reveal instead of appearing statically. */
.animate-section.is-visible h2::before {
  transform-origin: left center;
  animation: rule-draw 500ms var(--motion-ease-out, ease-out) 120ms both;
}
.animate-section:not(.is-visible) h2::before { transform: scaleX(0); }

/* Soft hover lift on cards that already have shadow */
.fb-post, .review-card, .why-review {
  transition: box-shadow var(--motion-duration-reveal, 0.5s) var(--motion-ease-out, ease-out),
              transform var(--motion-duration-reveal, 0.5s) var(--motion-ease-out, ease-out);
}

/* Scroll-reveal animations — two systems, both skipped for above-fold elements.
   1) Legacy [data-animate]: simple fade-up on the parent itself.
   2) Shrine-style .animate-section + .animate-item--child: parent fades up,
      descendants cascade with --index-based stagger delay. */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--motion-ease-out, ease-out), transform 0.5s var(--motion-ease-out, ease-out);
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-section.animate--hidden {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--motion-duration-reveal, 0.5s) var(--motion-ease-out, ease-out),
              transform var(--motion-duration-reveal, 0.5s) var(--motion-ease-out, ease-out);
}
.animate-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-section.animate--hidden .animate-item--child {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--motion-duration-reveal, 0.5s) var(--motion-ease-out, ease-out),
              transform var(--motion-duration-reveal, 0.5s) var(--motion-ease-out, ease-out);
  transition-delay: calc(var(--index, 0) * var(--motion-stagger-step, 60ms));
}
.animate-section.is-visible .animate-item--child {
  opacity: 1;
  transform: translateY(0);
}

/* Above-fold elements must never have animate-section applied — override as guard */
.announcement-bar,
.header,
#hero,
.product-hero,
.product-showcase,
#countdown-bar,
.countdown-bar {
  opacity: 1 !important;
  transform: none !important;
}
.announcement-bar .animate-item--child,
.header .animate-item--child,
#hero .animate-item--child,
.product-hero .animate-item--child,
.product-showcase .animate-item--child,
#countdown-bar .animate-item--child,
.countdown-bar .animate-item--child {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ── Motion Phase 3 — FAQ accordion ─────────────────────────────────── */
/* Content height is managed by JS via measured scrollHeight.
 * The transition is also set by JS. CSS provides the closed state default
 * so the element hides correctly before JS initialises. */
.accordion__content {
  max-height: 0;
  overflow: hidden;
  /* transition set by bindAccordion JS — not hardcoded here */
}

/* kfaq-a — same: closed by default, JS opens via scrollHeight */
.kfaq-a {
  max-height: 0;
  overflow: hidden;
  /* transition set by bindAccordion JS */
}

/* kpt-a — kavya product tabs accordion body */
.kpt-a {
  max-height: 0;
  overflow: hidden;
  /* transition set by bindAccordion JS */
}

/* hero inline accordions */
.product-hero__accordion-body {
  max-height: 0;
  overflow: hidden;
  /* transition set by bindAccordion JS */
}

/* ── Layout containment — product right column ───────────────────────── */
/* Tells the browser this subtree's layout doesn't affect siblings.
 * This prevents layout thrash from accordion height changes repainting the
 * sticky image on the left and causing choppy visual movement. */
.khp-showcase__info,
.product-hero__info {
  contain: layout;
}

/* ── Motion Phase 3 — Sticky ATC slide-up ────────────────────────────── */
/* Base positioning and transition. .is-visible added/removed by bindStickyATC. */
.sticky-atc,
.ksa {
  transform: translateY(100%);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-atc.is-visible,
.ksa.is-visible {
  transform: translateY(0);
}

/* Ensure ksa starts hidden (was display:none previously — now transform-driven) */
.ksa {
  display: flex !important;
  visibility: hidden;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s 250ms;
}

.ksa.is-visible {
  visibility: visible;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s 0s;
}

@media (prefers-reduced-motion: reduce) {
  .sticky-atc,
  .ksa {
    transition: none !important;
  }
}

/* ── Motion Phase 3 — Loading button ────────────────────────────────── */
.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

/* Spinner overlay — CSS-only, no external assets */
.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  border-radius: inherit;
  /* spinner via border animation */
}

/* Spinner ring — absolute centered, visible above the overlay */
.is-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.8rem;
  margin-left: -0.8rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: atlas-spin 0.6s linear infinite;
  z-index: 1;
}

@keyframes atlas-spin {
  to { transform: rotate(360deg); }
}

/* Fade child content while loading */
.is-loading > span,
.is-loading > svg {
  opacity: 0.2;
}

@media (prefers-reduced-motion: reduce) {
  .is-loading::before {
    animation: none !important;
    border-top-color: rgba(255, 255, 255, 0.4);
  }
}

/* ── Motion Phase 4 — Slider dot pagination (M07/M08) ───────────────── */
/* Pill-style dots with expanding active state. Opt-in: sections emit
   [data-slider-dots] and [data-slider-progress-track] in their markup. */

[data-slider-dots] {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1rem;
}

.atlas-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  border: 0;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  padding: 0;
  transition: width 250ms ease, background 250ms ease;
  flex-shrink: 0;
}

.atlas-slider__dot.is-active {
  width: 24px;
  background: var(--atlas-slider-dot-active, #000);
}

@media (prefers-reduced-motion: reduce) {
  .atlas-slider__dot { transition: none; }
}

/* Slider progress bar — opt-in via [data-slider-progress-track] wrapper */
[data-slider-progress-track] {
  height: 2px;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
  border-radius: 2px;
  overflow: hidden;
}

[data-slider-progress] {
  height: 100%;
  background: var(--atlas-slider-progress, #000);
  width: 0;
  transition: width 250ms ease;
}

@media (prefers-reduced-motion: reduce) {
  [data-slider-progress] { transition: none; }
}

/* ── Motion Phase 4 — M27 highlight utility classes (dormant) ────────── */
/* Sections opt in by adding these classes to inline text nodes. No JS
   required — purely decorative CSS utilities. Color overrideable via
   --atlas-highlight-color CSS custom property on the element or ancestor. */
.atlas-highlight--underline {
  text-decoration: underline;
  text-decoration-color: var(--atlas-highlight-color, currentColor);
}

.atlas-highlight--background {
  background: var(--atlas-highlight-color, rgba(255, 255, 0, 0.4));
  padding: 0 0.2em;
  border-radius: 2px;
}

.atlas-highlight--gradient {
  background: linear-gradient(
    120deg,
    transparent 0%,
    var(--atlas-highlight-color, rgba(255, 255, 0, 0.4)) 50%,
    transparent 100%
  );
  padding: 0 0.2em;
}

/* ── Motion Phase 5 — M35 section scroll-reveal ──────────────────────── */
/* Initial hidden state — applied when renderer emits data-atlas-reveal.
 * Reveal-capable sections start invisible (off-screen / below fold) and
 * fade + rise in as they enter the viewport via observeReveal(). */
[data-atlas-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
[data-atlas-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced-motion: render immediately in final state — no hidden/transition */
@media (prefers-reduced-motion: reduce) {
  [data-atlas-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Optional reveal style variants — sections opt in via data-reveal-style attr */
[data-atlas-reveal][data-reveal-style="zoom"] {
  transform: scale(0.96) translateY(20px);
}
[data-atlas-reveal][data-reveal-style="zoom"].is-revealed {
  transform: scale(1) translateY(0);
}
[data-atlas-reveal][data-reveal-style="fade"] {
  transform: none;
}

/* ── Universal soft transition (zero specificity via :where) ─────────── */
/* Specificity 0 so any per-component override wins. Covers interactive
   elements not explicitly styled by sections — inputs, labels, selects,
   any focusable. Excluded from reduced-motion below. */
:where(button, a, input, select, textarea, label,
       [role="button"], [tabindex]:not([tabindex="-1"])) {
  transition:
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :where(button, a, input, select, textarea, label,
         [role="button"], [tabindex]:not([tabindex="-1"])) {
    transition: none !important;
  }
}

/* ── Universal smooth transitions for interactive elements ───────────── */
/* Applied globally so every button/link/card smoothly transitions colours,
   transforms, and shadows. Individual sections may override with longer/
   different easing where needed (e.g. kbs-pack-card already has its own). */
button, a, [role="button"],
.kbs-pack-card, .kbs-variant, .khp-thumb, .khp-nav,
.pc__atc-link, .atlas-popup__cta, .atlas-popup__copy {
  transition:
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover lift for cards */
.kbs-pack-card:hover, .kbs-variant:hover {
  transform: translateY(-1px);
}

/* Nav arrow hover — preserve the translateY(-50%) centering, scale on top */
.khp-nav:hover, .atlas-popup__close:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* ATC button hover — ayeshanails.com parity (captured 2026-05-30).
 * No background-color change, no transform lift; the inset white box-shadow
 * grows from -3px to -50px on hover, lightening the button surface. Uses
 * cubic-bezier(0,0,0.2,1) at 200ms to match ayesha's timing exactly.
 * Section-level CSS in kavya_bundle_selector/styles.css owns the canonical
 * .kbs-atc rules; .bundle-atc__button (legacy non-kavya brands) gets the
 * same treatment here so all ATC buttons converge on the same hover shape. */
.kbs-atc, .bundle-atc__button {
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1), opacity 200ms ease;
}
.bundle-atc__button {
  box-shadow:
    inset 0 -3px 0 rgba(255, 255, 255, 0.15),
    0 3px 8px rgba(232, 226, 222, 0.15);
}
.kbs-atc:hover, .kbs-atc:focus-visible,
.bundle-atc__button:hover, .bundle-atc__button:focus-visible {
  box-shadow:
    inset 0 -50px 0 rgba(255, 255, 255, 0.1),
    0 5px 12px rgba(232, 226, 222, 0.2);
  opacity: 1;
}
.kbs-atc:active, .bundle-atc__button:active {
  box-shadow:
    inset 0 -30px 0 rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Single global reduced-motion block — zeros transitions/animations, stops
   marquees, disables count-up tween, shows sticky ATC without slide-in. */
@media (prefers-reduced-motion: reduce) {
  button, a, [role="button"],
  .kbs-pack-card, .kbs-variant, .khp-thumb, .khp-nav,
  .pc__atc-link, .atlas-popup__cta, .atlas-popup__copy,
  .kbs-atc, .bundle-atc__button {
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate],
  .animate-section.animate--hidden,
  .animate-section.animate--hidden .animate-item--child {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .announcement-bar__track,
  .featured-on--marquee .featured-on__logos {
    animation: none !important;
  }
  [data-count] { transition: none !important; }
  .sticky-atc.is-visible { transform: none !important; }
}