/* =============================================
   ANIMATIONS
   Extracted from main.css — All @keyframes,
   floating words, orbs, transitions, pulses
   ============================================= */

/* ── Core Animations ───────────────────────────── */
@keyframes spin        { to { transform:rotate(360deg); } }
@keyframes pulse       { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes fadeDown    { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:none} }
@keyframes fadeUp      { from{opacity:0;transform:translateY(12px)}  to{opacity:1;transform:none} }
@keyframes borderSlide { 0%{background-position:0%} 100%{background-position:200%} }
@keyframes shimmer     { 0%{transform:translateX(-50px)} 100%{transform:translateX(60px)} }

/* ── Shimmer Button ────────────────────────────── */
@keyframes shimmerBtn {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Loading Section Slide Open ────────────────── */
@keyframes slideOpen {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 400px; opacity: 1; }
}

/* ── Pulse Ring (Play button) ──────────────────── */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ── Floating Language Words ───────────────────── */
.floating-words {
  position: fixed; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.fw {
  position: absolute;
  font-family: 'Sora', var(--sans), sans-serif;
  font-weight: 700;
  white-space: nowrap;
  will-change: transform;
  animation: floatWord linear infinite;
  text-shadow: none;
}
.fw-lg { font-size: 3.2rem; color: rgba(140,140,155,0.18); }
.fw-md { font-size: 2.2rem; color: rgba(120,120,135,0.20); }
.fw-sm { font-size: 1.5rem; color: rgba(140,140,155,0.22); }
.fw-xs { font-size: 1.1rem; color: rgba(160,160,175,0.24); }

.fw:nth-child(1)  { top: 6%;  left: 3%;  animation-duration: 35s; animation-delay: 0s; }
.fw:nth-child(2)  { top: 14%; right: 5%; animation-duration: 40s; animation-delay: -8s; }
.fw:nth-child(3)  { top: 24%; left: 8%;  animation-duration: 32s; animation-delay: -4s; }
.fw:nth-child(4)  { top: 4%;  left: 45%; animation-duration: 38s; animation-delay: -12s; }
.fw:nth-child(5)  { top: 34%; right: 3%; animation-duration: 36s; animation-delay: -2s; }
.fw:nth-child(6)  { top: 20%; left: 70%; animation-duration: 42s; animation-delay: -16s; }
.fw:nth-child(7)  { top: 44%; left: 5%;  animation-duration: 34s; animation-delay: -6s; }
.fw:nth-child(8)  { top: 55%; left: 55%; animation-duration: 37s; animation-delay: -10s; }
.fw:nth-child(9)  { top: 10%; left: 25%; animation-duration: 44s; animation-delay: -14s; }
.fw:nth-child(10) { top: 65%; right: 8%; animation-duration: 33s; animation-delay: -3s; }
.fw:nth-child(11) { top: 50%; left: 30%; animation-duration: 39s; animation-delay: -18s; }
.fw:nth-child(12) { top: 16%; right: 20%;animation-duration: 41s; animation-delay: -7s; }
.fw:nth-child(13) { top: 72%; left: 65%; animation-duration: 36s; animation-delay: -20s; }
.fw:nth-child(14) { top: 30%; left: 85%; animation-duration: 38s; animation-delay: -5s; }
.fw:nth-child(15) { top: 60%; left: 15%; animation-duration: 43s; animation-delay: -11s; }
.fw:nth-child(16) { top: 78%; right: 15%;animation-duration: 35s; animation-delay: -9s; }
.fw:nth-child(17) { top: 68%; left: 8%;  animation-duration: 40s; animation-delay: -13s; }
.fw:nth-child(18) { top: 82%; left: 45%; animation-duration: 36s; animation-delay: -7s; }
.fw:nth-child(19) { top: 75%; right: 3%; animation-duration: 42s; animation-delay: -15s; }
.fw:nth-child(20) { top: 85%; left: 25%; animation-duration: 34s; animation-delay: -9s; }
.fw:nth-child(21) { top: 40%; left: 90%; animation-duration: 38s; animation-delay: -17s; }
.fw:nth-child(22) { top: 88%; right: 25%;animation-duration: 37s; animation-delay: -4s; }

@keyframes floatWord {
  0%   { transform: translate(0, 0) rotate(-2deg); opacity: 0; }
  5%   { opacity: 1; }
  25%  { transform: translate(30px, -20px) rotate(1deg); }
  50%  { transform: translate(-15px, -40px) rotate(-1deg); opacity: 1; }
  75%  { transform: translate(20px, -15px) rotate(2deg); }
  95%  { opacity: 1; }
  100% { transform: translate(0, 0) rotate(-2deg); opacity: 0; }
}

@media (max-width: 768px) {
  .floating-words { display: none; }
}

/* ── Floating Orbs (Gold) ─────────────────────────────── */
.bg-orb {
  position: fixed; border-radius: 50%;
  filter: blur(60px); will-change: transform;
  pointer-events: none; z-index: 0;
}
.bg-orb-1 {
  width: 650px; height: 650px;
  background: radial-gradient(circle, rgba(200,165,80,0.16) 0%, rgba(200,165,80,0.04) 50%, transparent 70%);
  top: -15%; right: -10%;
  animation: orb1 22s ease-in-out infinite;
}
.bg-orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(180,145,60,0.12) 0%, rgba(180,145,60,0.03) 50%, transparent 70%);
  top: 25%; left: -12%;
  animation: orb2 28s ease-in-out infinite;
}
.bg-orb-3 {
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(220,185,100,0.08) 0%, rgba(220,185,100,0.02) 50%, transparent 70%);
  bottom: -5%; right: 10%;
  animation: orb3 20s ease-in-out infinite;
}
@keyframes orb1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-50px,70px) scale(1.08); }
  66% { transform: translate(40px,-40px) scale(0.94); }
}
@keyframes orb2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(60px,-50px) scale(0.95); }
  66% { transform: translate(-30px,60px) scale(1.06); }
}
@keyframes orb3 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(-40px,-60px) scale(1.04); }
  66% { transform: translate(50px,30px) scale(0.92); }
}

/* ── Gradient Shift (Hero text) ────────────────── */
@keyframes gradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* ── Border Glow (Hero form card) ──────────────── */
@keyframes borderGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Rotating Border (Demo button) ─────────────── */
@property --btn-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotateBorder {
  to { --btn-angle: 360deg; }
}

/* ── Rotate Slow (CTA card background) ─────────── */
@keyframes rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Navbar Line Slide ─────────────────────────── */
@keyframes navLineSlide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Slide Down (Mobile menu items) ────────────── */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Slide Up (PWA banner) ─────────────────────── */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}