/* ==========================================================================
   SWK Properties — Keyframe Animations
   ========================================================================== */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes soft-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s var(--ease-luxury) both;
}

.animate-fade-in {
  animation: fade-in 0.8s var(--ease-luxury) both;
}

.float { animation: soft-float 5s ease-in-out infinite; }

.whatsapp-float { animation: pulse-ring 2.4s ease-out infinite; }

/* ---- Ambient background glow (every section except the hero) ---- */

/* Straight diagonal legs with a direction change at each stop (rather than
   one smooth back-and-forth sway) so it reads as a slowly bouncing ball
   rather than gentle drifting — linear timing keeps each leg at a constant
   speed, like a ball coasting between bounces. */
@keyframes ambient-glow-bounce {
  0%   { transform: translate(0%, 0%); }
  14%  { transform: translate(45%, 32%); }
  28%  { transform: translate(72%, -12%); }
  42%  { transform: translate(22%, -52%); }
  56%  { transform: translate(-36%, -28%); }
  70%  { transform: translate(-58%, 18%); }
  84%  { transform: translate(-12%, 48%); }
  100% { transform: translate(0%, 0%); }
}

/* isolation:isolate gives the glow's negative z-index its own local
   stacking context, so it tucks in behind this section's own content
   without needing to touch (or risk breaking) that content's own
   positioning/z-index — see js/ambient-glow.js for why. */
.ambient-glow-host {
  position: relative;
  isolation: isolate;
}

/* mask-image fades this layer to nothing well before its own overflow:hidden
   edge is reached — without it, a blob sitting near that edge gets hard-
   clipped rather than fading out, showing up as a visible seam line right
   at the boundary with the next section. */
.ambient-glow {
  position: absolute;
  inset: -15%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

.ambient-glow__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: ambient-glow-bounce 38s linear infinite;
}

/* Same size/opacity/blur as the footer's own (already-tuned) glow — two
   corner blobs read as a soft accent rather than washing the whole section
   the way three larger, more opaque, overlapping blobs did. */
.ambient-glow__blob--a {
  top: -10%;
  left: 4%;
  width: 320px;
  height: 320px;
  background: hsl(14 78% 55% / 0.22);
}

.ambient-glow__blob--b {
  bottom: -12%;
  right: 6%;
  width: 300px;
  height: 300px;
  background: hsl(32 70% 50% / 0.18);
  animation-delay: -19s;
}

@media (prefers-reduced-motion: reduce) {
  .ambient-glow__blob { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up, .animate-fade-in, .float, .whatsapp-float {
    animation: none !important;
  }
}

/* ---- Logo marquee (developer showcase) ---- */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--space-8);
  animation: marquee 32s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}