/* ============================================================
   MOTION — ambient effects, animation states, glass UI
   Loaded alongside GSAP + Lenis for premium scroll experience.
   ============================================================ */

/* ---- Ambient gradient orbs ---- */
.ambient-orbs {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.ambient-orb {
  position: absolute;
  width: clamp(400px, 50vw, 900px);
  height: clamp(400px, 50vw, 900px);
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  animation: orb-drift 22s ease-in-out infinite, orb-fade-in 2s ease-out forwards;
}
.ambient-orb:nth-child(1) {
  top: -15%;
  left: -10%;
  animation-delay: 0s, 0.5s;
}
.ambient-orb:nth-child(2) {
  top: 40%;
  right: -15%;
  animation-delay: -7s, 0.8s;
}
.ambient-orb:nth-child(3) {
  bottom: -10%;
  left: 30%;
  animation-delay: -14s, 1.1s;
}

@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(60px, -40px) scale(1.05); }
  50%      { transform: translate(-30px, 50px) scale(0.95); }
  75%      { transform: translate(40px, 20px) scale(1.02); }
}
@keyframes orb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Dark theme orbs are brighter */
[data-theme="dark"] .ambient-orb:nth-child(1) { background: radial-gradient(circle, rgba(131, 189, 236, 0.18) 0%, transparent 70%); }
[data-theme="dark"] .ambient-orb:nth-child(2) { background: radial-gradient(circle, rgba(144, 184, 255, 0.10) 0%, transparent 70%); }
[data-theme="dark"] .ambient-orb:nth-child(3) { background: radial-gradient(circle, rgba(247, 190, 182, 0.07) 0%, transparent 70%); }

/* Light theme orbs are subtle */
:root:not([data-theme="dark"]) .ambient-orb:nth-child(1) { background: radial-gradient(circle, rgba(131, 189, 236, 0.12) 0%, transparent 70%); }
:root:not([data-theme="dark"]) .ambient-orb:nth-child(2) { background: radial-gradient(circle, rgba(144, 184, 255, 0.06) 0%, transparent 70%); }
:root:not([data-theme="dark"]) .ambient-orb:nth-child(3) { background: radial-gradient(circle, rgba(247, 190, 182, 0.04) 0%, transparent 70%); }

/* ---- Lenis smooth scroll overrides ---- */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* ---- GSAP overrides ----
   When GSAP is active, disable the CSS transition on [data-reveal]
   so GSAP has full control. The base.css opacity:0 still hides
   elements initially; GSAP's gsap.set()/gsap.to() inline styles
   override it on a per-element basis. */
.gsap-ready [data-reveal] {
  transition: none;
  will-change: auto;
}

/* ---- Magnetic button hover ---- */
.btn { will-change: transform; }

/* ---- Glassmorphism card variant ---- */
.glass-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.glass-card:hover {
  border-color: rgba(131, 189, 236, 0.25);
  box-shadow: 0 8px 32px rgba(131, 189, 236, 0.08);
}
[data-theme="dark"] .glass-card {
  background: rgba(255, 255, 255, 0.03);
}

/* ---- Glow line separator ---- */
.glow-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(131, 189, 236, 0.4) 30%,
    rgba(131, 189, 236, 0.6) 50%,
    rgba(131, 189, 236, 0.4) 70%,
    transparent 100%
  );
  margin: var(--space-8) 0;
  border: none;
}

/* ---- Split text word containers ---- */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.word__inner {
  display: inline-block;
}

/* ---- Parallax depth layers ---- */
.parallax-slow  { will-change: transform; }
.parallax-fast  { will-change: transform; }

/* ---- Scroll progress indicator ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-chill-blue), rgba(144, 184, 255, 0.8));
  z-index: var(--z-progress);
  pointer-events: none;
  transition: none;
}
.scroll-progress::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-chill-blue);
  box-shadow: 0 0 10px 1px rgba(131, 189, 236, 0.8);
  transform: translateY(-50%);
}

/* ---- Reduced motion: disable everything ---- */
@media (prefers-reduced-motion: reduce) {
  .ambient-orbs,
  .scroll-progress { display: none; }
  .gsap-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}