/* =========================================================
   Motion · Talita Santiago Beauty
   Glamour dourado: glitter, reflexo metálico e entradas suaves
   ========================================================= */

@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- Glitter de fundo ---------- */
#glitter{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}

/* ---------- Entrada ao rolar ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.zoom{transform:scale(.94)}
.rv.in{opacity:1;transform:none}

/* ---------- Abertura do topo ---------- */
@keyframes surgir{from{opacity:0;transform:translateY(18px) scale(.97);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.abre{animation:surgir 1.1s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}

/* ---------- Zoom lento (cinema) nas fotos grandes ---------- */
@keyframes cinema{from{transform:scale(1)}to{transform:scale(1.09)}}
.topo img:not(.logo),.hero .foto > img,.talita .foto > img{animation:cinema 22s ease-in-out infinite alternate}

/* ---------- Reflexo metálico na logo / monograma ---------- */
.brilho{position:relative;display:inline-block;line-height:0}
.brilho::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,246,220,.95) 48%,rgba(255,255,255,1) 50%,rgba(255,246,220,.95) 52%,transparent 65%);
  background-size:250% 100%;background-position:130% 0;
  -webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat;
  animation:reflexo 4.5s ease-in-out infinite;animation-delay:var(--d,1s)}
@keyframes reflexo{0%,55%{background-position:130% 0}100%{background-position:-30% 0}}

/* ---------- Texto dourado com brilho ---------- */
h1 em,h2 em,.marca em{
  background:linear-gradient(100deg,#c9a46a 0%,#e3c995 30%,#fff3d6 45%,#e3c995 60%,#c9a46a 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent !important;
  animation:ouro 6s linear infinite}
@keyframes ouro{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---------- Borda de luz girando (cards de destaque) ---------- */
.destaque,.oferta,.talita{isolation:isolate}
.destaque::after,.oferta::after,.talita::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;z-index:5;
  background:conic-gradient(from var(--ang),transparent 0 62%,rgba(227,201,149,.0) 64%,#e3c995 74%,#fff3d6 78%,#c9a46a 84%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:girar 5s linear infinite}
.talita{position:relative}
@keyframes girar{to{--ang:360deg}}

/* ---------- Botões: reflexo + pulso ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);
  animation:varre 3.6s ease-in-out infinite}
@keyframes varre{0%,60%{left:-60%}100%{left:130%}}
.btn:not(.contorno){animation:pulso 2.8s ease-in-out infinite}
@keyframes pulso{0%,100%{box-shadow:0 8px 24px rgba(47,191,106,.30)}50%{box-shadow:0 8px 34px rgba(47,191,106,.55),0 0 0 4px rgba(47,191,106,.10)}}

/* ---------- Selos com brilho ---------- */
.selo{background-size:200% 100% !important;animation:ouro 5s linear infinite}

/* ---------- Cards: toque e hover ---------- */
.card,.serv,.dif,.modulos details,.faq details,.depo{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
@media (hover:hover){
  .card:hover,.serv:hover,.dif:hover{transform:translateY(-3px);border-color:#a8843f !important;box-shadow:0 10px 28px rgba(201,164,106,.12)}
}
.card:active,.serv:active{transform:scale(.98)}
.card .seta{transition:transform .25s}
.card:hover .seta{transform:translateX(4px)}

/* Galeria: fotos com leve brilho ao passar */
.galeria .foto{transition:transform .35s ease}
@media (hover:hover){.galeria .foto:hover{transform:scale(1.04);z-index:2}}

/* ---------- Acessibilidade: sem movimento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
  #glitter{display:none}
}