/* ============================================================
   PADEL NEEDS — LUXURIOUS HEADER ANIMATIONS
   Smooth, flowing, premium micro-interactions
   ============================================================ */

/* --- DESIGN TOKENS ----------------------------------------- */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-smooth: 350ms;
  --duration-quick: 200ms;
  --duration-entrance: 500ms;
}

/* ============================================================
   1. NAVIGATION LINKS — Underline Sweep from Center
   ============================================================ */
@media screen and (min-width: 1150px) {
  .header__link-list a,
  .header__link-list summary {
    position: relative;
  }

  .header__link-list a::after,
  .header__link-list summary::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width var(--duration-smooth) var(--ease-out-quart),
                left var(--duration-smooth) var(--ease-out-quart);
    opacity: 0.6;
    pointer-events: none;
  }

  .header__link-list a:hover::after,
  .header__link-list summary:hover::after,
  .header__link-list details[open] > summary::after {
    width: 100%;
    left: 0;
  }
}

/* ============================================================
   2. MEGA MENU DROPDOWN — Luxurious Reveal
   ============================================================ */

/* Override the default abrupt toggle with a smooth entrance */
.mega-menu {
  transition: opacity var(--duration-entrance) var(--ease-out-quart),
              transform var(--duration-entrance) var(--ease-out-quart);
  transform: translateY(-12px);
}

details[open] > .mega-menu {
  opacity: 1;
  transform: translateY(0);
}

/* The Impact theme's internal mega-menu content panel */
.js .mega-menu__content {
  transition: opacity var(--duration-entrance) var(--ease-out-quart),
              transform var(--duration-entrance) var(--ease-out-quart);
}

/* ============================================================
   3. STAGGERED CASCADE — Columns Reveal One by One
   ============================================================ */
@media screen and (min-width: 1150px) {
  .mega-menu__nav > li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--duration-entrance) var(--ease-out-quart),
                transform var(--duration-entrance) var(--ease-out-quart);
  }

  /* Stagger each column with 60ms delay */
  details[open] .mega-menu__nav > li:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
  details[open] .mega-menu__nav > li:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 140ms; }
  details[open] .mega-menu__nav > li:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
  details[open] .mega-menu__nav > li:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 260ms; }
  details[open] .mega-menu__nav > li:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
  details[open] .mega-menu__nav > li:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 380ms; }
  details[open] .mega-menu__nav > li:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 440ms; }
  details[open] .mega-menu__nav > li:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 500ms; }
}

/* ============================================================
   4. SUB-LINK MICRO-INTERACTIONS — Slide + Glow
   ============================================================ */
.mega-menu__nav a,
.mega-menu__nav .link-faded,
.mega-menu__nav .reversed-link {
  transition: transform var(--duration-quick) var(--ease-out-quart),
              opacity var(--duration-quick) var(--ease-out-quart);
}

/* Slide inward on hover (direction-aware via margin-inline) */
@media screen and (min-width: 1150px) {
  .mega-menu__nav li li a:hover,
  .mega-menu__nav .link-faded:hover {
    transform: translateX(4px);
    opacity: 1 !important;
  }

  /* RTL: slide the other way */
  :is(:lang(ar), :lang(he), :lang(fa), :lang(ur)) .mega-menu__nav li li a:hover,
  :is(:lang(ar), :lang(he), :lang(fa), :lang(ur)) .mega-menu__nav .link-faded:hover {
    transform: translateX(-4px);
  }
}

/* ============================================================
   5. HEADER ICONS — Refined Spring Scale
   ============================================================ */
.header__icon-list .tap-area,
.header__icon-list > li > a {
  transition: transform var(--duration-smooth) var(--ease-out-quart);
  will-change: transform;
}

@media screen and (pointer: fine) {
  .header__icon-list .tap-area:hover,
  .header__icon-list > li > a:hover {
    transform: scale(1.12);
  }

  .header__icon-list .tap-area:active,
  .header__icon-list > li > a:active {
    transform: scale(0.95);
    transition-duration: 100ms;
  }
}

/* Cart count bubble — subtle pulse on hover */
.count-bubble {
  transition: transform var(--duration-smooth) var(--ease-out-quart),
              background-color var(--duration-smooth) var(--ease-out-quart);
}

@media screen and (pointer: fine) {
  .header__icon-list > li > a:hover .count-bubble {
    transform: scale(1.15);
  }
}

/* ============================================================
   6. LOGO — Luxurious Hover Glow & Gentle Scale
   ============================================================ */
.header__logo {
  transition: transform var(--duration-smooth) var(--ease-out-quart),
              filter var(--duration-smooth) var(--ease-out-quart);
  will-change: transform, filter;
}

.header__logo-image {
  transition: transform var(--duration-smooth) var(--ease-out-quart),
              filter var(--duration-smooth) var(--ease-out-quart),
              opacity .25s;
}

@media screen and (pointer: fine) {
  .header__logo:hover {
    transform: scale(1.04);
  }

  .header__logo:hover .header__logo-image {
    filter: drop-shadow(0 0 6px rgba(240, 196, 23, 0.35))
            drop-shadow(0 0 20px rgba(240, 196, 23, 0.12));
  }
}

/* ============================================================
   7. STICKY HEADER — Smooth Glass Morphing
   ============================================================ */
.header {
  transition: box-shadow var(--duration-smooth) var(--ease-out-quart),
              backdrop-filter var(--duration-smooth) var(--ease-out-quart),
              -webkit-backdrop-filter var(--duration-smooth) var(--ease-out-quart),
              background var(--duration-smooth) var(--ease-out-quart),
              color .25s;
}

/* ============================================================
   8. DROPDOWN MENUS (non-mega) — Refined Fade-Slide
   ============================================================ */
.dropdown-menu {
  transition: opacity var(--duration-smooth) var(--ease-out-quart),
              transform var(--duration-smooth) var(--ease-out-quart);
  transform: translateY(-8px);
}

details[open] > .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   9. CHEVRON ROTATION — Smooth Caret Flip
   ============================================================ */
.header__link-list summary .icon-chevron-bottom,
.header__link-list summary [class*="icon-chevron"] {
  transition: transform var(--duration-smooth) var(--ease-out-quart);
}

details[open] > summary .icon-chevron-bottom,
details[open] > summary [class*="icon-chevron"] {
  transform: rotate(180deg);
}

/* ============================================================
   10. ACCESSIBILITY — prefers-reduced-motion
   ============================================================ */
@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;
  }
}