/* =========================================================================
   CoLateral website - atmosphere
   -------------------------------------------------------------------------
   The one shared visual layer every public page gets: the lit backdrop, the
   card surface and its glow, the float motion and the scroll reveal. The
   build injects this sheet into every page head, directly before
   site-prefs.css, so the palette tokens there still win and a page's own
   <style> still wins over both for anything it restates.

   Design rules, so the next edit keeps the look:
   - Light stays white and Office Blue. Dark is a deep near-black navy, lit
     by two or three very soft colour fields, never a flat black and never a
     neon. Glows sit BEHIND content, at low alpha, and do not pulse.
   - Motion is slow and small: floats of 8-12px over 7-12s, reveals of 24px.
     Nothing loops fast, nothing bounces, nothing follows the cursor.
   - Every animation here has a reduced-motion opt-out that removes it
     outright (animation: none), rather than crushing its duration.
   ========================================================================= */

:root {
  --atm-glow-a: rgba(0, 120, 212, 0.13);
  --atm-glow-b: rgba(112, 96, 255, 0.08);
  --atm-glow-c: rgba(0, 170, 200, 0.07);
  --atm-dot: rgba(70, 90, 120, 0.2);
  --atm-card: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  --atm-card-line: rgba(15, 23, 42, 0.09);
  --atm-card-line-hover: rgba(0, 103, 192, 0.35);
  --atm-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 44px -18px rgba(15, 23, 42, 0.18);
  --atm-card-halo: 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 24px 70px -30px rgba(0, 103, 192, 0.28);
  --atm-card-shadow-hover: 0 1px 2px rgba(15, 23, 42, 0.05), 0 26px 60px -20px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(0, 103, 192, 0.12);
  --atm-radius: 18px;
}

html[data-site-theme="dark"] {
  --atm-glow-a: rgba(56, 140, 255, 0.16);
  --atm-glow-b: rgba(120, 96, 255, 0.11);
  --atm-glow-c: rgba(0, 190, 220, 0.06);
  --atm-dot: rgba(160, 190, 230, 0.16);
  --atm-card: linear-gradient(180deg, rgba(20, 29, 48, 0.92) 0%, rgba(12, 18, 32, 0.92) 100%);
  --atm-card-line: rgba(148, 178, 220, 0.12);
  --atm-card-line-hover: rgba(120, 180, 255, 0.4);
  --atm-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --atm-card-halo: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 0 80px -24px rgba(77, 166, 255, 0.35);
  --atm-card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 30px 70px -24px rgba(0, 0, 0, 0.8), 0 0 90px -20px rgba(77, 166, 255, 0.4);
}

/* ---- The backdrop ------------------------------------------------------
   .canvas-bg is the fixed ambience layer on the home, pricing, FAQ, 404 and
   every public.css page; .legal-bg is the same layer on the legal family.
   Both get the same lit field and two slow drifting light pools. */
html .canvas-bg,
html .legal-bg {
  overflow: hidden;
  background:
    radial-gradient(1100px 680px at 12% -8%, var(--atm-glow-a), transparent 62%),
    radial-gradient(900px 620px at 92% 6%, var(--atm-glow-b), transparent 62%),
    radial-gradient(1200px 760px at 50% 112%, var(--atm-glow-c), transparent 64%),
    var(--bg, #eef2f7);
}

html[data-site-theme="dark"] .canvas-bg,
html[data-site-theme="dark"] .legal-bg {
  background:
    radial-gradient(1100px 680px at 12% -8%, var(--atm-glow-a), transparent 62%),
    radial-gradient(900px 620px at 92% 6%, var(--atm-glow-b), transparent 62%),
    radial-gradient(1200px 760px at 50% 112%, var(--atm-glow-c), transparent 64%),
    linear-gradient(180deg, #070b15 0%, #060911 55%, #05080f 100%);
}

html .canvas-bg::before,
html .canvas-bg::after,
html .legal-bg::before,
html .legal-bg::after {
  content: "";
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.9;
  will-change: transform;
}

html .canvas-bg::before,
html .legal-bg::before {
  left: -12vmax;
  top: 18vh;
  background: radial-gradient(circle, var(--atm-glow-a) 0%, transparent 68%);
  animation: atm-drift-a 38s ease-in-out infinite alternate;
}

html .canvas-bg::after,
html .legal-bg::after {
  right: -14vmax;
  bottom: -10vh;
  background: radial-gradient(circle, var(--atm-glow-b) 0%, transparent 68%);
  animation: atm-drift-b 46s ease-in-out infinite alternate;
}

@keyframes atm-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(14vw, 8vh, 0) scale(1.12); }
}

@keyframes atm-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to { transform: translate3d(-12vw, -10vh, 0) scale(0.94); }
}

/* The dot grid is the canvas signature. It fades toward the edges so the
   page reads as a lit patch of an infinite canvas rather than wallpaper. */
html .canvas-dots,
html .legal-grid {
  background-image: radial-gradient(var(--atm-dot) 1px, transparent 1.5px);
  background-size: 28px 28px;
}

html[data-site-theme="dark"] .canvas-dots,
html[data-site-theme="dark"] .legal-grid {
  background-image: radial-gradient(var(--atm-dot) 1px, transparent 1.5px);
}

/* ---- Card surface --------------------------------------------------------
   .atm-card is the surface every redesigned card uses. .atm-glow adds a soft
   coloured pool behind a card or a group of cards (the pool is a pseudo
   element under the card, so the card's own fill stays solid and readable). */
.atm-card {
  position: relative;
  border: 1px solid var(--atm-card-line);
  border-radius: var(--atm-radius);
  background: var(--atm-card);
  box-shadow: var(--atm-card-shadow);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.atm-card.is-lit,
.atm-card:where(a, .atm-hover):hover {
  box-shadow: var(--atm-card-halo);
}

.atm-card:where(a, .atm-hover):hover {
  transform: translateY(-4px);
  border-color: var(--atm-card-line-hover);
  box-shadow: var(--atm-card-shadow-hover);
}

.atm-glow {
  position: relative;
  isolation: isolate;
}

.atm-glow::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12% -8%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 30% 40%, var(--atm-glow-a), transparent 100%),
    radial-gradient(closest-side at 72% 62%, var(--atm-glow-b), transparent 100%);
  filter: blur(30px);
  pointer-events: none;
}

/* ---- Motion ------------------------------------------------------------- */
.atm-float { animation: atm-float 8s ease-in-out infinite; }
.atm-float-2 { animation: atm-float 10s ease-in-out -3s infinite; }
.atm-float-3 { animation: atm-float 12s ease-in-out -6s infinite; }

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

/* Scroll reveal. Hidden only once site-atmosphere.js has stamped
   html.atm-motion, so a page with scripting off, or a script that failed,
   shows everything. The script adds .is-in as each block reaches view. */
html.atm-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

html.atm-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html .canvas-bg::before,
  html .canvas-bg::after,
  html .legal-bg::before,
  html .legal-bg::after,
  .atm-float,
  .atm-float-2,
  .atm-float-3 {
    animation: none;
  }

  .atm-card,
  .atm-card:where(a, .atm-hover):hover {
    transition: none;
    transform: none;
  }

  html.atm-motion [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  html .canvas-bg::before,
  html .canvas-bg::after,
  html .legal-bg::before,
  html .legal-bg::after,
  .atm-glow::before {
    display: none;
  }
}