/* Optional motion layers. Timing and lifecycle belong to motion.js. */
:root {
  --chem-motion-ready: 1;
}

/* Each transform has its own wrapper; the original image geometry stays in app.css. */
.hero-wave-entry,
.hero-wave-parallax,
.hero-wave-float,
.motion-tool-reveal,
.motion-tool-tilt {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-wave-entry { z-index: 1; }
.hero-wave-parallax { transform-origin: 45% 48%; }
.hero-wave-float { transform-origin: 50% 50%; }
.motion-window-entry,
.motion-window-parallax {
  position: relative;
  width: 100%;
  pointer-events: none;
}

.motion-tracks {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.motion-track-base {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.motion-track-base { stroke: #70787a70; stroke-width: 1; }
.motion-route, .motion-route > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform-origin: 0 0;
}
.motion-traveler {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 1.5px #ffffff80;
  z-index: 2;
  pointer-events: none;
}
.motion-traveler[data-tone="teal"] { background: var(--teal); }

:root[data-motion-state="running"][data-motion-pointer="true"]
  .hero-artwork[data-motion-wired="true"][data-motion-visible="true"] :is(.motion-tracks, .motion-traveler) {
  display: block;
}
:root[data-motion-state="running"][data-motion-pointer="true"]
  .hero-artwork[data-motion-wired="true"][data-motion-visible="true"] > .window-connector {
  visibility: hidden;
}

/* The shared matrix and hit areas remain still; only their illustrations move. */
.tool-card {
  isolation: isolate;
  overflow: clip;
  perspective: 1000px;
}
.tool-copy { z-index: 2; }
.tool-arrow { z-index: 3; }
.motion-tool-reveal { z-index: 1; }
.motion-tool-tilt { transform-origin: 74% 50%; }
.motion-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at var(--motion-spot-x, 70%) var(--motion-spot-y, 50%),
    #ff7fa81c 0%, #72c8c50c 38%, transparent 70%
  );
}
.motion-tool-mask,
.motion-axis {
  display: none;
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.motion-tool-mask {
  overflow: hidden;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.motion-tool-sheen {
  position: absolute;
  inset: -100%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(112deg,
    transparent 43%, #72c8c500 47%, #ffffffb3 49.5%,
    #ff7fa854 50.5%, #72c8c500 53%, transparent 57%);
}
.motion-tool-mask[data-tool-kind="ideal_gas_state"] {
  clip-path: polygon(0 0, 100% 0, 100% 43%, 0 43%);
}
.motion-axis {
  overflow: visible;
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.2;
  stroke-linecap: round;
}
.motion-axis path { vector-effect: non-scaling-stroke; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0; }

:root[data-motion-state="running"][data-motion-pointer="true"]
  .tool-card[data-motion-visible="true"][data-motion-active="true"] .motion-spotlight {
  opacity: 1;
}
:root[data-motion-state="running"][data-motion-pointer="true"]
  .tool-card[data-motion-visible="true"][data-motion-active="true"] :is(.motion-tool-mask, .motion-axis) {
  display: block;
}
.tool-card:focus-visible {
  z-index: 2;
  outline: 2px solid #237b80;
  outline-offset: -3px;
  background: #72c8c51a;
}
.tool-card:active { background: #ff7fa826; }

/* Functional buttons never move their hit area. Arrow feedback is managed by JS. */
:is(#landingPage, .site-header, .site-footer) .button:hover,
#workspaceShell .submit-button:hover:not(:disabled) {
  transform: none;
}
.quick-submit > span, .motion-button-icon { display: inline-block; }
.quick-panel:focus-within { border-color: #237b80; }

/* The example is always readable, including before the controller starts. */
.demo-columns { position: relative; }
.demo-columns > div {
  position: relative;
  z-index: 1;
  outline: 1px solid transparent;
  outline-offset: 3px;
}
.motion-demo-connector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #72c8c566;
  stroke-width: 1;
  pointer-events: none;
}
#motionReplay {
  min-height: 40px;
  margin-top: 12px;
  padding: 6px 11px;
  border: 1px solid #8a9696;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  font: 12px var(--sans);
}
#motionReplay:hover { border-color: var(--teal); }
.motion-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
#motionToggle {
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: #505b5e;
  font: 11px var(--sans);
  white-space: nowrap;
}
#motionToggle:hover { border-color: #bfc8c7; }
#motionStatus { color: #657172; font-size: 11px; line-height: 1.6; }
:is(#motionToggle, #motionReplay):disabled { opacity: .6; cursor: default; }
[data-motion-region="workspace"][data-motion-visible="false"] * { animation: none !important; }

/* Pause the existing message entrance and status orbit as well as new effects. */
:root:not([data-motion-state="running"]) { scroll-behavior: auto; }
:root:not([data-motion-state="running"]) :is(#landingPage, .site-header, .site-footer),
:root:not([data-motion-state="running"]) :is(#landingPage, .site-header, .site-footer) *,
:root:not([data-motion-state="running"]) :is(#landingPage, .site-header, .site-footer) *::before,
:root:not([data-motion-state="running"]) :is(#landingPage, .site-header, .site-footer) *::after {
  animation: none !important;
  transition: none !important;
}

@media (max-width: 640px) {
  .motion-controls { width: 100%; justify-content: flex-start; }
  #motionReplay { min-height: 44px; }
  #motionStatus { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-tracks, .motion-traveler, .motion-tool-mask, .motion-axis, .motion-spotlight { display: none !important; }
  .hero-artwork > .window-connector { visibility: visible !important; }
  :is(#landingPage, .site-header, .site-footer) *,
  :is(#landingPage, .site-header, .site-footer) *::before,
  :is(#landingPage, .site-header, .site-footer) *::after {
    animation: none !important;
    transition: none !important;
  }
}