/* ================================================================
   FROBELLA EXPORT — ANIMATIONS STYLESHEET (animations.css)
   Load order: variables.css -> style.css -> animations.css -> responsive.css

   Contains: scroll-reveal system (paired with animations.js),
   keyframes, hover micro-interactions, scroll progress bar,
   loading states, and back-to-top transition.

   All animations respect prefers-reduced-motion (see bottom).
================================================================ */

/* ----------------------------------------------------------------
   1. SCROLL PROGRESS BAR
   Height is filled via JS (main.js) based on scroll position.
---------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-amber), var(--color-berry));
  z-index: 400;
  transition: width 80ms linear;
}

/* ----------------------------------------------------------------
   2. REVEAL-ON-SCROLL SYSTEM
   Elements start hidden via [data-animate]; animations.js toggles
   the `.in-view` class using IntersectionObserver. The animation
   TYPE is chosen via the data-animate attribute value.
---------------------------------------------------------------- */
[data-animate] {
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-animate="fade-up"]   { transform: translateY(28px); }
[data-animate="fade-in"]   { transform: translateY(0); }
[data-animate="fade-left"] { transform: translateX(-32px); }
[data-animate="fade-right"]{ transform: translateX(32px); }
[data-animate="zoom-in"]   { transform: scale(0.94); }

[data-animate].in-view {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger children automatically inside grids marked as groups */
.product-grid [data-animate],
.cert-grid [data-animate],
.news-grid [data-animate],
.market-grid [data-animate],
.gallery-grid [data-animate] {
  transition-delay: var(--reveal-delay, 0ms);
}

/* ----------------------------------------------------------------
   3. HERO REVEAL (entrance on page load, not scroll-triggered)
---------------------------------------------------------------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: scale(1); }
}
.hero__content { animation: heroFadeUp 900ms var(--ease-standard) both; }
.hero__visual   { animation: heroFadeIn 1100ms var(--ease-standard) 150ms both; }

/* Slow ambient zoom on the hero illustration (subtle "Ken Burns" feel) */
@keyframes ambientZoom {
  0%   { transform: scale(1); }
  100% { transform: scale(1.05); }
}
.crate-illustration {
  animation: ambientZoom 14s ease-in-out infinite alternate;
}

/* ----------------------------------------------------------------
   4. PARALLAX (lightweight, transform driven by main.js scroll listener)
   The element's translateY is set inline via CSS custom property
   `--parallax-y`, updated in JS using requestAnimationFrame.
---------------------------------------------------------------- */
[data-parallax] {
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}

/* ----------------------------------------------------------------
   5. NAVBAR SCROLLED STATE
---------------------------------------------------------------- */
.site-header {
  transition: box-shadow var(--transition-med), border-color var(--transition-med);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-s);
  border-bottom-color: var(--color-line);
}
.site-header.is-scrolled .site-header__inner { padding: 12px 24px; }

/* ----------------------------------------------------------------
   6. BURGER ICON MORPH (to X when menu open)
---------------------------------------------------------------- */
.burger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ----------------------------------------------------------------
   7. CARD / IMAGE HOVER MICRO-INTERACTIONS
---------------------------------------------------------------- */
.product-card, .news-card, .cert-card, .market-row {
  transition: transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-med);
}

.gallery-item div,
.gallery-item {
  transition: transform var(--transition-slow);
}
.gallery-item:hover {
  transform: scale(1.015);
}

/* Button press feedback (complements .btn:active in style.css) */
.btn { transform-origin: center; }

/* Link underline sweep (reusable utility class) */
.link-sweep {
  position: relative;
  display: inline-block;
}
.link-sweep::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--transition-med);
}
.link-sweep:hover::after { width: 100%; }

/* ----------------------------------------------------------------
   8. COUNTER PULSE (subtle emphasis once counting completes)
---------------------------------------------------------------- */
@keyframes counterSettle {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.stat__number.is-complete {
  animation: counterSettle 400ms var(--ease-standard);
}

/* ----------------------------------------------------------------
   9. TESTIMONIAL SLIDE TRANSITION
   (slider.js toggles scrollLeft; smooth handled natively via
   scroll-behavior, this adds a subtle fade on active card)
---------------------------------------------------------------- */
.testi-track { scroll-behavior: smooth; }
.testi-card { transition: opacity var(--transition-med); }

/* ----------------------------------------------------------------
   10. FAQ ACCORDION EXPAND
   (max-height transition lives in style.css; here we add the
   content fade-in once opened)
---------------------------------------------------------------- */
@keyframes faqContentFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.faq-item.is-open .faq-answer p {
  animation: faqContentFade 350ms var(--ease-standard) 100ms both;
}

/* ----------------------------------------------------------------
   11. LOADING / SKELETON STATES
---------------------------------------------------------------- */
@keyframes skeletonShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--color-sage-200) 0%, var(--color-paper-2) 50%, var(--color-sage-200) 100%);
  background-size: 800px 100%;
  animation: skeletonShimmer 1.6s linear infinite;
  border-radius: var(--radius-m);
}

/* Button loading spinner (used by contact.js during submit) */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
  position: relative;
  color: transparent !important;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  top: 50%; left: 50%;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.btn--outline.is-loading::after {
  border-color: rgba(31,61,46,0.3);
  border-top-color: var(--color-green-800);
}

/* ----------------------------------------------------------------
   12. PAGE ENTRANCE (whole-document fade, avoids flash of
   unstyled content when fonts/images settle)
---------------------------------------------------------------- */
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: pageEnter 400ms var(--ease-standard) both; }

/* ----------------------------------------------------------------
   13. TOAST / FORM FEEDBACK POP-IN
---------------------------------------------------------------- */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.form-success-msg.is-visible,
.form-error-msg.is-visible {
  animation: toastIn 250ms var(--ease-standard) both;
}

/* ----------------------------------------------------------------
   14. LIGHTBOX TRANSITION
---------------------------------------------------------------- */
.lightbox {
  opacity: 0;
  transition: opacity var(--transition-med);
}
.lightbox.is-open { opacity: 1; }
@keyframes lightboxZoom {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.lightbox.is-open .lightbox__frame {
  animation: lightboxZoom 300ms var(--ease-standard) both;
}

/* ----------------------------------------------------------------
   15. ACCESSIBILITY: prefers-reduced-motion
   Disables/shortens all decorative motion for users who request it.
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }

  .crate-illustration { animation: none; }
  body { animation: none; }
}