/* Hand-written CSS for behaviour that the Next.js app drove with
   framer-motion / React state instead of literal Tailwind classes.
   (The bulk of the design system itself lives in style.css, the compiled
   Tailwind v4 output — this file only adds the stateful bits Tailwind's
   scanner can't see: framer-motion variants and JS-toggled state classes.) */

/* ---------------- Reveal (lib/motion.ts fadeUp) ---------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- Stagger item (lib/motion.ts staggerItem) ---------------- */
[data-stagger-item] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-stagger-item].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-stagger-item] {
    transition: none !important;
  }
}

/* ---------------- TiltCard (ui/tilt-card.tsx) ---------------- */
[data-tilt] {
  perspective: 900px;
}
[data-tilt] [data-tilt-inner] {
  transform: rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-tilt] [data-tilt-glow] {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(
    220px circle at var(--tilt-px, 50%) var(--tilt-py, 50%),
    color-mix(in oklab, var(--glow-color, var(--color-brand)) 22%, transparent),
    transparent 70%
  );
}
[data-tilt]:hover [data-tilt-glow] {
  opacity: 1;
}

/* ---------------- Magnetic (ui/magnetic.tsx) ---------------- */
[data-magnetic] {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
}

/* ---------------- Navbar mega menu (layout/navbar.tsx) ---------------- */
[data-mega-menu-wrap] {
  position: relative;
}
[data-mega-menu] {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-mega-menu-wrap]:hover [data-mega-menu],
[data-mega-menu-wrap]:focus-within [data-mega-menu] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
[data-mega-menu-wrap]:hover [data-chevron],
[data-mega-menu-wrap]:focus-within [data-chevron] {
  transform: rotate(180deg);
}

/* ---------------- Mobile drawer (layout/navbar.tsx MobileDrawer) ---------------- */
[data-mobile-drawer] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
[data-mobile-drawer].is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------------- FAQ accordion (ui/faq-accordion.tsx) ---------------- */
[data-faq-panel] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-faq-trigger] svg {
  transition: transform 0.3s;
}
[data-faq-item].is-open [data-faq-trigger] svg {
  transform: rotate(45deg);
}

/* ---------------- Scroll progress (ui/scroll-progress.tsx) ---------------- */
[data-scroll-progress] {
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

/* ---------------- Cookie consent (demos/cookie-consent.tsx) ---------------- */
[data-cookie-consent] {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
[data-cookie-consent].is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------------- Products grid filter tabs (sections/products-grid.tsx) ---------------- */
[data-products-grid] [role="tablist"] {
  position: relative;
}
[data-filter-pill] {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0;
  border-radius: 9999px;
  background: linear-gradient(100deg, var(--color-brand), var(--color-brand-2));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}
[data-filter-tab] {
  position: relative;
  z-index: 1;
  color: var(--color-fg-muted);
}
[data-filter-tab].is-active {
  color: #fff;
}

/* ---------------- Button loading/success icon slots ---------------- */
[data-icon-loading],
[data-btn-loading] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------------- Product 3D canvas mount point ---------------- */
[data-product-canvas] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
[data-product-canvas] canvas {
  touch-action: none;
}

/* ---------------- Blog post prose spacing (blog/[slug]/page.tsx .prose-fabrica) ---------------- */
.prose-fabrica h2 {
  scroll-margin-top: 6rem;
}