/* ── Keyframes ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
@keyframes floatAlt {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(10px) rotate(1deg); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%       { transform: translateY(-8px) translateX(6px); }
  66%       { transform: translateY(6px) translateX(-4px); }
}
@keyframes blobFloat {
  0%, 100% { transform: scale(1) translate(0, 0); }
  33%       { transform: scale(1.08) translate(20px, -20px); }
  66%       { transform: scale(0.94) translate(-15px, 15px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,140,255,0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(0,140,255,0); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes notifIn {
  0%   { opacity: 0; transform: translateX(24px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes drawBar {
  from { height: 0; y: 80px; }
}
@keyframes gradSpin {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes fadeScaleIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes btnGradient {
  0%, 100% { background-position: 0% center; }
  50%       { background-position: 100% center; }
}

/* ── Scroll-trigger ── */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-animate="left"]  { transform: translateX(-28px); }
[data-animate="right"] { transform: translateX(28px); }
[data-animate="scale"] { transform: scale(0.93); }
[data-animate].in-view { opacity: 1; transform: none; }

[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }
[data-delay="7"] { transition-delay: 0.56s; }
[data-delay="8"] { transition-delay: 0.64s; }

/* ── Named helpers ── */
.phone-float     { animation: float      4.2s ease-in-out infinite; }
.float-alt       { animation: floatAlt   3.8s ease-in-out infinite; }
.float-slow      { animation: floatSlow  6s ease-in-out infinite; }
.pulse-dot       { animation: pulseRing  2.2s ease-in-out infinite; }
.marquee-track   { animation: marquee    48s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* ── Card tilt (driven by JS --rx / --ry CSS vars) ── */
.tilt-card {
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.1s ease;
  will-change: transform;
}
.tilt-card:not(:hover) { transform: none; transition: transform 0.5s ease; }