/* ============================================================
   BLOCX Ventilation - Animation Stylesheet
   Motion design for scroll reveals, hero effects, and UI transitions
   ============================================================ */


/* ------------------------------------------------------------
   1. Scroll Reveal
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Directional variants */
.reveal--left {
  transform: translateX(-40px) translateY(0);
}

.reveal--left.active {
  transform: translateX(0) translateY(0);
}

.reveal--right {
  transform: translateX(40px) translateY(0);
}

.reveal--right.active {
  transform: translateX(0) translateY(0);
}

.reveal--scale {
  transform: scale(0.92);
}

.reveal--scale.active {
  transform: scale(1);
}


/* ------------------------------------------------------------
   2. Stagger Animations
   ------------------------------------------------------------ */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }


/* ------------------------------------------------------------
   3. Hero Particles
   ------------------------------------------------------------ */
.hero__particle {
  position: absolute;
  width: var(--particle-size, 4px);
  height: var(--particle-size, 4px);
  background: rgba(255, 255, 255, var(--particle-opacity, 0.3));
  border-radius: 50%;
  animation: particle-float var(--particle-duration, 8s) var(--particle-delay, 0s) infinite ease-in-out;
  will-change: transform, opacity;
}

@keyframes particle-float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: var(--particle-opacity, 0.3);
  }
  50% {
    transform: translateY(calc(var(--particle-drift, -120px) * 0.5)) translateX(var(--particle-sway, 30px));
  }
  90% {
    opacity: var(--particle-opacity, 0.3);
  }
  100% {
    transform: translateY(var(--particle-drift, -120px)) translateX(calc(var(--particle-sway, 30px) * -0.5));
    opacity: 0;
  }
}


/* ------------------------------------------------------------
   4. Hero Leaves
   ------------------------------------------------------------ */
.hero__leaf {
  position: absolute;
  width: var(--leaf-size, 12px);
  height: var(--leaf-size, 12px);
  background: rgba(13, 155, 122, var(--leaf-opacity, 0.2));
  border-radius: 0 50% 50% 50%;
  animation: leaf-fall var(--leaf-duration, 12s) var(--leaf-delay, 0s) infinite ease-in-out;
  will-change: transform, opacity;
}

@keyframes leaf-fall {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0;
  }
  10% {
    opacity: var(--leaf-opacity, 0.2);
  }
  25% {
    transform: translate(40px, 25vh) rotate(90deg) scale(0.9);
  }
  50% {
    transform: translate(-20px, 50vh) rotate(180deg) scale(0.85);
  }
  75% {
    transform: translate(30px, 75vh) rotate(270deg) scale(0.7);
  }
  90% {
    opacity: var(--leaf-opacity, 0.2);
  }
  100% {
    transform: translate(10px, 100vh) rotate(360deg) scale(0.6);
    opacity: 0;
  }
}


/* ------------------------------------------------------------
   5. Hero Airflow (SVG dash animation)
   ------------------------------------------------------------ */
.airflow-path {
  stroke-dasharray: 12 8;
  animation: airflow-line 1.5s linear infinite;
  will-change: stroke-dashoffset;
}

@keyframes airflow-line {
  0% {
    stroke-dashoffset: 40;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.airflow-path--reverse {
  animation-direction: reverse;
}

.airflow-path--slow {
  animation-duration: 2.5s;
}


/* ------------------------------------------------------------
   5b. Hero Text Entrance (driven by landing.js .visible class)
   ------------------------------------------------------------ */
.hero__title,
.hero__subtitle,
.hero__cta,
.hero__scroll-indicator {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero__title.visible,
.hero__subtitle.visible,
.hero__cta.visible,
.hero__scroll-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ------------------------------------------------------------
   6. Scroll Indicator Bounce
   ------------------------------------------------------------ */
.hero__scroll-icon {
  animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(8px);
  }
  60% {
    transform: translateY(4px);
  }
}


/* ------------------------------------------------------------
   7. Card Hover Lift
   ------------------------------------------------------------ */
.card-hover {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}


/* ------------------------------------------------------------
   8. Counter / Number Animation
   ------------------------------------------------------------ */
.counter {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.counter.active {
  opacity: 1;
  transform: translateY(0);
}

.counter__value {
  display: inline-block;
  transition: opacity 0.2s ease;
}


/* ------------------------------------------------------------
   9. Header Shrink Transition
   ------------------------------------------------------------ */
.header {
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.header__logo,
.header__nav-link {
  transition: color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ------------------------------------------------------------
   10. Modal Enter / Exit
   ------------------------------------------------------------ */
.modal-overlay {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease;
}

.modal-overlay:not(.active) .modal {
  transform: scale(0.92) translateY(30px);
  opacity: 0;
}

.modal-overlay.active .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}


/* ------------------------------------------------------------
   11. Tab Filter (Product card filtering)
   ------------------------------------------------------------ */
.product-card {
  transition: opacity 0.4s ease,
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s ease;
}

.product-card.filtering-out {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
}

.product-card.filtering-in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.product-card.hidden {
  display: none;
}


/* ------------------------------------------------------------
   12. Typewriter Effect (CSS-only)
   ------------------------------------------------------------ */
.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  width: 0;
  animation:
    typewriter-expand 2.5s steps(30) 0.5s forwards,
    typewriter-blink 0.7s step-end infinite;
}

@keyframes typewriter-expand {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes typewriter-blink {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.75);
  }
  50% {
    border-color: transparent;
  }
}

/* Remove cursor after typing finishes */
.typewriter--done {
  border-right-color: transparent;
  animation: none;
  width: 100%;
}


/* ------------------------------------------------------------
   13. Pulse Effect for CTA Buttons
   ------------------------------------------------------------ */
.btn--pulse {
  position: relative;
}

.btn--pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--color-teal);
  opacity: 0;
  z-index: -1;
  animation: pulse-ring 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.25;
  }
  50% {
    transform: scale(1.08);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}


/* ------------------------------------------------------------
   14. Mountain Parallax Layers
   Driven by --scroll-progress CSS custom property (0 to 1),
   set via JavaScript on scroll.
   ------------------------------------------------------------ */
.hero__mountain--back {
  transform: translateY(calc(var(--scroll-progress, 0) * 30px));
  transition: transform 0.1s linear;
  will-change: transform;
}

.hero__mountain--mid {
  transform: translateY(calc(var(--scroll-progress, 0) * 60px));
  transition: transform 0.1s linear;
  will-change: transform;
}

.hero__mountain--front {
  transform: translateY(calc(var(--scroll-progress, 0) * 100px));
  transition: transform 0.1s linear;
  will-change: transform;
}


/* ------------------------------------------------------------
   15. Nature Elements: Swaying Trees
   ------------------------------------------------------------ */
.hero__tree {
  transform-origin: bottom center;
  animation: tree-sway var(--tree-sway-duration, 6s) var(--tree-sway-delay, 0s) infinite ease-in-out;
  will-change: transform;
}

@keyframes tree-sway {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  75% {
    transform: rotate(-1.5deg);
  }
}

.hero__tree--1 { --tree-sway-duration: 5s; --tree-sway-delay: 0s; }
.hero__tree--2 { --tree-sway-duration: 6.5s; --tree-sway-delay: 0.5s; }
.hero__tree--3 { --tree-sway-duration: 5.5s; --tree-sway-delay: 1s; }
.hero__tree--4 { --tree-sway-duration: 7s; --tree-sway-delay: 0.3s; }
.hero__tree--5 { --tree-sway-duration: 6s; --tree-sway-delay: 0.8s; }
.hero__tree--6 { --tree-sway-duration: 5.2s; --tree-sway-delay: 1.2s; }


/* ------------------------------------------------------------
   16. Nature Elements: Floating Clouds
   ------------------------------------------------------------ */
.hero__cloud {
  position: absolute;
  z-index: 3;
  opacity: var(--cloud-opacity, 0.08);
  animation: cloud-drift var(--cloud-duration, 40s) var(--cloud-delay, 0s) infinite linear;
  will-change: transform;
}

.hero__cloud::before {
  content: '';
  display: block;
  width: var(--cloud-width, 120px);
  height: calc(var(--cloud-width, 120px) * 0.35);
  background: white;
  border-radius: 100px;
  position: relative;
}

.hero__cloud::after {
  content: '';
  position: absolute;
  bottom: 40%;
  left: 25%;
  width: calc(var(--cloud-width, 120px) * 0.5);
  height: calc(var(--cloud-width, 120px) * 0.35);
  background: white;
  border-radius: 50%;
}

@keyframes cloud-drift {
  0% {
    transform: translateX(-200px);
  }
  100% {
    transform: translateX(calc(100vw + 200px));
  }
}


/* ------------------------------------------------------------
   17. Mobile Menu Link Stagger
   ------------------------------------------------------------ */
.mobile-menu.active .mobile-menu__link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.active .mobile-menu__link:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.active .mobile-menu__link:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.active .mobile-menu__link:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu.active .mobile-menu__link:nth-child(5) { transition-delay: 0.3s; }
.mobile-menu.active .mobile-menu__link:nth-child(6) { transition-delay: 0.35s; }


/* ------------------------------------------------------------
   18. Loading Skeleton (utility)
   ------------------------------------------------------------ */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-gray-100) 25%,
    var(--color-gray-200) 50%,
    var(--color-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}


/* ------------------------------------------------------------
   19. Reduced Motion (Accessibility)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__particle,
  .hero__leaf,
  .hero__cloud {
    display: none;
  }
}