/* ============================================================
   Atmosphere — glass, ember, halo, grain, magnetic, cursor halo
   ============================================================ */

/* Liquid glass — Mindloop-style dual-edge highlight via mask-composite */
.gac-glass {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--gac-glass-border);
  background: var(--gac-glass-bg);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.14),
    0 22px 60px var(--gac-glass-shadow);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.gac-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(255, 255, 255, 0.22) 22%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 58%,
    rgba(255, 255, 255, 0.22) 78%,
    rgba(255, 255, 255, 0.62) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

:root[data-theme="light"] .gac-glass::before {
  background: linear-gradient(
    180deg,
    rgba(15, 21, 16, 0.22) 0%,
    rgba(15, 21, 16, 0.08) 22%,
    rgba(15, 21, 16, 0) 42%,
    rgba(15, 21, 16, 0) 58%,
    rgba(15, 21, 16, 0.08) 78%,
    rgba(15, 21, 16, 0.22) 100%
  );
}

/* Vignette overlay — extremely subtle, sits behind hero art */
.gac-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 32%, var(--gac-halo), transparent 38%),
    radial-gradient(ellipse 110% 80% at 50% 100%, color-mix(in srgb, var(--gac-page-bg) 45%, transparent), transparent 70%);
}

/* Film grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--gac-noise);
  background-size: 220px 220px;
  opacity: 0.035;
  mix-blend-mode: overlay;
}

:root[data-theme="light"] body::after {
  opacity: 0.03;
  mix-blend-mode: multiply;
}

/* Promote topbar/main above grain */
body:has(.gac-landing) .topbar,
body:has(.gac-landing) main,
body:has(.features-v2) .topbar,
body:has(.features-v2) main,
body:has(.pricing-page) .topbar,
body:has(.pricing-page) main,
body:has(.app-shell) .topbar,
body:has(.app-shell) main,
body:has(.auth-shell) .topbar,
body:has(.auth-shell) main {
  position: relative;
  z-index: 2;
}

/* Ember field — drifting amber/lime particles in hero */
.gac-ember-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.gac-ember {
  position: absolute;
  bottom: -10px;
  width: var(--ember-size, 4px);
  height: var(--ember-size, 4px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--gac-ember) 88%, white);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--gac-ember) 58%, transparent),
    0 0 16px color-mix(in srgb, var(--gac-ember) 28%, transparent);
  opacity: 0;
  left: var(--ember-x, 50%);
  will-change: transform, opacity;
  animation: gac-ember-rise var(--ember-duration, 14s) ease-in-out infinite;
  animation-delay: var(--ember-delay, 0s);
}

:root[data-theme="light"] .gac-ember {
  background: color-mix(in srgb, var(--gac-ember) 36%, white);
  box-shadow:
    0 0 6px color-mix(in srgb, var(--gac-ember) 28%, transparent),
    0 0 18px color-mix(in srgb, var(--gac-ember) 14%, transparent);
  animation-name: gac-ember-rise-light;
}

@keyframes gac-ember-rise-light {
  0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  10% { opacity: 0.42; }
  35% { opacity: 0.34; transform: translate3d(calc(var(--ember-drift, 12px) * 0.35), -28vh, 0) scale(0.96); }
  62% { opacity: 0.22; transform: translate3d(calc(var(--ember-drift, 12px) * 0.72), -56vh, 0) scale(1); }
  100% { transform: translate3d(var(--ember-drift, 12px), -94vh, 0) scale(0.35); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gac-ember { animation: none; opacity: 0; }
}

@keyframes gac-ember-rise {
  0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  10% { opacity: 0.72; }
  35% { opacity: 0.62; transform: translate3d(calc(var(--ember-drift, 12px) * 0.35), -28vh, 0) scale(0.96); }
  62% { opacity: 0.42; transform: translate3d(calc(var(--ember-drift, 12px) * 0.72), -56vh, 0) scale(1); }
  100% { transform: translate3d(var(--ember-drift, 12px), -94vh, 0) scale(0.35); opacity: 0; }
}

/* Cursor halo (desktop hero only) */
.gac-cursor-halo {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gac-lime) 14%, transparent), transparent 70%);
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 320ms ease;
  transform: translate3d(var(--cursor-x, 0px), var(--cursor-y, 0px), 0);
}

:root[data-theme="light"] .gac-cursor-halo {
  background: radial-gradient(circle, color-mix(in srgb, var(--gac-lime) 14%, transparent), transparent 70%);
  mix-blend-mode: multiply;
  filter: blur(48px);
}

.gac-cursor-halo.is-active {
  opacity: 1;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .gac-cursor-halo { display: none; }
}

/* Magnetic CTA helper */
.gac-magnetic {
  transform: translate3d(var(--magnetic-x, 0px), var(--magnetic-y, 0px), 0);
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .gac-magnetic { transform: none; transition: none; }
}

/* Page-load reveal — fail-safe (only hides when JS signals .landing-motion-ready) */
:where(.landing-motion-ready) .gac-landing .landing-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.2, 0.7, 0.3, 1), transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: var(--landing-reveal-delay, 0ms);
}

:where(.landing-motion-ready) .gac-landing .landing-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Italic accent glow pulse */
@keyframes gac-one-glow {
  0%, 100% {
    text-shadow:
      0 0 18px color-mix(in srgb, var(--gac-lime) 28%, transparent),
      0 0 36px color-mix(in srgb, var(--gac-lime) 14%, transparent);
  }
  50% {
    text-shadow:
      0 0 26px color-mix(in srgb, var(--gac-lime) 48%, transparent),
      0 0 64px color-mix(in srgb, var(--gac-lime) 24%, transparent);
  }
}

/* Hero halo breathing */
@keyframes gac-hero-halo {
  0%, 100% { opacity: 0.32; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.04); }
}

/* CTA shimmer */
@keyframes gac-cta-shimmer {
  0% { left: -120%; }
  100% { left: 140%; }
}

/* Connector dashed-flow */
@keyframes gac-connector-flow {
  to { stroke-dashoffset: -28; }
}