:root {
  color-scheme: light;
  --paper: #f1eee7;
  --ink: #17191e;
  --muted: rgba(23, 25, 30, .62);
  --blue: #4e8dff;
  --orange: #f36f3d;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

.skip-link {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(23, 25, 30, .24);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(245, 242, 236, .94);
  box-shadow: 0 8px 24px rgba(23, 25, 30, .12);
  transform: translateY(-160%);
  transition: transform .2s ease;
}

.skip-link:focus-visible { transform: translateY(0); }

.motion-noscript {
  max-width: 720px;
  margin: 24px auto;
  padding: 18px 22px;
  color: var(--ink);
  background: var(--paper);
  font: 14px/1.65 var(--sans);
}

.motion-noscript a { color: #b65331; }

body {
  margin: 0;
  color: white;
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }

.motion-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - 82px);
  padding: clamp(18px, 4vw, 48px);
  background:
    radial-gradient(ellipse at 12% 22%, rgba(78,141,255,.08), transparent 31%),
    radial-gradient(ellipse at 88% 54%, rgba(243,111,61,.08), transparent 34%),
    linear-gradient(145deg, #f5f2ec 0%, var(--paper) 58%, #ece8df 100%);
}
.motion-shell::before,
.motion-shell::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
}
.motion-shell::before {
  opacity: .54;
  background:
    radial-gradient(ellipse at 16% 28%, transparent 0 18%, rgba(78,141,255,.10) 18.2%, transparent 18.5%),
    radial-gradient(ellipse at 82% 62%, transparent 0 21%, rgba(243,111,61,.08) 21.2%, transparent 21.5%),
    linear-gradient(12deg, transparent 44%, rgba(78,141,255,.07) 44.1%, transparent 44.25%),
    linear-gradient(-17deg, transparent 58%, rgba(243,111,61,.06) 58.1%, transparent 58.22%);
  animation: outer-field-breathe 18s ease-in-out infinite alternate;
}
.motion-shell::after {
  opacity: .18;
  background-image: radial-gradient(rgba(52,58,67,.54) .5px, transparent .72px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
  animation: outer-grain-drift 26s linear infinite;
}

.motion-stage {
  --motion-stage-gutter: max(5%, calc((100% - 1180px) / 2));
  position: relative;
  z-index: 1;
  width: min(1440px, 100%);
  aspect-ratio: 16 / 9;
  min-height: 480px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .34);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.motion-layer,
.motion-bg,
.motion-paper-wash,
.motion-grain,
.motion-vignette,
.motion-canvas { position: absolute; inset: 0; }

.motion-layer { will-change: opacity, transform, filter; }
.scene-000 { z-index: 1; transform-origin: 50% 50%; }
.scene-004 { z-index: 2; transform-origin: 50% 50%; opacity: 0; }
.scene-005 { z-index: 3; transform-origin: 72% 50%; opacity: 0; perspective: 1200px; }

.motion-bg {
  z-index: -3;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.scene-000 .motion-bg { background-image: none; opacity: 0; }
.scene-004 .motion-bg { background-image: none; }
.scene-005 .motion-bg {
  background:
    radial-gradient(ellipse at 72% 50%, rgba(255, 255, 255, .60), transparent 37%),
    radial-gradient(ellipse at 18% 72%, rgba(243, 111, 61, .06), transparent 36%),
    var(--paper);
}

.pre-roll {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--paper);
}

.pre-frame {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: opacity, transform;
}

.pre-frame:nth-child(1),
.pre-frame:nth-child(2),
.pre-frame:nth-child(3) { background-image: none; }

.motion-paper-wash {
  background: radial-gradient(circle at 50% 48%, rgba(241, 238, 231, .72) 0%, rgba(241, 238, 231, .45) 25%, rgba(241, 238, 231, .10) 48%, rgba(241, 238, 231, 0) 68%);
}

.motion-grain {
  z-index: 7;
  pointer-events: none;
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  mix-blend-mode: normal;
}

.motion-canvas {
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.portal-hit {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 72px;
  padding: 0;
  border: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  cursor: pointer;
  pointer-events: none;
}

.portal-hit.is-active { pointer-events: auto; }
.portal-hit:focus-visible { outline: 1px solid var(--orange); outline-offset: 10px; }

.motion-vignette {
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(26, 28, 35, .06) 100%);
  opacity: .5;
}

.motion-header {
  position: absolute;
  z-index: 8;
  top: 5.3%;
  left: 4.2%;
  right: 4.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
}

.motion-header-dark { color: var(--ink); }

.wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(15px, 1.5vw, 23px); font-weight: 720; letter-spacing: -.055em; }
.wordmark-mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; font: 12px/1 var(--mono); letter-spacing: 0; transform: rotate(45deg); }
.wordmark small { margin-left: 4px; color: currentColor; opacity: .5; font: 8px/1 var(--mono); letter-spacing: .11em; }
.frame-kind { font: 8px/1 var(--mono); letter-spacing: .16em; opacity: .54; }

.portal-copy {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 16px;
  transform: translate(-50%, -50%);
  color: var(--ink);
  font: 10px/1 var(--mono);
  letter-spacing: .28em;
  white-space: nowrap;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.portal-copy p { margin: 0; }
.portal-copy b { color: var(--orange); font-size: 13px; letter-spacing: 0; }
.portal-copy:focus-visible { outline: 1px solid var(--orange); outline-offset: 10px; }
.scene-000 .portal-copy { visibility: visible; pointer-events: auto; }
.portal-instruction {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  color: rgba(23, 25, 30, .58);
  font: 9px/1.4 var(--sans);
  letter-spacing: .08em;
  transform: translateX(-50%);
}
.portal-line { width: 34px; height: 1px; background: rgba(23, 25, 30, .70); }
.portal-line:first-child { background: linear-gradient(to right, transparent, rgba(23, 25, 30, .70)); }
.portal-line:last-child { background: linear-gradient(to right, rgba(23, 25, 30, .70), transparent); }

.product-copy {
  position: absolute;
  z-index: 8;
  isolation: isolate;
  top: 34%;
  left: 50%;
  width: min(480px, 54%);
  transform: translate(-50%, 24px) scale(.92);
  text-align: center;
  color: #292a30;
}

.product-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px -42px;
  background: radial-gradient(ellipse at center, rgba(241, 238, 231, .88) 0%, rgba(241, 238, 231, .60) 42%, rgba(241, 238, 231, 0) 68%);
}

.eyebrow { margin: 0; color: #d76c43; font: 8px/1.4 var(--mono); letter-spacing: .17em; }
.scene-005 .eyebrow,
.scene-006 .eyebrow,
.scene-007 .eyebrow,
.scene-008 .eyebrow,
.scene-009 .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.scene-005 .eyebrow::before,
.scene-006 .eyebrow::before,
.scene-007 .eyebrow::before,
.scene-008 .eyebrow::before,
.scene-009 .eyebrow::before {
  content: "";
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, #d76c43, rgba(215,108,67,0));
}
.product-copy h1 { max-width: 450px; margin: 21px auto 0; color: #292a30; font-size: clamp(30px, 3.1vw, 48px); font-weight: 430; letter-spacing: -.055em; line-height: 1.08; }
.product-copy h1 em { color: #3f4b5c; font-style: normal; }
.body-copy { max-width: 350px; margin: 22px auto 0; color: rgba(41, 42, 48, .78); font-size: clamp(11px, .95vw, 13px); line-height: 1.72; }
.copy-rule { display: block; width: 52px; height: 1px; margin: 21px auto 16px; background: linear-gradient(to right, transparent, #d76c43, transparent); }
.frame-index { position: absolute; z-index: 8; right: 4.2%; bottom: 5.5%; color: rgba(23, 25, 30, .46); font: 9px/1 var(--mono); letter-spacing: .14em; }
.frame-index span { margin: 0 7px; opacity: .45; }
.frame-index-dark { color: rgba(23, 25, 30, .46); }

.scene-005 .feature-backdrop { position: absolute; z-index: 1; inset: 0; pointer-events: none; opacity: .9; }
.scene-005 .backdrop-ring { position: absolute; left: 54%; top: 52%; width: 48%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px dashed rgba(78, 141, 255, .18); border-radius: 50%; }
.scene-005 .backdrop-ring-a { width: 38%; border-color: rgba(243, 111, 61, .22); }
.scene-005 .backdrop-ring-b { width: 59%; opacity: .72; transform: translate(-50%, -50%) rotate(18deg) scaleY(.66); }
.scene-005 .backdrop-axis { position: absolute; left: 49%; top: 51%; width: 70%; height: 1px; transform-origin: left center; background: linear-gradient(to right, transparent, rgba(23, 25, 30, .13), transparent); }
.scene-005 .backdrop-axis-a { transform: rotate(-10deg); }
.scene-005 .backdrop-axis-b { transform: rotate(28deg); opacity: .62; }
.scene-005 .feature-header { opacity: 0; }

.scene-005 .feature-copy {
  position: absolute;
  z-index: 8;
  top: 14%;
  left: var(--motion-stage-gutter);
  width: min(350px, 31%);
  opacity: 0;
  transform: translate3d(-20px, 18px, 0);
  filter: blur(6px);
}

.scene-005 .feature-copy h1 { max-width: 390px; margin: 21px 0 0; color: #292a30; font-size: clamp(34px, 3.5vw, 50px); font-weight: 430; letter-spacing: -.055em; line-height: 1.08; }
.scene-005 .feature-copy h1 em { color: #3f4b5c; font-style: normal; }
.scene-005 .feature-copy .body-copy { max-width: 260px; margin: 22px 0 0; color: rgba(41, 42, 48, .72); font-size: clamp(11px, .9vw, 13px); line-height: 1.7; }
.scene-005 .feature-copy .copy-rule { display: block; width: 52px; height: 1px; margin-top: 22px; background: linear-gradient(to right, #d76c43, transparent); }

.scene-005 .feature-module {
  position: absolute;
  z-index: 6;
  top: 24%;
  right: var(--motion-stage-gutter);
  width: min(61%, 860px);
  opacity: 0;
  transform: translate3d(90px, 22px, 0) rotate(-1.8deg) scale(.90);
  transform-origin: 72% 50%;
  filter: blur(9px);
  will-change: opacity, transform, filter;
}

.scene-005 .module-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1855 / 767;
  overflow: hidden;
  border: 1px solid rgba(29, 32, 38, .22);
  border-radius: 16px;
  background: #181b1e;
  box-shadow: 0 18px 46px rgba(36, 40, 48, .20), -18px 12px 0 rgba(243, 111, 61, .06), 18px -12px 0 rgba(78, 141, 255, .07);
  animation: feature-frame-breathe 6.8s ease-in-out infinite;
}

.scene-005 .module-frame::before,
.scene-005 .module-frame::after { content: ""; position: absolute; z-index: 2; pointer-events: none; inset: 8px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; }
.scene-005 .module-frame::after { inset: -1px; border-color: rgba(243, 111, 61, .40); border-left-color: rgba(78, 141, 255, .42); border-right-color: transparent; opacity: .58; animation: feature-border-pulse 4.6s ease-in-out infinite; }
.scene-005 .module-frame::before { animation: feature-inner-pulse 5.2s ease-in-out infinite; }
.scene-005 .module-frame img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.scene-005 .module-frame { border-color: transparent; background: transparent; box-shadow: 0 18px 46px rgba(36,40,48,.12), -18px 12px 0 rgba(243,111,61,.04), 18px -12px 0 rgba(78,141,255,.05); }
.scene-005 .module-frame::before,
.scene-005 .module-frame::after { display: none; }
.scene-005 .module-meta { display: flex; justify-content: space-between; margin-top: 13px; padding: 0 3px; color: rgba(23, 25, 30, .48); font: 8px/1 var(--mono); letter-spacing: .14em; }
.scene-005 .feature-frame-index { opacity: 0; }

@keyframes feature-frame-breathe {
  0%, 100% { box-shadow: 0 18px 46px rgba(36, 40, 48, .18), -18px 12px 0 rgba(243, 111, 61, .05), 18px -12px 0 rgba(78, 141, 255, .06); }
  50% { box-shadow: 0 23px 56px rgba(36, 40, 48, .25), -22px 14px 0 rgba(243, 111, 61, .09), 22px -14px 0 rgba(78, 141, 255, .10); }
}

@keyframes feature-border-pulse {
  0%, 100% { opacity: .34; }
  50% { opacity: .72; }
}

@keyframes feature-inner-pulse {
  0%, 100% { opacity: .06; }
  50% { opacity: .16; }
}

.motion-caption {
  position: absolute;
  z-index: 10;
  left: 4.2%;
  bottom: 12.5%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(23, 25, 30, .60);
  font: 8px/1 var(--mono);
  letter-spacing: .14em;
  pointer-events: none;
}

.caption-index { color: var(--orange); }
.caption-rule { width: 36px; height: 1px; background: var(--orange); }

.motion-controls {
  position: absolute;
  z-index: 10;
  right: 4.2%;
  bottom: 5.2%;
  left: 4.2%;
  display: grid;
  grid-template-columns: auto minmax(170px, 320px) auto;
  align-items: center;
  gap: 22px;
  color: rgba(23, 25, 30, .56);
  font: 8px/1 var(--mono);
  letter-spacing: .12em;
}

.play-button {
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
}

.play-button span { color: var(--orange); font-size: 15px; margin-left: 6px; }
.play-button:hover { color: var(--orange); }
.play-button:focus-visible { outline: 1px solid var(--orange); outline-offset: 6px; }

.motion-timeline { display: flex; align-items: center; gap: 10px; }
.timeline-track { position: relative; display: block; flex: 1; height: 1px; background: rgba(23, 25, 30, .20); }
.timeline-track i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--orange); }
.timeline-label { color: rgba(23, 25, 30, .45); }
.motion-hint { justify-self: end; }

@media (max-width: 760px) {
  .motion-shell { min-height: calc(100svh - 108px); padding: 0; }
  .motion-stage { --motion-stage-gutter: 15px; height: calc(100svh - 108px); min-height: min(560px, calc(100svh - 108px)); aspect-ratio: auto; }
  .motion-header { top: 4%; left: 7%; right: 7%; }
  .frame-kind { display: none; }
  .motion-bg { background-position: 62% center; }
  .product-copy { top: 21%; width: 82%; }
  .product-copy::before { inset: -28px -22px; }
  .product-copy h1 { font-size: clamp(28px, 8vw, 42px); }
  .scene-005 .feature-copy { top: 9%; left: var(--motion-stage-gutter); width: calc(100% - 30px); }
  .scene-005 .feature-copy h1 { font-size: clamp(34px, 12vw, 48px); }
  .scene-005 .feature-module { top: 44%; right: var(--motion-stage-gutter); width: calc(100% - 30px); }
  .motion-caption { left: 7%; bottom: 17%; }
  .motion-controls { right: 7%; bottom: 6%; left: 7%; grid-template-columns: auto 1fr; gap: 12px; }
  .motion-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-layer, .motion-canvas, .scene-005 .module-frame, .scene-005 .module-frame::before, .scene-005 .module-frame::after { transition: none !important; animation: none !important; }
}

/* 006 keeps the same 16:9 stage as 001–005; the UI itself is the only solid surface. */
.scene-006 { z-index: 4; transform-origin: 50% 50%; opacity: 0; perspective: 1400px; }
.scene-006 .rhythm-bg,
.scene-006 .rhythm-wash { position: absolute; inset: 0; pointer-events: none; }
.scene-006 .rhythm-bg {
  z-index: -3;
  background: none center / cover no-repeat;
  opacity: .72;
  transform-origin: 44% 52%;
}
.scene-006 .rhythm-wash {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(241, 238, 231, .02) 0 42%, rgba(241, 238, 231, .65) 72%, rgba(241, 238, 231, .94) 100%),
    linear-gradient(180deg, rgba(241, 238, 231, .10), transparent 28%, rgba(241, 238, 231, .12));
}
.scene-006 .rhythm-header { opacity: 0; }
.scene-006 .rhythm-lens {
  position: absolute;
  z-index: 2;
  top: 53%;
  left: 39%;
  width: 12%;
  aspect-ratio: 1;
  border: 1px dashed rgba(78, 141, 255, .26);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: multiply;
}
.scene-006 .rhythm-lens::before,
.scene-006 .rhythm-lens::after { content: ""; position: absolute; border-radius: 50%; }
.scene-006 .rhythm-lens::before { inset: -34%; border: 1px dotted rgba(243, 111, 61, .20); }
.scene-006 .rhythm-lens::after { inset: 22%; border: 1px solid rgba(78, 141, 255, .16); }
.scene-006 .rhythm-module {
  position: absolute;
  z-index: 6;
  top: 29%;
  left: 7.2%;
  width: min(52%, 760px);
  opacity: 0;
  transform-origin: 72% 50%;
  will-change: opacity, transform, filter;
}
.scene-006 .rhythm-module-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 752 / 343;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
}
.scene-006 .rhythm-module-frame img {
  position: absolute;
  width: 110.6%;
  max-width: none;
  height: auto;
  left: -5.3%;
  top: -16.5%;
  user-select: none;
  -webkit-user-drag: none;
}
.scene-006 .rhythm-module-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 3px;
  color: rgba(23, 25, 30, .44);
  font: 8px/1 var(--mono);
  letter-spacing: .14em;
}
.scene-006 .rhythm-copy {
  position: absolute;
  z-index: 8;
  top: 29%;
  right: 7.2%;
  width: min(340px, 31%);
  opacity: 0;
  transform: translate3d(44px, 18px, 0);
  filter: blur(7px);
  will-change: opacity, transform, filter;
}
.scene-006 .rhythm-copy h1 {
  max-width: 350px;
  margin: 21px 0 0;
  color: #292a30;
  font-size: clamp(29px, 3vw, 44px);
  font-weight: 430;
  letter-spacing: -.055em;
  line-height: 1.1;
}
.scene-006 .rhythm-copy h1 em { color: #3f4b5c; font-style: normal; }
.scene-006 .rhythm-copy .body-copy { max-width: 280px; margin: 22px 0 0; color: rgba(41, 42, 48, .72); font-size: clamp(11px, .9vw, 13px); line-height: 1.7; }
.scene-006 .rhythm-copy .copy-rule { display: block; width: 52px; height: 1px; margin-top: 22px; background: linear-gradient(to right, #d76c43, transparent); }
.scene-006 .rhythm-detail { display: flex; gap: 22px; margin-top: 16px; color: rgba(23, 25, 30, .42); font: 8px/1 var(--mono); letter-spacing: .12em; }
.scene-006 .rhythm-frame-index { opacity: 0; }

@media (max-width: 760px) {
  .scene-006 .rhythm-copy { top: 14%; left: 7%; right: auto; width: 82%; }
  .scene-006 .rhythm-copy h1 { font-size: clamp(28px, 8vw, 42px); }
  .scene-006 .rhythm-module { top: 42%; left: 7%; width: 86%; }
}

/* 007 changes the visual grammar from time rhythm to spatial heat. */
.scene-007 { z-index: 5; transform-origin: 50% 50%; opacity: 0; perspective: 1400px; }
.scene-007 .screen-bg,
.scene-007 .screen-wash { position: absolute; inset: 0; pointer-events: none; }
.scene-007 .screen-bg {
  z-index: -3;
  background: none center / cover no-repeat;
  opacity: .74;
  transform-origin: 68% 52%;
}
.scene-007 .screen-wash {
  z-index: -2;
  background: linear-gradient(90deg, rgba(241, 238, 231, .93) 0 31%, rgba(241, 238, 231, .32) 62%, rgba(241, 238, 231, .06) 100%);
}
.scene-007 .screen-grid-plane {
  position: absolute;
  z-index: 1;
  top: 17%;
  right: 5%;
  width: 58%;
  height: 61%;
  border: 1px solid rgba(63, 127, 220, .12);
  background:
    linear-gradient(rgba(63, 127, 220, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 127, 220, .07) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .34;
  transform: perspective(900px) rotateX(56deg) rotateZ(-8deg) translateY(15%);
  transform-origin: 50% 50%;
  mix-blend-mode: multiply;
}
.scene-007 .screen-lens {
  position: absolute;
  z-index: 2;
  top: 52%;
  right: 28%;
  width: 12%;
  aspect-ratio: 1;
  border: 1px dashed rgba(63, 127, 220, .24);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, -50%);
  mix-blend-mode: multiply;
}
.scene-007 .screen-lens::before,
.scene-007 .screen-lens::after { content: ""; position: absolute; border-radius: 50%; }
.scene-007 .screen-lens::before { inset: -38%; border: 1px dotted rgba(233, 110, 53, .18); }
.scene-007 .screen-lens::after { inset: 20%; border: 1px solid rgba(63, 127, 220, .16); }
.scene-007 .screen-header { opacity: 0; }
.scene-007 .screen-module {
  position: absolute;
  z-index: 6;
  top: 29%;
  right: 5.5%;
  width: min(55%, 820px);
  opacity: 0;
  transform-origin: 72% 50%;
  will-change: opacity, transform, filter;
}
.scene-007 .screen-module-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1780 / 740;
  overflow: hidden;
  border-radius: 16px;
}
.scene-007 .screen-module-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.scene-007 .screen-module-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 3px;
  color: rgba(23, 25, 30, .44);
  font: 8px/1 var(--mono);
  letter-spacing: .14em;
}
.scene-007 .screen-copy {
  position: absolute;
  z-index: 8;
  top: 31%;
  left: 7.2%;
  width: min(350px, 31%);
  opacity: 0;
  transform: translate3d(-36px, 18px, 0);
  filter: blur(7px);
  will-change: opacity, transform, filter;
}
.scene-007 .screen-copy h1 {
  max-width: 350px;
  margin: 21px 0 0;
  color: #292a30;
  font-size: clamp(29px, 3vw, 44px);
  font-weight: 430;
  letter-spacing: -.055em;
  line-height: 1.1;
}
.scene-007 .screen-copy h1 em { color: #3f4b5c; font-style: normal; }
.scene-007 .screen-copy .body-copy { max-width: 280px; margin: 22px 0 0; color: rgba(41, 42, 48, .72); font-size: clamp(11px, .9vw, 13px); line-height: 1.7; }
.scene-007 .screen-copy .copy-rule { display: block; width: 52px; height: 1px; margin-top: 22px; background: linear-gradient(to right, #d76c43, transparent); }
.scene-007 .screen-frame-index { opacity: 0; }

@media (max-width: 760px) {
  .scene-007 .screen-copy { top: 14%; left: 7%; width: 82%; }
  .scene-007 .screen-copy h1 { font-size: clamp(28px, 8vw, 42px); }
  .scene-007 .screen-module { top: 46%; right: 7%; width: 86%; }
  .scene-007 .screen-grid-plane { right: 2%; width: 95%; }
}

/* 008 turns the spatial screen field into a readable record of today's actions. */
.scene-008 { z-index: 6; transform-origin: 32% 50%; opacity: 0; perspective: 1400px; }
.scene-008 .actions-bg,
.scene-008 .actions-wash { position: absolute; inset: 0; pointer-events: none; }
.scene-008 .actions-bg {
  z-index: -3;
  background: none center / cover no-repeat;
  opacity: .82;
  transform-origin: 28% 50%;
}
.scene-008 .actions-wash {
  z-index: -2;
  background: linear-gradient(90deg, rgba(241, 238, 231, .08) 0 45%, rgba(241, 238, 231, .34) 68%, rgba(241, 238, 231, .88) 100%);
}
.scene-008 .actions-lens {
  position: absolute;
  z-index: 2;
  top: 49%;
  left: 45%;
  width: 34%;
  height: 20%;
  border-top: 1px dotted rgba(78, 141, 255, .20);
  border-bottom: 1px dotted rgba(243, 111, 61, .17);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-7deg) scale(.6);
  mix-blend-mode: multiply;
}
.scene-008 .actions-header { opacity: 0; }
.scene-008 .actions-module {
  position: absolute;
  z-index: 6;
  top: 30%;
  left: 5.5%;
  width: min(50%, 760px);
  opacity: 0;
  transform-origin: 28% 50%;
  will-change: opacity, transform, filter;
}
.scene-008 .actions-module-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1889 / 721;
  overflow: hidden;
  border-radius: 26px;
  background: #15171a;
  box-shadow: 0 22px 40px rgba(28, 34, 42, .18);
}
.scene-008 .actions-module-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.scene-008 .actions-module-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 3px;
  color: rgba(23, 25, 30, .44);
  font: 8px/1 var(--mono);
  letter-spacing: .14em;
}
.scene-008 .actions-edge-canvas {
  position: absolute;
  z-index: 7;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.scene-008 .actions-copy {
  position: absolute;
  z-index: 8;
  top: 31%;
  left: 62.5%;
  width: min(370px, 31%);
  opacity: 0;
  transform: translate3d(34px, 18px, 0);
  filter: blur(7px);
  will-change: opacity, transform, filter;
}
.scene-008 .actions-copy h1 {
  max-width: 430px;
  margin: 21px 0 0;
  color: #292a30;
  font-size: clamp(27px, 2.65vw, 40px);
  font-weight: 430;
  letter-spacing: -.06em;
  line-height: 1.14;
}
.scene-008 .actions-copy h1 em { color: #3f4b5c; font-style: normal; white-space: nowrap; }
.scene-008 .actions-copy .body-copy { max-width: 320px; margin: 22px 0 0; color: rgba(41, 42, 48, .72); font-size: clamp(11px, .9vw, 13px); line-height: 1.75; }
.scene-008 .actions-copy .body-copy span { display: block; }
.scene-008 .actions-copy .body-copy__agent { margin-top: 8px; color: rgba(41, 42, 48, .78); }
.scene-008 .actions-copy .copy-rule { display: block; width: 80px; height: 1px; margin-top: 23px; background: linear-gradient(to right, #d76c43, transparent); }
.scene-008 .actions-frame-index { opacity: 0; }

@media (max-width: 760px) {
  .scene-008 .actions-copy { top: 14%; left: 7%; width: 82%; }
  .scene-008 .actions-copy h1 { font-size: clamp(28px, 8vw, 42px); }
  .scene-008 .actions-copy h1 em { white-space: normal; }
  .scene-008 .actions-module { top: 52%; left: 7%; width: 86%; }
  .scene-008 .actions-lens { left: 48%; width: 72%; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-008 .actions-bg,
  .scene-008 .actions-module,
  .scene-008 .actions-copy,
  .scene-008 .actions-edge-canvas { transition: none !important; animation: none !important; }
}

/* Once the long-history field is reached, finished scenes leave the render tree. */
.motion-stage.is-late > .scene-000,
.motion-stage.is-late > .scene-004,
.motion-stage.is-late > .scene-005,
.motion-stage.is-late > .scene-006,
.motion-stage.is-late > .scene-007,
.motion-stage.is-late > .scene-008 {
  display: none !important;
  animation: none !important;
}

/* Late scenes no longer need the full-stage and finished feature canvases.
   Removing them from compositing is the main 009/010 performance win. */
.motion-stage.is-late-render > .motion-canvas,
.motion-stage.is-late-render .scene-008 .actions-edge-canvas,
.motion-stage.is-tail-render .scene-009 .history-motion-canvas,
.motion-stage.is-late-render .scene-010 .tail-card-particles {
  display: none !important;
  animation: none !important;
}

/* 009 lets the action particles settle into a longer historical field. */
.scene-009 { z-index: 7; transform-origin: 68% 50%; opacity: 0; perspective: 1400px; }
.scene-009 .history-bg,
.scene-009 .history-wash { position: absolute; inset: 0; pointer-events: none; }
.scene-009 .history-bg {
  z-index: -3;
  background: none center / cover no-repeat;
  opacity: .78;
  transform-origin: 72% 52%;
}
.scene-009 .history-wash {
  z-index: -2;
  background: linear-gradient(90deg, rgba(241, 238, 231, .93) 0 28%, rgba(241, 238, 231, .52) 47%, rgba(241, 238, 231, .08) 100%);
}
.scene-009 .history-lens {
  position: absolute;
  z-index: 2;
  top: 49%;
  left: 62%;
  width: 55%;
  height: 36%;
  border-top: 1px dotted rgba(78, 141, 255, .18);
  border-bottom: 1px dotted rgba(243, 111, 61, .16);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-4deg) scale(.72);
  mix-blend-mode: multiply;
}
.scene-009 .history-motion-canvas {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: normal;
}
.scene-009 .history-module {
  position: absolute;
  z-index: 6;
  top: 27%;
  right: 5.2%;
  width: min(56%, 860px);
  opacity: 0;
  transform-origin: 72% 50%;
  will-change: opacity, transform, filter;
}
.scene-009 .history-module-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3440 / 1600;
  overflow: hidden;
  border-radius: 24px;
  background: #f1eee7;
  box-shadow: 0 24px 44px rgba(28, 34, 42, .18);
}
.scene-009 .history-module-frame::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(243, 111, 61, .38);
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(78, 141, 255, .14);
}
.scene-009 .history-module-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -12%;
  pointer-events: none;
  background: radial-gradient(ellipse at 12% 52%, rgba(78, 141, 255, .13), transparent 34%), radial-gradient(ellipse at 90% 50%, rgba(243, 111, 61, .16), transparent 32%);
  mix-blend-mode: screen;
  opacity: .58;
}
.scene-009 .history-module-frame img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.scene-009 .history-module-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 3px;
  color: rgba(23, 25, 30, .44);
  font: 8px/1 var(--mono);
  letter-spacing: .14em;
}
.scene-009 .history-header { opacity: 0; }
.scene-009 .history-copy {
  position: absolute;
  z-index: 8;
  top: 31%;
  left: 7.2%;
  width: min(370px, 31%);
  opacity: 0;
  transform: translate3d(-34px, 18px, 0);
  filter: blur(7px);
  will-change: opacity, transform, filter;
}
.scene-009 .history-copy h1 {
  max-width: 380px;
  margin: 21px 0 0;
  color: #292a30;
  font-size: clamp(29px, 3vw, 44px);
  font-weight: 430;
  letter-spacing: -.055em;
  line-height: 1.1;
}
.scene-009 .history-copy h1 em { color: #3f4b5c; font-style: normal; }
.scene-009 .history-copy .body-copy { max-width: 300px; margin: 22px 0 0; color: rgba(41, 42, 48, .72); font-size: clamp(11px, .9vw, 13px); line-height: 1.75; }
.scene-009 .history-copy .copy-rule { display: block; width: 70px; height: 1px; margin-top: 23px; background: linear-gradient(to right, #d76c43, transparent); }
.scene-009 .history-frame-index { opacity: 0; }

@media (max-width: 760px) {
  .scene-009 .history-copy { top: 14%; left: 7%; width: 82%; }
  .scene-009 .history-copy h1 { font-size: clamp(28px, 8vw, 42px); }
  .scene-009 .history-lens { left: 55%; width: 90%; }
  .scene-009 .history-module { top: 43%; right: 7%; width: 86%; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-009 .history-bg,
  .scene-009 .history-module,
  .scene-009 .history-copy,
  .scene-009 .history-motion-canvas { transition: none !important; animation: none !important; }
}

/* Global navigation for the 000—009 master preview. */
.motion-global-nav {
  position: absolute;
  z-index: 24;
  top: 4.1%;
  right: 4.6%;
  left: 4.6%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  color: #343a43;
  pointer-events: auto;
}
.motion-global-nav ~ .motion-layer .motion-header { visibility: hidden; }
.motion-nav-brand,
.motion-nav-links a,
.motion-nav-download { color: inherit; text-decoration: none; }
.motion-nav-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  white-space: nowrap;
}
.motion-nav-brand img {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(50, 58, 70, .10), 0 0 0 1px rgba(255,255,255,.50);
}
.motion-nav-brand-name { margin-left: 3px; font-size: 17px; font-weight: 650; letter-spacing: -.025em; }
.motion-nav-brand small { margin-left: 0; color: #405064; font-family: inherit; font-size: 17px; font-weight: 650; line-height: 1; letter-spacing: .02em; }
.motion-nav-links { display: flex; align-items: center; gap: clamp(20px, 3vw, 46px); }
.motion-nav-links a { position: relative; padding: 8px 0; color: rgba(52,58,67,.70); font-size: clamp(11px, 1vw, 14px); letter-spacing: .08em; white-space: nowrap; }
.motion-nav-links a::after { content: ""; position: absolute; right: 100%; bottom: 0; left: 0; height: 1px; background: var(--orange); transition: right .22s ease; }
.motion-nav-links a:hover,
.motion-nav-links a.is-active { color: #343a43; }
.motion-nav-links a:hover::after,
.motion-nav-links a.is-active::after { right: 0; }
.motion-nav-download {
  --nav-glow-x: 50%;
  --nav-glow-y: 50%;
  position: relative;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  color: #fff7ec;
  background: radial-gradient(circle at var(--nav-glow-x) var(--nav-glow-y), rgba(255,238,216,.34) 0 7%, transparent 48%), linear-gradient(135deg, #cf6240, #e48659);
  border: 1px solid rgba(255,247,236,.70);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(220,112,71,.14), 0 0 18px rgba(220,112,71,.20);
  font-size: 10px;
  white-space: nowrap;
}
.motion-nav-download > strong { display: inline-flex; align-items: center; gap: 7px; position: relative; z-index: 3; font-weight: 650; letter-spacing: .02em; }
.motion-nav-status-dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: #fff7ec; box-shadow: 0 0 0 1px rgba(255,247,236,.22), 0 0 6px rgba(255,247,236,.86); animation: motion-nav-dot-pulse 1.8s ease-in-out infinite; }
@keyframes motion-nav-dot-pulse { 0%,100% { opacity:.62; transform:scale(.82); } 50% { opacity:1; transform:scale(1.12); } }
.motion-nav-particle-field { position: absolute; z-index: 2; inset: -23px -80px -22px -74px; pointer-events: none; }
.motion-nav-particle-field::before { content: ""; position: absolute; left: calc(50% - 130px); top: calc(50% - 13px); width: 92px; height: 30px; border-top: 1px dotted rgba(78,141,255,.38); border-right: 1px solid rgba(220,112,71,.30); border-radius: 50%; transform: rotate(-9deg); }
.motion-nav-particle-field i { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; border-radius: 50%; background: var(--particle, #4e8dff); filter: drop-shadow(0 0 3px currentColor); animation: motion-nav-particle-flow 3.8s ease-in-out infinite alternate; }
.motion-nav-particle-field i:nth-child(1) { --x:-84px; --y:-12px; --tx:-64px; --ty:-4px; --particle:#4e8dff; }
.motion-nav-particle-field i:nth-child(2) { --x:-70px; --y:-3px; --tx:-70px; --ty:0; --particle:#dc7047; animation-delay:-.6s; }
.motion-nav-particle-field i:nth-child(3) { --x:-58px; --y:10px; --tx:-65px; --ty:4px; --particle:#77818d; animation-delay:-1s; }
.motion-nav-particle-field i:nth-child(4) { --x:-42px; --y:19px; --tx:-59px; --ty:8px; --particle:#e39a78; animation-delay:-1.4s; }
.motion-nav-particle-field i:nth-child(5) { --x:-31px; --y:-20px; --tx:-56px; --ty:-7px; --particle:#4e8dff; animation-delay:-1.8s; }
.motion-nav-particle-field i:nth-child(6) { --x:-18px; --y:24px; --tx:-51px; --ty:9px; --particle:#dc7047; animation-delay:-2.1s; }
@keyframes motion-nav-particle-flow { 0% { opacity:.28; transform:translate(var(--x),var(--y)) scale(.72); } 100% { opacity:.90; transform:translate(var(--tx),var(--ty)) scale(1); } }

@media (max-width: 760px) {
  .motion-global-nav { top: 4%; right: 7%; left: 7%; grid-template-columns: 1fr auto; gap: 12px; }
  .motion-nav-links { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 12px; width: 100%; }
  .motion-nav-links a { font-size: 10px; }
  .motion-nav-brand-name,
  .motion-nav-brand small { font-size: 14px; }
  .motion-nav-download { padding: 7px 9px; font-size: 9px; }
}

@media (min-width: 761px) {
  .motion-shell {
    min-height: calc(100svh - 82px);
    height: calc(100svh - 82px);
    padding: 0;
    display: grid;
    place-items: center;
  }
  .motion-stage {
    width: min(100vw, calc((100svh - 82px) * 1.777778));
    height: min(calc(100svh - 82px), 56.25vw);
    max-width: none;
    min-height: 0;
    aspect-ratio: auto;
    box-shadow: none;
  }
  .motion-global-nav { top: 3.8%; gap: 20px; }
  .motion-nav-brand { gap: 7px; }
  .motion-nav-brand img { width: 24px; height: 24px; flex-basis: 24px; border-radius: 6px; }
  .motion-nav-brand-name,
  .motion-nav-brand small { font-size: 14px; }
  .motion-nav-links { gap: clamp(17px, 2.4vw, 34px); }
  .motion-nav-links a { padding: 6px 0; font-size: clamp(10px, .85vw, 12px); }
  .motion-nav-download { padding: 7px 10px; font-size: 9px; }
  .motion-nav-status-dot { width: 3px; height: 3px; }
}

.motion-home .motion-stage .motion-header { visibility: hidden; }

/* 010 end note: the same quiet particle field as the standalone footer frame. */
.scene-010 {
  z-index: 10;
  transform-origin: 50% 50%;
  opacity: 0;
  pointer-events: none;
}
.scene-010 .tail-bg-art,
.scene-010 .tail-particles,
.scene-010 .tail-transition,
.scene-010 .tail-wash,
.scene-010 .tail-grain { position: absolute; inset: 0; }
.scene-010 .tail-bg-art {
  z-index: 0;
  background: none center / cover no-repeat;
}
.scene-010 .tail-particles { z-index: 1; width: 100%; height: 100%; opacity: .30; }
.scene-010 .tail-transition { z-index: 4; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: normal; }
.scene-010 .tail-card-particles { z-index: 7; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: normal; }
.scene-010 .tail-wash {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(241,238,231,.24), rgba(241,238,231,.06) 48%, rgba(241,238,231,.10));
}
.scene-010 .tail-grain {
  z-index: 8;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}
.scene-010 .tail-copy {
  position: absolute;
  z-index: 6;
  top: 28%;
  left: 7.8%;
  width: min(32%, 470px);
}
.scene-010 .tail-eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 23px; color: var(--orange); font: 9px/1 var(--mono); letter-spacing: .17em; }
.scene-010 .tail-eyebrow i { display: block; width: 40px; height: 1px; background: linear-gradient(90deg,var(--orange),rgba(243,111,61,0)); }
.scene-010 .tail-copy h1 { margin: 0; color: #292d35; font-size: clamp(30px, 3.3vw, 52px); font-weight: 540; letter-spacing: -.06em; line-height: 1.13; }
.scene-010 .tail-copy h1 em { color: #405064; font-style: normal; }
.scene-010 .tail-description { max-width: 360px; margin: 22px 0 0; color: rgba(52,58,67,.70); font-size: clamp(11px, 1vw, 14px); line-height: 1.85; }
.scene-010 .tail-description span { display: block; }
.scene-010 .tail-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  padding: 9px 13px;
  border: 1px solid rgba(255,247,236,.78);
  border-radius: 4px;
  color: #fff7ec;
  background: linear-gradient(135deg,#cf6240,#e48659);
  box-shadow: 0 0 0 1px rgba(220,112,71,.12), 0 8px 18px rgba(220,112,71,.16);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  font-size: 10px;
  letter-spacing: .02em;
}
.scene-010 .tail-download span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.scene-010 .tail-download strong { font-weight: 650; }
.scene-010 .tail-note { margin: 22px 0 0; color: rgba(52,58,67,.45); font: 8px/1 var(--mono); letter-spacing: .14em; }
.scene-010 .tail-real-visual {
  position: absolute;
  z-index: 5;
  top: 9%;
  right: 12%;
  width: 66%;
  height: 84%;
  perspective: 1400px;
  will-change: opacity, transform, filter;
}
.scene-010 .tail-real-visual::before,
.scene-010 .tail-real-visual::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
  transform-origin: 50% 50%;
}
.scene-010 .tail-real-visual::before {
  inset: 8% -10% 6% -12%;
  border: 1px dotted rgba(78,141,255,.42);
  transform: rotate(-9deg);
  animation: tail-real-orbit 10s linear infinite;
}
.scene-010 .tail-real-visual::after {
  inset: 19% -3% 15% -5%;
  border: 1px dotted rgba(243,111,61,.36);
  transform: rotate(12deg);
  animation: tail-real-orbit-reverse 13s linear infinite;
}
.scene-010 .tail-real-card {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #13161c;
  box-shadow: 0 30px 62px rgba(35,39,47,.26), 0 0 0 1px rgba(255,255,255,.22), 0 0 28px rgba(243,111,61,.08);
  will-change: transform;
}
.scene-010 .tail-real-card img { display: block; width: 100%; height: auto; transform: translateZ(0); }
.scene-010 .tail-real-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.20); border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(243,111,61,.12); }
.scene-010 .tail-real-card--history {
  top: 16%;
  right: 29%;
  z-index: 1;
  width: min(28%, 330px);
  transform-origin: 50% 50%;
}
.scene-010 .tail-real-card--overview {
  top: 4%;
  right: 5%;
  z-index: 2;
  width: min(33%, 385px);
  transform-origin: 50% 50%;
}
.scene-010 .tail-real-halo { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(18px); opacity: .65; }
.scene-010 .tail-real-halo--history { top: 22%; right: 26%; width: 27%; height: 50%; background: radial-gradient(ellipse, rgba(78,141,255,.25), transparent 68%); }
.scene-010 .tail-real-halo--overview { top: 9%; right: 0; width: 40%; height: 70%; background: radial-gradient(ellipse, rgba(243,111,61,.22), transparent 70%); }
.scene-010 .tail-real-particle-field {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
}
.scene-010 .tail-real-particle-field i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size, 2px);
  height: var(--size, 2px);
  border-radius: 50%;
  background: var(--spark);
  box-shadow: 0 0 4px var(--spark);
  animation: tail-real-spark 3.6s ease-in-out var(--delay, 0s) infinite alternate;
}
.scene-010 .tail-real-particle-field i:nth-child(1) { --x:56%; --y:35%; --dx:-8px; --dy:5px; --spark:#4e8dff; --delay:-.2s; }
.scene-010 .tail-real-particle-field i:nth-child(2) { --x:59%; --y:27%; --dx:6px; --dy:-6px; --spark:#f36f3d; --delay:-1.1s; }
.scene-010 .tail-real-particle-field i:nth-child(3) { --x:63%; --y:19%; --dx:-5px; --dy:8px; --spark:#75808b; --delay:-2.2s; }
.scene-010 .tail-real-particle-field i:nth-child(4) { --x:69%; --y:13%; --dx:7px; --dy:-4px; --spark:#4e8dff; --delay:-.8s; }
.scene-010 .tail-real-particle-field i:nth-child(5) { --x:78%; --y:10%; --dx:-4px; --dy:7px; --spark:#f36f3d; --delay:-2.8s; }
.scene-010 .tail-real-particle-field i:nth-child(6) { --x:88%; --y:18%; --dx:8px; --dy:-5px; --spark:#4e8dff; --delay:-1.7s; }
.scene-010 .tail-real-particle-field i:nth-child(7) { --x:94%; --y:29%; --dx:-6px; --dy:5px; --spark:#75808b; --delay:-3.1s; }
.scene-010 .tail-real-particle-field i:nth-child(8) { --x:96%; --y:43%; --dx:5px; --dy:-7px; --spark:#f36f3d; --delay:-.5s; }
.scene-010 .tail-real-particle-field i:nth-child(9) { --x:95%; --y:58%; --dx:-7px; --dy:4px; --spark:#4e8dff; --delay:-2.5s; }
.scene-010 .tail-real-particle-field i:nth-child(10) { --x:91%; --y:72%; --dx:6px; --dy:-5px; --spark:#f36f3d; --delay:-1.4s; }
.scene-010 .tail-real-particle-field i:nth-child(11) { --x:85%; --y:81%; --dx:-5px; --dy:6px; --spark:#75808b; --delay:-3.5s; }
.scene-010 .tail-real-particle-field i:nth-child(12) { --x:77%; --y:87%; --dx:8px; --dy:-4px; --spark:#4e8dff; --delay:-1.9s; }
.scene-010 .tail-real-particle-field i:nth-child(13) { --x:68%; --y:84%; --dx:-6px; --dy:5px; --spark:#f36f3d; --delay:-.9s; }
.scene-010 .tail-real-particle-field i:nth-child(14) { --x:60%; --y:77%; --dx:5px; --dy:-6px; --spark:#4e8dff; --delay:-2.7s; }
.scene-010 .tail-real-particle-field i:nth-child(15) { --x:54%; --y:68%; --dx:-7px; --dy:4px; --spark:#f36f3d; --delay:-1.6s; }
.scene-010 .tail-real-particle-field i:nth-child(16) { --x:52%; --y:56%; --dx:5px; --dy:-5px; --spark:#75808b; --delay:-3.0s; }
.scene-010 .tail-real-particle-field i:nth-child(17) { --x:54%; --y:45%; --dx:-6px; --dy:7px; --spark:#4e8dff; --delay:-.7s; }
.scene-010 .tail-real-particle-field i:nth-child(18) { --x:59%; --y:40%; --dx:7px; --dy:-4px; --spark:#f36f3d; --delay:-2.1s; }
.scene-010 .tail-real-particle-field i:nth-child(19) { --x:72%; --y:31%; --dx:-5px; --dy:6px; --spark:#4e8dff; --delay:-3.3s; }
.scene-010 .tail-real-particle-field i:nth-child(20) { --x:86%; --y:49%; --dx:6px; --dy:-5px; --spark:#f36f3d; --delay:-1.2s; }
@keyframes tail-real-spark {
  0% { opacity: .22; transform: translate3d(0, 0, 0) scale(.55); }
  50% { opacity: .76; transform: translate3d(calc(var(--dx) * .45), calc(var(--dy) * .45), 0) scale(1); }
  100% { opacity: .34; transform: translate3d(var(--dx), var(--dy), 0) scale(.72); }
}
@keyframes tail-real-orbit {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@keyframes tail-real-orbit-reverse {
  from { rotate: 360deg; }
  to { rotate: 0deg; }
}
.scene-010 .tail-orbit { display: none; }
.motion-stage.is-simple-010 .scene-010 .tail-transition,
.motion-stage.is-simple-010 .scene-010 .tail-card-particles,
.motion-stage.is-simple-010 .scene-010 .tail-real-particle-field,
.motion-stage.is-simple-010 .scene-010 .tail-real-visual::before,
.motion-stage.is-simple-010 .scene-010 .tail-real-visual::after { display: none; }
.motion-stage.is-simple-010 .scene-010 .tail-particles { opacity: .28; }
.motion-stage.no-orbit-010 .scene-010 .tail-real-visual::before,
.motion-stage.no-orbit-010 .scene-010 .tail-real-visual::after { display: none; }
.motion-stage.no-canvas-010 .scene-010 .tail-transition,
.motion-stage.no-canvas-010 .scene-010 .tail-card-particles { display: none; }
.scene-010 .tail-orbit { position: absolute; z-index: 3; pointer-events: none; border: 1px solid rgba(78,141,255,.16); border-radius: 50%; transform: rotate(-16deg); }
.scene-010 .tail-orbit::before,
.scene-010 .tail-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px dotted rgba(243,111,61,.24); }
.scene-010 .tail-orbit::before { inset: 9%; }
.scene-010 .tail-orbit::after { inset: 23%; border-color: rgba(78,141,255,.2); }
.scene-010 .tail-orbit--left { top: 19%; left: -10%; width: 58%; height: 78%; }
.scene-010 .tail-orbit--right { top: 21%; right: -18%; width: 52%; height: 60%; border-color: rgba(243,111,61,.13); transform: rotate(19deg); }
.scene-010 .tail-orbit--right::before { border-color: rgba(78,141,255,.17); }
.scene-010 .tail-orbit--right::after { border-color: rgba(243,111,61,.16); }
.scene-010 .tail-footer {
  position: absolute;
  z-index: 10;
  right: 5%;
  bottom: 7.2%;
  left: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(52,58,67,.22);
  color: rgba(52,58,67,.48);
  font: 8px/1 var(--mono);
  letter-spacing: .15em;
}
.scene-010 .tail-footer-left { display: inline-flex; align-items: center; gap: 18px; }
.scene-010 .tail-footer-label { color: rgba(52,58,67,.58); }
.scene-010 .tail-footer-links { display: inline-flex; align-items: center; color: rgba(52,58,67,.68); font-size: 9px; letter-spacing: .11em; }
.scene-010 .tail-footer-links a { color: inherit; text-decoration: none; }
.scene-010 .tail-progress { display: flex; align-items: center; gap: 0; width: 142px; height: 1px; }
.scene-010 .tail-progress span { display: block; width: 34px; height: 1px; background: var(--orange); }
.scene-010 .tail-progress i { display: block; flex: 1; height: 1px; background: rgba(52,58,67,.16); }

@media (max-width: 760px) {
  .scene-010 .tail-copy { top: 25%; left: 9%; width: 82%; }
  .scene-010 .tail-copy h1 { font-size: clamp(32px, 10vw, 54px); }
  .scene-010 .tail-real-visual { top: 68%; right: 5%; width: 76%; height: 32%; }
  .scene-010 .tail-real-card--history { top: 10%; right: 36%; width: 36%; }
  .scene-010 .tail-real-card--overview { top: 0; right: 2%; width: 42%; }
  .scene-010 .tail-footer { right: 7%; bottom: 8%; left: 7%; }
  .scene-010 .tail-footer-left { gap: 12px; }
  .scene-010 .tail-progress { width: 96px; }
}

/* The master preview uses the real site footer on every frame; test controls stay hidden. */
.motion-caption,
.motion-controls,
.motion-stage .frame-index,
.motion-stage .module-meta,
.motion-stage .rhythm-module-meta,
.motion-stage .screen-module-meta,
.motion-stage .actions-module-meta,
.motion-stage .history-module-meta,
.scene-010 .tail-footer { display: none !important; }
.motion-master-footer {
  position: absolute;
  z-index: 23;
  right: 5%;
  bottom: 7.2%;
  left: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 0;
  border-top: 0;
  color: rgba(52,58,67,.48);
  font: 8px/1 var(--mono);
  letter-spacing: .15em;
  pointer-events: auto;
}
.motion-master-footer-left { display: inline-flex; align-items: center; gap: 18px; }
.motion-master-footer > a { color: rgba(52,58,67,.68); text-decoration: none; font-size: 9px; letter-spacing: .11em; }
.motion-master-progress {
  --progress: 0%;
  display: block;
  width: 142px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
}
.motion-master-progress::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to right, var(--orange) 0 var(--progress), rgba(52,58,67,.16) var(--progress) 100%);
}
.motion-master-progress::-moz-range-track {
  width: 100%;
  height: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(to right, var(--orange) 0 var(--progress), rgba(52,58,67,.16) var(--progress) 100%);
}
.motion-master-progress::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -5.5px;
  border: 1px solid rgba(255,247,236,.95);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(243,111,61,.12), 0 0 10px rgba(243,111,61,.30);
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: opacity .16s ease;
}
.motion-master-progress::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255,247,236,.95);
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(243,111,61,.12), 0 0 10px rgba(243,111,61,.30);
  opacity: 0;
}
.motion-master-progress:hover::-webkit-slider-thumb,
.motion-master-progress:focus-visible::-webkit-slider-thumb,
.motion-master-progress:active::-webkit-slider-thumb,
.motion-master-progress:hover::-moz-range-thumb,
.motion-master-progress:focus-visible::-moz-range-thumb,
.motion-master-progress:active::-moz-range-thumb { opacity: 1; }
.motion-master-progress:focus-visible { outline: 1px solid rgba(243,111,61,.45); outline-offset: 7px; }

@media (max-width: 760px) {
  .motion-master-footer { right: 7%; bottom: 8%; left: 7%; }
  .motion-master-footer-left { gap: 12px; }
  .motion-master-progress { width: 96px; }
}

@keyframes outer-field-breathe {
  from { transform: scale(1); opacity: .42; }
  to { transform: scale(1.035) translate3d(1%, -1%, 0); opacity: .64; }
}
@keyframes outer-grain-drift {
  from { background-position: 0 0; }
  to { background-position: 28px -18px; }
}