/*
 * Aedan Rose marketing motion system.
 * Progressive enhancement only: content is visible and usable before this file
 * or its controller loads. Shared site chrome is intentionally out of scope.
 */

:root {
  --motion-instant: 80ms;
  --motion-fast: 160ms;
  --motion-normal: 240ms;
  --motion-deliberate: 420ms;
  --motion-cinematic: 700ms;
  --motion-enter: cubic-bezier(.16, 1, .3, 1);
  --motion-standard: cubic-bezier(.2, .7, .2, 1);
  --motion-exit: cubic-bezier(.4, 0, 1, 1);
  --motion-distance-micro: 4px;
  --motion-distance-small: 10px;
  --motion-distance-medium: 18px;
  --motion-distance-large: 32px;
  --motion-stagger-tight: 35ms;
  --motion-stagger-normal: 60ms;
  --motion-stagger-dramatic: 100ms;
}

/* Decorative or scrollable child scenes must never widen the page itself.
   Nested galleries retain their own overflow; this only prevents accidental
   document-level horizontal scrolling on narrow devices. */
html {
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html { overflow-x: clip; }
}

/* Baseline stays visible. Pending state is applied by the controller only. */
.ar-motion-ready [data-motion-reveal][data-motion-state="pending"] {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance-medium), 0);
}

.ar-motion-ready [data-motion-reveal="heading"][data-motion-state="pending"] {
  transform: translate3d(0, var(--motion-distance-small), 0);
  clip-path: inset(0 0 22% 0 round 2px);
}

.ar-motion-ready [data-motion-reveal="media"][data-motion-state="pending"] {
  transform: translate3d(0, var(--motion-distance-small), 0) scale(.985);
  clip-path: inset(3% 2% 3% 2% round 18px);
}

.ar-motion-ready [data-motion-reveal][data-motion-state="visible"] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  clip-path: inset(0 0 0 0 round 0);
  transition:
    opacity var(--motion-deliberate) var(--motion-enter),
    transform var(--motion-deliberate) var(--motion-enter),
    clip-path var(--motion-cinematic) var(--motion-enter);
  transition-delay: min(calc(var(--motion-index, 0) * var(--motion-stagger-normal)), 300ms);
}

[data-motion-section] {
  isolation: isolate;
  --motion-section-active: 0;
}

[data-motion-section][data-motion-active="true"] {
  --motion-section-active: 1;
}

/* Connected pages receive a quiet, route-aware visual rhythm. */
.ar-motion-page main > section,
.ar-motion-page .section,
.ar-motion-page .section-full {
  position: relative;
}

/* Product media receives depth without perpetual floating. */
[data-motion-media] {
  --motion-pointer-x: 0;
  --motion-pointer-y: 0;
  transform: perspective(1200px)
    rotateX(calc(var(--motion-pointer-y) * -1deg))
    rotateY(calc(var(--motion-pointer-x) * 1deg));
  transform-style: preserve-3d;
  transition: transform var(--motion-normal) var(--motion-standard);
  will-change: auto;
}

[data-motion-media][data-motion-pointer="true"] {
  will-change: transform;
}

/* A consistent interaction grammar inside page content, never shared chrome. */
.ar-motion-page main :is(a, button, input, select, textarea):focus-visible,
.ar-motion-home section :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(125, 225, 255, .95);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(0, 212, 255, .14);
}

.ar-motion-page main :is(a, button).btn,
.ar-motion-page main :is(a, button).cta-button,
.ar-motion-page main :is(a, button)[class*="-cta"],
.ar-motion-home section :is(a, button).btn,
.ar-motion-home section :is(a, button).cta-button,
.ar-motion-home section :is(a, button)[class*="-cta"] {
  transition:
    transform var(--motion-fast) var(--motion-standard),
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-normal) ease,
    filter var(--motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .ar-motion-page main :is(a, button).btn:hover,
  .ar-motion-page main :is(a, button).cta-button:hover,
  .ar-motion-page main :is(a, button)[class*="-cta"]:hover,
  .ar-motion-home section :is(a, button).btn:hover,
  .ar-motion-home section :is(a, button).cta-button:hover,
  .ar-motion-home section :is(a, button)[class*="-cta"]:hover {
    transform: translate3d(0, -2px, 0);
  }
}

.ar-motion-page main :is(a, button).btn:active,
.ar-motion-page main :is(a, button).cta-button:active,
.ar-motion-page main :is(a, button)[class*="-cta"]:active,
.ar-motion-home section :is(a, button).btn:active,
.ar-motion-home section :is(a, button).cta-button:active,
.ar-motion-home section :is(a, button)[class*="-cta"]:active {
  transform: scale(.985);
  transition-duration: var(--motion-instant);
}

/* Homepage pacing: quieter boundaries and shorter mobile stories. */
.ar-motion-home .ar-guest-story__instruction,
.ar-motion-home .ar-tour-instruction {
  opacity: .88;
}

.ar-motion-home .ar-guest-story__stage,
.ar-motion-home .ar-tour-stage,
.ar-motion-home .fx-map-screen,
.ar-motion-home .copilot-tier-demo {
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(255, 255, 255, .055),
    0 0 62px rgba(0, 212, 255, .075);
}

/* Copilot demo state machine. Static content remains complete without JS. */
.copilot-tier-demo[data-copilot-demo] {
  position: relative;
}

.copilot-tier-demo[data-copilot-demo] .cpx-task {
  transition: opacity var(--motion-normal) ease, transform var(--motion-normal) var(--motion-enter), background var(--motion-normal) ease;
}

.copilot-tier-demo[data-copilot-demo][data-demo-running="true"] .cpx-task:not(.is-demo-complete):not(.is-demo-active) {
  opacity: .4;
}

.copilot-tier-demo[data-copilot-demo] .cpx-task.is-demo-active {
  opacity: 1;
  transform: translate3d(4px, 0, 0);
  background: rgba(0, 212, 255, .07);
}

.copilot-tier-demo[data-copilot-demo] .cpx-task.is-demo-complete {
  opacity: 1;
}

.cpx-replay {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(125, 211, 252, .3);
  border-radius: 9px;
  color: rgba(255, 255, 255, .82);
  background: rgba(0, 0, 0, .28);
  font: 700 .75rem/1 inherit;
  cursor: pointer;
}

.cpx-replay:hover { border-color: rgba(125, 211, 252, .62); color: #fff; }

/* Pause decorative loops outside visible/active documents. */
.ar-motion-paused main *,
.ar-motion-paused section * {
  animation-play-state: paused !important;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
    [data-motion-progress="native"] {
      animation: ar-section-breathe linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 70%;
    }

    @keyframes ar-section-breathe {
      from { --motion-section-progress: 0; }
      to { --motion-section-progress: 1; }
    }
  }
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
  :root {
    --motion-distance-medium: 12px;
    --motion-distance-large: 18px;
  }

  [data-motion-media] { transform: none !important; }

  .ar-motion-home .ar-guest-story__step,
  .ar-motion-home .ar-tour-step {
    min-height: auto;
  }

  .ar-motion-page main :is(button, .btn, .cta-button, [role="button"]),
  .ar-motion-home section :is(button, .btn, .cta-button, [role="button"]) {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .ar-motion-ready [data-motion-reveal][data-motion-state="visible"] {
    transition-duration: var(--motion-normal);
    transition-delay: min(calc(var(--motion-index, 0) * var(--motion-stagger-tight)), 140ms);
  }

  /* Public content must remain comfortably readable at the smallest supported
     viewport. This floor applies to functional and body copy only; headings and
     decorative icons keep their component-specific scale. `1em` preserves any
     larger inherited value while .875rem prevents legacy 10–12px labels. */
  :is(.ar-motion-page main, .ar-motion-home section) :is(
    p, li, label, summary, td, th, button, a, input, select, textarea
  ):not(.sr-only):not([aria-hidden="true"]) {
    font-size: max(.875rem, 1em) !important;
  }

  :is(.ar-motion-page main, .ar-motion-home section) :is(h1, h2, h3, h4, p, li) {
    overflow-wrap: break-word;
  }

  :is(.ar-motion-page main, .ar-motion-home section) :is(button, .btn, .cta-button, [role="button"], a[class*="-cta"]) {
    min-height: 46px;
  }

  .ar-motion-home .hero-video-control {
    font-size: .875rem !important;
    width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 1ms;
    --motion-fast: 1ms;
    --motion-normal: 1ms;
    --motion-deliberate: 1ms;
    --motion-cinematic: 1ms;
  }

  .ar-motion-ready [data-motion-reveal],
  .ar-motion-ready [data-motion-reveal][data-motion-state],
  [data-motion-media] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  .ar-motion-page main *,
  .ar-motion-home section * {
    scroll-behavior: auto !important;
  }
}