/* CTA tilt-on-hover — magnetic 3D effect driven by cta-tilt.js
 *
 * Each .tilt-cta carries CSS vars set by JS:
 *   --rx, --ry      rotation in deg
 *   --mx, --my      cursor position as percentage (for the spotlight)
 *   --tilt-on       0 idle, 1 hovering
 */

.tilt-cta {
  position: relative;
  transform-style: preserve-3d;
  transform:
    perspective(700px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    scale(calc(1 + var(--tilt-on, 0) * 0.025));
  transition:
    transform .25s cubic-bezier(.22,.61,.36,1),
    box-shadow .25s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Idle reset — when --tilt-on is 0 the transition smooths back to flat */
.tilt-cta:not(:hover) {
  transform: perspective(700px) rotateX(0) rotateY(0) scale(1);
}

/* Lifted shadow when hovered */
.tilt-cta:hover {
  box-shadow:
    0 18px 40px -16px rgba(0,0,0,.5),
    0 4px 10px -4px rgba(0,0,0,.25);
}

/* Cursor-following spotlight overlay — added as a pseudo */
.tilt-cta::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    160px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.35),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .2s ease;
  mix-blend-mode: screen;
  z-index: 1;
}
.tilt-cta:hover::after { opacity: var(--tilt-on, 1); }

/* On light/yellow buttons the spotlight should be subtle white-on-dark */
.btn--primary.tilt-cta::after,
.cta-final .btn.tilt-cta::after,
.feat__cta .btn--primary.tilt-cta::after {
  background: radial-gradient(
    160px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.45),
    transparent 60%
  );
}

/* Ghost buttons get a darker glow */
.btn--ghost.tilt-cta::after,
.ig-more__link.tilt-cta::after {
  background: radial-gradient(
    160px circle at var(--mx, 50%) var(--my, 50%),
    rgba(240,203,31,.22),
    transparent 60%
  );
  mix-blend-mode: normal;
}

/* Make sure the inner button text sits above the spotlight */
.tilt-cta > * { position: relative; z-index: 2; }

/* ─── Mockup tilt (dashboard browser + iPhone) ─────────────────────────── */
.tilt-mock {
  position: relative;
  transform-style: preserve-3d;
  transform:
    perspective(1400px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    scale(calc(1 + var(--tilt-on, 0) * 0.015));
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.tilt-mock:not(:hover) {
  transform: perspective(1400px) rotateX(0) rotateY(0) scale(1);
}
.tilt-mock:hover {
  box-shadow:
    0 40px 80px -28px rgba(0,0,0,.55),
    0 12px 24px -10px rgba(0,0,0,.35);
}
.tilt-mock::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(240, 203, 31, .22),
    transparent 55%
  );
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 3;
  mix-blend-mode: screen;
}
.tilt-mock:hover::before { opacity: var(--tilt-on, 1); }
.phone.tilt-mock { border-radius: 38px; }

@media (prefers-reduced-motion: reduce) {
  .tilt-cta { transform: none !important; transition: none !important; }
  .tilt-cta::after { display: none; }
  .tilt-mock { transform: none !important; transition: none !important; }
  .tilt-mock::before { display: none; }
  .title-glow::before { display: none !important; }
}

/* ─── Title glow ──────────────────────────────────────────────────────────
 * Yellow radial spotlight that follows the cursor over big headings.
 * The pseudo sits BEHIND the text (z-index: 0) inside a relative wrapper,
 * with a blur + multiply-style mix-blend so the yellow shines through the
 * letters without washing out the body.
 */
.title-glow {
  position: relative;
  isolation: isolate;
}
.title-glow::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    320px circle at var(--gmx, 50%) var(--gmy, 50%),
    rgba(240, 203, 31, 0.55),
    rgba(240, 203, 31, 0.18) 35%,
    transparent 65%
  );
  filter: blur(28px);
  opacity: 0;
  transition: opacity .35s cubic-bezier(.22,.61,.36,1);
  border-radius: 40%;
}
.title-glow:hover::before { opacity: var(--glow-on, 1); }

/* On light/yellow backgrounds the glow should darken the yellow a touch */
.surface-light .title-glow::before,
.reels .title-glow::before {
  background: radial-gradient(
    320px circle at var(--gmx, 50%) var(--gmy, 50%),
    rgba(240, 203, 31, 0.7),
    rgba(255, 215, 0, 0.25) 35%,
    transparent 65%
  );
}