:root {
  --duo-motion-x: 50;
  --duo-motion-y: 35;
  --duo-motion-scroll: 0;
  --duo-motion-gold: #d9bf75;
  --duo-motion-cream: #f2ecdf;
  --duo-motion-ink: #121210;
}

body.duo-motion {
  overflow-x: clip;
}

html.duo-motion-root {
  overflow-x: clip;
}

.duo-motion-progress {
  position: fixed;
  z-index: 95;
  inset: 0 auto auto 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, #9f7939, var(--duo-motion-gold), rgba(217, 191, 117, .18));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

.duo-motion-glow {
  position: fixed;
  z-index: 44;
  inset: 0;
  pointer-events: none;
  opacity: .74;
  background: radial-gradient(
    circle 13rem at calc(var(--duo-motion-x) * 1%) calc(var(--duo-motion-y) * 1%),
    rgba(217, 191, 117, .13),
    rgba(242, 236, 223, .045) 38%,
    transparent 72%
  );
  mix-blend-mode: screen;
  transition: opacity 500ms ease;
}

.duo-motion-hero {
  isolation: isolate;
  perspective: 1200px;
}

.duo-motion-hero > :not(.duo-motion-sheen):not(.duo-motion-ghost) {
  transform: translate3d(0, calc(var(--duo-motion-hero-shift, 0) * 1px), 0);
  will-change: transform;
}

.duo-motion-sheen {
  position: absolute;
  z-index: 1;
  inset: -25%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(217, 191, 117, .12) 48%, rgba(255, 255, 255, .08) 51%, transparent 62%);
  transform: translateX(-125%) rotate(4deg);
  animation: duoMotionSheen 12s ease-in-out infinite;
}

.duo-motion-ghost {
  position: absolute;
  z-index: 1;
  right: clamp(1rem, 7vw, 7rem);
  top: 24%;
  pointer-events: none;
  color: rgba(255, 255, 255, .075);
  font: 400 clamp(3rem, 11vw, 10rem)/.8 Georgia, "Times New Roman", serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: duoMotionGhost 13s ease-in-out infinite;
}

.duo-motion .duo-motion-hero > div,
.duo-motion .duo-motion-hero .intent-hero__copy,
.duo-motion .duo-motion-hero header {
  animation: duoMotionHeroIn 1100ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes duoMotionHeroIn {
  from { opacity: .01; transform: translate3d(0, 46px, 0); filter: blur(9px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes duoMotionSheen {
  0%, 58% { transform: translateX(-125%) rotate(4deg); opacity: 0; }
  66% { opacity: 1; }
  88%, 100% { transform: translateX(125%) rotate(4deg); opacity: 0; }
}

@keyframes duoMotionGhost {
  0%, 100% { opacity: 0; transform: translate3d(0, 24px, 0); letter-spacing: .22em; }
  48%, 62% { opacity: 1; transform: translate3d(0, 0, 0); letter-spacing: .3em; }
}

/* Defaults remain fully visible. Modern browsers add view-linked movement;
   unsupported browsers simply keep the content readable. */
[data-duo-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}

@supports (animation-timeline: view()) {
  [data-duo-reveal] {
    animation: duoMotionReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 34%;
  }

  @keyframes duoMotionReveal {
    from { opacity: .22; transform: translate3d(0, 58px, 0) scale(.985); filter: blur(7px); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  }
}

.duo-motion-panel {
  --duo-panel-x: 50;
  --duo-panel-y: 50;
  position: relative;
  isolation: isolate;
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1), border-color 500ms ease, box-shadow 700ms ease;
  will-change: transform;
}

.duo-motion-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle 12rem at calc(var(--duo-panel-x) * 1%) calc(var(--duo-panel-y) * 1%),
    rgba(217, 191, 117, .2),
    transparent 66%
  );
  transition: opacity 550ms ease;
}

.duo-motion-panel:hover,
.duo-motion-panel:focus-within {
  transform: translate3d(0, -5px, 0);
  border-color: rgba(217, 191, 117, .72) !important;
  box-shadow: 0 1.8rem 4rem rgba(18, 18, 16, .13);
}

.duo-motion-panel:hover::after,
.duo-motion-panel:focus-within::after {
  opacity: 1;
}

.duo-motion-magnetic {
  --duo-magnetic-x: 0px;
  --duo-magnetic-y: 0px;
  cursor: pointer;
  transform: translate3d(var(--duo-magnetic-x), var(--duo-magnetic-y), 0);
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1), color 250ms ease, background-color 250ms ease, border-color 250ms ease;
  will-change: transform;
}

.duo-motion .learn-index a,
.duo-motion .intent-index a,
.duo-motion .duo-nav a,
.duo-motion .nav-links a {
  position: relative;
}

.duo-motion .learn-index a::after,
.duo-motion .intent-index a::after,
.duo-motion .duo-nav a::after,
.duo-motion .nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: .24em;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--duo-motion-gold), transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 480ms cubic-bezier(.16, 1, .3, 1);
}

.duo-motion .learn-index a:hover::after,
.duo-motion .learn-index a:focus-visible::after,
.duo-motion .intent-index a:hover::after,
.duo-motion .intent-index a:focus-visible::after,
.duo-motion .intent-index a.is-current::after,
.duo-motion .duo-nav a:hover::after,
.duo-motion .duo-nav a:focus-visible::after,
.duo-motion .nav-links a:hover::after,
.duo-motion .nav-links a:focus-visible::after {
  transform: scaleX(1);
}

.duo-motion .learn-article::before {
  transform-origin: center;
  transition: transform 1100ms cubic-bezier(.16, 1, .3, 1), filter 900ms ease;
}

.duo-motion .learn-article:hover::before {
  transform: scale(1.018);
  filter: saturate(1.04) contrast(1.02);
}

.duo-motion details summary {
  position: relative;
  padding-right: 2.5rem;
  transition: color 300ms ease, transform 500ms cubic-bezier(.16, 1, .3, 1);
}

.duo-motion details summary::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: 0;
  color: var(--duo-motion-gold);
  font: 400 1.4em/1 Georgia, "Times New Roman", serif;
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
}

.duo-motion details[open] summary::after {
  transform: rotate(45deg);
}

.duo-motion details:hover summary,
.duo-motion details:focus-within summary {
  color: #9f7939;
  transform: translateX(.3rem);
}

/* Even the plain utility indexes belong to Aria's authored visual world. */
.duo-motion:not(.duo):not(.duo) {
  min-height: 100svh;
  padding: clamp(2rem, 7vw, 6rem);
  color: var(--duo-motion-cream);
  background:
    radial-gradient(circle at calc(var(--duo-motion-x) * 1%) calc(var(--duo-motion-y) * 1%), rgba(217, 191, 117, .14), transparent 27rem),
    var(--duo-motion-ink);
}

.duo-motion:not(.duo):not(.duo) > h1 {
  max-width: 12ch;
  color: var(--duo-motion-cream);
  font: 400 clamp(3rem, 9vw, 7rem)/.9 Georgia, "Times New Roman", serif;
}

.duo-motion:not(.duo):not(.duo) > p {
  color: rgba(242, 236, 223, .68);
}

.duo-motion:not(.duo):not(.duo) > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
  max-width: 72rem;
  padding: 0;
  list-style: none;
}

.duo-motion:not(.duo):not(.duo) > ul li {
  margin: 0;
  padding: 1.2rem;
  border: 1px solid rgba(217, 191, 117, .25);
  background: rgba(255, 255, 255, .025);
}

.duo-motion:not(.duo):not(.duo) a,
.duo-motion:not(.duo):not(.duo) a:visited {
  color: var(--duo-motion-gold);
}

@media (max-width: 760px), (pointer: coarse) {
  .duo-motion-glow { display: none; }
  .duo-motion-ghost { top: 18%; right: -1rem; font-size: clamp(3rem, 25vw, 7rem); }
  .duo-motion-panel:hover,
  .duo-motion-panel:focus-within { transform: translate3d(0, -2px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .duo-motion *,
  .duo-motion *::before,
  .duo-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .duo-motion-glow,
  .duo-motion-sheen,
  .duo-motion-ghost,
  .duo-motion-progress {
    display: none !important;
  }

  [data-duo-reveal],
  .duo-motion-panel,
  .duo-motion-magnetic,
  .duo-motion-hero > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}