/**
 * Fundo ambiente animado — loja Fonte das Lupas (CSS only, leve)
 */

body.store-page {
  background: #050505;
}

.store-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 55% at 50% -5%, rgba(59, 127, 255, 0.09), transparent 55%),
    radial-gradient(ellipse 70% 45% at 100% 50%, rgba(40, 90, 200, 0.06), transparent 50%),
    #050505;
}

.store-ambient__mesh {
  position: absolute;
  inset: -20%;
  opacity: 0.9;
}

.store-ambient__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}

.store-ambient__blob--1 {
  width: min(70vmax, 42rem);
  height: min(70vmax, 42rem);
  left: -18%;
  top: 8%;
  background: rgba(59, 127, 255, 0.14);
  animation: storeAmbientDriftA 26s ease-in-out infinite;
}

.store-ambient__blob--2 {
  width: min(55vmax, 34rem);
  height: min(55vmax, 34rem);
  right: -12%;
  top: 38%;
  background: rgba(72, 130, 255, 0.1);
  animation: storeAmbientDriftB 32s ease-in-out infinite;
}

.store-ambient__blob--3 {
  width: min(50vmax, 30rem);
  height: min(50vmax, 30rem);
  left: 28%;
  bottom: -22%;
  background: rgba(35, 75, 160, 0.12);
  animation: storeAmbientDriftC 28s ease-in-out infinite;
}

.store-ambient__grid {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(59, 127, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 127, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 65% at 50% 35%, #000 15%, transparent 72%);
  animation: storeAmbientGrid 90s linear infinite;
}

.store-ambient__lines {
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 210deg at 50% 50%,
    transparent 0deg,
    rgba(59, 127, 255, 0.03) 40deg,
    transparent 80deg,
    rgba(120, 180, 255, 0.025) 140deg,
    transparent 200deg,
    rgba(59, 127, 255, 0.02) 280deg,
    transparent 360deg
  );
  animation: storeAmbientSpin 120s linear infinite;
  opacity: 0.7;
}

.store-ambient__grain {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.store-ambient__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 18%, transparent 78%, rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(ellipse 100% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
}

/* Header SEMPRE acima do main: senão o ticker/hero cobre o dropdown da conta
   (main vem depois no HTML com o mesmo z-index). Não agrupar header com main em z-index: 1. */
.store-page .site-header {
  position: relative;
  z-index: 40;
}

.store-page .site-header.has-account-menu-open {
  z-index: 300;
}

.store-page main,
.store-page .site-footer,
.store-page .tabbar {
  position: relative;
  z-index: 1;
}

/* Não sobrescrever position:fixed de overlays (carrinho, modais) */
.store-page .backdrop {
  z-index: 50;
}

.store-page .drawer {
  z-index: 60;
}

.store-page .product-modal {
  z-index: 120;
}

.store-page .cart-confirm {
  z-index: 200;
}

.store-page .block--info {
  background: rgba(12, 12, 12, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.store-page .site-footer {
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.store-page .tabbar {
  background: rgba(17, 17, 17, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top-color: rgba(255, 255, 255, 0.06);
}

@keyframes storeAmbientDriftA {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(6%, 4%, 0) scale(1.06);
  }
}

@keyframes storeAmbientDriftB {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-5%, -6%, 0) scale(1.05);
  }
}

@keyframes storeAmbientDriftC {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(4%, -5%, 0) scale(1.08);
  }
}

@keyframes storeAmbientGrid {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-56px, -56px, 0);
  }
}

@keyframes storeAmbientSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 767px) {
  .store-ambient__blob--3 {
    opacity: 0.6;
  }

  .store-ambient__lines {
    display: none;
  }

  .store-ambient__grid {
    opacity: 0.28;
    background-size: 40px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-ambient__blob,
  .store-ambient__grid,
  .store-ambient__lines {
    animation: none !important;
  }
}