/* Tec Reis Eletrônica — estilos customizados (complementam o Tailwind CDN carregado no index.html) */

html {
  scroll-behavior: smooth;
}
body {
  background: #0E0E10;
}
:root {
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Animação de entrada ao rolar a página */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(10px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
  will-change: opacity, transform, filter;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Textura do hero: foto de fundo (assets/img/hero/fundo/) + degradê azul cobalto por cima pra manter o texto legível */
.hero-texture {
  background-image:
    radial-gradient(circle at 85% 20%, rgba(29, 78, 216, 0.30), transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(30, 58, 138, 0.22), transparent 40%),
    linear-gradient(180deg, rgba(14, 14, 16, 0.5) 0%, rgba(19, 19, 22, 0.68) 100%),
    url('../img/hero/fundo/fundo.jpeg');
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
}

/* Placeholder visual para fotos ainda não enviadas (assets/img/loja, servicos) */
.placeholder-photo {
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 10px);
  background-color: #1C1C20;
}
.placeholder-photo-light {
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 10px);
  background-color: #EDEDEF;
}

/* Fade + blur individual em cada imagem, disparado quando ela termina de carregar
   (evita que a foto "pipoque" de repente depois que o card já revelou) */
img[loading="lazy"] {
  opacity: 0;
  filter: blur(8px);
  transition: opacity .6s var(--ease), filter .6s var(--ease);
}
img[loading="lazy"].img-loaded {
  opacity: 1;
  filter: blur(0);
}

/* Fallback de imagem: se assets/img/loja/*.jpg não existir ainda, mostra o placeholder */
.gallery-item img {
  display: block;
}
.gallery-item img.img-error {
  display: none;
}
.gallery-item .gallery-fallback {
  display: none;
}
.gallery-item img.img-error + .gallery-fallback {
  display: flex;
}

/* Linha pontilhada do processo em 4 passos */
.dotted-line {
  border-top: 2px dotted #D4D4D8;
}

/* Acordeões (FAQ e rodapé) usando <details> nativo */
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}
details[open] .chev {
  transform: rotate(180deg);
}

/* Widget flutuante do WhatsApp */
#waWidgetPanel {
  transform-origin: bottom right;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
#waWidgetPanel.wa-closed {
  opacity: 0;
  transform: scale(.95) translateY(8px);
  pointer-events: none;
}

/* ===================== MOTION: física suave estilo Apple/Riot ===================== */

/* Feedback tátil de clique em qualquer botão/link — encolhe levemente */
a, button {
  transition: transform .4s var(--ease), background-color .3s var(--ease),
    border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
a:active, button:active {
  transform: scale(.96);
}

/* Header fixo: começa translúcido, ganha blur/sombra ao rolar */
header {
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s var(--ease);
}
header.scrolled {
  background-color: rgba(0, 0, 0, .92);
  box-shadow: 0 8px 30px -14px rgba(0, 0, 0, .6);
}

/* Mega menu de Serviços: abre com fade + leve translateY, sem "piscar" */
#servicesPanel {
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
#servicesPanel.panel-closed {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Chevron sincronizado com o tempo do accordion */
.chev {
  transition: transform .4s var(--ease);
}

/* Accordion (FAQ / Serviços no rodapé e no menu mobile) com altura animada via JS (Web Animations API).
   flex-shrink:0 evita que o menu mobile (flex flex-col + max-height + overflow-y-auto) "espreme" o
   accordion aberto para caber no espaço visível em vez de deixar o container rolar — combinado com
   overflow:hidden, um item flex encolhe abaixo do seu conteúdo quando o pai tem altura limitada. */
.js-accordion {
  overflow: hidden;
  flex-shrink: 0;
}

/* Cards com tilt 3D + glow reativo ao cursor (Serviços, Diferenciais, Depoimentos) */
.tilt-card {
  position: relative;
  will-change: transform;
}
.tilt-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(280px circle at var(--x, 50%) var(--y, 50%), rgba(96, 165, 250, .16), transparent 62%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: 1;
}
.tilt-card:hover::before {
  opacity: 1;
}
.tilt-card:hover {
  box-shadow: 0 24px 48px -24px rgba(29, 78, 216, .45);
}

/* Botões com efeito "magnetic" (acompanham levemente o cursor).
   Não define display aqui de propósito: cada botão já declara seu próprio
   display via classes Tailwind (inline-flex, flex, ou hidden sm:inline-flex).
   Forçar display aqui sobrescrevia as classes responsivas "hidden" no mobile. */
.magnetic {
  will-change: transform;
}

/* Respeita usuários que pedem menos movimento na interface */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}