/* ============================================================
   Ypsilon Ambient Layer — Living Background Blobs
   Pure CSS morphing gradients that create constant subtle motion.
   Uses prime-number durations for non-repeating Lissajous paths.
   ============================================================ */

/* Container for ambient blobs — injected at body level */
.ambient-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Ensure page content sits above ambient layer */
/* Only apply to elements that don't already have their own positioning */
.hero, section, footer {
  position: relative;
  z-index: 1;
}

/* These already have position:fixed/absolute — just ensure z-index is above ambient */
.topbar {
  z-index: 1001;
}

.whatsapp-float, .back-to-top {
  z-index: 50;
}

/* ============================================================
   BLOB 1 — Primary Orange (top-right drift)
   ============================================================ */
.ambient-layer::before {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234, 91, 27, 0.06) 0%, transparent 70%);
  filter: blur(60px);
  animation:
    blob1-x 23s ease-in-out infinite alternate,
    blob1-y 37s ease-in-out infinite alternate,
    blob1-scale 29s ease-in-out infinite alternate;
  will-change: transform;
}

/* ============================================================
   BLOB 2 — Purple (bottom-left drift)
   ============================================================ */
.ambient-layer::after {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 70, 150, 0.05) 0%, transparent 70%);
  filter: blur(80px);
  animation:
    blob2-x 31s ease-in-out infinite alternate,
    blob2-y 19s ease-in-out infinite alternate,
    blob2-scale 41s ease-in-out infinite alternate;
  will-change: transform;
}

/* ============================================================
   BLOB 3 — Blue (center drift, via extra element)
   Requires .ambient-blob-3 element in HTML or injected via JS
   ============================================================ */
.ambient-layer .ambient-blob-3 {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 185, 233, 0.04) 0%, transparent 70%);
  filter: blur(70px);
  animation:
    blob3-x 43s ease-in-out infinite alternate,
    blob3-y 29s ease-in-out infinite alternate,
    blob3-scale 37s ease-in-out infinite alternate;
  will-change: transform;
}

/* ============================================================
   BLOB KEYFRAMES — Lissajous motion paths
   Each axis uses a prime-number duration so the combined path
   takes (durationX × durationY) seconds to repeat.
   ============================================================ */

/* Blob 1 — X axis (23s) */
@keyframes blob1-x {
  0%   { left: -10%; }
  25%  { left: 30%; }
  50%  { left: 60%; }
  75%  { left: 40%; }
  100% { left: 80%; }
}

/* Blob 1 — Y axis (37s) */
@keyframes blob1-y {
  0%   { top: -20%; }
  33%  { top: 20%; }
  66%  { top: 50%; }
  100% { top: -5%; }
}

/* Blob 1 — Scale (29s) */
@keyframes blob1-scale {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(0.9); }
}

/* Blob 2 — X axis (31s) */
@keyframes blob2-x {
  0%   { left: 70%; }
  33%  { left: 20%; }
  66%  { left: 50%; }
  100% { left: -5%; }
}

/* Blob 2 — Y axis (19s) */
@keyframes blob2-y {
  0%   { top: 80%; }
  25%  { top: 40%; }
  50%  { top: 60%; }
  75%  { top: 20%; }
  100% { top: 70%; }
}

/* Blob 2 — Scale (41s) */
@keyframes blob2-scale {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Blob 3 — X axis (43s) */
@keyframes blob3-x {
  0%   { left: 40%; }
  25%  { left: 10%; }
  50%  { left: 55%; }
  75%  { left: 25%; }
  100% { left: 65%; }
}

/* Blob 3 — Y axis (29s) */
@keyframes blob3-y {
  0%   { top: 30%; }
  33%  { top: 70%; }
  66%  { top: 10%; }
  100% { top: 50%; }
}

/* Blob 3 — Scale (37s) */
@keyframes blob3-scale {
  0%   { transform: scale(1.1); }
  50%  { transform: scale(0.8); }
  100% { transform: scale(1.2); }
}

/* ============================================================
   CURSOR AURORA STYLES
   ============================================================ */
.cursor-aurora {
  display: none;
}

/* ============================================================
   CARD BORDER ILLUMINATION (driven by cursor-field.js)
   ============================================================ */
.glass-card,
.service-card,
.testimonial-card,
.contact-card {
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
}

.glass-card::before,
.service-card::before,
.testimonial-card::before,
.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    600px circle at var(--glow-x) var(--glow-y),
    rgba(234, 91, 27, calc(0.4 * var(--glow-intensity))),
    rgba(96, 70, 150, calc(0.15 * var(--glow-intensity))),
    transparent 70%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: var(--glow-intensity);
  z-index: 1;
}

/* ============================================================
   TEXT MORPH STYLES
   ============================================================ */
.text-morph__display {
  display: inline;
}

.text-morph__char {
  display: inline-block;
  transition: opacity 0.15s ease;
  will-change: contents;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ambient-layer::before,
  .ambient-layer::after,
  .ambient-layer .ambient-blob-3 {
    animation: none;
  }

  .cursor-aurora {
    display: none;
  }

  .glass-card::before,
  .service-card::before,
  .testimonial-card::before,
  .contact-card::before {
    opacity: 0 !important;
  }
}

/* ============================================================
   MOBILE — reduce blob sizes and opacity
   ============================================================ */
@media (max-width: 767px) {
  .ambient-layer::before {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(234, 91, 27, 0.04) 0%, transparent 70%);
  }

  .ambient-layer::after {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(96, 70, 150, 0.03) 0%, transparent 70%);
  }

  .ambient-layer .ambient-blob-3 {
    display: none;
  }

  .cursor-aurora {
    display: none;
  }
}