/* Separate, responsive scene layers. The photographic frame never has to warp. */
.animated-scene { display: none; position: absolute; inset: 0; }
.portal.scene-ready .animated-scene { display: block; }
.portal.scene-ready .portal-image { opacity: 0; }
.scene-stage { --scene-align: 52%; position: absolute; left: 50%; top: var(--scene-align); width: var(--scene-width, 100%); height: var(--scene-height, 100%); transform: translate(-50%, calc(-1 * var(--scene-align))) translate3d(var(--art-x, 0px), var(--art-y, 0px), 0) scale(1.025); transition: transform 700ms cubic-bezier(.16,1,.3,1); container-type: inline-size; }
.scene-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; --enter-delay: 0ms; }
.scene-item { position: absolute; perspective: 750px; transform-origin: 50% 70%; }
.enter-layer { opacity: 1; }
.motion-ready .portal:not(.is-present) .enter-layer { opacity: 0; }
.motion-ready .portal.is-present .enter-layer { animation: scene-drop 1250ms cubic-bezier(.18,.9,.22,1) both; animation-delay: var(--enter-delay, 200ms); }
.motion-ready .brand { animation: heading-drop 800ms cubic-bezier(.2,.8,.2,1) both; }
.motion-ready .hero-intro h1 { animation: heading-drop 900ms 100ms cubic-bezier(.2,.8,.2,1) both; }
.motion-ready .hero-intro > p { animation: heading-drop 900ms 170ms cubic-bezier(.2,.8,.2,1) both; }
.motion-ready .portal.is-present .portal-content { animation: heading-drop 850ms 450ms cubic-bezier(.2,.8,.2,1) both; }
.portal:focus-within .enter-layer, .portal:focus-within .portal-content { animation: none !important; opacity: 1 !important; }
.loop { animation-play-state: paused !important; }
html[data-motion="on"] .portal.is-visible .loop { animation-play-state: running !important; }
html[data-page-hidden="true"] .loop { animation-play-state: paused !important; }

.globe-item { left: 30.5%; top: 18.5%; width: 27.5%; height: 22.5%; --enter-delay: 170ms; z-index: 4; }
.cloud-item { left: 60.8%; top: 25%; width: 17.1%; height: 12.8%; --enter-delay: 340ms; z-index: 2; }
.chart-item { left: 57.8%; top: 42%; width: 23%; height: 19%; --enter-delay: 500ms; z-index: 4; }
.stream-item { left: 34.5%; top: 43%; width: 17.3%; height: 13.5%; --enter-delay: 650ms; z-index: 3; }
.orbit-item { left: 65.2%; top: 66%; width: 13.5%; height: 9.5%; --enter-delay: 720ms; z-index: 3; }
.laptop-item { left: 29.5%; top: 47%; width: 35%; --enter-delay: 840ms; z-index: 6; }
.hologram { width: 100%; height: 100%; border: 1px solid #8dd9ff99; border-radius: 5px; background: linear-gradient(125deg, #102f4dd9, #07325580 50%, #071c39de); box-shadow: 0 0 13px #1c9aff35, inset 0 0 22px #66baff14; color: #b7e5ff; transform: perspective(700px) rotateY(-12deg) rotateZ(5deg); overflow: hidden; }
.hologram::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, #8aceff05 3px 4px); pointer-events: none; }
.holo-header { display: flex; align-items: center; gap: 5%; padding: 7% 7% 0; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1cqw; letter-spacing: .04cqw; }
.holo-dot { flex-shrink: 0; width: .55cqw; height: .55cqw; background: #c8efff; border-radius: 50%; box-shadow: 0 0 6px #8bddff; }
.holo-corner { margin-left: auto; font-size: 1.6cqw; }
.globe-canvas { display: block; width: 84%; height: 78%; margin: 0 auto; }
.holo-baseline { display: flex; justify-content: space-between; margin: 0 10%; font: .75cqw ui-monospace, monospace; letter-spacing: .04cqw; color: #80b7d7; }
.float-loop { animation: panel-float 6.2s ease-in-out infinite; }
.cloud-panel { animation-delay: -2s; }
.chart-panel { animation-delay: -3.6s; }
.stream-panel { animation-delay: -1s; }
.cloud-symbol { display: block; width: 67%; height: 59%; margin: 1% auto 0; filter: drop-shadow(0 0 8px #74c9ff99); animation: cloud-breathe 3.8s ease-in-out infinite; }
.sync-lines { display: flex; gap: 5%; height: 5%; width: 64%; margin: 7% auto 0; }
.sync-lines i { height: 100%; flex: 1; border-radius: 2px; background: #9adfff; animation: sync-pulse 2.4s ease-in-out infinite; }
.sync-lines i:nth-child(2) { animation-delay: -.7s; }
.sync-lines i:nth-child(3) { animation-delay: -1.4s; }
.chart-layout { display: flex; width: 86%; height: 59%; margin: 11% 7% 0; gap: 9%; }
.live-bars { width: 53%; height: 100%; display: flex; align-items: flex-end; gap: 7%; border-bottom: 1px solid #8ad3ff66; background: repeating-linear-gradient(0deg, transparent 0 24%, #8ed0ff1c 24% 25%); }
.live-bars i { width: 11%; height: var(--bar); transform-origin: bottom; background: linear-gradient(#c1eeff, #2789cbb3); box-shadow: 0 0 5px #54bfff66; animation: chart-grow 4.5s var(--phase) ease-in-out infinite; }
.data-scroll, .code-scroll { overflow: hidden; mask-image: linear-gradient(transparent, #000 12%, #000 87%, transparent); }
.data-scroll { width: 40%; height: 100%; padding-top: 0; }
.data-track { display: flex; flex-direction: column; animation: stream-scroll 10s linear infinite; }
.data-track span { font: .94cqw/2.3 ui-monospace, SFMono-Regular, Consolas, monospace; color: #b4dfff; white-space: nowrap; }
.chart-spark { width: 84%; height: 13%; display: block; margin: 6% auto 0; overflow: visible; }
.spark-dot { animation: sync-pulse 2s ease-in-out infinite; }
.code-scroll { height: 75%; margin: 5% 9% 0; }
.code-track { animation: stream-scroll 8s linear infinite; }
.code-track span { display: block; font: 1.05cqw/2.1 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.code-track b { color: #70a7cbaa; font-weight: 400; margin-right: .5cqw; }
.orbit-panel { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7%; animation-delay: -2.2s; }
.interface-ring { width: 40%; aspect-ratio: 1; border: .45cqw solid #62bff844; border-right-color: #c8f0ff; border-top-color: #88d0ff; border-radius: 50%; animation: ring-spin 8s linear infinite; }
.orbit-panel > span { font: .7cqw ui-monospace, monospace; letter-spacing: .15cqw; }
.laptop-item img { width: 100%; height: auto; filter: drop-shadow(0 12px 11px #010812b3) drop-shadow(0 0 5px #51b4ed33); }
.laptop-float { position: relative; animation: laptop-hover 7s ease-in-out infinite; }
.laptop-scan { position: absolute; left: 8%; top: 9%; width: 53%; height: 3%; transform: rotate(6deg); background: linear-gradient(90deg, transparent, #77d9ffb3, transparent); filter: blur(1px); opacity: .3; animation: screen-scan 4.8s ease-in-out infinite; }
.data-ribbons, .thread-ribbons { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; --enter-delay: 1020ms; }
.flow-base { stroke: #409fef; stroke-opacity: .4; stroke-width: 1; }
.flow-pulse { stroke: #b9edff; stroke-width: 1.6; stroke-dasharray: 35 190; filter: drop-shadow(0 0 4px #4facff); animation: data-flow 5s linear infinite; }
.floor-flow { stroke: #7ad1ff; stroke-width: 1.4; stroke-opacity: .6; stroke-dasharray: 65 480; filter: drop-shadow(0 0 3px #50baff); animation: data-flow 7s linear infinite; }

.fabric-item { left: 20%; top: 10.8%; width: 55%; height: 58%; --enter-delay: 280ms; z-index: 2; }
.fabric-float { width: 100%; height: 100%; animation: fabric-sway 9s ease-in-out infinite; transform-origin: 50% 18%; }
.fabric-fallback, .fabric-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fabric-fallback { filter: drop-shadow(8px 10px 16px #2b160466); }
.fabric-canvas { opacity: 0; }
.fabric-item[data-engine="webgl"] .fabric-canvas { opacity: 1; }
.fabric-item[data-engine="webgl"] .fabric-fallback { opacity: 0; }
.garment-item { left: 28.5%; top: 50.5%; width: 33.5%; --enter-delay: 650ms; z-index: 5; }
.garment-item img { width: 100%; height: auto; filter: drop-shadow(0 13px 9px #080806aa); }
.garment-float { animation: garment-settle 8s ease-in-out infinite; }
.spool-item { left: 65.7%; top: 52.5%; width: 12%; --enter-delay: 870ms; z-index: 6; }
.spool-item img { width: 100%; height: auto; filter: drop-shadow(4px 7px 7px #160a0588); }
.spool-float { position: relative; animation: spool-turn 8s ease-in-out infinite; transform-origin: 50% 90%; }
.spool-highlight { position: absolute; inset: 9% 9% 10%; background: linear-gradient(90deg, transparent 15%, #ffdb9744 48%, transparent 75%); border-radius: 28%; mix-blend-mode: screen; animation: thread-light 6s ease-in-out infinite; }
.thread-ribbons { z-index: 7; --enter-delay: 1100ms; }
.thread-base { stroke: #ba864799; stroke-width: 1.2; }
.thread-shimmer { stroke: #ffe2af; stroke-width: 1.4; stroke-dasharray: 30 220; filter: drop-shadow(0 0 4px #ffb354); animation: data-flow 9s linear infinite reverse; }
.weave-motes { position: absolute; left: 25%; top: 30%; width: 46%; height: 44%; z-index: 4; --enter-delay: 1000ms; }
.weave-motes i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #ffdab0; box-shadow: 0 0 7px #ffbd7e; animation: weave-drift 8s ease-in-out infinite; }
.weave-motes i:nth-child(1) { left: 12%; top: 10%; }
.weave-motes i:nth-child(2) { left: 80%; top: 32%; animation-delay: -2s; }
.weave-motes i:nth-child(3) { left: 65%; top: 66%; animation-delay: -4s; }
.weave-motes i:nth-child(4) { left: 30%; top: 46%; animation-delay: -6s; }
.weave-motes i:nth-child(5) { left: 47%; top: 90%; animation-delay: -3s; }
.weave-motes i:nth-child(6) { left: 90%; top: 87%; animation-delay: -5s; }

@keyframes scene-drop { from { opacity: 0; transform: translateY(calc(var(--scene-unit, 1px) * -220)) rotateX(12deg) scale(.96); } 65% { opacity: 1; } to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); } }
@keyframes heading-drop { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes panel-float { 0%,100% { transform: perspective(700px) rotateY(-12deg) rotateZ(5deg) translateY(-.55cqw); } 50% { transform: perspective(700px) rotateY(-9deg) rotateZ(4deg) translateY(.55cqw); } }
@keyframes cloud-breathe { 0%,100% { opacity: .72; transform: translateY(-3%); } 50% { opacity: 1; transform: translateY(3%); } }
@keyframes sync-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes chart-grow { 0%,100% { transform: scaleY(.65); } 45% { transform: scaleY(1); } 70% { transform: scaleY(.82); } }
@keyframes stream-scroll { to { transform: translateY(-50%); } }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes laptop-hover { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-.7cqw) rotate(.3deg); } }
@keyframes screen-scan { 0%,100% { top: 12%; opacity: 0; } 30% { opacity: .35; } 70% { opacity: .25; } 95% { top: 61%; opacity: 0; } }
@keyframes data-flow { to { stroke-dashoffset: -900; } }
@keyframes fabric-sway { 0%,100% { transform: rotate(-2deg) translate(-.5cqw,0); } 50% { transform: rotate(2.3deg) translate(.6cqw,-.6cqw); } }
@keyframes garment-settle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.28cqw); } }
@keyframes spool-turn { 0%,100% { transform: perspective(500px) rotateY(-6deg) rotateZ(-1deg); } 50% { transform: perspective(500px) rotateY(7deg) rotateZ(1deg); } }
@keyframes thread-light { 0%,100% { opacity: .15; transform: translateX(-15%); } 50% { opacity: .65; transform: translateX(15%); } }
@keyframes weave-drift { 0%,100% { opacity: .1; transform: translate(0,12px); } 50% { opacity: .65; transform: translate(7px,-18px); } }

@media (max-width: 700px) { .scene-stage { --scene-align: 45%; } }
html[data-motion="off"] .scene-stage { transform: translate(-50%, calc(-1 * var(--scene-align))); }
html[data-motion="off"] .enter-layer, html[data-motion="off"] .brand, html[data-motion="off"] .hero-intro h1, html[data-motion="off"] .hero-intro > p, html[data-motion="off"] .portal-content { animation: none !important; opacity: 1 !important; }
html[data-motion="off"] .loop { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .scene-stage { transform: translate(-50%, calc(-1 * var(--scene-align))) !important; }
  .enter-layer, .portal-content, .brand, .hero-intro h1, .hero-intro > p { opacity: 1 !important; animation: none !important; }
}