/* MOTOR DE CONVITES — Interaction Engine 2.1
   Tilt leve + resposta ao ponteiro + elementos flutuantes + feedback de toque.
   Todos os efeitos são progressivos: o convite continua funcional sem eles. */
:root{
  --interaction-tilt-angle:0deg;
  --interaction-axis-x:0;
  --interaction-axis-y:1;
  --interaction-float-y:5px;
  --interaction-float-time:4.8s;
  --interaction-pointer-x:50%;
  --interaction-pointer-y:50%;
}

.interaction-tilt{
  rotate:var(--interaction-axis-x) var(--interaction-axis-y) 0 var(--interaction-tilt-angle);
  transition:rotate 150ms cubic-bezier(.2,.72,.2,1);
  transform-style:preserve-3d;
  will-change:rotate;
}
html[data-interaction-tilt="medium"] .interaction-tilt{transition-duration:115ms}

.interaction-pointer-glow{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(circle 180px at var(--interaction-pointer-x) var(--interaction-pointer-y),color-mix(in srgb,var(--theme-accent,#ffd166) 18%,transparent),transparent 70%);
  transition:opacity 220ms ease;
  contain:paint;
}
.screen.is-active .interaction-pointer-glow{opacity:.42}
html[data-interaction-pointer="responsive"] .interaction-pointer-glow{
  opacity:.58;
  background:radial-gradient(circle 220px at var(--interaction-pointer-x) var(--interaction-pointer-y),color-mix(in srgb,var(--theme-accent,#ffd166) 22%,transparent),transparent 72%);
}

html:not([data-interaction-floating="none"]) .interaction-floating{
  animation:interactionFloat var(--interaction-float-time) ease-in-out infinite;
  animation-delay:var(--interaction-float-delay,0s);
  will-change:translate;
}
html[data-interaction-floating="subtle"]{--interaction-float-y:4px;--interaction-float-time:5.6s}
html[data-interaction-floating="medium"]{--interaction-float-y:8px;--interaction-float-time:4.3s}
@keyframes interactionFloat{
  0%,100%{translate:0 0}
  50%{translate:0 calc(var(--interaction-float-y) * -1)}
}

.interaction-tap-ripple{
  position:absolute!important;z-index:20!important;width:14px;height:14px;border-radius:50%;pointer-events:none!important;
  left:var(--tap-x);top:var(--tap-y);translate:-50% -50%;
  background:color-mix(in srgb,#fff 72%,var(--theme-accent,#ffd166) 28%);
  opacity:.72;scale:.25;
  animation:interactionRipple 520ms cubic-bezier(.2,.74,.2,1) forwards!important;
}
@keyframes interactionRipple{to{opacity:0;scale:12}}

.interaction-tap-glow{animation:interactionTapGlow 430ms ease both!important}
@keyframes interactionTapGlow{
  45%{filter:brightness(1.12) drop-shadow(0 0 12px color-mix(in srgb,var(--theme-accent,#ffd166) 52%,transparent))}
}
.interaction-tap-bounce{animation:interactionTapBounce 330ms cubic-bezier(.2,.78,.2,1) both!important}
@keyframes interactionTapBounce{45%{scale:.955}75%{scale:1.025}}

/* O feedback não pode impedir foco/teclado nem virar requisito de interação. */
.interaction-tap-target{isolation:isolate}

@media(max-width:480px){
  .interaction-pointer-glow{display:none}
  html[data-interaction-floating="medium"]{--interaction-float-y:5px;--interaction-float-time:5s}
}

@media(prefers-reduced-motion:reduce){
  .interaction-tilt{rotate:none!important;transition:none!important;will-change:auto!important}
  .interaction-pointer-glow{display:none!important}
  .interaction-floating{animation:none!important;translate:none!important;will-change:auto!important}
  .interaction-tap-ripple{display:none!important}
  .interaction-tap-bounce,.interaction-tap-glow{animation:none!important}
}