/* ==========================================================================
   Galatic — Motion Layer 2026-08-14 v1
   Micro-interações, scroll-reveal e transição suave de tema.
   Tudo desativado com prefers-reduced-motion.
   ========================================================================== */

/* Transição suave ao trocar de tema (ativada via .g-theme-anim no <html>) */
html.g-theme-anim body,
html.g-theme-anim body * {
  transition:
    background-color .35s ease,
    border-color .35s ease,
    color .35s ease,
    box-shadow .35s ease,
    fill .35s ease,
    stroke .35s ease !important;
}

/* Cards de produto — elevação e resposta ao hover */
html body .productCard {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}

html body .productCard:hover {
  transform: translateY(-5px);
}

html body .productCard .productImage img {
  transition: transform .4s ease;
}

/* Nave-mascote: objeto clay recortado, sem moldura ou fundo artificial. */
.g-nave-flight {
  --g-nave-opacity: 0;
  --g-nave-speed: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: clamp(132px, 11.5vw, 184px);
  aspect-ratio: 3 / 2;
  pointer-events: none;
  user-select: none;
  opacity: var(--g-nave-opacity);
  transform-origin: 52% 52%;
  will-change: transform, opacity;
  transition: opacity .22s ease, filter .22s ease;
  filter: drop-shadow(0 18px 22px rgba(4, 10, 26, .28));
}

.g-nave-flight::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 22% 13% 12% 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 120, 25, .24), transparent 68%);
  filter: blur(13px);
}

html[data-theme="dark"] .g-nave-flight::before {
  background: radial-gradient(ellipse, rgba(101, 214, 166, .30), transparent 68%);
}

.g-nave {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  z-index: auto;
  filter: none;
}

.g-nave-wake {
  position: absolute;
  top: 52%;
  right: 82%;
  width: calc(28px + 26px * var(--g-nave-speed));
  height: 3px;
  border-radius: 999px;
  opacity: calc(.18 + .58 * var(--g-nave-speed));
  background: linear-gradient(90deg, transparent, rgba(255, 132, 28, .82));
  filter: blur(.4px);
  transform: translateY(-50%);
}

html[data-theme="dark"] .g-nave-wake {
  background: linear-gradient(90deg, transparent, rgba(101, 214, 166, .88));
}

/* A nave em movimento é a assinatura da seção; evita dois mascotes concorrentes. */
body[data-g-nave] .categoryHub > .g-decor {
  display: none;
}

.g-nave-flight.is-behind {
  filter: saturate(.72) blur(.7px) drop-shadow(0 10px 18px rgba(4, 10, 26, .18));
  opacity: calc(var(--g-nave-opacity) * .04);
}

@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .g-nave-flight {
    display: none !important;
  }
}

html body .productCard:hover .productImage img {
  transform: scale(1.04);
}

/* Tilt sutil aplicado via JS (variáveis --rx/--ry) */
html body .g-tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .18s ease-out;
}

/* Scroll-reveal — JS adiciona .g-in */
html body .g-reveal {
  opacity: 1;
  transform: translateY(18px);
  transition: transform .5s ease;
}

html body .g-reveal.g-in {
  opacity: 1;
  transform: none;
}

/* Links da navegação — underline deslizante já existe; suavizar */
html body .shopLinks a {
  transition: color .2s ease;
}

/* Botões — resposta tátil */
html body .addButton,
html body .primaryBuy,
html body .cartButton,
html body .staticPrimary,
html body .staticSecondary,
html body .storeHeroCopy a,
html body .storeHeroCopy > div > button {
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

html body .addButton:active,
html body .primaryBuy:active,
html body .cartButton:active,
html body .staticPrimary:active {
  transform: scale(.97);
}

/* Starfield canvas — atrás de tudo */
html body .g-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Toggle de tema — pequena rotação no hover */
html body .themeToggle svg {
  transition: transform .3s ease;
}

html body .themeToggle:hover svg {
  transform: rotate(20deg);
}

/* Reduced motion: desliga tudo */
@media (prefers-reduced-motion: reduce) {
  html.g-theme-anim body,
  html.g-theme-anim body * {
    transition: none !important;
  }

  html body .productCard,
  html body .productCard .productImage img,
  html body .g-tilt,
  html body .g-reveal,
  html body .themeToggle svg {
    transition: none !important;
    transform: none !important;
  }

  html body .g-reveal {
    opacity: 1;
  }
}