/*
  uiux-motion — vanilla HTML/CSS/JS. No animation library.

  Attention budget: one dominant emphasis at a time.
  Hero owns entrance (L04) with a single background video.
  Process owns selection (D07).
  Work owns discovery (D04/D08/L01). Approach uses one-shot clip reveal.
  Form stays still except F06/F08.
  Non-interactive cards do not lift.

  L04 Split Text Lift
  Motion intent: establish the page purpose before supporting copy.
  Trigger: first paint
  User meaning: this is the primary statement
  Animated properties: transform
  Duration/easing: --motion-expressive / --ease-enter
  Reduced-motion: static type
  Touch/keyboard: not interaction-bound

  L03 Icon / Mark Morph (stroke draw)
  Motion intent: introduce the brand growth path after the shots settle
  Trigger: first paint
  User meaning: the orange head is the focal step
  Animated properties: stroke-dashoffset
  Duration/easing: --motion-expressive / --ease-enter
  Reduced-motion: path complete immediately
  Touch/keyboard: not interaction-bound

  L06 Light Sweep
  Motion intent: mark the single primary conversion control
  Trigger: hover / focus-visible
  User meaning: this is the action to take
  Animated properties: transform on ::after
  Duration/easing: --motion-expressive / --ease-enter
  Reduced-motion: no sweep; colour/state remain
  Touch/keyboard: focus-visible parity; coarse uses colour only

  F01 Affordance Lift + F02 Press
  Motion intent: confirm buttons are interactive
  Trigger: hover/focus-visible / :active
  User meaning: the control responded
  Animated properties: transform
  Duration/easing: --motion-fast / --motion-instant
  Reduced-motion: brightness on press only
  Touch/keyboard: press still works; no hover-only content

  F03 Directional Icon Nudge
  Motion intent: reinforce that secondary links continue forward
  Trigger: hover / focus-visible
  User meaning: this path goes onward
  Animated properties: transform translateX
  Duration/easing: --motion-fast / --ease-enter
  Reduced-motion: icon stays
  Touch/keyboard: focus-visible parity

  D01 Underline Draw
  Motion intent: show which nav destination is being targeted
  Trigger: hover / focus-visible
  User meaning: this item is the current target
  Animated properties: transform scaleX
  Duration/easing: --motion-fast / --ease-enter
  Reduced-motion: colour change only
  Touch/keyboard: focus-visible parity

  D07 Shared Tab Indicator
  Motion intent: keep process steps as one selection, not six pages
  Trigger: tab click / arrow keys
  User meaning: this step is current; the panel belongs to it
  Animated properties: transform (position), width/height matching D07 recipe
  Duration/easing: --motion-base / --ease-enter
  Reduced-motion: indicator jumps
  Touch/keyboard: ARIA tabs + arrow keys

  D04 Clipped Media Zoom
  Motion intent: show project photography opens into a case study
  Trigger: hover / focus-within on .work-card
  User meaning: there is more of this work
  Animated properties: transform scale
  Duration/easing: --motion-slow / --ease-enter
  Reduced-motion: static crop
  Touch/keyboard: focus-within on View Project

  D08 Spotlight
  Motion intent: reveal the work surface around the pointer without moving copy
  Trigger: pointer move / focus-within
  User meaning: this frame is inspectable
  Animated properties: opacity of overlay; --px/--py
  Duration/easing: --motion-fast linear
  Reduced-motion: no overlay
  Touch/keyboard: coarse gets no spotlight; keyboard uses focus-within at centre

  L01 3D Tilt
  Motion intent: physicality on selected work photography only
  Trigger: pointer move on .media-zoom
  User meaning: this is a crafted artefact
  Animated properties: rotateX/Y
  Duration/easing: --motion-base / --ease-enter
  Reduced-motion / coarse: none
  Touch/keyboard: not required for the link

  D05 Expand / Collapse
  Motion intent: keep FAQ answers spatially attached to their question
  Trigger: summary open
  User meaning: this answer belongs to this question
  Animated properties: opacity, transform
  Duration/easing: --motion-base / --ease-enter
  Reduced-motion: instant open
  Touch/keyboard: native details

  F06 Form Focus
  Motion intent: confirm the active field without moving the form
  Trigger: :focus-visible
  User meaning: this is the field being completed
  Animated properties: border-color, box-shadow
  Duration/easing: --motion-fast linear
  Reduced-motion: instant colour
  Touch/keyboard: native focus

  F08 Status
  Motion intent: confirm send/success/error next to the submit control
  Trigger: form state change
  User meaning: the request was accepted or failed
  Animated properties: opacity
  Duration/easing: --motion-fast linear
  Reduced-motion: text only
  Touch/keyboard: role=status

  Capability hover demos
  Motion intent: make each point a working interaction, not a paragraph
  Trigger: hover / focus-visible on .capability-card
  User meaning: this is the behaviour the copy describes
  Animated properties: transform, opacity, background, max-width
  Duration/easing: --motion-expressive / --ease-enter
  Reduced-motion: completed state, no playback
  Touch/keyboard: coarse shows completed state; keyboard uses :focus-within
*/

.capability-card .demo-steps li,
.capability-card .demo-track span,
.capability-card .demo-chip,
.capability-card .demo-template,
.capability-card .demo-brand-shot,
.capability-card .demo-editor-title .from,
.capability-card .demo-editor-title .to,
.capability-card .demo-publish,
.capability-card .demo-query,
.capability-card .demo-ph,
.capability-card .demo-browser li,
.demo-journey > img {
  transition:
    transform var(--motion-expressive) var(--ease-enter),
    opacity var(--motion-base) var(--ease-enter),
    background-color var(--motion-fast) linear,
    color var(--motion-fast) linear,
    border-color var(--motion-fast) linear,
    max-width var(--motion-expressive) var(--ease-enter);
}

.demo-journey > img {
  transform: scale(1.04);
  filter: saturate(0.72);
}

.demo-steps li {
  opacity: 0.38;
}

.demo-brand-shot {
  opacity: 0;
  transform: scale(1.06);
}

.demo-query {
  transition-property: max-width, border-color;
}

.demo-pill,
.demo-inst-list li {
  opacity: 0.4;
}

.demo-corp-nav {
  opacity: 0;
  transform: translateY(8px);
}

.demo-stake.is-b { transform: translate(16px, -8px); }
.demo-stake.is-c { transform: translate(-10px, 10px); }
.demo-stake.is-d { transform: translate(22px, 6px); }

.demo-path .node,
.demo-life li {
  opacity: 0.4;
}

.demo-path .node:first-child,
.demo-life .is-a {
  opacity: 1;
}

.demo-groups .sorted,
.demo-edit .to,
.demo-serp .hit {
  opacity: 0;
}

.demo-outline .lvl-2,
.demo-outline .lvl-3 {
  padding-left: 0;
}

.demo-path .wire::after,
.demo-pill,
.demo-stake,
.demo-corp-nav,
.demo-inst-list li,
.demo-groups .pile,
.demo-groups .sorted,
.demo-outline li,
.demo-edit .from,
.demo-edit .to,
.demo-serp .hit,
.demo-life li {
  transition:
    transform var(--motion-expressive) var(--ease-enter),
    opacity var(--motion-base) var(--ease-enter),
    padding-left var(--motion-expressive) var(--ease-enter),
    background-color var(--motion-fast) linear,
    border-color var(--motion-fast) linear,
    color var(--motion-fast) linear;
}

.talk-panel:not([hidden]) .demo-path .node,
.talk-panel:not([hidden]) .demo-life li,
.talk-panel:not([hidden]) .demo-groups .sorted,
.talk-panel:not([hidden]) .demo-edit .to,
.talk-panel:not([hidden]) .demo-serp .hit {
  opacity: 1;
}

.talk-panel:not([hidden]) .demo-path .wire::after {
  transform: scaleX(1);
}

.talk-panel:not([hidden]) .demo-groups .pile,
.talk-panel:not([hidden]) .demo-edit .from {
  opacity: 0;
}

.talk-panel:not([hidden]) .demo-outline .lvl-2 {
  padding-left: 16px;
}

.talk-panel:not([hidden]) .demo-outline .lvl-3 {
  padding-left: 28px;
}

.talk-panel:not([hidden]) .demo-edit .demo-chip,
.talk-panel:not([hidden]) .demo-life li {
  border-top-color: var(--orange);
}

.talk-panel:not([hidden]) .demo-edit .demo-chip {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--dpx-white);
}

.talk-panel:not([hidden]) .demo-serp .hit {
  outline: 1px solid var(--orange);
}

@media (hover: hover) and (pointer: fine) {
  .capability-card:hover .demo-steps .is-a,
  .capability-card:focus-within .demo-steps .is-a {
    opacity: 1;
  }

  .capability-card:hover .demo-steps .is-b,
  .capability-card:focus-within .demo-steps .is-b {
    opacity: 1;
    transition-delay: 90ms;
  }

  .capability-card:hover .demo-steps .is-c,
  .capability-card:focus-within .demo-steps .is-c {
    opacity: 1;
    transition-delay: 180ms;
  }

  .capability-card:hover .demo-track span,
  .capability-card:focus-within .demo-track span {
    transform: scaleX(1);
  }

  .capability-card:hover .demo-chip,
  .capability-card:focus-within .demo-chip {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--dpx-white);
  }

  .capability-card:hover .capability-stage > img,
  .capability-card:focus-within .capability-stage > img {
    transform: scale(1);
    filter: none;
  }

  .capability-card:hover .demo-template,
  .capability-card:focus-within .demo-template {
    opacity: 0;
    transform: translateY(-12px);
  }

  .capability-card:hover .demo-brand-shot,
  .capability-card:focus-within .demo-brand-shot {
    opacity: 1;
    transform: scale(1);
  }

  .capability-card:hover .demo-editor-title .from,
  .capability-card:focus-within .demo-editor-title .from {
    opacity: 0;
  }

  .capability-card:hover .demo-editor-title .to,
  .capability-card:focus-within .demo-editor-title .to {
    opacity: 1;
  }

  .capability-card:hover .demo-publish,
  .capability-card:focus-within .demo-publish {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--dpx-white);
  }

  .capability-card:hover .demo-ph,
  .capability-card:focus-within .demo-ph {
    opacity: 0;
  }

  .capability-card:hover .demo-query,
  .capability-card:focus-within .demo-query {
    max-width: 12ch;
    border-right-color: transparent;
  }

  .capability-card:hover .demo-browser .hit,
  .capability-card:focus-within .demo-browser .hit {
    background: var(--dpx-primary-100);
    color: var(--navy);
  }

  .capability-card:hover .demo-pill,
  .capability-card:focus-within .demo-pill,
  .capability-card:hover .demo-inst-list li,
  .capability-card:focus-within .demo-inst-list li {
    opacity: 1;
  }

  .capability-card:hover .demo-pill.is-c,
  .capability-card:focus-within .demo-pill.is-c {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--dpx-white);
  }

  .capability-card:hover .demo-stake,
  .capability-card:focus-within .demo-stake {
    opacity: 0;
    transform: translateY(-8px);
  }

  .capability-card:hover .demo-corp-nav,
  .capability-card:focus-within .demo-corp-nav {
    opacity: 1;
    transform: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .demo-steps li {
    opacity: 1;
  }

  .demo-track span {
    transform: scaleX(1);
  }

  .demo-chip,
  .demo-publish {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--dpx-white);
  }

  .demo-journey > img {
    transform: none;
    filter: none;
  }

  .demo-template {
    opacity: 0;
  }

  .demo-brand-shot {
    opacity: 1;
    transform: none;
  }

  .demo-editor-title .from {
    opacity: 0;
  }

  .demo-editor-title .to {
    opacity: 1;
  }

  .demo-pill,
  .demo-inst-list li,
  .demo-corp-nav {
    opacity: 1;
    transform: none;
  }

  .demo-pill.is-c {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--dpx-white);
  }

  .demo-stake {
    opacity: 0;
  }

  .demo-ph {
    opacity: 0;
  }

  .demo-query {
    max-width: 12ch;
    border-right: 0;
  }

  .demo-browser .hit {
    background: var(--dpx-primary-100);
    color: var(--navy);
  }
}

.display-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.16em;
}

.display-line > span {
  display: block;
  animation: split-lift var(--motion-expressive) var(--ease-enter) both;
}

.display-line:nth-child(2) > span {
  animation-delay: 80ms;
}

.hero h1,
.hero .support,
.hero-actions,
.hero .microcopy {
  animation: fade-rise var(--motion-base) var(--ease-enter) both;
}

.hero h1 { animation-delay: 40ms; }
.hero .support { animation-delay: 90ms; }
.hero-actions { animation-delay: 130ms; }
.hero .microcopy { animation-delay: 170ms; }

@keyframes split-lift {
  from { transform: translateY(110%); }
  to { transform: none; }
}

@keyframes fade-rise {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-video {
  opacity: 0;
  animation: fade-rise var(--motion-expressive) var(--ease-enter) 80ms forwards;
}

.brand-arrow {
  opacity: 0;
  animation: motif-in var(--motion-expressive) var(--ease-enter) 320ms forwards;
}

@keyframes motif-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nav a:not(.btn) {
  position: relative;
}

.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-fast) var(--ease-enter);
}

.nav a:not(.btn):hover::after,
.nav a:not(.btn):focus-visible::after,
.nav a.is-current:not(.btn)::after {
  transform: scaleX(1);
}

.hero-actions .btn-primary.light-sweep {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero-actions .btn-primary.light-sweep::after {
  content: "";
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 35%,
    rgb(255 255 255 / 0.28) 50%,
    transparent 65%
  );
  transform: translateX(-60%) rotate(8deg);
  transition: transform var(--motion-expressive) var(--ease-enter);
}

.hero-actions .btn-primary.light-sweep:hover::after,
.hero-actions .btn-primary.light-sweep:focus-visible::after {
  transform: translateX(60%) rotate(8deg);
}

.nav-cta.light-sweep {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.nav-cta.light-sweep::after {
  content: "";
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 32%,
    rgb(255 255 255 / 0.42) 50%,
    transparent 68%
  );
  animation: nav-cta-shimmer 2.6s var(--ease-enter) infinite;
}

@keyframes nav-cta-shimmer {
  from {
    transform: translateX(-70%) rotate(8deg);
  }
  to {
    transform: translateX(70%) rotate(8deg);
  }
}

.clients-shift {
  animation: clients-roll 60s linear infinite;
}

.clients-marquee:hover .clients-shift,
.clients-marquee:focus-within .clients-shift {
  animation-play-state: paused;
}

@keyframes clients-roll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (hover: hover) and (pointer: fine) {
  .proof-marks img {
    transition: transform var(--motion-base) var(--ease-standard);
  }

  .proof-marks li:hover img {
    transform: scale(1.03);
  }
}

.direction-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.direction-link__icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: transform var(--motion-fast) var(--ease-enter);
}

.direction-link:hover .direction-link__icon,
.direction-link:focus-visible .direction-link__icon {
  transform: translateX(var(--motion-shift-sm));
}

.process-nav::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line-on-dark);
}

@media (max-width: 900px) {
  .process-nav::before {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 2px;
  }
}

.process-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 48px;
  background: var(--orange);
  pointer-events: none;
  z-index: 1;
  transition:
    transform var(--motion-base) var(--ease-enter),
    width var(--motion-base) var(--ease-enter),
    height var(--motion-base) var(--ease-enter);
}

.process-indicator[data-axis="x"] {
  top: auto;
  bottom: 0;
}

.process-panel[hidden] {
  display: none;
}

.process-panel:not([hidden]) {
  animation: panel-in var(--motion-slow) var(--ease-enter);
}

.process-panel:not([hidden])::after {
  animation: digit-in var(--motion-slow) var(--ease-enter);
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(var(--motion-shift-md));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes digit-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.media-zoom {
  overflow: hidden;
  position: relative;
  --spot-x: 50%;
  --spot-y: 50%;
}

.media-zoom img {
  transform: scale(1);
  transition: transform var(--motion-slow) var(--ease-enter);
}

.work-card:hover .media-zoom img,
.work-card:focus-within .media-zoom img {
  transform: scale(1.035);
}

.work-card .media-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      180px circle at var(--spot-x, 50%) var(--spot-y, 50%),
      rgb(255 255 255 / 0.18),
      transparent 70%
    );
  opacity: 0;
  transition: opacity var(--motion-fast) linear;
}

.work-card:hover .media-zoom::after,
.work-card:focus-within .media-zoom::after {
  opacity: 1;
}

.tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--motion-base) var(--ease-enter);
}

.js [data-reveal] {
  clip-path: inset(8% 8% 8% 8%);
  opacity: 0.4;
  transition:
    clip-path var(--motion-expressive) var(--ease-enter),
    opacity var(--motion-slow) var(--ease-enter);
}

.js [data-reveal].is-in {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

.faq details[open] p {
  animation: panel-in var(--motion-base) var(--ease-enter);
}

.faq summary::after {
  transition: transform var(--motion-fast) var(--ease-standard);
}

.field input:not([type="radio"]),
.field select,
.field textarea {
  transition:
    border-color var(--motion-fast) linear,
    box-shadow var(--motion-fast) linear;
}

.field input:not([type="radio"]):focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dpx-primary-700) 22%, transparent);
}

.form-status {
  opacity: 0;
  transition: opacity var(--motion-fast) linear;
}

.form-status[data-state] {
  opacity: 1;
}

.form .btn,
.form .field input,
.form .field select,
.form .field textarea {
  animation: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:not(.light-sweep):hover,
  .btn-primary:not(.light-sweep):focus-visible {
    transform: translateY(-2px);
  }
}

@media (hover: none), (pointer: coarse) {
  .work-card .media-zoom::after {
    display: none;
  }

  .tilt {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none !important;
    animation: none !important;
  }

  .clients-marquee {
    mask-image: none;
  }

  .clients-shift {
    animation: none !important;
    transform: none !important;
    width: var(--wrap);
    margin-inline: auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  .clients-track[aria-hidden] {
    display: none;
  }

  .proof-marks img {
    transition: none !important;
    transform: none !important;
  }

  .display-line > span,
  .hero h1,
  .hero .support,
  .hero-actions,
  .hero .microcopy,
  .brand-arrow,
  .process-panel:not([hidden]),
  .process-panel:not([hidden])::after,
  .faq details[open] p {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    clip-path: none !important;
  }

  .process-indicator {
    transition: none !important;
  }

  .js [data-reveal],
  .js [data-reveal-title] {
    clip-path: none;
    opacity: 1;
  }

  .capability-card .demo-steps li,
  .capability-card .demo-track span,
  .capability-card .demo-chip,
  .capability-card .demo-template,
  .capability-card .demo-brand-shot,
  .capability-card .demo-editor-title .from,
  .capability-card .demo-editor-title .to,
  .capability-card .demo-publish,
  .capability-card .demo-query,
  .capability-card .demo-browser li,
  .demo-journey > img,
  .demo-pill,
  .demo-stake,
  .demo-corp-nav,
  .demo-inst-list li,
  .demo-path .node,
  .demo-path .wire::after,
  .demo-groups .pile,
  .demo-groups .sorted,
  .demo-outline li,
  .demo-edit .from,
  .demo-edit .to,
  .demo-serp .hit,
  .demo-life li {
    transition: none !important;
  }

  .demo-steps li,
  .demo-brand-shot,
  .demo-editor-title .to,
  .demo-pill,
  .demo-corp-nav,
  .demo-inst-list li,
  .demo-path .node,
  .demo-groups .sorted,
  .demo-edit .to,
  .demo-serp .hit,
  .demo-life li {
    opacity: 1 !important;
  }

  .demo-template,
  .demo-editor-title .from,
  .demo-stake,
  .demo-groups .pile,
  .demo-edit .from {
    opacity: 0 !important;
  }

  .demo-track span,
  .demo-journey > img,
  .demo-brand-shot {
    transform: none !important;
  }

  .demo-query {
    max-width: 12ch !important;
    border-right: 0 !important;
  }

  .demo-chip,
  .demo-publish {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--dpx-white);
  }

  .hero-actions .btn-primary.light-sweep::after,
  .nav-cta.light-sweep::after,
  .nav a:not(.btn)::after,
  .work-card .media-zoom::after {
    display: none;
  }

  .btn,
  .process-nav button,
  .faq summary::after,
  .media-zoom img,
  .direction-link__icon,
  .tilt,
  .field input,
  .field select,
  .field textarea {
    animation: none !important;
    transition: opacity 80ms linear, color 80ms linear, background-color 80ms linear, border-color 80ms linear !important;
    transform: none !important;
  }

  .btn-primary:active {
    filter: brightness(0.96);
  }
}