/* The complete static page remains usable without JavaScript or motion. */
.reading-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; background: linear-gradient(90deg, #7194b6, #e8f6ff); transform: scaleX(var(--reading-progress, 0)); transform-origin: left; pointer-events: none; }
.motion-toggle { position: fixed; right: 22px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 10px 15px; border: 1px solid #b3c9df35; border-radius: 30px; background: #07111de0; backdrop-filter: blur(12px); color: #b4c4d5; font-size: 10px; letter-spacing: .3px; }
.motion-toggle:hover { border-color: #b3c9df85; color: white; }
.motion-toggle:disabled { cursor: default; }
.motion-symbol { display: flex; height: 13px; align-items: center; gap: 3px; }
.motion-symbol i { display: block; width: 2px; height: 5px; background: #b0c8e0; border-radius: 1px; }
.motion-symbol i:nth-child(2) { height: 12px; }
.motion-symbol i:nth-child(3) { height: 8px; }
.hero-scene { --image-position: .5; position: absolute; inset: 0; z-index: -3; isolation: isolate; }
.hero-scene .hero-art { z-index: 0; }
.hero-scene .hero-clean { opacity: 0; z-index: 1; }
.has-live-hud .hero-clean { opacity: 1; }
.live-hud { position: absolute; display: none; z-index: 2; color: #8cffaa; font: 400 16px/1.6 var(--mono); transform: rotate(10deg); transform-origin: top left; text-shadow: 0 0 9px #6dff9840; pointer-events: none; }
.has-live-hud .live-hud { display: block; }
.live-hud-label { font-size: .83em; letter-spacing: 1.8px; }
.live-hud-rule { display: block; width: 1.9em; height: 1px; background: #8cffaa; box-shadow: 0 0 5px #8cffaa77; margin: .65em 0 1.4em; }
.live-hud-lines > span { display: block; width: 100%; white-space: nowrap; }
.live-hud-lines > span:not(:first-child) { padding-left: 1.2em; }
.live-hud-cursor { display: inline-block; width: .4em; height: .95em; background: currentColor; margin-left: .35em; vertical-align: -.1em; }
h1 > .hero-title-line { display: block; }
.hero-light { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.hero-light::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at var(--light-x, 70%) var(--light-y, 30%), #aed4ff14, transparent 45%); mix-blend-mode: screen; }
.connection-scene { position: relative; min-width: 0; }
.connection-packet { position: absolute; top: 51%; left: 40%; width: 8px; height: 3px; border-radius: 50%; background: #d4f0ff; box-shadow: 0 0 7px 2px #8dc9ff; opacity: 0; pointer-events: none; }

.cinema-story { --optics-opacity: 1; --outside-opacity: 0; --optics-scale: 1; --outside-scale: 1.12; --optics-x: 0%; --outside-y: 3%; position: relative; background: #060f18; }
.story-stage { position: relative; overflow: clip; }
.story-copy { padding: 80px 5vw 35px; position: relative; z-index: 4; }
.story-copy h2 { font-size: clamp(40px, 5.1vw, 78px); font-weight: 300; line-height: 1.08; letter-spacing: -2.8px; margin-bottom: 0; }
.story-copy em { color: #9eb5ce; }
.story-scene { position: relative; margin: 0; height: 520px; overflow: hidden; isolation: isolate; }
.story-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.story-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #061018d9, transparent 38%), linear-gradient(90deg, #020c1466, transparent 75%); pointer-events: none; }
.story-scene figcaption { position: absolute; z-index: 2; left: 5vw; bottom: 60px; font-size: clamp(24px, 2.6vw, 40px); font-weight: 300; letter-spacing: -.8px; }
.story-scene figcaption > span { display: block; font-size: 9px; line-height: 1.8; letter-spacing: 2px; color: #9ab3ce; margin-bottom: 12px; font-weight: 400; }
.story-footer { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 22px 5vw; gap: 30px; }
.story-footer p { color: #a1b2c6; font-size: 10px; margin: 0; }
.story-controls { display: none; align-items: center; gap: 12px; }
.story-controls button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #a6bfd133; border-radius: 50%; background: #09172466; color: #a6bdd3; font: 400 10px var(--mono); }
.story-controls button[aria-pressed='true'] { border-color: #c9dfee; color: white; background: #acc5dc14; }
.story-controls button:hover { background: #bed3e326; color: white; }
.story-controls > span { width: 45px; height: 1px; background: #9eb8cb33; }
.story-progress { position: absolute; bottom: 0; height: 1px; left: 5vw; right: 5vw; z-index: 5; background: #b0c6dc24; display: none; }
.story-progress > span { display: block; height: 100%; background: #bed5e9; transform-origin: left; transform: scaleX(var(--scene-progress, 0)); }

html[data-motion='on'] .hero-scene { transform: translateY(var(--scroll-drift, 0px)) scale(var(--scroll-zoom, 1.015)); translate: var(--pointer-x, 0px) var(--pointer-y, 0px); transition: translate .7s cubic-bezier(.2,.7,.2,1); animation: aperture-focus 1.7s cubic-bezier(.2,.7,.2,1) both; }
html[data-motion='on'] .hero-title-line { animation: title-rise 1.1s cubic-bezier(.16,1,.3,1) both; }
html[data-motion='on'] .hero-title-line:nth-child(2) { animation-delay: .16s; }
html[data-motion='on'] .hero-copy > .eyebrow { animation: soft-arrival 1.3s .1s both; }
html[data-motion='on'] .hero-intro { animation: soft-arrival 1.1s .45s both; }
html[data-motion='on'] .hero.is-in-view .hero-light { opacity: 1; }
html[data-motion='on'] .hero-light::before { content: ''; position: absolute; width: 20%; height: 160%; left: -35%; top: -30%; background: linear-gradient(90deg, transparent, #c9e6ff0d, transparent); transform: rotate(-22deg); animation: lens-sweep 9s ease-in-out infinite; animation-play-state: paused; }
html[data-motion='on'] .hero.is-in-view .hero-light::before { animation-play-state: running; }
html[data-motion='on'] .has-live-hud .live-hud-lines > span { animation: hud-type 1.2s steps(34, end) both; }
html[data-motion='on'] .has-live-hud .live-hud-lines > span:nth-child(1) { animation-delay: 1s; }
html[data-motion='on'] .has-live-hud .live-hud-lines > span:nth-child(2) { animation-delay: 2.6s; }
html[data-motion='on'] .has-live-hud .live-hud-lines > span:nth-child(3) { animation-delay: 3.9s; }
html[data-motion='on'] .has-live-hud .live-hud-lines > span:nth-child(4) { animation-delay: 5.3s; }
html[data-motion='on'] .live-hud-cursor { animation: hud-caret 1.3s step-end infinite; }
html[data-motion='on'] .hero:not(.is-in-view) .live-hud-lines > span,
html[data-motion='on'] .hero:not(.is-in-view) .live-hud-cursor { animation-play-state: paused; }
html[data-motion='on'] .connection-scene.is-in-view .connection-packet { animation: packet-flight 3.5s ease-in-out infinite; }
html[data-motion='on'] .reveal-pending { opacity: 0; transform: translateY(30px); filter: blur(5px); }
html[data-motion='on'] :is(.section-heading, .workflow-grid article, .companion-copy, .requirements-list li, .faq-list details, .closing-inner > :not(.closing-watermark)) { transition: opacity .9s var(--reveal-delay, 0ms), transform .9s cubic-bezier(.16,1,.3,1) var(--reveal-delay, 0ms), filter .9s var(--reveal-delay, 0ms); }
html[data-motion='on'] .demo-panel::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; z-index: 3; opacity: 0; background: linear-gradient(90deg, transparent, #8cffaa5c, transparent); box-shadow: 0 0 16px #8cffaa1a; pointer-events: none; }
html[data-motion='on'] .demo-panel.is-in-view::before { animation: hud-scan 5.5s linear infinite; }
html[data-motion='on'] .demo-output p:not(.demo-output-idle) { animation: output-arrival .55s ease both; }
html[data-motion='on'] .phone-mockup { transform: perspective(900px) rotateX(var(--phone-x, 0deg)) rotateY(var(--phone-y, 0deg)) rotateZ(6deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
html[data-motion='on'] .companion-visual.is-in-view .phone-mockup { animation: phone-float 6s ease-in-out infinite alternate; }
html[data-motion='on'] .magnetic { transition: translate .35s cubic-bezier(.2,.7,.2,1), background .2s, box-shadow .3s; }
html[data-motion='on'] .magnetic:hover { box-shadow: 0 0 40px #cee6ff25; }
html[data-motion='on'] .closing-section::before { content: ''; position: absolute; inset: 0; background: conic-gradient(from 0deg at 50% 150%, transparent 0deg, #a4cbec0a 25deg, transparent 45deg, transparent 290deg, #a4cbec0a 330deg, transparent 360deg); pointer-events: none; }
html[data-motion='off'] { scroll-behavior: auto; }
html[data-motion='off'] .live-hud-cursor { display: none; }
html[data-motion='off'] *, html[data-motion='off'] *::before, html[data-motion='off'] *::after { animation: none !important; transition: none !important; }
html.page-hidden *, html.page-hidden *::before, html.page-hidden *::after { animation-play-state: paused !important; }

@keyframes aperture-focus { from { filter: blur(7px) brightness(.65); } to { filter: blur(0) brightness(1); } }
@keyframes title-rise { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(42px); } to { opacity: 1; clip-path: inset(0); transform: translateY(0); } }
@keyframes soft-arrival { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lens-sweep { 0%, 15% { left: -35%; opacity: 0; } 30% { opacity: 1; } 70%, 100% { left: 120%; opacity: 0; } }
@keyframes hud-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes hud-caret { 50% { opacity: 0; } }
@keyframes packet-flight { 0% { left: 40%; opacity: 0; } 15% { opacity: .9; } 70% { left: 63%; opacity: .9; } 85%, 100% { left: 63%; opacity: 0; } }
@keyframes hud-scan { 0%, 100% { top: 10%; opacity: 0; } 15% { opacity: .8; } 85% { top: 90%; opacity: .3; } }
@keyframes output-arrival { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes phone-float { from { translate: 0 0; } to { translate: 0 -12px; } }

@media (min-width: 701px) {
  html[data-motion='on'] .cinema-story { height: 190vh; height: 190svh; }
  html[data-motion='on'] .story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 540px; }
  html[data-motion='on'] .story-copy { position: absolute; left: 0; right: 0; top: 16%; padding-block: 0; pointer-events: none; }
  html[data-motion='on'] .story-copy h2 { max-width: 600px; }
  html[data-motion='on'] .story-scene { position: absolute; inset: 0; height: 100%; }
  html[data-motion='on'] .story-optics { opacity: var(--optics-opacity); }
  html[data-motion='on'] .story-outside { opacity: var(--outside-opacity); }
  html[data-motion='on'] .story-optics img { transform: translateX(var(--optics-x)) scale(var(--optics-scale)); }
  html[data-motion='on'] .story-outside img { transform: translateY(var(--outside-y)) scale(var(--outside-scale)); }
  html[data-motion='on'] .story-scene figcaption { bottom: 19%; }
  html[data-motion='on'] .story-footer { position: absolute; bottom: 30px; left: 0; right: 0; padding-block: 0; padding-right: 170px; }
  html[data-motion='on'] .story-controls { display: flex; }
  html[data-motion='on'] .story-progress { display: block; bottom: 20px; }
}
@media (max-width: 1100px) { .hero-scene { --image-position: .59; } }
@media (max-width: 820px) { .hero-scene { --image-position: .65; } }
@media (max-width: 700px) {
  .hero-scene { --image-position: .64; height: 420px; bottom: auto; }
  .hero-scene .hero-art { height: 100%; }
  .motion-toggle { right: 14px; bottom: 14px; min-height: 40px; padding: 9px 12px; font-size: 9px; gap: 8px; }
  html[data-motion='on'] .hero-scene { transform: none; translate: none; }
  .live-hud-label { letter-spacing: 1px; }
  .story-copy { padding: 60px 24px 24px; }
  .story-copy h2 { font-size: 42px; letter-spacing: -1.7px; }
  .story-copy .eyebrow { font-size: 8px; }
  .story-scene { height: 440px; }
  .story-optics img { object-position: 67% center; }
  .story-outside img { object-position: 63% center; }
  .story-scene figcaption { left: 24px; bottom: 32px; font-size: 27px; }
  .story-scene figcaption > span { font-size: 8px; }
  .story-footer { padding: 23px 24px; }
  .story-footer p { font-size: 9px; max-width: 260px; }
  html[data-motion='on'] .story-scene img { animation: none; }
  html[data-motion='on'] .phone-mockup { transform: rotate(5deg); }
  .site-footer { padding-bottom: 80px; }
}
@media (min-width: 480px) and (max-width: 700px) { .hero-scene { height: 480px; } }
@media (max-width: 370px) { .hero-scene { height: 385px; } .story-copy { padding-inline: 20px; } .story-copy h2 { font-size: 37px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-scene { transform: none !important; translate: none !important; }
  .reveal-pending { opacity: 1 !important; transform: none !important; filter: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}