/**
 * Bella Nova NY, Animations
 * All @keyframes and animation/transition definitions found in real-index.css
 * (6 @keyframes total, confirmed by the team lead's extraction), plus the one
 * scroll-reveal animation that lives in JS (framer-motion) rather than CSS,
 * documented here with a drop-in CSS-only equivalent for the WP/Elementor build.
 */

/* ==================================================================
   1. PULSE, loading/skeleton state (DutchieEmbed.jsx uses animate-pulse
      while the Dutchie menu iframe is loading)
   ================================================================== */
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==================================================================
   2 & 3. ENTER / EXIT, generic Radix UI primitive enter/exit animation
   base (used by dropdowns, popovers, selects, dialogs, etc. built on
   Radix primitives; combined with modifier classes like fade-in-0,
   zoom-in-95, slide-in-from-* that were present but not otherwise
   customized from Radix/shadcn defaults)
   ================================================================== */
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
      scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
      rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
      scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
      rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

/* ==================================================================
   4. MARQUEE-SCROLL, the slow editorial ticker under the hero
      (SiteMarquee.jsx). Pure CSS, linear, infinite, 60s, pauses on
      hover, disabled entirely under prefers-reduced-motion.
   ================================================================== */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 60s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-row {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
}

/* ==================================================================
   5 & 6. ACCORDION-UP / ACCORDION-DOWN (Radix accordion, used on the
   FAQ page and any other <Accordion> instance). Heights are read
   from the Radix-injected --radix-accordion-content-height var.
   ================================================================== */
@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}

/* ==================================================================
   GRAIN / NOISE OVERLAY, a fixed full-viewport texture layer, applied
   site-wide via body::after. The url() in real-index.css points at a
   webpack loader placeholder; the resolved asset is a self-contained
   inline SVG feTurbulence noise filter (captured from the original
   src__index.css module wrapper). Reproduced in full here since it's
   a real visual element the WP build needs, not a design token.
   ================================================================== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* ==================================================================
   SMOOTH SCROLL, Lenis library integration hooks present in the CSS.
   Flagged in README.md: this means the reference site uses the Lenis
   JS smooth-scroll library site-wide, not native scroll-behavior.
   ================================================================== */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* ==================================================================
   TRANSITION UTILITIES, the transition-property/timing/duration
   combinations actually used (all share Tailwind's default ease,
   cubic-bezier(0.4, 0, 0.2, 1), only the duration and property list
   vary)
   ================================================================== */
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms; /* overridden to 300ms via .duration-300 on nav links, CTA buttons, footer links */
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ==================================================================
   SCROLL REVEAL, NOT present in the CSS bundle. This lives entirely
   in JS via framer-motion in src/components/Reveal.jsx, and wraps
   most section-level content across every page. Exact spec, read
   directly from the component source:

     initial:     { opacity: 0, y: 30 }       (y is a prop, default 30)
     whileInView: { opacity: 1, y: 0 }
     viewport:    { once: true, margin: "-80px" }
     transition:  { duration: 0.8, ease: [0.22, 1, 0.36, 1], delay }

   framer-motion's cubic-bezier [0.22, 1, 0.36, 1] is the same curve
   as CSS cubic-bezier(0.22, 1, 0.36, 1) (an "ease-out-expo"-style
   curve), so it ports directly. The block below is a CSS-only
   drop-in equivalent for the WP/Elementor build, since Elementor
   has no framer-motion. Toggle the .is-visible class via a small
   IntersectionObserver (rootMargin: "-80px 0px", threshold: 0,
   once: true, matching the viewport.margin/once above) or via
   Elementor's native "Motion Effects > Entrance Animation" if a
   close-enough built-in match is acceptable instead.
   ================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}