/* Motion studies drawn from the four original projects. */
.motion-preview{aspect-ratio:1200/630;isolation:isolate;display:grid;place-items:center;contain:layout paint;overflow:hidden;cursor:pointer}
.motion-preview *, .motion-preview::before,.motion-preview::after{animation-play-state:paused!important}.motion-preview.is-active *, .motion-preview.is-active::before,.motion-preview.is-active::after{animation-play-state:running!important}
.motion-preview img{object-fit:contain;transition:none}.motion-preview:hover img{transform:none}.motion-preview canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.orelier-preview{background:var(--project)}
.crystal-stage{width:34%;height:62%;position:absolute;top:7%;left:33%;display:grid;place-items:center}
.motion-preview .crystal-logo{position:relative;z-index:2;width:83%;height:auto;animation:crystal-transmission 8.8s cubic-bezier(.45,0,.2,1) infinite;transform-origin:50% 66%}
.crystal-aura{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(ellipse,#d9ddf17a,transparent 66%);filter:blur(16px);animation:crystal-light 6s ease-in-out infinite}
.crystal-orbit{position:absolute;width:105%;height:38%;border:1px solid #adb8d430;border-radius:50%;transform:rotate(-18deg);animation:crystal-orbit-one 24s linear infinite}
.crystal-orbit.orbit-b{width:83%;height:75%;animation:crystal-orbit-two 29s linear infinite}
.recording-study{position:absolute;left:29%;bottom:16%;width:42%;height:14%;min-height:38px;border-radius:100px;border:1px solid #a9acc12e;background:#ffffff80;box-shadow:0 6px 28px #65678308;display:flex;align-items:center;gap:8%;padding:0 5% 0 3%;backdrop-filter:blur(10px)}
.recording-signal{display:flex;gap:3px;align-items:center;height:16px;flex-shrink:0}.recording-signal i{display:block;width:1px;height:7px;background:#76738f80}.recording-signal i:nth-child(2){height:14px}
.waveform{width:100%;height:55%;display:flex;gap:2px;align-items:center;position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.waveform>i{display:block;flex:1;min-width:1px;max-width:2px;border-radius:3px;height:var(--bar);max-height:100%;background:#9c98b994;animation:wave-breathe var(--duration) ease-in-out var(--delay) infinite alternate;transform-origin:center}
.wave-playhead{position:absolute;inset:0 auto 0 0;width:1px;background:#6e678aaa;box-shadow:0 0 9px 2px #b8b3d366;animation:recording-travel 10s linear infinite}
@keyframes crystal-transmission{0%,100%{transform:translateY(2px) rotate(-.6deg) scale(1);filter:brightness(.99) drop-shadow(0 10px 12px #434a5c12)}24%{transform:translateY(-13px) rotate(.75deg) scale(1.045);filter:brightness(1.08) drop-shadow(0 22px 24px #434a5c24) drop-shadow(0 0 18px #94a2ca33)}52%{transform:translateY(-5px) rotate(-.2deg) scale(.992);filter:brightness(1.02) drop-shadow(0 14px 18px #434a5c19)}76%{transform:translateY(-11px) rotate(-.85deg) scale(1.026);filter:brightness(1.07) drop-shadow(0 20px 23px #434a5c1f)}}
@keyframes crystal-light{50%{opacity:.5;transform:scale(1.12)}}@keyframes crystal-orbit-one{from{transform:rotate(-18deg)}to{transform:rotate(342deg)}}@keyframes crystal-orbit-two{from{transform:rotate(22deg)}to{transform:rotate(-338deg)}}@keyframes wave-breathe{from{transform:scaleY(.55);opacity:.6}to{transform:scaleY(1.1);opacity:1}}@keyframes recording-travel{from{left:0}to{left:100%}}
.earth-preview{background:var(--project)}
.motion-preview .earth-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.earth-preview canvas{opacity:0;transition:opacity .6s}.earth-preview.is-ready canvas{opacity:1}.earth-preview.is-ready .earth-fallback{visibility:hidden}
.alice-preview{background:var(--project)}
.alice-aurora{display:none;position:absolute;inset:-30%;background:conic-gradient(from 210deg,transparent 0 37%,#7de0d533 43%,#8f8bd333 49%,transparent 57% 100%);animation:aurora-turn 28s linear infinite;filter:blur(30px)}
.orbital-eye{--deep:#154d69;--aqua:#7de0d5;--violet:#8f8bd3;width:36%;aspect-ratio:1;position:relative;display:grid;place-items:center}
.orbital-eye::before{content:"";position:absolute;width:76%;height:40%;border:1px solid #2f69914a;border-radius:70% 30% 70% 30% / 58% 42% 58% 42%;transform:rotate(45deg);box-shadow:inset 0 0 42px #7de0d514}
.orbit{position:absolute;border:1px solid #2f69914a;border-radius:50%}.orbit-one{width:100%;height:52%;transform:rotate(-19deg);animation:alice-drift 18s linear infinite}.orbit-two{width:72%;height:72%;transform:rotate(39deg);animation:alice-drift-back 22s linear infinite}
.vesica{position:absolute;width:34%;height:58%;border:1px solid #53839c38;border-radius:50%}.vesica-one{transform:translateX(-29%)}.vesica-two{transform:translateX(29%)}
.sirius-core{width:6%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 8px #7de0d533,0 0 55px 26px #4d83c547,0 0 92px 45px #8f8bd317;animation:stellar-pulse 4.8s ease-in-out infinite}
.crosshair{position:absolute;display:block;background:#39719c29}.crosshair-x{width:100%;height:1px}.crosshair-y{width:1px;height:100%}
.root-thread{position:absolute;width:1px;height:21%;top:56%;background:linear-gradient(var(--deep),transparent)}.energy-node{position:absolute;width:1.3%;aspect-ratio:1;border-radius:50%;left:49.35%;box-shadow:0 0 13px 5px #7de0d524;animation:node-glow 3s ease-in-out infinite}.energy-node-one{top:63%;background:var(--violet)}.energy-node-two{top:69%;background:var(--aqua);animation-delay:-1.5s}.root-node{position:absolute;top:78%;width:2.4%;aspect-ratio:1;background:var(--deep);transform:rotate(45deg);box-shadow:0 0 0 5px #154d690f}
@keyframes alice-drift{to{transform:rotate(341deg)}}@keyframes alice-drift-back{to{transform:rotate(-321deg)}}@keyframes stellar-pulse{0%,100%{transform:scale(.88);filter:brightness(.94)}50%{transform:scale(1.16);filter:brightness(1.2)}}@keyframes aurora-turn{to{transform:rotate(360deg)}}@keyframes node-glow{50%{opacity:.5}}
.slop-preview{background:var(--project)}.matrix-mist{position:absolute;inset:0;background:radial-gradient(ellipse at center,var(--project) 0%,transparent 70%);pointer-events:none}
.slop-logo-stage{position:relative;width:34%;aspect-ratio:1;display:grid;place-items:center}.motion-preview .slop-logo{width:52%;height:52%;object-fit:contain;position:relative;z-index:1;animation:slop-breathe 6s ease-in-out infinite}
.slop-ring{position:absolute;border:1px solid #91b7ca33;border-radius:50%;width:100%;height:100%;animation:slop-ring-breathe 8s ease-in-out infinite alternate}.ring-two{width:82%;height:82%;animation-delay:-2.7s}.ring-three{width:61%;height:61%;animation-delay:-5.4s}
@keyframes slop-breathe{50%{transform:scale(1.045) rotate(4deg)}}@keyframes slop-ring-breathe{to{transform:scale(1.06);opacity:.45}}
.motion-paused .motion-preview *,.motion-paused .motion-preview::before,.motion-paused .motion-preview::after{animation-play-state:paused!important}
@media(max-width:520px){.motion-preview{aspect-ratio:1.6}.crystal-stage{width:42%;left:29%;height:60%}.recording-study{left:21%;width:58%;bottom:13%;height:15%;padding:0 5%;gap:7%}.waveform{gap:1px}.waveform>i{min-width:.8px}.orbital-eye{width:48%}.slop-logo-stage{width:42%}.sirius-core{box-shadow:0 0 0 4px #7de0d533,0 0 25px 12px #4d83c547,0 0 42px 20px #8f8bd317}}
@media(prefers-reduced-motion:reduce){.motion-preview *,.motion-preview::before,.motion-preview::after{animation:none!important;transition:none!important}}

/* Each artwork shares the folder surface, with no separate image frame. */
.folder .motion-preview{background:var(--project);border:0;border-radius:0}

/* Dissolve matrix glyphs into the folder stock before any canvas edge. */
.slop-preview #portfolio-matrix{-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}