/* ============================================================
   NORTE STUDIOS — efeitos (3D, rato, fundo, reveals)
   Tudo desliga com prefers-reduced-motion e em ecrãs táteis.
   ============================================================ */

/* ---------- fundo: grelha única + rasto do rato ---------- */
#fxGrid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* glows do fundo a respirar */
.page-bg .glow--a { animation: glowDrift 18s ease-in-out infinite alternate; }
.page-bg .glow--b { animation: glowDrift 22s ease-in-out -6s infinite alternate-reverse; }
@keyframes glowDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, 40px) scale(1.12); }
  100% { transform: translate(40px, -30px) scale(0.95); }
}

/* ---------- header ao fazer scroll ---------- */
.site-header { transition: background 0.35s, box-shadow 0.35s, height 0.35s; }
body.fx-scrolled .site-header {
  background: rgba(17, 17, 17, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* logo: isotipo com flip 3D no hover */
.logo { perspective: 400px; }
.logo img { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s; transform-origin: 12% 50%; }
.logo:hover img { transform: rotateY(-18deg) translateZ(6px); filter: drop-shadow(0 0 12px rgba(163, 217, 0, 0.45)); }
.site-footer .isotipo { transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s; }
.site-footer .isotipo:hover { transform: rotateY(360deg); filter: drop-shadow(0 0 12px rgba(163, 217, 0, 0.5)) brightness(1.4); }

/* nav: sublinhado lima */
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  left: 21px;
  right: 21px;
  bottom: 1px;
  height: 1px;
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  transform: scaleX(0);
  transition: transform 0.3s;
}
.nav a:hover::after { transform: scaleX(1); }
.nav a.active::after { display: none; }

/* ---------- hero: logos 3D ---------- */
.hero-art { perspective: 1100px; transform-style: preserve-3d; }
.hero-art .fx-layer { position: absolute; will-change: transform; transform-style: preserve-3d; transition: transform 0.12s linear; }
.hero-art .fx-layer img { position: static; animation: none; }
.hero-art .fx-layer .a-main,
.hero-art .fx-layer .a-s1,
.hero-art .fx-layer .a-s2 { width: 100%; height: 100%; }
.hero-art .l-main { left: 76px; top: 64px; width: 343px; height: 343px; }
.hero-art .l-s1 { left: 27px; top: -5px; width: 151px; height: 146px; }
.hero-art .l-s2 { left: 346px; top: 362px; width: 111px; height: 111px; }
.hero-art .fx-float { width: 100%; height: 100%; animation: float3d 7s ease-in-out infinite; transform-style: preserve-3d; }
.hero-art .l-s1 .fx-float { animation-duration: 5.5s; animation-delay: -2s; }
.hero-art .l-s2 .fx-float { animation-duration: 5s; animation-delay: -3.5s; }
@keyframes float3d {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0deg); }
  50% { transform: translate3d(0, -14px, 0) rotateZ(1.5deg); }
}
.hero-art .a-main { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 40px rgba(163, 217, 0, 0.18)); }
/* halo pulsante atrás do logo */
.hero-halo {
  position: absolute;
  left: 76px;
  top: 64px;
  width: 343px;
  height: 343px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(163, 217, 0, 0.28), rgba(163, 217, 0, 0));
  filter: blur(30px);
  animation: halo 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes halo { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.12); } }
/* reflexo que varre o logo */
.hero-art .l-main .fx-float::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 18%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 48%, transparent 60%);
  background-size: 300% 100%;
  mix-blend-mode: overlay;
  animation: sheen 5.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes sheen { 0% { background-position: 150% 0; } 35%, 100% { background-position: -50% 0; } }
/* sombra no chão */
.hero-shadow {
  position: absolute;
  left: 130px;
  top: 440px;
  width: 240px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  animation: shadowPulse 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shadowPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(0.82); opacity: 0.55; } }

/* entrada do hero */
.fx-intro .hero-art { animation: introArt 1.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes introArt { from { opacity: 0; transform: translateY(40px) rotateY(-35deg) scale(0.85); filter: blur(10px); } }
.fx-intro .hero-title,
.fx-intro .store-hero h1 { animation: introText 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
.fx-intro .hero-desc,
.fx-intro .store-hero__desc { animation: introText 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.fx-intro .hero-actions,
.fx-intro .search { animation: introText 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both; }
.fx-intro .chips { animation: introText 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; }
.fx-intro .store-hero__art { animation: introArt 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
@keyframes introText { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } }

/* NORTE STUDIOS com brilho a passar */
.hero-title .brand {
  background: linear-gradient(100deg, var(--lime) 0%, var(--lime) 40%, #eaff9e 50%, var(--lime) 60%, var(--lime) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: brandShine 4.5s ease-in-out 1.4s infinite;
}
@keyframes brandShine { 0% { background-position: 100% 0; } 40%, 100% { background-position: -50% 0; } }

/* ---------- botões: brilho + magnético ---------- */
.btn, .btn-glass { position: relative; overflow: hidden; }
.btn-lime::before,
.btn-white::before,
.btn-light::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s;
  pointer-events: none;
}
.btn-lime:hover::before,
.btn-white:hover::before,
.btn-light:hover::before { left: 130%; }
.btn-lime:hover { box-shadow: 0 0 30px rgba(163, 217, 0, 0.5); }
.fx-magnetic { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s, background 0.2s, filter 0.2s; will-change: transform; }

/* ---------- cards: tilt 3D + brilho que segue o rato ---------- */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s, box-shadow 0.3s;
  will-change: transform;
}
.fx-tilt.fx-tilting { transition: transform 0.08s linear, border-color 0.3s, box-shadow 0.3s; }
.fx-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(163, 217, 0, 0.12), rgba(255, 255, 255, 0.03) 35%, transparent 60%);
  z-index: 3;
}
.fx-tilt:hover::after { opacity: 1; }
.fx-tilt:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(163, 217, 0, 0.18); }
/* borda que acende no sítio do rato */
.fx-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(163, 217, 0, 0.8), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 4;
}
.fx-border:hover::before { opacity: 1; }
.why-card { position: relative; }
.why-card__icon { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s, border-color 0.3s; }
.why-card:hover .why-card__icon { transform: translateZ(30px) rotateY(180deg); border-color: rgba(163, 217, 0, 0.45); box-shadow: 0 0 20px rgba(163, 217, 0, 0.2); }
.why-card:hover .why-card__icon svg { transform: rotateY(180deg); }
.why-card h3, .why-card p { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.why-card:hover h3 { transform: translateZ(20px); }
.p-card .p-card__title { transition: color 0.3s; }
.p-card:hover .p-card__title { color: var(--lime); }

/* badge do "Porque nos escolher" com rotação 3D */
.why__badge { animation: badge3d 9s ease-in-out infinite; }
@keyframes badge3d {
  0%, 100% { transform: perspective(500px) rotateY(0deg) translateY(0); }
  25% { transform: perspective(500px) rotateY(25deg) translateY(-8px); }
  50% { transform: perspective(500px) rotateY(0deg) translateY(0); }
  75% { transform: perspective(500px) rotateY(-25deg) translateY(-8px); }
}
.why__sparkles img { animation: twinkle 2.4s ease-in-out infinite; }
.why__sparkles img:nth-child(2) { animation-delay: 0.4s; }
.why__sparkles img:nth-child(3) { animation-delay: 0.8s; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: 0.35; transform: scale(0.7) rotate(45deg); } }

/* ---------- scroll reveal ---------- */
.fx-reveal { opacity: 0; transform: translateY(40px); filter: blur(6px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s; transition-delay: var(--d, 0s); }
.fx-reveal.fx-in { opacity: 1; transform: none; filter: none; }
/* separador TOP SELLING: linhas a crescer */
.separator::before, .separator::after { transform: scaleX(0); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.separator::before { transform-origin: right; }
.separator::after { transform-origin: left; }
.separator.fx-in::before, .separator.fx-in::after { transform: scaleX(1); }

/* riscos verdes a "desenhar" */
.fx-draw { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
.fx-draw.fx-draw-v { clip-path: inset(0 0 100% 0); }
.fx-draw.fx-in { clip-path: inset(0 0 0 0); }
.scribble, .scribble-bolt, .scribble-wave { animation: scribbleGlow 3s ease-in-out 1.8s infinite; }
@keyframes scribbleGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35) drop-shadow(0 0 6px rgba(163, 217, 0, 0.6)); } }

/* loja: personagem com parallax */
.store-hero__art { perspective: 1000px; }
.store-hero__art .octagon, .store-hero__art .character, .store-hero__art .scribble { transition: transform 0.15s linear; will-change: transform; }

/* produto: zoom lento do hero */
/* topo do produto sem animações (com vídeo em fundo, o zoom fazia a imagem tremer) */
.see-details img { animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.gallery__main img { animation: imgIn 0.5s ease-out; }
@keyframes imgIn { from { opacity: 0; transform: scale(1.03); } }

/* carrinho: itens a entrar */
body.cart-open .cart-item { animation: itemIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
body.cart-open .cart-item:nth-child(2) { animation-delay: 0.05s; }
body.cart-open .cart-item:nth-child(3) { animation-delay: 0.1s; }
body.cart-open .cart-item:nth-child(4) { animation-delay: 0.15s; }
body.cart-open .cart-item:nth-child(n + 5) { animation-delay: 0.2s; }
@keyframes itemIn { from { opacity: 0; transform: translateX(30px); } }
.cart-btn.bump { animation: bump 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes bump { 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(0.92) rotate(4deg); } }

/* partícula que voa para o carrinho */
.fx-fly {
  position: fixed;
  z-index: 250;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 16px var(--lime), 0 0 4px #fff inset;
  pointer-events: none;
}

/* ---------- barra de progresso de scroll ---------- */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  background: linear-gradient(90deg, rgba(163, 217, 0, 0), var(--lime));
  box-shadow: 0 0 10px var(--lime);
  transform-origin: left;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-reveal, .fx-draw { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .separator::before, .separator::after { transform: none !important; }
  #fxGrid, .hero-halo { display: none; }
}

/* tilt tem prioridade sobre a transição do reveal depois de revelado */
.fx-tilt.fx-done, .fx-tilt:not(.fx-reveal) { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s, box-shadow 0.3s, opacity 0.9s, filter 0.9s; transition-delay: 0s; }
.fx-tilt.fx-tilting { transition: transform 0.08s linear, border-color 0.3s, box-shadow 0.3s; }
.fx-magnetic.fx-mag-on { transition: transform 0.15s ease-out, box-shadow 0.2s, background 0.2s, filter 0.2s; }

/* ---------- vidro: blur por trás de cards e botões (esconde a grelha/rasto do fundo) ---------- */
.p-card,
.why-card,
.glass-card,
.buy-card,
.link-row,
.cart-item,
.chip,
.search,
.tag,
.secure,
.icon-btn,
.btn-glass,
.btn-ghost,
.nav a.active,
.gallery__main,
.gallery__thumbs button,
.view-all a,
.site-footer,
.coupon input {
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.p-card { background-color: rgba(26, 26, 26, 0.55); }
.why-card { background-color: rgba(26, 26, 26, 0.5); }
.chip:not(.active), .tag, .secure, .icon-btn, .btn-ghost { background-color: rgba(30, 30, 30, 0.6); }
.chip.active { background-color: rgba(34, 40, 18, 0.7); }
.btn-glass { background-color: rgba(26, 26, 26, 0.5); }
/* o marquee de feedback mexe-se sempre: fundo sólido equivalente em vez de blur (performance) */
.fb-card { background: #1a1a1a; }
.carousel .fade-l, .carousel .fade-r { top: 0; bottom: 0; }
.product-hero__card.glass-card { -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); }