/* ==========================================================================
   Tilt Card — logomarca do Hero. Recriação em CSS+JS puro do efeito de
   https://spell.sh/docs/tilt-card (perspectiva 3D que segue o mouse +
   brilho/spotlight que acompanha o cursor), sem depender de React/Tailwind.
   ========================================================================== */

.tilt-card {
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  width: min(360px, 78vw);
  aspect-ratio: 16 / 10;
  perspective: 1400px;
  margin: 0 auto;
}

.tilt-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, #FBFAF7 0%, #F2EFE8 100%);
  border: 1px solid rgba(22,31,48,0.08);
  box-shadow:
    0 30px 60px -25px rgba(0,0,0,0.45),
    0 10px 24px -12px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14%;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
  overflow: hidden;
}

.tilt-card:hover .tilt-card-inner,
.tilt-card.is-active .tilt-card-inner {
  transition: transform .08s linear;
  box-shadow:
    0 40px 70px -25px rgba(0,0,0,0.5),
    0 14px 30px -12px rgba(0,0,0,0.3);
}

.tilt-card-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateZ(40px);
  pointer-events: none;
  user-select: none;
}

/* Spotlight que segue o cursor — só aparece de verdade durante o hover. */
.tilt-card-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(
    circle at var(--mx) var(--my),
    rgba(255,255,255,0.75),
    rgba(201,166,103,0.18) 32%,
    transparent 60%
  );
  mix-blend-mode: soft-light;
}

.tilt-card:hover .tilt-card-glare,
.tilt-card.is-active .tilt-card-glare {
  opacity: 1;
}

/* Sem hover real (touch) ou "reduzir movimento": card fica parado, plano,
   sem perspectiva — só a logo, estática. */
.tilt-card.is-static .tilt-card-inner {
  transform: none !important;
  transition: none;
}
.tilt-card.is-static .tilt-card-glare {
  display: none;
}

@media (max-width: 640px) {
  .tilt-card { width: min(280px, 82vw); }
}