/* ==========================================================================
   Gamevers Header — Sticky States, Icons & Glass
   Source: snippets mirrored from style.css
   NOTE: This file is organizational only; the live CSS currently remains
   in style.css to avoid breaking existing enqueues.
   ========================================================================== */

/* 09. Sticky Header Scroll States
   - .gv-mg-header default vs .is-scrolled
   - glass effect, height, menu swap logic
   -------------------------------------------------------------------------- */

/* Base transitions (safe version) */
.gv-mg-header .gv-mg-menu-heder,
.gv-mg-header .gv-carts-bar {
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

/* Apply will-change ONLY when scrolling (temporary) */
.gv-mg-header.is-scrolled .gv-mg-menu-heder,
.gv-mg-header.is-scrolled .gv-carts-bar {
  will-change: opacity, transform;
}

/* Top elements visible */
.gv-mg-header .gv-mg-menu-heder,
.gv-mg-header .gv-carts-bar {
  opacity: 1;
  transform: translateY(0);
}

/* Header default glass (darker / blacker, no backdrop-filter) */
.gv-mg-header {
  background:
    linear-gradient(to bottom,
      rgba(3, 1, 21, 0.5),
      rgba(3, 1, 21, 0.1)),
    rgba(10, 12, 18, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 32px rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 6.5em;
  transition: min-height 0.3s ease;
}

/* Scrolled state — hide top, show bottom */
.gv-mg-header.is-scrolled .gv-mg-menu-heder,
.gv-mg-header.is-scrolled .gv-carts-bar {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transform: translateY(-6px);
}

/* Header height control */
.gv-mg-header.is-scrolled {
  min-height: 80px;
}

/* Sticky header glass effect (clean in / instant out) */
.gv-mg-header.is-scrolled {
  backdrop-filter: blur(16px) saturate(100%);
  -webkit-backdrop-filter: blur(16px) saturate(100%);
  background-color: rgba(17, 25, 40, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease 0.12s;
}

/* --------------------------------------------------------------------------
   10. Header Icons & Logo
   - user glow icon
   - animated gradient logo text
   -------------------------------------------------------------------------- */

/* Icon Glow Effects */
.gv-header-user-icon {
  --glow-color: #00DDFF;
  position: relative;
}

.gv-header-user-icon:hover::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  background: var(--glow-color);
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.3;
  z-index: -1;
  transition: opacity 0.3s ease;
}

/* Gamevers logo text header (gradient animation) */
.gradient-text {
  display: inline-block;
  background: linear-gradient(to right,
      #22d3ee,
      #c084fc,
      #f472b6,
      #22d3ee,
      #c084fc,
      #f472b6);
  background-size: 320% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientMove 60s linear infinite;
  font-weight: 900;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}