/* =====================================================================
   SILK FX — camada de efeitos compartilhada do site (Silk Pedidos)
   Additiva: só adiciona efeitos, não muda o layout existente.
   Uso: <link rel="stylesheet" href="css/silk-fx.css"> + <script src="js/silk-fx.js">
   Classes: .fx-reveal (aparece no scroll) · .shimmer (brilho dourado no texto)
            .fx-sheen (reflexo no hover) · .btn-wow (reflexo no botão)
            .fx-input (glow no foco) · [data-count] (contador animado)
   ===================================================================== */
:root{
  --silk-navy:#072A40; --silk-navy-dark:#031C26; --silk-beige:#D2B87D;
  --silk-orange:#D98032; --silk-yellow:#F2B33D;
}

/* ---- Aurora de fundo da página (bem sutil, atrás de tudo) ---- */
.silk-aurora{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.silk-aurora span{ position:absolute; border-radius:50%; filter:blur(90px); will-change:transform; }
.silk-aurora .a1{ width:46vw; height:46vw; top:-14%; left:-10%;
  background:radial-gradient(circle, rgba(210,184,125,.34), transparent 70%); animation:silkDrift1 28s ease-in-out infinite; }
.silk-aurora .a2{ width:42vw; height:42vw; bottom:-16%; right:-8%;
  background:radial-gradient(circle, rgba(217,128,50,.20), transparent 70%); animation:silkDrift2 34s ease-in-out infinite; }
.silk-aurora .a3{ width:30vw; height:30vw; top:40%; left:52%;
  background:radial-gradient(circle, rgba(242,179,61,.14), transparent 70%); animation:silkDrift3 24s ease-in-out infinite; }
@keyframes silkDrift1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,3vw) scale(1.12)} }
@keyframes silkDrift2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-3vw,-2vw) scale(1.08)} }
@keyframes silkDrift3{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-3vw,3vw) scale(1.15)} }

/* ---- Reveal ao rolar ---- */
.fx-reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.fx-reveal.is-visible{ opacity:1; transform:none; }
.fx-reveal.d1{transition-delay:.08s} .fx-reveal.d2{transition-delay:.16s}
.fx-reveal.d3{transition-delay:.24s} .fx-reveal.d4{transition-delay:.32s}

/* ---- Brilho dourado deslizante no texto ---- */
.shimmer{
  background:linear-gradient(100deg,#D2B87D 28%,#FBEFCF 48%,#F2B33D 58%,#D2B87D 72%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:silkShimmer 5s linear infinite;
}
@keyframes silkShimmer{ to{ background-position:-220% center; } }

/* ---- Reflexo deslizante nos cards (no hover) ---- */
.fx-sheen{ position:relative; overflow:hidden; }
.fx-sheen::before{ content:''; position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-20deg); transition:left .8s ease; pointer-events:none; z-index:1; }
.fx-sheen:hover::before{ left:160%; }

/* ---- Botão com reflexo + glow ---- */
.btn-wow{ position:relative; overflow:hidden; }
.btn-wow::after{ content:''; position:absolute; top:0; left:-160%; width:55%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg); transition:left .7s ease; }
.btn-wow:hover::after{ left:170%; }

/* ---- Input com glow no foco ---- */
.fx-input{ transition:box-shadow .3s, border-color .3s, background .3s; }
.fx-input:focus{ box-shadow:0 0 0 4px rgba(7,42,64,.10), 0 8px 24px -8px rgba(217,128,50,.35); }

/* ---- Cabeçalho de vidro ---- */
.fx-glass{ background:rgba(255,255,255,.72) !important; backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4); }

/* ---- Preloader / splash de carregamento (100% CSS, sem flash, auto-some) ----
   Só a LOGO dourada num fundo claro (creme) com o brilho da aurora — sem azul,
   sem texto. Pseudo-elementos do body renderizam na hora e somem por animação
   (nunca dependem de JS, nunca travam). Caminho relativo AO CSS -> ../assets. */
body::before{ /* fundo claro creme + brilho aurora dourado */
  content:''; position:fixed; inset:0; z-index:99998; pointer-events:none;
  background:
    radial-gradient(42vw 42vw at 30% 30%, rgba(242,179,61,.30), transparent 68%),
    radial-gradient(38vw 38vw at 72% 70%, rgba(210,184,125,.34), transparent 70%),
    linear-gradient(180deg,#faf8f3,#f3ecdf);
  animation:silkSplashBg 1.3s ease forwards;
}
body::after{ /* só a logo dourada, caixa central na proporção 430:660 (não corta) */
  content:''; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:99999; pointer-events:none;
  width:clamp(120px, 17vw, 168px); height:clamp(166px, 23.5vw, 233px);
  background:url("../assets/silk-symbol-gold.svg") center center / contain no-repeat;
  filter:drop-shadow(0 0 22px rgba(242,179,61,.4));
  animation:silkSplashLogo 1.3s ease forwards, silkLogoGlow 1.6s ease-in-out infinite;
}
@keyframes silkSplashBg{ 0%,58%{opacity:1} 100%{opacity:0; visibility:hidden} }
@keyframes silkSplashLogo{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.82)}
  26%,58%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.08); visibility:hidden}
}
@keyframes silkLogoGlow{ 0%,100%{filter:drop-shadow(0 0 12px rgba(242,179,61,.30))} 50%{filter:drop-shadow(0 0 26px rgba(242,179,61,.6))} }
/* ---- Respeita quem prefere menos movimento ---- */
@media (prefers-reduced-motion: reduce){
  .silk-aurora span, .shimmer{ animation:none !important; }
  .fx-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  body::before, body::after{ display:none !important; }
}