/* Light stays above the photograph and below the copy and product illustration. */
.hero-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.hero.motion-enabled .hero-ambient { opacity: 1; }

.hero-preview { position: relative; min-width: 0; isolation: isolate; }
.hero-preview .product-window { position: relative; z-index: 1; }
.hero-orbit {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  max-width: none;
  overflow: visible;
  fill: none;
  stroke: #a6dcff;
  pointer-events: none;
  opacity: 0;
}
.hero.motion-enabled .hero-orbit { opacity: 1; }
.hero-orbit use, .hero-ambient-trail use { vector-effect: non-scaling-stroke; }
.hero-orbit-track { stroke-width: 1; opacity: .17; }
.hero-orbit-glow, .hero-orbit-beam {
  stroke-dasharray: 8 92;
  stroke-linecap: round;
  animation: orden-orbit-flow 15s -3s linear infinite paused;
}
.hero-orbit-glow { stroke-width: 8; opacity: .12; }
.hero-orbit-beam { stroke-width: 1.7; stroke: #c8ebff; opacity: .85; filter: drop-shadow(0 0 5px rgba(126, 202, 255, .7)); }
.hero-ambient-trail { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #9cd6ff; }
.hero-trail-track { stroke-width: 1; opacity: .1; }
.hero-trail-beam { stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 4 96; opacity: .5; animation: orden-orbit-flow 21s -11s linear infinite reverse paused; }
.hero.motion-running .hero-orbit-glow,
.hero.motion-running .hero-orbit-beam,
.hero.motion-running .hero-trail-beam { animation-play-state: running; }

.hero-light {
  position: absolute;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  animation: orden-light-drift 16s ease-in-out infinite alternate paused;
}

.hero-light-blue {
  top: -16%;
  right: -10%;
  background: radial-gradient(circle, rgba(85, 178, 255, .3), rgba(56, 140, 240, .1) 42%, transparent 67%);
}

.hero-light-warm {
  right: 18%;
  bottom: -48%;
  background: radial-gradient(circle, rgba(243, 198, 134, .14), transparent 66%);
  animation-delay: -7s;
  animation-direction: alternate-reverse;
}

.hero-spark, .hero-light-dot {
  position: absolute;
  color: #b9e3ff;
  animation: orden-spark-drift 6s ease-in-out infinite paused;
}

.hero-spark { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.hero-spark-one { top: 15%; left: 52%; animation-delay: -2s; }
.hero-spark-two { top: 20%; right: 5%; width: 16px; animation-delay: -4s; }
.hero-object {
  position: absolute;
  width: 32px;
  height: 32px;
  color: #c2e5ff;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  animation: orden-object-drift 9s ease-in-out infinite paused;
}
.hero-object-phone { top: 8%; left: 59%; animation-delay: -1.5s; }
.hero-object-tool { top: 16%; right: 12%; width: 35px; height: 35px; animation-duration: 10.5s; animation-delay: -6s; }
.hero-object-printer { bottom: 9%; right: 15%; animation-duration: 8.5s; animation-delay: -3.5s; }
.hero-object-measure { bottom: 8%; left: 47%; width: 30px; height: 30px; animation-duration: 11s; animation-delay: -8s; }
.hero-light-dot { width: 4px; height: 4px; border-radius: 50%; background: #c1e9ff; box-shadow: 0 0 10px #91ccff; }
.hero-dot-one { top: 29%; left: 46%; animation-delay: -3s; }
.hero-dot-two { bottom: 13%; right: 6%; animation-delay: -5s; }
.hero.motion-running .hero-ambient > * { animation-play-state: running; }

.hero-ai-link { position: relative; overflow: hidden; }
.hero-ai-link::after {
  content: "";
  position: absolute;
  inset: -20% 0;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(180, 225, 255, .18), transparent);
  opacity: 0;
}
.hero.motion-enabled .hero-ai-link::after { animation: orden-link-shine 9s 1s ease-in-out infinite paused; }
.hero.motion-running .hero-ai-link::after { animation-play-state: running; }

.ai-demo-replay:focus-visible, .ai-example-switch button:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.ai-example-switch[hidden], .ai-demo-controls[hidden], .ai-conversation[hidden] { display: none; }

.ai-example-switch { display: flex; gap: 5px; padding: 14px 22px 0; }
.ai-example-switch button {
  flex: 1;
  padding: 9px 8px;
  border: 1px solid #dde3f0;
  border-radius: 9px;
  color: var(--text);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ai-example-switch button[aria-pressed="true"] { color: #4e46a6; background: #f0efff; border-color: #c8c5ed; }
.ai-example-switch button:hover { border-color: #a39cde; }
.ai-conversation { display: grid; gap: 14px; scroll-margin-top: 100px; }
.ai-example-request { position: relative; }
.ai-request-label { display: block; margin-bottom: 8px; color: #617b9e; font-size: 11px; font-weight: 700; }
.ai-request-text { display: grid; }
.ai-request-space, .ai-request-copy { grid-area: 1 / 1; }
.ai-request-space { visibility: hidden; }
.motion-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ai-conversation[data-phase="writing"] .ai-request-copy::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -.12em;
  background: var(--blue);
  animation: orden-cursor 900ms step-end infinite;
}
.ai-example-request::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(76, 150, 238, .45);
  border-radius: inherit;
  box-shadow: 0 0 18px rgba(76, 150, 238, .18);
  opacity: 0;
  pointer-events: none;
}
.ai-conversation[data-phase="writing"] .ai-example-request::after { animation: orden-prompt-glow 1.8s ease-in-out infinite; }

.ai-demo-status { display: flex; align-items: center; gap: 7px; min-height: 22px; color: #6756b7; font-size: 11px; font-weight: 700; }
.ai-demo-status svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ai-thinking-dots { display: flex; gap: 3px; opacity: 0; }
.ai-thinking-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.ai-conversation[data-phase="thinking"] .ai-thinking-dots { opacity: 1; }
.ai-conversation[data-phase="thinking"] .ai-thinking-dots i { animation: orden-thinking 850ms ease-in-out infinite; }
.ai-thinking-dots i:nth-child(2) { animation-delay: 120ms !important; }
.ai-thinking-dots i:nth-child(3) { animation-delay: 240ms !important; }

/* Space is reserved throughout playback so the surrounding page stays still. */
.ai-conversation[data-phase="writing"] .ai-example-response,
.ai-conversation[data-phase="thinking"] .ai-example-response { opacity: 0; }
.ai-conversation[data-phase="responding"] .ai-example-response { animation: orden-response-in 450ms ease-out both; }
.ai-conversation[data-phase="responding"] dl > div { animation: orden-response-in 400ms ease-out both; }
.ai-conversation[data-phase="responding"] dl > div:nth-child(2) { animation-delay: 100ms; }
.ai-conversation[data-phase="responding"] dl > div:nth-child(3) { animation-delay: 200ms; }
.ai-conversation[data-phase="responding"] .ai-demo-status svg { animation: orden-response-spark 750ms ease-out; }
.ai-demo-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 0 24px 14px; }
.ai-demo-replay { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 0; color: #4e46a6; border: 0; background: none; font-size: 12px; font-weight: 700; cursor: pointer; }

@keyframes orden-light-drift { from { transform: translate3d(0, 0, 0); opacity: .65; } to { transform: translate3d(-65px, 30px, 0); opacity: 1; } }
@keyframes orden-orbit-flow { to { stroke-dashoffset: -100; } }
@keyframes orden-spark-drift { 0%, 100% { transform: translateY(6px) scale(.8); opacity: .18; } 50% { transform: translateY(-12px) scale(1); opacity: .7; } }
@keyframes orden-object-drift {
  0%, 12%, 88%, 100% { opacity: 0; transform: translateY(10px) rotate(-6deg); }
  35% { opacity: .58; transform: translateY(0) rotate(-2deg); }
  62% { opacity: .58; transform: translateY(-12px) rotate(5deg); }
}
@keyframes orden-link-shine { 0% { transform: translateX(-120%) skewX(-20deg); opacity: 0; } 4% { opacity: 1; } 20% { transform: translateX(340%) skewX(-20deg); opacity: 1; } 25%, 100% { transform: translateX(340%) skewX(-20deg); opacity: 0; } }
@keyframes orden-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes orden-prompt-glow { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes orden-thinking { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes orden-response-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes orden-response-spark { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.25) rotate(10deg); } }

@media (max-width: 1080px) {
  .hero-preview { width: min(700px, 100%); }
  .hero-ambient-trail { display: none; }
  .hero-spark-one { top: 6%; left: 87%; }
  .hero-spark-two { top: 63%; right: 4%; }
  .hero-object-phone { top: 3%; left: auto; right: 10%; }
  .hero-object-tool { top: auto; bottom: 16px; right: 18%; }
  .hero-object-printer { bottom: 14px; right: 5%; }
  .hero-object-measure { bottom: 22%; left: auto; right: 1%; }
  .hero-dot-one { top: 45%; left: 94%; }
  .hero-light-blue { top: 24%; right: -35%; }
}
@media (max-width: 575px) {
  .hero-orbit { inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); }
  .hero-orbit-track { opacity: .12; }
  .hero-orbit-beam { opacity: .65; }
  .hero-orbit-glow { stroke-width: 6; opacity: .09; }
  .hero-light { width: 480px; height: 480px; }
  .hero-light-blue { right: -70%; }
  .hero-light-warm, .hero-dot-one, .hero-dot-two { display: none; }
  .hero-object { width: 27px; height: 27px; }
  .hero-object-phone { top: 18px; right: 12%; }
  .hero-object-tool { bottom: 12px; right: 23%; }
  .hero-object-printer, .hero-object-measure { display: none; }
  .ai-example-switch { padding: 14px 18px 0; }
  .ai-example-switch button { font-size: 11px; }
  .ai-demo-status { min-height: 36px; }
  .ai-demo-controls { padding: 0 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-ambient, .hero-orbit, .hero-ai-link::after, .ai-demo-controls, .ai-request-copy::after, .ai-example-request::after { display: none !important; }
  .ai-conversation .ai-example-response { opacity: 1 !important; }
  .hero *, .hero *::after, .ai-example *, .ai-example *::after { animation: none !important; }
}