/* T11 — interactions and motion. Approved visual direction: Cinematic Command.
   Critical content remains visible without JavaScript. Motion is enabled only
   after the runtime has prepared targets and is fully disabled for reduced motion. */
:root {
  --motion-duration: 640ms;
  --motion-duration-fast: 210ms;
  --motion-ease: cubic-bezier(.2, .78, .2, 1);
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
  --scroll-progress: 0;
}

.page-progress {
  position: fixed;
  z-index: 5000;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  transform: scaleX(var(--scroll-progress));
  transform-origin: left center;
  background: linear-gradient(90deg, #245cff 0%, #7295ff 72%, #ff8a34 100%);
  box-shadow: 0 0 18px rgba(36, 92, 255, .38);
  will-change: transform;
}

.site-header {
  transition: background-color var(--motion-duration-fast) ease,
              border-color var(--motion-duration-fast) ease,
              box-shadow var(--motion-duration-fast) ease;
}
.site-header.is-scrolled {
  border-bottom-color: rgba(17, 39, 88, .16);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 38px rgba(12, 31, 69, .10);
}
.site-nav a[aria-current="location"] { color: #1747d7; }
.site-nav a[aria-current="location"]::after { right: 0; }

/* Scroll reveal ------------------------------------------------------- */
.motion-composite {
  --entry-x: 0px;
  --entry-y: 0px;
  --depth-y: 0px;
  --pointer-x: 0px;
  --pointer-y: 0px;
  --hover-y: 0px;
  translate:
    calc(var(--entry-x) + var(--pointer-x))
    calc(var(--entry-y) + var(--depth-y) + var(--pointer-y) + var(--hover-y));
  will-change: translate, opacity, filter;
}

body.motion-enabled .motion-entry {
  --entry-y: 28px;
  opacity: 0;
  filter: blur(5px);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    translate var(--motion-duration) var(--motion-ease),
    filter calc(var(--motion-duration) * .82) ease;
  transition-delay: var(--motion-delay, 0ms);
}
body.motion-enabled .motion-entry[data-motion-direction="left"] {
  --entry-x: -28px;
  --entry-y: 0px;
}
body.motion-enabled .motion-entry[data-motion-direction="right"] {
  --entry-x: 28px;
  --entry-y: 0px;
}
body.motion-enabled .motion-entry[data-motion-direction="scale"] {
  --entry-y: 18px;
  scale: .982;
  transition-property: opacity, translate, scale, filter;
}
body.motion-enabled .motion-entry.is-visible {
  --entry-x: 0px;
  --entry-y: 0px;
  opacity: 1;
  filter: none;
  scale: 1;
}

/* Hero depth and signal layers --------------------------------------- */
.cinematic-page .hero::before {
  translate: 0 var(--hero-orbit-y, 0px);
  transition: translate 90ms linear;
  will-change: translate;
}
.cinematic-page .hero::after {
  background-position:
    calc(50% + var(--hero-bg-x, 0px)) calc(8% + var(--hero-bg-y, 0px)),
    calc(88% - var(--hero-bg-x, 0px)) calc(24% - var(--hero-bg-y, 0px)),
    center;
}
.cinematic-page .product-stage--wide {
  --depth-y: var(--hero-stage-y, 0px);
  transition: translate 120ms linear;
}
.cinematic-page .product-stage--wide .browser-frame--hero {
  transition: box-shadow 260ms ease, border-color 260ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .cinematic-page .product-stage--wide:hover .browser-frame--hero {
    border-color: rgba(255, 255, 255, .38);
    box-shadow: 0 58px 155px rgba(4, 16, 48, .46);
  }
}

/* Background scene depth. */
.motion-scene::before,
.motion-scene::after {
  translate: 0 var(--scene-y, 0px);
  transition: translate 110ms linear;
  will-change: translate;
}

/* Micro-interactions -------------------------------------------------- */
.button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.button::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 24%, rgba(255,255,255,.38) 44%, transparent 64%);
  translate: -130% 0;
  transition: translate 520ms var(--motion-ease-out);
}
.button--secondary::after { background: linear-gradient(105deg, transparent 24%, rgba(36,92,255,.11) 44%, transparent 64%); }
@media (hover: hover) and (pointer: fine) {
  .button:hover::after { translate: 130% 0; }
  .role-card:hover,
  .material-card:hover,
  .contact-card:hover,
  .price-card:not(.price-card--featured):hover,
  .state-card:hover {
    --hover-y: -5px;
  }
  .screen-card:hover { --hover-y: -4px; }
}
.role-card,
.material-card,
.contact-card,
.price-card,
.state-card,
.screen-card {
  transition:
    translate 230ms var(--motion-ease-out),
    box-shadow 230ms ease,
    border-color 230ms ease,
    background-color 230ms ease;
}

.screen-zoom::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(36,92,255,.34);
  border-radius: inherit;
  opacity: 0;
  scale: .84;
  transition: opacity 220ms ease, scale 220ms ease;
}
.screen-zoom:hover::after,
.screen-zoom:focus-visible::after { opacity: 1; scale: 1; }

/* Tabs and billing ---------------------------------------------------- */
.screen-tabs__panel.is-panel-entering {
  animation: panel-enter 360ms var(--motion-ease-out) both;
}
@keyframes panel-enter {
  from { opacity: 0; translate: 0 14px; filter: blur(3px); }
  to { opacity: 1; translate: 0 0; filter: none; }
}
.screen-tabs__list button,
.billing-switch button {
  transition: color 190ms ease, background-color 190ms ease, box-shadow 190ms ease, translate 190ms ease;
}
.screen-tabs__list button:active,
.billing-switch button:active { translate: 0 1px; }
.price.is-updating [data-price-amount] { animation: price-update 340ms var(--motion-ease-out); }
@keyframes price-update {
  0% { opacity: .38; translate: 0 8px; }
  100% { opacity: 1; translate: 0 0; }
}

/* Consent feedback --------------------------------------------------- */
.consent {
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.consent.is-attention {
  border-color: rgba(194, 58, 45, .42);
  background: #fff7f5;
  box-shadow: 0 0 0 4px rgba(194, 58, 45, .08);
  animation: consent-attention 430ms ease;
}
.consent.is-complete {
  border-color: rgba(16, 132, 87, .28);
  background: #f3fbf7;
}
.consent__success {
  margin: 8px 0 0;
  color: #0e764e;
  font-size: 12px;
  font-weight: 750;
}
@keyframes consent-attention {
  0%, 100% { translate: 0 0; }
  25% { translate: -5px 0; }
  50% { translate: 5px 0; }
  75% { translate: -3px 0; }
}

/* Dialog motion ------------------------------------------------------ */
.media-dialog[open] { animation: dialog-in 300ms var(--motion-ease-out) both; }
.media-dialog[open]::backdrop { animation: backdrop-in 260ms ease both; }
@keyframes dialog-in {
  from { opacity: 0; translate: 0 20px; scale: .975; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* Mobile menu motion is explicit and readable. */
@media (max-width: 980px) {
  .site-nav { translate: 0 -10px; }
  .site-nav.is-open { translate: 0 0; }
  .nav-backdrop:not([hidden]) { animation: backdrop-in 220ms ease both; }
}

/* Toasts ------------------------------------------------------------- */
.toast-region {
  position: fixed;
  z-index: 6000;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 20px));
  display: grid;
  width: min(390px, calc(100vw - 36px));
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  color: #fff;
  background: rgba(10, 23, 52, .94);
  box-shadow: 0 22px 64px rgba(4, 13, 36, .34);
  backdrop-filter: blur(18px);
  animation: toast-in 340ms var(--motion-ease-out) both;
}
.toast::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: .42em;
  border-radius: 50%;
  background: #78a0ff;
  box-shadow: 0 0 0 5px rgba(120,160,255,.13);
}
.toast[data-tone="success"]::before { background: #5ee0a6; box-shadow: 0 0 0 5px rgba(94,224,166,.13); }
.toast[data-tone="warning"]::before { background: #ffad69; box-shadow: 0 0 0 5px rgba(255,173,105,.13); }
.toast[data-tone="error"]::before { background: #ff7e70; box-shadow: 0 0 0 5px rgba(255,126,112,.13); }
.toast strong { display: block; margin-bottom: 2px; font-size: 13px; }
.toast span { color: #d4deef; font-size: 12px; line-height: 1.45; }
.toast.is-leaving { animation: toast-out 220ms ease forwards; }
@keyframes toast-in { from { opacity: 0; translate: 24px 0; scale: .97; } }
@keyframes toast-out { to { opacity: 0; translate: 18px 0; scale: .98; } }

/* Interaction states page ------------------------------------------- */
.interaction-page .inner-hero { overflow: hidden; }
.interaction-page .interaction-section { padding: 92px 0; background: #f5f8fd; }
.interaction-page .interaction-section:nth-of-type(even) { background: #fff; }
.interaction-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(300px, .6fr);
  gap: 44px;
  align-items: end;
  margin-bottom: 34px;
}
.interaction-head h2 { margin: 0; font-size: clamp(36px, 4vw, 52px); line-height: 1.04; letter-spacing: -.045em; }
.interaction-head > p { margin: 0; color: #5f6b80; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter-bar button {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #d8e1f0;
  border-radius: 999px;
  color: #47546c;
  background: #fff;
  cursor: pointer;
  font-weight: 780;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, translate 180ms ease;
}
.filter-bar button[aria-pressed="true"] { color: #fff; border-color: #245cff; background: #245cff; box-shadow: 0 10px 24px rgba(36,92,255,.22); }
.filter-bar button:active { translate: 0 1px; }
.signal-demo-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.signal-demo-card { min-height: 210px; padding: 22px; border: 1px solid #dce4f1; border-radius: 22px; background: #fff; box-shadow: 0 16px 44px rgba(17,41,86,.07); }
.signal-demo-card[hidden] { display: none; }
.signal-demo-card small { color: #245cff; font-family: var(--font-mono); font-weight: 850; text-transform: uppercase; }
.signal-demo-card h3 { margin: 18px 0 8px; font-size: 22px; line-height: 1.08; }
.signal-demo-card p { margin: 0; color: #5f6b80; font-size: 14px; }
.filter-summary { min-height: 24px; margin: 14px 0 0; color: #5f6b80; font-size: 13px; }
.interaction-form-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.68fr); gap: 24px; }
.demo-form, .system-state-panel { padding: 28px; border: 1px solid #dce4f1; border-radius: 24px; background: #fff; box-shadow: 0 20px 56px rgba(17,41,86,.08); }
.demo-form__grid { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-weight: 780; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #ccd7e7;
  border-radius: 13px;
  color: #111a2e;
  background: #fff;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #c23a2d; background: #fff8f6; box-shadow: 0 0 0 4px rgba(194,58,45,.08); }
.field-error { min-height: 18px; color: #a92e23; font-size: 12px; }
.demo-form__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button.is-loading { cursor: wait; opacity: .78; }
.button.is-loading::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255,255,255,.42);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
.form-result { margin: 18px 0 0; padding: 14px 16px; border-radius: 14px; color: #0d6846; background: #edf9f3; }
.system-state-panel { display: grid; align-content: start; gap: 16px; color: #fff; background: linear-gradient(145deg,#0d1730,#153576); }
.system-state-panel h3 { margin: 0; font-size: 26px; }
.system-state-panel p { margin: 0; color: #ced8e9; }
.system-state-panel__body { min-height: 150px; display: grid; place-items: center; padding: 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.06); text-align: center; }
.state-spinner { width: 38px; height: 38px; border: 3px solid rgba(255,255,255,.22); border-top-color: #78a0ff; border-radius: 50%; animation: spin 780ms linear infinite; }
.notice-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.motion-policy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.motion-policy-card { min-height: 230px; padding: 24px; border: 1px solid #dce4f1; border-radius: 22px; background: #fff; }
.motion-policy-card span { color: #245cff; font-family: var(--font-mono); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.motion-policy-card h3 { margin: 18px 0 9px; }
.motion-policy-card p { margin: 0; color: #5f6b80; }

/* No-JS fallback ----------------------------------------------------- */
@media (max-width: 980px) {
  html:not(.js) .site-header { height: auto; position: static; }
  html:not(.js) .site-header__inner { flex-wrap: wrap; min-height: 68px; padding-block: 10px; }
  html:not(.js) .menu-button,
  html:not(.js) .nav-backdrop { display: none !important; }
  html:not(.js) .site-nav {
    position: static;
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    max-height: none;
    overflow: visible;
    padding: 8px 0 0;
    border: 0;
    opacity: 1;
    pointer-events: auto;
    translate: none;
  }
  html:not(.js) .site-nav a { min-height: 44px; padding: 10px 12px; border: 0; }
  html:not(.js) .site-header__cta { display: inline-flex; margin-left: auto; }
}
html:not(.js) .screen-tabs__list { display: none; }
html:not(.js) .screen-tabs__panel[hidden] { display: block !important; }
html:not(.js) .screen-tabs__panel + .screen-tabs__panel { margin-top: 18px; }
html:not(.js) .mobile-trial-bar { display: none; }

@media (max-width: 980px) {
  .signal-demo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .interaction-form-grid { grid-template-columns: 1fr; }
  .motion-policy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .toast-region { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .interaction-page .interaction-section { padding: 72px 0; }
  .interaction-head { grid-template-columns: 1fr; gap: 16px; }
  .signal-demo-grid { grid-template-columns: 1fr; }
  .demo-form, .system-state-panel { padding: 20px; border-radius: 20px; }
  .notice-buttons { display: grid; }
  .notice-buttons .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-duration: .01ms; --motion-duration-fast: .01ms; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  body.motion-enabled .motion-entry,
  body.motion-enabled .motion-entry.is-visible {
    --entry-x: 0px;
    --entry-y: 0px;
    opacity: 1;
    filter: none;
    scale: 1;
  }
  .motion-composite { --depth-y: 0px !important; --pointer-x: 0px !important; --pointer-y: 0px !important; --hover-y: 0px !important; }
  .cinematic-page .hero::before,
  .motion-scene::before,
  .motion-scene::after { translate: none !important; }
  .button::after, .screen-zoom::after { display: none; }
  .state-spinner { border-top-color: rgba(255,255,255,.22); }
}