/* ==========================================================================
   Queenie-B Honey — Motion layer
   Scroll reveals, text splits, parallax, marquee, magnetic buttons, stat
   pop-ins, honeycomb texture, SVG line draws. Loads after every other
   stylesheet so it can layer transform/opacity states on top of existing
   components without fighting their base styles. Driven by js/motion.js
   (GSAP/ScrollTrigger/Lenis/SplitType via CDN) with plain-CSS fallback
   behavior baked in — if the CDN fails, elements still end up visible.
   ========================================================================== */

/* ---- Lenis smooth-scroll safety rules (js/motion.js initLenis) ------------- */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-stopped { overflow: hidden; }
html.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---- Generic scroll-reveal primitives -------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(3.2rem);
  transition: opacity var(--duration-slow) var(--ease-primary), transform var(--duration-slow) var(--ease-primary);
}
.fade-in {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-primary);
}
.clip-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--duration-slow) var(--ease-primary);
}
.fade-up.is-visible,
.fade-in.is-visible { opacity: 1; transform: none; }
.clip-reveal.is-visible { clip-path: inset(0 0 0% 0); }

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* Stagger groups: children pop in sequence (GSAP handles the stagger timing;
   this just sets the resting/hidden state so there's no flash of full content) */
.stagger-group .stagger-item {
  opacity: 0;
  transform: translateY(3.2rem);
}
.stagger-group.is-inert .stagger-item { opacity: 1; transform: none; } /* no-JS fallback */

/* Image reveals — subtle scale-down-to-rest on entry */
.img-reveal {
  opacity: 0;
  transform: scale(1.06);
}
.img-reveal.is-inert { opacity: 1; transform: none; }

/* [data-split] heading reveals: SplitType lines/words animated via GSAP.
   Until JS runs, keep the heading fully visible so there's no layout jump
   or invisible text if scripts are blocked. */
[data-split] .split-line,
[data-split] .split-word { will-change: transform, opacity; }

/* ---- Honeycomb texture overlay -------------------------------------------- */
.honeycomb-bg { position: relative; }
.honeycomb-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V18L28 2l28 16v32L28 66zm0 34L0 84V52l28-16 28 16v32L28 100z' fill='none' stroke='%23B2832C' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 100px;
  z-index: 0;
}
.honeycomb-bg > * { position: relative; z-index: 1; }

/* ---- Marquee strip ---------------------------------------------------------- */
.marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: max-content;
  animation: marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee-inner { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-faint);
  white-space: nowrap;
}
.marquee-item::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--color-accent);
  display: inline-block;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-inner { animation: none; }
}

/* ---- Magnetic buttons -------------------------------------------------------- */
.btn-magnetic { will-change: transform; }
.btn-magnetic > span { display: block; pointer-events: none; }

/* ---- Stat counters — resting state before GSAP pop-in ----------------------- */
.stat-item { will-change: transform, opacity; }

/* ---- SVG line-draw utility (how-it's-made connector, dividers, icons) ------- */
.draw-path {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* ---- Card hover motion (layered on top of components.css) ------------------ */
.product-card,
.tile,
.accordion-item {
  transition: transform var(--duration-base) var(--ease-primary),
              box-shadow var(--duration-base) var(--ease-primary);
}
.product-card:hover,
.tile:hover {
  transform: translateY(-0.6rem);
  box-shadow: var(--shadow-md);
}

/* ---- Pairing / how-it's-made step pop-in resting state ---------------------- */
.hm-step,
.pairing-item {
  opacity: 0;
  transform: translateY(4rem) scale(0.94);
}
.hm-step.is-inert,
.pairing-item.is-inert { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-in, .clip-reveal, .stagger-group .stagger-item,
  .img-reveal, .hm-step, .pairing-item {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}