/* ==========================================================================
   HEFRO SPORTS — ADVANCED MOTION & ANIMATION ENGINE
   High-performance GPU-accelerated CSS3 animations & progressive reveal
   ========================================================================== */

:root {
  --hf-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hf-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hf-duration: 680ms;
  --hf-distance: 28px;
}

html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   1. PROGRESSIVE ENHANCEMENT FALLBACK
   If JS fails or is disabled, NO ELEMENT IS HIDDEN (100% visible by default).
   Initial hidden state applies ONLY when html has .hf-motion-ready!
   ========================================================================== */
html:not(.hf-motion-ready) [data-reveal],
html:not(.hf-motion-ready) [data-hf-motion] {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* ==========================================================================
   2. SCROLL-TRIGGERED REVEAL STATES (Active when hf-motion-ready is set)
   ========================================================================== */
html.hf-motion-ready [data-reveal]:not(.in):not(.hf-visible),
html.hf-motion-ready [data-hf-motion]:not(.in):not(.hf-visible) {
  opacity: 0;
  transform: translate3d(0, var(--hf-distance), 0);
  will-change: opacity, transform;
}

/* Directional variants for data-reveal and data-hf-motion */
html.hf-motion-ready [data-reveal="up"]:not(.in):not(.hf-visible),
html.hf-motion-ready [data-hf-motion="up"]:not(.in):not(.hf-visible) {
  transform: translate3d(0, 32px, 0);
}
html.hf-motion-ready [data-reveal="down"]:not(.in):not(.hf-visible),
html.hf-motion-ready [data-hf-motion="down"]:not(.in):not(.hf-visible) {
  transform: translate3d(0, -32px, 0);
}
html.hf-motion-ready [data-reveal="left"]:not(.in):not(.hf-visible),
html.hf-motion-ready [data-hf-motion="left"]:not(.in):not(.hf-visible) {
  transform: translate3d(-38px, 0, 0);
}
html.hf-motion-ready [data-reveal="right"]:not(.in):not(.hf-visible),
html.hf-motion-ready [data-hf-motion="right"]:not(.in):not(.hf-visible) {
  transform: translate3d(38px, 0, 0);
}
html.hf-motion-ready [data-reveal="scale"]:not(.in):not(.hf-visible),
html.hf-motion-ready [data-hf-motion="scale"]:not(.in):not(.hf-visible) {
  transform: scale(0.95) translate3d(0, 16px, 0);
}

/* Transition settings */
html.hf-motion-ready [data-reveal],
html.hf-motion-ready [data-hf-motion] {
  transition: opacity var(--hf-duration) var(--hf-ease),
              transform var(--hf-duration) var(--hf-ease);
  transition-delay: var(--hf-delay, 0ms);
}

/* Visible revealed state (supports both .in and .hf-visible) */
html.hf-motion-ready [data-reveal].in,
html.hf-motion-ready [data-reveal].hf-visible,
html.hf-motion-ready [data-hf-motion].in,
html.hf-motion-ready [data-hf-motion].hf-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* ==========================================================================
   3. PROFESSIONAL HOVER CARD LIFT & IMAGE ZOOM
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  /* Card Lift */
  .cat-card,
  .sport-card,
  .product-card,
  .tech-card,
  .review-card,
  .vision-box,
  .step,
  .price-card,
  .metric-card,
  .tablecard {
    transition: transform 0.32s var(--hf-ease),
                box-shadow 0.32s var(--hf-ease),
                border-color 0.28s ease !important;
  }

  .cat-card:hover,
  .sport-card:hover,
  .product-card:hover,
  .tech-card:hover,
  .review-card:hover,
  .vision-box:hover,
  .metric-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(11, 12, 22, 0.12), 0 4px 12px rgba(229, 57, 35, 0.06) !important;
  }

  /* Image Smooth Zoom */
  .cat-card-media img,
  .sport-card img,
  .product-card img,
  .visual-frame img,
  .hero-slider img,
  .featured-card img {
    transition: transform 0.55s var(--hf-ease) !important;
  }

  .cat-card:hover .cat-card-media img,
  .sport-card:hover img,
  .product-card:hover img,
  .featured-card:hover img {
    transform: scale(1.045) !important;
  }

  /* Button Hover Transformations */
  .btn,
  .btn-primary,
  .btn-outline,
  .quote-btn,
  .nav-cta {
    transition: transform 0.25s var(--hf-ease),
                box-shadow 0.25s var(--hf-ease),
                background-color 0.25s ease,
                border-color 0.25s ease !important;
  }

  .btn:hover,
  .btn-primary:hover,
  .quote-btn:hover,
  .nav-cta:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(229, 57, 35, 0.35) !important;
  }
}

/* ==========================================================================
   4. WORKING-PROCESS TIMELINE ANIMATION (Section 6 & .steps)
   ========================================================================== */
.steps {
  position: relative;
}

.step {
  position: relative;
  overflow: hidden;
}

.step::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: #E53923;
  transition: height 0.6s var(--hf-ease);
}

.step.in::after,
.step.hf-visible::after {
  height: 100%;
}

.step b {
  display: inline-block;
  transition: transform 0.35s var(--hf-ease), color 0.3s ease;
}

.step:hover b {
  transform: scale(1.15) translateX(2px);
  color: #E53923;
}

/* ==========================================================================
   5. MANUFACTURING & WORKFLOW SUBTLE FLOATING MOTION
   ========================================================================== */
@keyframes hefroFloatSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.visual .chip-1 {
  animation: hefroFloatSubtle 4.2s ease-in-out infinite;
}

.visual .chip-2 {
  animation: hefroFloatSubtle 4.8s ease-in-out 1.5s infinite;
}

/* ==========================================================================
   6. HEADER & MOBILE MENU ANIMATIONS
   ========================================================================== */
.header {
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.header.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}

.drawer {
  transition: transform 0.36s var(--hf-ease), visibility 0.36s;
}

.drawer.open {
  transform: translateX(0) !important;
}

.header .menu a {
  position: relative;
}

.header .menu a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #E53923;
  transition: width 0.25s var(--hf-ease);
}

.header .menu a:hover::after,
.header .menu a.active::after {
  width: 100%;
}

/* ==========================================================================
   7. REDUCED MOTION PREFERENCE (ACCESSIBILITY)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  html.hf-motion-ready [data-reveal],
  html.hf-motion-ready [data-hf-motion],
  .cat-card,
  .sport-card,
  .product-card,
  .tech-card,
  .review-card,
  .vision-box,
  .step,
  .price-card,
  .btn,
  .visual .chip-1,
  .visual .chip-2 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}