/* DesktopDesk motion integration v1
   Purpose:
   - Animate text and ambient background only.
   - Keep screenshots, future videos, cards and visual frames static.
*/

:root {
  --dd-a-x: 0px;
  --dd-a-y: 0px;
  --dd-a-scale: 1;
  --dd-b-x: 0px;
  --dd-b-y: 0px;
  --dd-b-scale: 1;
  --dd-c-x: 0px;
  --dd-c-y: 0px;
  --dd-ribbon-y: 0px;
  --dd-ribbon-rotate: -10deg;
  --dd-ambient-opacity: 0.46;
}

/* Existing reveal rules must never move replaceable media. */
html.dd-motion-js .dd-motion-static,
html.dd-motion-js .dd-motion-static[data-reveal],
html.dd-motion-js .dd-motion-static *,
html.dd-motion-js .scene-visual,
html.dd-motion-js .guide-layout {
  animation: none !important;
}

html.dd-motion-js .dd-motion-static,
html.dd-motion-js .dd-motion-static[data-reveal],
html.dd-motion-js .scene-visual,
html.dd-motion-js .guide-layout {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Isolated ambient layer, placed above the current gradient and below sections. */
.dd-motion-lights {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.dd-motion-lights > * {
  pointer-events: none;
  will-change: transform, opacity;
}

.dd-motion-orb {
  position: fixed;
  border-radius: 999px;
  filter: blur(76px);
  mix-blend-mode: screen;
  opacity: var(--dd-ambient-opacity);
}

.dd-motion-orb--a {
  top: 8vh;
  left: -13vw;
  width: min(58vw, 820px);
  height: min(58vw, 820px);
  background:
    radial-gradient(
      circle,
      rgba(80, 192, 255, 0.62) 0%,
      rgba(80, 192, 255, 0.22) 48%,
      transparent 72%
    );
  transform:
    translate3d(var(--dd-a-x), var(--dd-a-y), 0)
    scale(var(--dd-a-scale));
}

.dd-motion-orb--b {
  top: 36vh;
  right: -15vw;
  width: min(50vw, 700px);
  height: min(50vw, 700px);
  background:
    radial-gradient(
      circle,
      rgba(142, 111, 255, 0.48) 0%,
      rgba(142, 111, 255, 0.17) 50%,
      transparent 74%
    );
  transform:
    translate3d(var(--dd-b-x), var(--dd-b-y), 0)
    scale(var(--dd-b-scale));
}

.dd-motion-orb--c {
  left: 22vw;
  bottom: -15vh;
  width: min(62vw, 900px);
  height: min(34vw, 500px);
  background:
    radial-gradient(
      ellipse,
      rgba(49, 224, 233, 0.43) 0%,
      rgba(49, 224, 233, 0.13) 50%,
      transparent 76%
    );
  transform: translate3d(var(--dd-c-x), var(--dd-c-y), 0);
}

.dd-motion-ribbon {
  position: fixed;
  left: -18vw;
  top: 47vh;
  width: 140vw;
  height: 15vh;
  opacity: 0.20;
  filter: blur(24px);
  background:
    linear-gradient(
      100deg,
      transparent 4%,
      rgba(255, 255, 255, 0.04) 18%,
      rgba(78, 196, 255, 0.28) 38%,
      rgba(158, 128, 255, 0.22) 62%,
      rgba(255, 255, 255, 0.05) 82%,
      transparent 96%
    );
  transform:
    translate3d(0, var(--dd-ribbon-y), 0)
    rotate(var(--dd-ribbon-rotate));
}

/* Existing background animations are replaced by scroll-driven movement. */
html.dd-motion-js main::before,
html.dd-motion-js main::after,
html.dd-motion-js .ambient-layer {
  animation: none !important;
  will-change: transform, opacity;
}

html.dd-motion-js main::before {
  transform: translate3d(0, var(--dd-bg-a-y, 0px), 0) scale(var(--dd-bg-a-scale, 1.02));
}

html.dd-motion-js main::after {
  transform: translate3d(0, var(--dd-bg-b-y, 0px), 0) scale(var(--dd-bg-b-scale, 1.03));
}

html.dd-motion-js .ambient-layer {
  transform: translate3d(0, var(--dd-bg-c-y, 0px), 0);
}

/* Text reveal: deliberately stronger than the previous generic fade. */
html.dd-motion-js .dd-text-reveal {
  opacity: 0 !important;
  transform: translate3d(0, 54px, 0) !important;
  filter: blur(14px) !important;
  transition: none !important;
  will-change: opacity, transform, filter;
}

html.dd-motion-js .dd-text-reveal.dd-text-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: blur(0) !important;
  transition:
    opacity 920ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 920ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 920ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Direct children appear in sequence. */
html.dd-motion-js .dd-text-reveal > .dd-text-child {
  opacity: 0;
  transform: translate3d(0, 25px, 0);
  filter: blur(9px);
  transition: none;
  will-change: opacity, transform, filter;
}

html.dd-motion-js .dd-text-reveal.dd-text-visible > .dd-text-child {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  transition:
    opacity 660ms cubic-bezier(0.22, 1, 0.36, 1) var(--dd-child-delay, 0ms),
    transform 660ms cubic-bezier(0.22, 1, 0.36, 1) var(--dd-child-delay, 0ms),
    filter 660ms cubic-bezier(0.22, 1, 0.36, 1) var(--dd-child-delay, 0ms);
}

/* A refined light trace under major headings. */
html.dd-motion-js
  .dd-text-reveal
  :is(h1, h2) {
  position: relative;
  display: inline-block;
}

html.dd-motion-js
  .dd-text-reveal
  :is(h1, h2)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.13em;
  height: 1px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(70, 181, 255, 0.72) 24%,
      rgba(155, 127, 255, 0.62) 72%,
      transparent
    );
}

html.dd-motion-js
  .dd-text-reveal.dd-text-visible
  :is(h1, h2)::after {
  opacity: 1;
  transform: scaleX(1);
  transition:
    opacity 480ms ease 330ms,
    transform 980ms cubic-bezier(0.22, 1, 0.36, 1) 330ms;
}

/* How-to chips are text navigation, so they may stagger without moving the cards. */
html.dd-motion-js .how-to-index.dd-text-reveal > a {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  filter: blur(6px);
}

html.dd-motion-js .how-to-index.dd-text-visible > a {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 480ms ease var(--dd-child-delay, 0ms),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--dd-child-delay, 0ms),
    filter 480ms ease var(--dd-child-delay, 0ms);
}

/* Header responds subtly after scrolling. */
html.dd-motion-js .site-header {
  transition:
    background-color 260ms ease,
    box-shadow 260ms ease,
    border-color 260ms ease;
}

html.dd-motion-js body.dd-has-scrolled .site-header {
  background: rgba(248, 252, 255, 0.84);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
}

/* Motion-disabled fallback remains fully readable. */
html.dd-motion-js.dd-reduced-motion .dd-text-reveal,
html.dd-motion-js.dd-reduced-motion .dd-text-reveal > .dd-text-child,
html.dd-motion-js.dd-reduced-motion .how-to-index.dd-text-reveal > a {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

html.dd-motion-js.dd-reduced-motion .dd-motion-lights {
  display: none;
}

@media (max-width: 760px) {
  html.dd-motion-js .dd-text-reveal {
    transform: translate3d(0, 34px, 0) !important;
  }

  .dd-motion-orb {
    filter: blur(54px);
    opacity: 0.30;
  }

  .dd-motion-ribbon {
    opacity: 0.12;
  }
}