/* ============================================================
   iPlace — HEADER PREMIUM v5
   Cursor spotlight · Scroll compression · Featured mega menu
   ============================================================ */

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.announcement-bar {
  background: #000510;
  color: rgba(255,255,255,.7);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .015em;
  padding: 9px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 201;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.announcement-bar::after {
  content: '';
  position: absolute;
  top: 0; left: -50%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,113,227,.15), rgba(255,255,255,.04), transparent);
  animation: annScan 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes annScan {
  0%   { left: -50%; opacity: 0 }
  8%   { opacity: 1 }
  92%  { opacity: 1 }
  100% { left: 120%; opacity: 0 }
}
.announcement-bar-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.ann-badge {
  background: rgba(0,113,227,.85);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.ann-text { color: rgba(255,255,255,.55) }
.ann-link { color: rgba(255,255,255,.85); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; transition: gap .25s var(--ease-spring), color var(--t-fast) }
.ann-link:hover { color: #fff; gap: 8px }
.ann-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.2); font-size: .85rem; cursor: pointer; transition: color var(--t-fast), transform var(--t) var(--ease-spring); line-height: 1 }
.ann-close:hover { color: rgba(255,255,255,.65); transform: translateY(-50%) rotate(90deg) }

/* ============================================================
   MAIN HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--header-h);
  /* CSS vars for cursor spotlight */
  --mx: -200px;
  --my: 50%;
  transition: height .4s var(--ease), box-shadow .3s var(--ease);
  animation: headerIn .45s var(--ease-out) both;
}
@keyframes headerIn {
  from { transform: translateY(-100%); opacity: 0 }
  to   { transform: none; opacity: 1 }
}

/* Compress header on scroll */
.site-header.scrolled { height: 60px }

/* Layer 1: Main dark glass */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.025) 0%,
      rgba(255,255,255,.0) 100%
    ),
    rgba(7, 7, 16, 0.84);
  backdrop-filter: blur(48px) saturate(180%) brightness(.95);
  -webkit-backdrop-filter: blur(48px) saturate(180%) brightness(.95);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .3s, border-color .3s;
  z-index: -2;
}
.site-header.scrolled::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.0) 100%),
    rgba(4, 4, 12, 0.93);
  border-bottom-color: rgba(255,255,255,.1);
}

/* Layer 2: Cursor spotlight */
.site-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(380px circle at var(--mx) var(--my),
    rgba(0, 113, 227, .09) 0%,
    rgba(94, 92, 230, .04) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
  transition: opacity .4s;
  opacity: 0;
}
.site-header.spotlight-active::after { opacity: 1 }

/* Layer 3: Scrolled shadow */
.site-header.scrolled {
  box-shadow:
    0 1px 0 rgba(255,255,255,.05),
    0 4px 24px rgba(0,0,0,.45),
    0 16px 48px rgba(0,0,0,.22);
}

/* Bottom accent line */
.header-accent-line {
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,113,227,.7) 25%,
    rgba(94,92,230,.7) 55%,
    rgba(0,113,227,.4) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .5s;
  animation: accentSlide 5s linear infinite;
}
.site-header.scrolled .header-accent-line { opacity: 1 }
@keyframes accentSlide {
  0%   { background-position: 0% 0% }
  100% { background-position: 200% 0% }
}

/* Top edge glow */
.header-top-line {
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.06) 20%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.06) 80%,
    transparent 100%
  );
  pointer-events: none;
}

/* Ambient orbs — barely visible depth */
.header-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(50px);
}
.header-orb-1 {
  width: 500px; height: 140px;
  background: radial-gradient(ellipse, rgba(0,113,227,.06), transparent 70%);
  top: 50%; left: 5%;
  transform: translateY(-50%);
  animation: orb1 14s ease-in-out infinite alternate;
}
.header-orb-2 {
  width: 400px; height: 120px;
  background: radial-gradient(ellipse, rgba(94,92,230,.05), transparent 70%);
  top: 50%; right: 5%;
  transform: translateY(-50%);
  animation: orb2 18s ease-in-out infinite alternate;
}
@keyframes orb1 {
  0%   { transform: translateY(-50%) translateX(0) scaleX(1) }
  100% { transform: translateY(-50%) translateX(80px) scaleX(1.2) }
}
@keyframes orb2 {
  0%   { transform: translateY(-50%) translateX(0) }
  100% { transform: translateY(-50%) translateX(-60px) }
}

/* ============================================================
   NAV CONTAINER
   ============================================================ */
.nav-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 44px;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ============================================================
   LOGO
   ============================================================ */
.logo-wrap {
  position: relative;
  flex-shrink: 0;
  margin-right: 48px;
}
.logo {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.07em;
  display: inline-block;
  position: relative;
  background: linear-gradient(125deg,
    #ffffff 0%,
    #b8d0ff 30%,
    #ffffff 50%,
    #c8bcff 75%,
    #ffffff 100%
  );
  background-size: 250% 250%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoShine 10s ease-in-out infinite;
  transition: transform .3s var(--ease-spring), letter-spacing .3s var(--ease);
}
@keyframes logoShine {
  0%,100% { background-position: 0% 50% }
  50%      { background-position: 100% 50% }
}
.site-header.scrolled .logo {
  font-size: 1.5rem;
}
.logo:hover {
  transform: scale(1.04);
  letter-spacing: -.05em;
}
.logo-wrap::after {
  content: '';
  position: absolute;
  inset: -14px -18px;
  border-radius: 16px;
  background: radial-gradient(ellipse, rgba(0,113,227,.14), transparent 70%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.logo-wrap:hover::after { opacity: 1 }

/* ============================================================
   NAV LINKS
   ============================================================ */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
  position: relative;
}

/* Sliding hover pill */
.nav-pill {
  position: absolute;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.09);
  pointer-events: none;
  transition: left .28s var(--ease-spring), width .28s var(--ease-spring), opacity .2s;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  backdrop-filter: blur(4px);
}

/* Stagger in */
.nav-links .nav-item:nth-child(1) { animation: navIn .5s .1s var(--ease-out) both }
.nav-links .nav-item:nth-child(2) { animation: navIn .5s .18s var(--ease-out) both }
.nav-links .nav-item:nth-child(3) { animation: navIn .5s .26s var(--ease-out) both }
@keyframes navIn {
  from { opacity: 0; transform: translateY(-10px) }
  to   { opacity: 1; transform: none }
}

.nav-item { position: relative }

.nav-links a {
  font-size: .875rem;
  color: rgba(255,255,255,.58);
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  letter-spacing: -.01em;
  transition: color .18s var(--ease);
}
.nav-links a:hover { color: rgba(255,255,255,.95) }
.nav-links a.active {
  color: #fff;
  font-weight: 600;
}
/* Active dot */
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #2d84ff;
  box-shadow: 0 0 6px 2px rgba(45,132,255,.6);
  animation: activeDotPulse 2.5s ease-in-out infinite;
}
@keyframes activeDotPulse {
  0%,100% { box-shadow: 0 0 6px 2px rgba(45,132,255,.6) }
  50%      { box-shadow: 0 0 10px 4px rgba(45,132,255,.4) }
}
.nav-arrow {
  font-size: .58rem;
  opacity: .4;
  transition: transform .3s var(--ease-spring), opacity .2s;
  display: inline-block;
}
.nav-item:hover .nav-arrow { transform: rotate(180deg); opacity: .8 }

/* ============================================================
   MEGA MENU — Featured product + grid
   ============================================================ */
.mega-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-12px) scale(.96);
  width: 660px;
  background: rgba(10, 10, 20, 0.98);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 40px 100px rgba(0,0,0,.7),
    0 8px 32px rgba(0,0,0,.5);
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity .2s var(--ease),
    transform .3s var(--ease-spring);
  z-index: 300;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Top accent line */
.mega-menu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,113,227,.5), rgba(94,92,230,.4), transparent);
  z-index: 1;
}
.nav-item:hover .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Inner layout: featured left + grid right */
.mega-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 240px;
}

/* Featured product panel (left) */
.mega-featured {
  background: linear-gradient(160deg, rgba(0,113,227,.12) 0%, rgba(94,92,230,.08) 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
/* Featured panel orb */
.mega-featured::before {
  content: '';
  position: absolute;
  bottom: -30px; left: -20px;
  width: 180px; height: 180px;
  background: radial-gradient(ellipse, rgba(0,113,227,.15), transparent 70%);
  pointer-events: none;
}
.mega-featured-badge {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #2d84ff;
  background: rgba(45,132,255,.12);
  border: 1px solid rgba(45,132,255,.2);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  display: inline-block;
  align-self: flex-start;
}
.mega-featured-icon {
  font-size: 2.4rem;
  line-height: 1;
  margin: 4px 0;
  filter: drop-shadow(0 4px 12px rgba(0,113,227,.3));
  transition: transform .3s var(--ease-spring);
}
.mega-featured:hover .mega-featured-icon { transform: scale(1.08) translateY(-2px) }
.mega-featured-name {
  font-size: .95rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.mega-featured-desc {
  font-size: .74rem;
  color: rgba(255,255,255,.35);
  line-height: 1.5;
}
.mega-featured-btn {
  margin-top: auto;
  font-size: .78rem;
  color: #2d84ff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .25s var(--ease-spring), color .15s;
  text-decoration: none;
}
.mega-featured-btn:hover { gap: 8px; color: #6ab0ff }

/* Links panel (right) */
.mega-links-col {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
}
.mega-label {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  padding: 0 2px 10px;
}
.mega-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  flex: 1;
}
.mega-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .15s, transform .25s var(--ease-spring);
  text-decoration: none;
  position: relative;
}
.mega-link:hover { background: rgba(255,255,255,.06); transform: translateX(3px) }
/* Stagger */
.mega-menu-grid .mega-link:nth-child(1) { animation: megaIn .2s .04s both }
.mega-menu-grid .mega-link:nth-child(2) { animation: megaIn .2s .08s both }
.mega-menu-grid .mega-link:nth-child(3) { animation: megaIn .2s .11s both }
.mega-menu-grid .mega-link:nth-child(4) { animation: megaIn .2s .14s both }
.mega-menu-grid .mega-link:nth-child(5) { animation: megaIn .2s .17s both }
.mega-menu-grid .mega-link:nth-child(6) { animation: megaIn .2s .20s both }
@keyframes megaIn {
  from { opacity: 0; transform: translateY(5px) }
  to   { opacity: 1; transform: none }
}
.mega-link-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: background .2s, transform .3s var(--ease-spring), box-shadow .2s;
}
.mega-link:hover .mega-link-icon {
  background: rgba(0,113,227,.18);
  border-color: rgba(0,113,227,.25);
  box-shadow: 0 0 14px rgba(0,113,227,.2);
  transform: scale(1.1) rotate(-4deg);
}
.mega-link-name { font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.88); letter-spacing: -.01em }
.mega-link-desc { font-size: .71rem; color: rgba(255,255,255,.3); margin-top: 1px }

/* Footer */
.mega-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mega-footer > span { font-size: .76rem; color: rgba(255,255,255,.25) }
.mega-footer-link {
  font-size: .78rem;
  color: rgba(45,132,255,.9);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .25s var(--ease-spring), color .15s;
  text-decoration: none;
}
.mega-footer-link:hover { gap: 9px; color: #6ab0ff }

/* ============================================================
   NAV ACTIONS
   ============================================================ */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  animation: actionsIn .5s .28s var(--ease-out) both;
}
@keyframes actionsIn {
  from { opacity: 0; transform: translateX(14px) }
  to   { opacity: 1; transform: none }
}


/* ---- Cart Button ---- */
.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  padding: 9px 20px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #0071e3 0%, #3c50f0 100%);
  border: 1px solid rgba(255,255,255,.2);
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease), filter .2s;
  position: relative;
  overflow: hidden;
  letter-spacing: -.01em;
  box-shadow:
    0 2px 12px rgba(0,113,227,.35),
    0 1px 0 rgba(255,255,255,.15) inset,
    0 -1px 0 rgba(0,0,0,.2) inset;
}
.cart-shimmer {
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: left .5s var(--ease);
  pointer-events: none;
}
.cart-btn:hover .cart-shimmer { left: 160% }
.cart-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 10px 32px rgba(0,113,227,.55),
    0 4px 12px rgba(0,0,0,.3),
    0 1px 0 rgba(255,255,255,.15) inset;
  filter: brightness(1.08);
}
.cart-btn:active { transform: scale(.97) translateY(0) }
.cart-btn svg {
  width: 16px; height: 16px;
  transition: transform .25s var(--ease-spring);
  stroke: rgba(255,255,255,.9);
  flex-shrink: 0;
}
.cart-btn:hover svg { transform: rotate(-18deg) scale(1.12) }

.cart-count {
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: .67rem;
  font-weight: 800;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
  transition: transform .25s var(--ease-spring);
  backdrop-filter: blur(4px);
}
.cart-btn:hover .cart-count { transform: scale(1.12) }
.cart-count.bump { animation: cartBump .4s var(--ease-spring) }
@keyframes cartBump {
  0%,100% { transform: scale(1) }
  40%     { transform: scale(1.8) rotate(10deg) }
  70%     { transform: scale(.9) }
}
.cart-count.hidden { display: none }

/* ---- Hamburger ---- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s;
}
.hamburger:hover { background: rgba(255,255,255,.08) }
.hamburger span {
  display: block; width: 20px; height: 1.5px;
  background: rgba(255,255,255,.75);
  border-radius: 2px;
  transition: transform .3s var(--ease-spring), opacity .2s, width .2s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0) }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg) }


/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .nav-container { padding: 0 20px }
  .logo { font-size: 1.45rem }
  .logo-wrap { margin-right: 0 }
  .nav-links {
    display: none; position: fixed;
    top: var(--header-h); left: 0; right: 0;
    background: rgba(8,8,18,.97);
    backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
    flex-direction: column; align-items: stretch;
    padding: 12px 16px 32px; gap: 2px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 28px 64px rgba(0,0,0,.6);
    z-index: 199;
  }
  .nav-links.open { display: flex; animation: mobileDown .3s var(--ease-out) }
  @keyframes mobileDown {
    from { opacity: 0; transform: translateY(-12px) }
    to   { opacity: 1; transform: none }
  }
  .nav-links a { padding: 14px 16px; font-size: .95rem; color: rgba(255,255,255,.72) }
  .mega-menu { display: none !important }
  .hamburger { display: flex }
  .ann-close { display: none }
  .cart-btn { padding: 8px 14px; font-size: .82rem; gap: 6px }
  .nav-pill { display: none }
}
@media (max-width: 480px) {
  :root { --header-h: 60px }
  .logo { font-size: 1.3rem }
}