/* ==========================================================================
   SITECRAFT360 — AMBIENT ATMOSPHERE LAYER
   Floating orbs · Aurora ribbons · Constellation canvas · Section glows
   All layers are GPU-composited (transform3d / will-change) for 60fps
   ========================================================================== */

/* ============================================
   1. FLOATING GRADIENT ORBS
   Subtle, slow-drifting radial blobs that
   breathe color into empty dark regions.
   ============================================ */

.ambient-orbs {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform, opacity;
  animation: orbDrift 25s var(--ease-smooth) infinite alternate,
             orbPulse 8s ease-in-out infinite alternate;
}

/* Orb 1 — Emerald, top-left drift */
.ambient-orb--1 {
  width: 45vw;
  height: 45vw;
  max-width: 700px;
  max-height: 700px;
  top: -8%;
  left: -12%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, transparent 70%);
  animation-delay: 0s;
  animation-duration: 28s, 9s;
}

/* Orb 2 — Cyan, bottom-right drift */
.ambient-orb--2 {
  width: 40vw;
  height: 40vw;
  max-width: 600px;
  max-height: 600px;
  bottom: -5%;
  right: -10%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.25) 0%, transparent 70%);
  animation-delay: -4s;
  animation-duration: 32s, 11s;
}

/* Orb 3 — Purple accent, mid-page */
.ambient-orb--3 {
  width: 35vw;
  height: 35vw;
  max-width: 550px;
  max-height: 550px;
  top: 40%;
  left: 55%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
  animation-delay: -8s;
  animation-duration: 35s, 13s;
}

/* Orb 4 — Warm amber, sparse fill */
.ambient-orb--4 {
  width: 30vw;
  height: 30vw;
  max-width: 450px;
  max-height: 450px;
  top: 65%;
  left: -5%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
  animation-delay: -12s;
  animation-duration: 30s, 10s;
}

@keyframes orbDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  25%  { transform: translate3d(6vw, -3vh, 0) scale(1.05); }
  50%  { transform: translate3d(-4vw, 5vh, 0) scale(0.95); }
  75%  { transform: translate3d(3vw, 8vh, 0) scale(1.08); }
  100% { transform: translate3d(-5vw, -4vh, 0) scale(1); }
}

@keyframes orbPulse {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.7; }
}


/* ============================================
   2. AURORA RIBBON
   A soft horizontal gradient band that slowly
   shifts hue across the top of the viewport.
   ============================================ */

.aurora-ribbon {
  position: fixed;
  top: 0;
  left: -20%;
  width: 140%;
  height: 350px;
  z-index: 9998;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16, 185, 129, 0.04) 20%,
    rgba(6, 182, 212, 0.035) 40%,
    rgba(139, 92, 246, 0.025) 60%,
    rgba(16, 185, 129, 0.04) 80%,
    transparent 100%
  );
  filter: blur(60px);
  animation: auroraShift 20s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes auroraShift {
  0%   { transform: translate3d(0, 0, 0) scaleY(1); }
  50%  { transform: translate3d(-8%, 15px, 0) scaleY(1.3); }
  100% { transform: translate3d(5%, -10px, 0) scaleY(0.9); }
}


/* ============================================
   3. CONSTELLATION CANVAS
   Container for the JS particle network.
   ============================================ */

#constellation-canvas {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.7;
}


/* ============================================
   4. SECTION GLOW DIVIDERS
   Subtle radial glow between major sections.
   Add .section-glow-divider between sections.
   ============================================ */

.section-glow-divider {
  position: relative;
  height: 1px;
  width: 100%;
  overflow: visible;
}

.section-glow-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 700px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(30px);
}


/* ============================================
   5. FLOATING DECORATIVE SHAPES
   Subtle geometric accents that parallax-scroll
   near section content to fill visual emptiness.
   ============================================ */

.ambient-shape {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  will-change: transform;
}

/* Ring */
.ambient-shape--ring {
  width: 200px;
  height: 200px;
  border: 1.5px solid var(--accent-primary);
  border-radius: 50%;
  animation: shapeFloat 18s ease-in-out infinite alternate;
}

/* Cross */
.ambient-shape--cross {
  width: 70px;
  height: 70px;
  opacity: 0.04;
  animation: shapeFloat 22s ease-in-out infinite alternate-reverse;
}

.ambient-shape--cross::before,
.ambient-shape--cross::after {
  content: '';
  position: absolute;
  background: var(--accent-secondary);
}

.ambient-shape--cross::before {
  width: 100%;
  height: 1.5px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.ambient-shape--cross::after {
  width: 1.5px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* Diamond */
.ambient-shape--diamond {
  width: 110px;
  height: 110px;
  border: 1.5px solid rgba(139, 92, 246, 0.6);
  transform: rotate(45deg);
  animation: shapeFloat 20s ease-in-out infinite alternate;
  animation-delay: -6s;
}

/* Dotted arc */
.ambient-shape--arc {
  width: 240px;
  height: 240px;
  border: 1.5px dashed rgba(16, 185, 129, 0.5);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  animation: shapeSpin 45s linear infinite;
  opacity: 0.04;
}

@keyframes shapeFloat {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(15px, -25px, 0) rotate(8deg); }
}

@keyframes shapeSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ============================================
   6. HERO GLOW ENHANCEMENT
   Animate existing hero-glow to pulse gently.
   ============================================ */

.hero-glow {
  animation: heroGlowPulse 6s ease-in-out infinite alternate;
}

@keyframes heroGlowPulse {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}


/* ============================================
   7. CARD SHIMMER ON HOVER
   A subtle light streak that sweeps cards.
   ============================================ */

.card-shell .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.8s var(--ease-out-expo);
  pointer-events: none;
  z-index: 1;
}

.card-shell:hover .card::before {
  left: 120%;
}


/* ============================================
   8. SCROLLBAR GLOW
   Accent the scrollbar thumb gently.
   ============================================ */

::-webkit-scrollbar-thumb {
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
}


/* ============================================
   9. PROCESS STEP LINE GLOW
   Animated pulse on the process connector line.
   ============================================ */

.process-step::before {
  transition: box-shadow 0.6s ease;
}

.process-step:hover::before {
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}


/* ============================================
   10. REDUCED MOTION
   Respect user preference — disable all
   ambient motion while keeping layout intact.
   ============================================ */

/* 
@media (prefers-reduced-motion: reduce) {
  .ambient-orb,
  .aurora-ribbon,
  .ambient-shape,
  .hero-glow,
  #constellation-canvas {
    animation: none !important;
    transition: none !important;
  }

  #constellation-canvas {
    display: none;
  }
} 
*/


/* ============================================
   11. MOBILE TONING
   Reduce orb sizes and particle density
   to preserve battery and performance.
   ============================================ */

@media (max-width: 768px) {
  .ambient-orb {
    filter: blur(60px);
    max-width: 300px;
    max-height: 300px;
  }

  .aurora-ribbon {
    height: 180px;
    filter: blur(40px);
  }

  .ambient-shape {
    display: none;
  }

  #constellation-canvas {
    opacity: 0.4;
  }
}