/*
 * Tempo experience layer
 * ----------------------
 * Additive art direction only. Existing layout, copy and motion declarations
 * remain in their source files; every moving rule here is gated by the
 * `ambient-motion` class set only when reduced motion is not requested.
 */

:root {
  --ambient-x: 50%;
  --ambient-y: 34%;
  --ambient-shift-x: 0px;
  --ambient-shift-y: 0px;
  --ambient-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ambient-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ambient-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ambient-fast: 260ms;
  --ambient-medium: 720ms;
  --ambient-slow: 1200ms;
}

body.ambient-enhanced {
  position: relative;
  isolation: isolate;
}

.tempo-ambient-layer {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.8;
  contain: strict;
}

.tempo-ambient-layer::after {
  position: absolute;
  inset: -45%;
  content: "";
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  transform: rotate(0.001deg);
}

.tempo-ambient-orb {
  position: absolute;
  width: min(62vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.2;
  will-change: transform;
}

.tempo-ambient-orb--one {
  top: -30%;
  left: -18%;
  background: rgba(89, 140, 255, 0.76);
}

.tempo-ambient-orb--two {
  top: -20%;
  right: -25%;
  background: rgba(119, 91, 236, 0.7);
}

.tempo-ambient-orb--three {
  right: 10%;
  bottom: -42%;
  width: min(48vw, 700px);
  background: rgba(255, 194, 105, 0.44);
}

body.ambient-enhanced > header,
body.ambient-enhanced > section,
body.ambient-enhanced > main,
body.ambient-enhanced > .cta-final,
body.ambient-enhanced > footer {
  z-index: 1;
}

body.home > footer {
  position: relative;
}

/* Navigation gains depth as the page moves without changing its structure. */
body.ambient-enhanced nav {
  transition:
    background-color var(--ambient-fast) ease,
    border-color var(--ambient-fast) ease,
    box-shadow var(--ambient-medium) var(--ambient-ease),
    backdrop-filter var(--ambient-fast) ease;
}

body.subpage > nav {
  z-index: 50;
}

body.home nav.ambient-nav-scrolled {
  background: rgba(249, 248, 246, 0.91);
  border-color: rgba(53, 41, 123, 0.13);
  box-shadow: 0 18px 48px -34px rgba(31, 21, 91, 0.72);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
}

body.subpage > nav.ambient-nav-scrolled {
  border-color: rgba(61, 46, 139, 0.16);
  box-shadow: 0 22px 54px -36px rgba(31, 21, 91, 0.72);
}

/* Hero: the original gradient remains, with light and texture layered above it. */
body.home header#top {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

body.home header#top > .wrap {
  position: relative;
  z-index: 2;
}

body.home header#top::before {
  position: absolute;
  z-index: 0;
  inset: -16%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(34rem 28rem at var(--ambient-x) var(--ambient-y), rgba(255, 255, 255, 0.86), transparent 68%),
    radial-gradient(44rem 34rem at calc(var(--ambient-x) + 19%) calc(var(--ambient-y) - 12%), rgba(113, 88, 255, 0.38), transparent 72%),
    radial-gradient(38rem 30rem at calc(var(--ambient-x) - 22%) calc(var(--ambient-y) + 20%), rgba(72, 142, 255, 0.3), transparent 74%);
  mix-blend-mode: soft-light;
  transform: translate3d(var(--ambient-shift-x), var(--ambient-shift-y), 0) scale(1.04);
  will-change: transform, opacity;
}

body.home header#top::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent 78%);
}

body.home .window {
  position: relative;
  isolation: isolate;
}

body.home .window::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.16;
  background: radial-gradient(34rem 22rem at var(--ambient-card-x, 50%) var(--ambient-card-y, 10%), rgba(137, 116, 255, 0.42), transparent 72%);
  mix-blend-mode: multiply;
}

/* Each homepage chapter gets its own responsive atmosphere. */
body.home section {
  --ambient-section-rgb: 110, 91, 227;
  --ambient-section-x: 78%;
  --ambient-section-y: 32%;
  position: relative;
  isolation: isolate;
  overflow: clip;
}

body.home section > .wrap {
  position: relative;
  z-index: 2;
}

body.home section::before {
  position: absolute;
  z-index: 0;
  inset: -18%;
  content: "";
  pointer-events: none;
  opacity: 0.72;
  background:
    radial-gradient(42rem 32rem at var(--ambient-section-x) var(--ambient-section-y), rgba(var(--ambient-section-rgb), 0.24), transparent 72%),
    radial-gradient(34rem 26rem at calc(100% - var(--ambient-section-x)) calc(100% - var(--ambient-section-y)), rgba(255, 255, 255, 0.52), transparent 74%);
  transform: scale(1.06);
}

body.home section.ambient-section-active::before {
  will-change: background-position, opacity;
}

body.home section::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.16;
  background-image: radial-gradient(circle, rgba(var(--ambient-section-rgb), 0.28) 0 0.7px, transparent 0.85px);
  background-position: var(--ambient-grid-x, 0px) var(--ambient-grid-y, 0px);
  background-size: 24px 24px;
  mask-image: linear-gradient(115deg, transparent 3%, #000 32%, transparent 72%);
  -webkit-mask-image: linear-gradient(115deg, transparent 3%, #000 32%, transparent 72%);
}

body.home #analytics {
  --ambient-section-rgb: 104, 87, 231;
}

body.home #cost {
  --ambient-section-rgb: 234, 159, 47;
  --ambient-section-x: 23%;
}

body.home #mcp {
  --ambient-section-rgb: 69, 128, 238;
}

body.home #trust {
  --ambient-section-rgb: 124, 94, 222;
  --ambient-section-x: 25%;
}

body.home #how {
  --ambient-section-rgb: 82, 119, 225;
}

body.home section:nth-of-type(6) {
  --ambient-section-rgb: 127, 99, 226;
  --ambient-section-x: 21%;
}

body.home section:nth-of-type(7) {
  --ambient-section-rgb: 74, 127, 222;
}

body.home .cta-final {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

body.home .cta-final::before {
  position: absolute;
  z-index: 0;
  inset: -35%;
  content: "";
  pointer-events: none;
  opacity: 0.58;
  background:
    conic-gradient(from 120deg at var(--ambient-x) 50%, rgba(90, 140, 255, 0.18), rgba(129, 92, 232, 0.28), rgba(255, 255, 255, 0.06), rgba(90, 140, 255, 0.18));
  filter: blur(36px);
}

body.home .cta-final > * {
  position: relative;
  z-index: 1;
}

/* Subpages inherit the same visual world without compromising reading surfaces. */
body.subpage > main,
body.subpage > footer {
  position: relative;
}

body.subpage > main {
  isolation: isolate;
}

body.subpage > main > * {
  position: relative;
  z-index: 1;
}

body.subpage > main::before {
  position: absolute;
  z-index: 0;
  inset: -1px;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(34rem 24rem at var(--ambient-x) 0%, rgba(111, 91, 224, 0.13), transparent 74%);
}

body.subpage.blog-post > main::after,
body.subpage.legal > main::after,
body.subpage.blog-index > main::after {
  position: absolute;
  z-index: 0;
  inset: 12px;
  content: "";
  pointer-events: none;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

/* Interactive depth: additive individual transforms compose with existing transform animations. */
.ambient-surface {
  --ambient-card-x: 50%;
  --ambient-card-y: 50%;
  --ambient-depth-x: 0px;
  --ambient-depth-y: 0px;
  translate: var(--ambient-depth-x) var(--ambient-depth-y);
  background-image: radial-gradient(22rem 16rem at var(--ambient-card-x) var(--ambient-card-y), rgba(117, 96, 235, 0.09), transparent 74%);
  background-blend-mode: soft-light;
}

body.home .trust.ambient-surface,
body.home .step.ambient-surface,
body.home .flag.ambient-surface {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    translate 0.42s var(--ambient-ease-soft),
    border-color var(--ambient-fast) ease;
}

body.subpage .post-card.ambient-surface {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    translate 0.42s var(--ambient-ease-soft),
    border-color var(--ambient-fast) ease;
}

body.home .chart-card.ambient-surface,
body.home .term.ambient-surface {
  transition:
    translate 0.42s var(--ambient-ease-soft),
    border-color var(--ambient-fast) ease,
    box-shadow 0.38s var(--ambient-ease);
}

.ambient-motion .ambient-surface:hover,
.ambient-motion .ambient-surface:focus-within {
  border-color: rgba(77, 59, 175, 0.2);
}

.ambient-motion .ambient-surface {
  -webkit-tap-highlight-color: transparent;
}

/* Buttons keep their meaning and gain a restrained moving highlight. */
body.ambient-enhanced .btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow var(--ambient-fast) ease,
    translate var(--ambient-fast) var(--ambient-ease-spring);
}

body.ambient-enhanced .btn::after {
  position: absolute;
  z-index: 1;
  top: -90%;
  bottom: -90%;
  left: -58%;
  width: 36%;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  transform: skewX(-18deg) translateX(-220%);
}

.ambient-motion .btn:hover,
.ambient-motion .btn:focus-visible {
  translate: 0 -2px;
  box-shadow: 0 18px 38px -20px rgba(48, 35, 126, 0.82);
}

.ambient-motion .btn:hover::after,
.ambient-motion .btn:focus-visible::after {
  opacity: 0.75;
  animation: ambient-button-glint 780ms var(--ambient-ease) both;
}

/* The terminal keeps a stable stacking context for its line-by-line reveal. */
body.home .term {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.home .term > * {
  position: relative;
  z-index: 1;
}

/* Image motion is added, never substituted for an existing image effect. */
.ambient-image {
  --ambient-image-x: 0px;
  --ambient-image-y: 0px;
  transform: translate3d(var(--ambient-image-x), var(--ambient-image-y), 0);
  transform-origin: center;
  transition:
    transform 0.8s var(--ambient-ease-soft),
    filter 0.8s ease;
  will-change: transform;
}

.ambient-motion .post-card .ambient-image {
  animation: ambient-image-breathe 12s ease-in-out infinite;
}

.ambient-motion .post-card:nth-child(2n) .ambient-image {
  animation-delay: -4s;
  animation-duration: 14s;
}

.ambient-motion .post-card:nth-child(3n) .ambient-image {
  animation-delay: -8s;
  animation-duration: 16s;
}

.ambient-motion .post-card:hover .ambient-image,
.ambient-motion .post-card:focus-visible .ambient-image {
  --ambient-image-y: -3px;
  filter: saturate(1.08) contrast(1.02);
}

.ambient-motion .hero-img.ambient-image {
  animation: ambient-hero-image 10s ease-in-out infinite;
}

/* Scroll choreography uses filter/clip/individual translate so original reveals stay intact. */
@media (prefers-reduced-motion: no-preference) {
  body.ambient-motion.ambient-ready .ambient-choreo {
    clip-path: inset(0 0 13% 0 round 10px);
    filter: blur(7px) saturate(0.92);
    translate: 0 18px;
    transition:
      clip-path 0.95s var(--ambient-ease-soft),
      filter 0.95s var(--ambient-ease-soft),
      translate 0.95s var(--ambient-ease-soft);
    transition-delay: var(--ambient-delay, 0ms);
  }

  body.ambient-motion.ambient-ready .ambient-choreo.ambient-in {
    clip-path: inset(0 0 0 0 round 0);
    filter: none;
    translate: 0 0;
  }

  body.ambient-motion .ambient-hero-line {
    animation: ambient-hero-rise 0.95s var(--ambient-ease-soft) both;
    animation-delay: var(--ambient-delay, 0ms);
  }

  body.ambient-motion details[open] > p {
    animation: ambient-answer-open 0.46s var(--ambient-ease-soft) both;
  }

  body.ambient-motion summary::after {
    transition: transform 0.38s var(--ambient-ease-spring), color var(--ambient-fast) ease;
  }

  body.ambient-motion details[open] summary::after {
    transform: rotate(180deg) scale(1.08);
  }

  body.ambient-motion .tempo-ambient-orb--one {
    animation: ambient-orb-one 21s ease-in-out infinite alternate;
  }

  body.ambient-motion .tempo-ambient-orb--two {
    animation: ambient-orb-two 25s ease-in-out -8s infinite alternate;
  }

  body.ambient-motion .tempo-ambient-orb--three {
    animation: ambient-orb-three 28s ease-in-out -13s infinite alternate;
  }

  body.ambient-motion .tempo-ambient-layer::after {
    animation: ambient-grain 0.8s steps(2, end) infinite;
  }

  body.ambient-motion.home header#top::before {
    animation: ambient-hero-bloom 13s ease-in-out infinite alternate;
  }

  body.ambient-motion.home section::after {
    animation: ambient-section-grid 16s linear infinite;
    animation-play-state: paused;
  }

  body.ambient-motion.home section.ambient-section-active::after {
    animation-play-state: running;
  }

  body.ambient-motion.home .cta-final::before {
    animation: ambient-cta-turn 18s linear infinite;
  }
}

@keyframes ambient-hero-rise {
  from {
    clip-path: inset(0 0 22% 0 round 8px);
    filter: blur(9px);
    opacity: 0.15;
    translate: 0 24px;
  }
  to {
    clip-path: inset(0 0 0 0 round 0);
    filter: none;
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes ambient-answer-open {
  from {
    clip-path: inset(0 0 35% 0);
    filter: blur(5px);
    opacity: 0.2;
    translate: 0 -5px;
  }
  to {
    clip-path: inset(0 0 0 0);
    filter: none;
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes ambient-button-glint {
  from { transform: skewX(-18deg) translateX(-220%); }
  to { transform: skewX(-18deg) translateX(660%); }
}

@keyframes ambient-image-breathe {
  0%, 100% { scale: 1.01; }
  50% { scale: 1.045; }
}

@keyframes ambient-hero-image {
  0%, 100% { translate: 0 0; filter: saturate(1); }
  50% { translate: 0 -4px; filter: saturate(1.035); }
}

@keyframes ambient-orb-one {
  from { transform: translate3d(-4%, -2%, 0) scale(0.94); }
  to { transform: translate3d(20%, 16%, 0) scale(1.12); }
}

@keyframes ambient-orb-two {
  from { transform: translate3d(4%, 8%, 0) scale(1.06); }
  to { transform: translate3d(-22%, 18%, 0) scale(0.9); }
}

@keyframes ambient-orb-three {
  from { transform: translate3d(8%, 10%, 0) scale(0.92); }
  to { transform: translate3d(-18%, -18%, 0) scale(1.12); }
}

@keyframes ambient-grain {
  0% { transform: translate3d(-2%, -1%, 0) rotate(0.001deg); }
  25% { transform: translate3d(1%, 2%, 0) rotate(0.001deg); }
  50% { transform: translate3d(2%, -2%, 0) rotate(0.001deg); }
  75% { transform: translate3d(-1%, 1%, 0) rotate(0.001deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0.001deg); }
}

@keyframes ambient-hero-bloom {
  from { opacity: 0.74; filter: saturate(0.98); }
  to { opacity: 1; filter: saturate(1.13); }
}

@keyframes ambient-section-grid {
  to { background-position: 48px 24px; }
}

@keyframes ambient-cta-turn {
  to { transform: rotate(360deg) scale(1.06); }
}

@media (max-width: 860px) {
  .tempo-ambient-layer {
    opacity: 0.58;
  }

  .tempo-ambient-orb {
    width: 96vw;
    filter: blur(66px);
    opacity: 0.16;
  }

  body.home header#top::before {
    inset: -8%;
    background:
      radial-gradient(24rem 22rem at 50% 18%, rgba(255, 255, 255, 0.72), transparent 70%),
      radial-gradient(32rem 26rem at 90% 18%, rgba(113, 88, 255, 0.3), transparent 72%),
      radial-gradient(30rem 24rem at 8% 52%, rgba(72, 142, 255, 0.22), transparent 74%);
    transform: none;
  }

  body.home header#top::after {
    background-size: 58px 58px;
    opacity: 0.14;
  }

  body.home section::after {
    opacity: 0.09;
  }

  .ambient-motion .ambient-surface {
    --ambient-depth-x: 0px !important;
    --ambient-depth-y: 0px !important;
  }
}

@media (max-width: 560px) {
  .tempo-ambient-layer::after {
    opacity: 0.02;
  }

  body.home section::before {
    inset: -8%;
    opacity: 0.52;
  }

  body.home section::after {
    display: none;
  }

  body.home .window::after {
    opacity: 0.1;
  }

  .ambient-motion .post-card .ambient-image {
    animation-duration: 18s;
  }
}

/* Reduced motion affects only this new layer; original site motion is untouched. */
@media (prefers-reduced-motion: reduce) {
  .tempo-ambient-orb,
  .tempo-ambient-layer::after,
  body.home header#top::before,
  body.home section::after,
  body.home .cta-final::before {
    animation: none;
  }
}