:root {
  --color-bg: #0b0c0e;
  --color-surface: #121416;
  --color-fg: #e8e4dc;
  --color-muted: #8a8680;
  --color-accent: #6b9a92;
  --color-line: #2a2e32;
  --sky: #1b3338;
  --ground: #2a241c;
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Outfit", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-quick: 150ms;
  --motion-fast: 250ms;
  --motion-slow: 400ms;
  --motion-cross: 900ms;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  overflow: hidden;
}

button:not(:disabled) {
  cursor: pointer;
}

.stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 38%, #12161a 0%, var(--color-bg) 72%);
  color: var(--color-fg);
  touch-action: pan-y;
  user-select: none;
  transition: background var(--motion-cross) var(--ease-smooth-out);
}

.stage[data-slide="electric"] {
  background:
    radial-gradient(ellipse 80% 62% at 52% 36%, #10161a 0%, var(--color-bg) 72%);
}

.stage[data-slide="electronic"] {
  background:
    radial-gradient(ellipse 80% 62% at 50% 38%, #101418 0%, var(--color-bg) 72%);
}

.stage[data-slide="auto"] {
  background:
    radial-gradient(ellipse 80% 62% at 48% 40%, #14120f 0%, var(--color-bg) 72%);
}

.stage[data-slide="print"] {
  background:
    radial-gradient(ellipse 80% 62% at 50% 34%, #101612 0%, var(--color-bg) 72%);
}

.stage[data-slide="compute"] {
  background:
    radial-gradient(ellipse 80% 62% at 54% 38%, #101218 0%, var(--color-bg) 72%);
}

.stage[data-slide="network"] {
  background:
    radial-gradient(ellipse 80% 62% at 48% 36%, #0f1418 0%, var(--color-bg) 72%);
}

.stage[data-slide="sim"] {
  background:
    radial-gradient(ellipse 80% 62% at 50% 36%, #0e1518 0%, var(--color-bg) 72%);
}

.grain,
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.grain {
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.vignette {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.38) 100%);
}

.cursor-glow,
.cad-field,
.cad-field-rest {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.cursor-glow {
  background: radial-gradient(
    circle 310px at var(--mx, 50%) var(--my, 38%),
    rgb(107 154 146 / 0.055) 0%,
    rgb(107 154 146 / 0.018) 42%,
    transparent 72%
  );
  opacity: 0;
  transition: opacity 400ms ease;
}

.cad-field-rest,
.cad-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpath d='M0 0h240M0 80h240M0 160h240M0 0v240M80 0v240M160 0v240' fill='none' stroke='%236b9a92' stroke-width='0.4' opacity='0.5'/%3E%3Cpath d='M40 40h8M44 36v8M200 120h8M204 116v8M120 200h8M124 196v8' fill='none' stroke='%236b9a92' stroke-width='0.55' opacity='0.55'/%3E%3Ccircle cx='120' cy='80' r='1.15' fill='%236b9a92' opacity='0.5'/%3E%3Ccircle cx='200' cy='40' r='1.1' fill='%236b9a92' opacity='0.4'/%3E%3Ccircle cx='40' cy='200' r='7' fill='none' stroke='%236b9a92' stroke-width='0.45' opacity='0.4'/%3E%3Cpath d='M0 0h7M0 0v7' fill='none' stroke='%236b9a92' stroke-width='0.7' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.cad-field-rest {
  z-index: 0;
  opacity: 0.028;
}

.cad-field {
  opacity: 0;
  mask-image: radial-gradient(
    circle 360px at var(--mx, 50%) var(--my, 38%),
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.16) 48%,
    transparent 74%
  );
  -webkit-mask-image: radial-gradient(
    circle 360px at var(--mx, 50%) var(--my, 38%),
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.16) 48%,
    transparent 74%
  );
  transition: opacity 400ms ease;
}

.stage.has-pointer .cursor-glow,
.stage.has-pointer .cad-field {
  opacity: 1;
}

.pcb-trace {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  opacity: 0.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pcb-trace circle {
  fill: currentColor;
  stroke: none;
}

.crop {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: color-mix(in oklab, var(--color-fg) 22%, transparent);
  border-style: solid;
  pointer-events: none;
  z-index: 7;
}

.crop-tl { top: 14px; left: 14px; border-width: 1px 0 0 1px; }
.crop-tr { top: 14px; right: 14px; border-width: 1px 1px 0 0; }
.crop-bl { bottom: 14px; left: 14px; border-width: 0 0 1px 1px; }
.crop-br { bottom: 14px; right: 14px; border-width: 0 1px 1px 0; }

.top-bar {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 8px;
  padding-top: max(22px, env(safe-area-inset-top));
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-fg);
  text-decoration: none;
}

.brand-mark {
  width: 22px;
  height: 22px;
  color: var(--color-accent);
}

.brand-name {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--color-fg) 78%, transparent);
}

.top-meta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.slides {
  position: relative;
  z-index: 2;
  min-height: 0;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 4vw 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(28px) scale(1.02);
  filter: blur(8px);
  transition:
    opacity var(--motion-cross) var(--ease-smooth-out),
    transform var(--motion-cross) var(--ease-smooth-out),
    filter 700ms var(--ease-smooth-out);
}

.stage.is-back .slide {
  transform: translateX(-28px) scale(1.02);
}

.slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.stage.is-back .slide.is-active {
  transform: translateX(0) scale(1);
}

.slide:not(.is-active) .scene-svg * {
  animation-play-state: paused !important;
}

.scene {
  width: min(100%, 980px);
  height: 100%;
  max-height: 61vh;
}

.stage[data-slide="electric"] .scene-svg {
  transform: translateY(18px) scale(1.12);
  transform-origin: center 58%;
}

.stage[data-slide="auto"] .scene-svg {
  transform: scale(1.07);
  transform-origin: center 58%;
}

.scene-svg-host,
.scene-svg {
  width: 100%;
  height: 100%;
}

.scene-svg {
  overflow: visible;
  color: var(--color-accent);
}

.ink {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ink-dim {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.32;
}

.ink-lead {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  opacity: 0.4;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
}

.ink-fine {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.75;
  opacity: 0.42;
}

.ink-strong {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fill-faint {
  fill: currentColor;
  stroke: none;
  opacity: 0.07;
}

.fill-soft {
  fill: currentColor;
  stroke: none;
  opacity: 0.16;
}

.fill-led {
  fill: currentColor;
  stroke: none;
}

.paper {
  fill: none;
  stroke: var(--color-fg);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.78;
}

.hud-text {
  fill: var(--color-fg);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.hud-text-sm {
  fill: color-mix(in oklab, var(--color-fg) 70%, transparent);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.hud-text-lg {
  fill: var(--color-fg);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.copy {
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 24px 2px;
  margin-top: -24px;
  text-align: center;
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 7.2vw, 5.25rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--color-fg);
  text-wrap: balance;
}

.slide-label {
  display: block;
  min-height: 1.1em;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-muted);
  animation: label-in 500ms var(--ease-smooth-out) both;
}

.bottom-nav {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 2px 20px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.nav-arrow,
.nav-dot {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-muted);
  padding: 0;
}

.nav-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: color-mix(in oklab, var(--color-fg) 55%, transparent);
  transition:
    color var(--motion-fast) var(--ease-smooth-out),
    transform var(--motion-quick) ease-out;
}

.nav-arrow:hover {
  color: var(--color-fg);
}

.nav-arrow:active {
  transform: scale(0.96);
}

.nav-arrow:focus-visible,
.nav-dot:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 3px;
}

.nav-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-dot {
  position: relative;
  width: 22px;
  height: 44px;
  display: grid;
  place-items: center;
}

.nav-dot-track {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-fg) 18%, transparent);
  overflow: hidden;
  transform-origin: center;
  transition:
    width var(--motion-fast) var(--ease-smooth-out),
    background var(--motion-fast) var(--ease-smooth-out);
}

.nav-dot.is-current .nav-dot-track {
  width: 28px;
  background: color-mix(in oklab, var(--color-fg) 16%, transparent);
}

.nav-dot-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-fg);
  transform: scaleX(0);
  transform-origin: left center;
}

.nav-dot.is-current .nav-dot-fill {
  animation: fill-bar 8s linear forwards;
}

.stage.is-paused .nav-dot.is-current .nav-dot-fill {
  animation-play-state: paused;
}

/* --- scene animations --- */

.trace-flow {
  stroke-dasharray: 5 14;
  animation: trace-flow 2.8s linear infinite;
}

.trace-flow-b {
  stroke-dasharray: 4 16;
  animation: trace-flow 3.6s linear infinite reverse;
}

.led-pulse {
  animation: led-pulse 1.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.led-pulse-b {
  animation: led-pulse 1.8s ease-in-out infinite 0.6s;
  transform-origin: center;
  transform-box: fill-box;
}

.led-pulse-c {
  animation: led-pulse 2.4s ease-in-out infinite 1.1s;
  transform-origin: center;
  transform-box: fill-box;
}

.scope-scan {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  animation: scope-scan 3.2s linear infinite;
}

.spark-flash {
  animation: spark-flash 3.8s steps(1, end) infinite;
}

.needle {
  transform-origin: 0 0;
  animation: needle-sweep 7s ease-in-out infinite;
}

.speedo-needle {
  transform-origin: 0 0;
  animation: speedo-sweep 9s ease-in-out infinite;
}

.hub-spin {
  transform-origin: center;
  transform-box: fill-box;
  animation: spin 9s linear infinite;
}

.gti-hub {
  transform-origin: center;
  transform-box: fill-box;
  animation: spin 2.8s linear infinite;
}

.breaker-paddle {
  animation: breaker-flip 7s ease-in-out infinite;
}

.bulb-lit {
  animation: bulb-lit 7s ease-in-out infinite;
}

.bulb-halo {
  fill: currentColor;
  stroke: none;
  animation: bulb-halo 7s ease-in-out infinite;
}

.wire-live {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-dasharray: 6 5;
  animation: wire-live 7s linear infinite;
}

.headlight {
  animation: headlight 3.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.gantry-z {
  animation: gantry-z 10s ease-in-out infinite;
}

.print-head {
  animation: head-x 2.4s ease-in-out infinite;
}

.nozzle-blob {
  animation: blob 2.4s ease-in-out infinite;
}

.print-object {
  clip-path: inset(100% 0 0 0);
  animation: print-grow 10s ease-in-out infinite;
}

.spool-spin {
  transform-origin: center;
  transform-box: fill-box;
  animation: spin 12s linear infinite;
}

.filament-flow {
  stroke-dasharray: 6 12;
  animation: trace-flow 2.2s linear infinite;
}

.fan-spin {
  transform-origin: center;
  transform-box: fill-box;
  animation: spin 2.2s linear infinite;
}

.fan-spin-b {
  transform-origin: center;
  transform-box: fill-box;
  animation: spin 2.4s linear infinite reverse;
}

.cpu-fan {
  transform-origin: center;
  transform-box: fill-box;
  animation: spin 1.55s linear infinite;
}

.bolt-flash {
  fill: currentColor;
  stroke: none;
  animation: bolt-pulse 2.6s steps(1, end) infinite;
}

.meter-spin {
  transform-origin: center;
  transform-box: fill-box;
  animation: spin 3.4s linear infinite;
}

.float-a {
  animation: float-drift-a 6.2s ease-in-out infinite;
}

.float-b {
  animation: float-drift-b 7.1s ease-in-out infinite 0.4s;
}

.float-c {
  animation: float-drift-c 8s ease-in-out infinite 0.9s;
}

.boot-led {
  animation: boot-led 4.5s ease-in-out infinite;
}

.install-bar {
  transform-origin: left center;
  transform-box: fill-box;
  animation: install-bar 8s ease-in-out infinite;
}

.horizon-fly {
  animation: fly 12s ease-in-out infinite;
}

.tape-drift {
  animation: tape-drift 8s linear infinite;
}

.heading-drift {
  animation: heading-drift 14s ease-in-out infinite;
}

.hud-blink {
  animation: hud-blink 2.8s steps(1, end) infinite;
}

.pfd-scan {
  stroke: var(--color-fg);
  stroke-width: 0.6;
  opacity: 0.18;
  animation: pfd-scan 4.8s linear infinite;
}

.solder-tip {
  transform-box: fill-box;
  transform-origin: 8px 96px;
  animation: solder-nudge 5.6s ease-in-out infinite;
}

.solder-glow {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  animation: solder-glow 5.6s ease-in-out infinite;
}

.mm-read {
  opacity: 0;
}

.mm-a { animation: mm-cycle 9s steps(1, end) infinite; }
.mm-b { animation: mm-cycle 9s steps(1, end) infinite 3s; }
.mm-c { animation: mm-cycle 9s steps(1, end) infinite 6s; }

.wifi-arc,
.wifi-arc-b,
.wifi-arc-c {
  opacity: 0.12;
  animation: wifi-fade 4.2s ease-in-out infinite;
}

.wifi-arc-b { animation-delay: 0.7s; }
.wifi-arc-c { animation-delay: 1.4s; }

.packet {
  opacity: 0.85;
}

.scene-svg-host {
  pointer-events: none;
}

.scene-svg .hot {
  pointer-events: auto;
}

.scene-svg .hot .hot-glow,
.scene-svg .hot .hot-link {
  transition: opacity 280ms ease;
}

.scene-svg .pcb-hot:hover .hot-glow {
  opacity: 0.72;
}

.scene-svg .pcb-hot:hover .tp-dot {
  fill: currentColor;
  opacity: 0.85;
}

.scene-svg .hot:hover .hot-link {
  opacity: 0.85;
  stroke-width: 1.4;
}

.signal-r {
  animation: sig-r 6s steps(1, end) infinite;
}

.signal-y {
  animation: sig-y 6s steps(1, end) infinite;
}

.signal-g {
  animation: sig-g 6s steps(1, end) infinite;
}

@keyframes trace-flow {
  to { stroke-dashoffset: -19; }
}

@keyframes led-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@keyframes scope-scan {
  0% { stroke-dashoffset: 280; }
  70%, 100% { stroke-dashoffset: 0; }
}

@keyframes spark-flash {
  0%, 86%, 100% { opacity: 0.34; }
  88% { opacity: 1; }
  90% { opacity: 0.4; }
  92% { opacity: 1; }
}

@keyframes bolt-pulse {
  0%, 86%, 100% { opacity: 0.62; }
  88% { opacity: 1; }
  90% { opacity: 0.5; }
  92% { opacity: 1; }
}

@keyframes needle-sweep {
  0%, 100% { transform: rotate(-118deg); }
  28% { transform: rotate(38deg); }
  52% { transform: rotate(-22deg); }
  76% { transform: rotate(18deg); }
}

@keyframes speedo-sweep {
  0%, 100% { transform: rotate(-110deg); }
  40% { transform: rotate(28deg); }
  70% { transform: rotate(-8deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes breaker-flip {
  0%, 18% { transform: translateY(18px); }
  30%, 68% { transform: translateY(0); }
  80%, 100% { transform: translateY(18px); }
}

@keyframes bulb-lit {
  0%, 20% { opacity: 0.1; }
  30%, 68% { opacity: 1; }
  80%, 100% { opacity: 0.1; }
}

@keyframes bulb-halo {
  0%, 20% { opacity: 0.04; }
  30%, 68% { opacity: 0.55; }
  80%, 100% { opacity: 0.04; }
}

@keyframes wire-live {
  0%, 20% { opacity: 0.25; stroke-dashoffset: 0; }
  30%, 68% { opacity: 0.9; stroke-dashoffset: -24; }
  80%, 100% { opacity: 0.25; stroke-dashoffset: 0; }
}

@keyframes headlight {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.95; }
}

@keyframes gantry-z {
  0%, 100% { transform: translateY(42px); }
  72% { transform: translateY(0); }
  86% { transform: translateY(0); }
}

@keyframes head-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(148px); }
}

@keyframes blob {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.85; }
}

@keyframes print-grow {
  0% { clip-path: inset(45% 0 0 0); }
  72% { clip-path: inset(0 0 0 0); }
  88% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(45% 0 0 0); }
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes float-drift-a {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(7px, -8px); }
  68% { transform: translate(-5px, -3px); }
}

@keyframes float-drift-b {
  0%, 100% { transform: translate(0, 0); }
  40% { transform: translate(-8px, -6px); }
  72% { transform: translate(5px, -10px); }
}

@keyframes float-drift-c {
  0%, 100% { transform: translate(0, 0); }
  32% { transform: translate(6px, -9px); }
  64% { transform: translate(-7px, -4px); }
}

@keyframes boot-led {
  0%, 12% { opacity: 0.15; }
  18%, 100% { opacity: 1; }
}

@keyframes install-bar {
  0% { transform: scaleX(0.08); opacity: 0.35; }
  70% { transform: scaleX(1); opacity: 0.7; }
  88% { transform: scaleX(1); opacity: 0.7; }
  100% { transform: scaleX(0.08); opacity: 0.35; }
}

@keyframes fly {
  0%, 100% { transform: rotate(-5.5deg) translateY(8px); }
  50% { transform: rotate(6.5deg) translateY(-12px); }
}

@keyframes tape-drift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-18px); }
}

@keyframes heading-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-28px); }
}

@keyframes hud-blink {
  0%, 70% { opacity: 1; }
  71%, 100% { opacity: 0.2; }
}

@keyframes pfd-scan {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 0.25; }
  100% { transform: translateY(268px); opacity: 0; }
}

@keyframes solder-nudge {
  0%, 100% { transform: translate(0, 0); }
  42% { transform: translate(10px, -8px); }
  58% { transform: translate(10px, -8px); }
}

@keyframes solder-glow {
  0%, 38%, 70%, 100% { opacity: 0; }
  48%, 58% { opacity: 0.55; }
}

@keyframes mm-cycle {
  0%, 32% { opacity: 1; }
  33%, 100% { opacity: 0; }
}

@keyframes wifi-fade {
  0%, 100% { opacity: 0.08; }
  40% { opacity: 0.42; }
}

@keyframes sig-r {
  0%, 38% { opacity: 1; }
  39%, 100% { opacity: 0.12; }
}

@keyframes sig-y {
  0%, 38% { opacity: 0.12; }
  39%, 52% { opacity: 1; }
  53%, 100% { opacity: 0.12; }
}

@keyframes sig-g {
  0%, 52% { opacity: 0.12; }
  53%, 100% { opacity: 1; }
}

@keyframes fill-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes label-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (max-width: 700px) {
  .hide-narrow {
    display: none;
  }

  .slide {
    align-items: center;
    padding: 0 12px 4px;
  }

  .scene {
    width: 100%;
    max-height: 52vh;
    height: 52vh;
  }

  .scene-svg {
    transform-origin: center center;
  }

  .float-a,
  .float-b,
  .float-c {
    animation: none;
  }

  .top-bar {
    padding: 14px 16px 4px;
    padding-top: max(14px, env(safe-area-inset-top));
  }

  .crop {
    display: none;
  }

  .copy {
    margin-top: 0;
    padding: 2px 16px 0;
    gap: 6px;
  }

  .hero-title {
    font-size: clamp(2.05rem, 11vw, 2.9rem);
  }

  .slide-label {
    letter-spacing: 0.16em;
    font-size: 0.625rem;
  }

  .bottom-nav {
    gap: 8px;
    padding: 0 8px 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .nav-dot {
    width: 16px;
    height: 36px;
  }

  .nav-dot.is-current .nav-dot-track {
    width: 18px;
  }

  .cursor-glow,
  .cad-field,
  .cad-field-rest {
    display: none;
  }

  .stage[data-slide="auto"] .scene-svg,
  .stage[data-slide="print"] .scene-svg {
    transform: none;
  }

  .stage[data-slide="electric"] .scene-svg {
    transform: translateY(8px) scale(1.06);
    transform-origin: center 55%;
  }
}

@media (max-height: 700px) {
  .scene {
    max-height: 42vh;
  }

  .hero-title {
    font-size: clamp(2.1rem, 6vh, 3.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide {
    transition: opacity 200ms ease;
    transform: none;
    filter: none;
  }

  .stage.is-back .slide,
  .slide.is-active,
  .stage.is-back .slide.is-active {
    transform: none;
  }

  .scene-svg *,
  .nav-dot.is-current .nav-dot-fill,
  .slide-label {
    animation: none !important;
  }

  .nav-dot.is-current .nav-dot-fill {
    transform: scaleX(1);
  }

  .print-object {
    clip-path: none;
  }

  .scene-svg animate,
  .scene-svg animateTransform,
  .scene-svg animateMotion {
    display: none !important;
  }

  .cursor-glow,
  .cad-field {
    display: none !important;
  }

  .cad-field-rest {
    opacity: 0.018;
  }
}

@media (hover: none), (pointer: coarse) {
  .cursor-glow,
  .cad-field {
    display: none !important;
  }
}