/* NOLUVIO / MOTION SYSTEM — original motion+CSS 3D concept, 2026-11-03.
   No external rendering engine, video, fonts, trackers or network requests.
   Respect reduced motion, coarse pointers, forced-colors, and keyboard navigation. */

/* Lightweight progressive reveals: content remains visible if JS is unavailable. */
html.motion-enhanced [data-motion-reveal]{transition:opacity .72s ease,transform .72s cubic-bezier(.2,.7,.2,1)}
html.motion-enhanced [data-motion-reveal].motion-pending{opacity:0;transform:translate3d(0,26px,0)}
html.motion-enhanced [data-motion-reveal].motion-visible{opacity:1;transform:none}
html.motion-paused [data-motion-reveal]{transition:none!important;transform:none!important;opacity:1!important}
[data-motion-depth]{--motion-tilt-x:0deg;--motion-tilt-y:0deg}
@media(hover:hover) and (pointer:fine){
  .hero-stage[data-motion-depth],
  .studio-hero-art[data-motion-depth],
  .concept-scene[data-motion-depth]{
    transform:perspective(1200px) rotateX(var(--motion-tilt-x)) rotateY(var(--motion-tilt-y));
    transform-style:preserve-3d;transition:transform .28s ease-out;will-change:transform;
  }
}

/* Homepage: a deliberate 3D orbital signature behind existing workflow evidence. */
.hero-3d-shape{position:absolute;z-index:1;inset-block-start:30px;inset-inline-end:2%;width:75%;height:64%;pointer-events:none;perspective:850px;transform-style:preserve-3d}
.hero-3d-core{
  position:absolute;top:31%;inset-inline-start:37%;display:grid;place-items:center;
  width:105px;height:105px;border-radius:28px;transform:rotateX(16deg) rotateY(-27deg) translateZ(52px);
  background:linear-gradient(135deg,rgba(19,76,175,.86),rgba(0,212,255,.7),rgba(34,224,138,.65));
  border:1px solid rgba(171,234,255,.58);box-shadow:22px 30px 60px rgba(0,20,66,.4),inset 2px 2px 14px rgba(255,255,255,.32);
  color:#F8FCFF;font-size:65px;line-height:1;font-weight:850;letter-spacing:-.08em;text-shadow:0 9px 25px rgba(0,32,61,.29);
}
.hero-3d-hoop{position:absolute;width:64%;height:55%;top:17%;inset-inline-start:16%;border:2px solid rgba(0,212,255,.44);border-radius:50%;box-shadow:0 0 35px rgba(0,212,255,.14);transform-style:preserve-3d}
.hero-3d-hoop-a{transform:rotateX(69deg) rotateZ(25deg);animation:motion-hoop-a 16s linear infinite}
.hero-3d-hoop-b{border-color:rgba(34,224,138,.42);transform:rotateY(68deg) rotateZ(-28deg);animation:motion-hoop-b 19s linear infinite}
.hero-3d-spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#22E08A;box-shadow:0 0 24px 10px rgba(34,224,138,.22)}
.hero-3d-spark-a{top:19%;inset-inline-start:30%}.hero-3d-spark-b{bottom:31%;inset-inline-end:13%;background:#00D4FF}
@keyframes motion-hoop-a{0%{transform:rotateX(69deg) rotateZ(25deg)}100%{transform:rotateX(69deg) rotateZ(385deg)}}
@keyframes motion-hoop-b{0%{transform:rotateY(68deg) rotateZ(-28deg)}100%{transform:rotateY(68deg) rotateZ(-388deg)}}

/* Studio: full, operable 3D scene with meaningful narrative stages. */
.motion-lab{
  position:relative;isolation:isolate;overflow:hidden;padding-block:104px 112px;
  background:radial-gradient(ellipse at 85% 24%,rgba(0,87,255,.19),transparent 39%),
             radial-gradient(ellipse at 8% 93%,rgba(0,212,255,.08),transparent 38%),
             linear-gradient(125deg,#090F20 0%,#0D1E3E 65%,#10274B 100%);
  color:#F8FAFC;scroll-margin-top:115px;
}
.motion-lab:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(132,203,248,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(132,203,248,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent,black 55%,transparent)}
.motion-layout{position:relative;display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);align-items:center;gap:clamp(35px,5vw,86px);min-height:610px}
.motion-copy{position:relative;z-index:2;max-width:690px}
.motion-kicker{font-size:11px!important;letter-spacing:.17em!important;color:#7DE1FA!important;font-weight:850!important}
.motion-copy h2{margin:16px 0 22px;font-size:clamp(44px,5.1vw,77px);line-height:1.04;letter-spacing:-.056em;font-weight:840;text-wrap:balance}
.motion-intro{max-width:575px;font-size:15px;line-height:1.85;color:#C2D7EB;margin:0}
.motion-chapters{min-height:137px;margin-top:33px}
.motion-chapter .motion-step-label{display:inline-block;font-size:11px;letter-spacing:.11em;font-weight:800;color:#89DCED}
.motion-chapter h3{font-size:clamp(23px,2.3vw,29px);line-height:1.22;font-weight:800;letter-spacing:-.04em;margin:10px 0 8px;color:#F5FBFF}
.motion-chapter p{font-size:13px;line-height:1.75;color:#C1D6EA;max-width:510px;margin:0}
.motion-chapter[hidden]{display:none!important}
.motion-controls{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin:25px 0 18px}
.motion-arrow{border:1px solid rgba(126,200,255,.45);color:#F1FBFF;background:rgba(255,255,255,.06);border-radius:11px;min-height:49px;padding:12px 18px;font-size:12px;font-weight:790;transition:background .2s,transform .2s}
.motion-arrow:hover{background:rgba(0,87,255,.35);transform:translateY(-2px)}
.motion-arrow:focus-visible,.motion-toggle:focus-visible,.motion-service-link:focus-visible{outline:3px solid #00D4FF;outline-offset:4px}
.motion-count{display:inline-grid;place-items:center;min-width:70px;color:#90E7EF;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;font-size:14px;font-weight:800}
.motion-utilities{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px}
.motion-toggle{display:inline-flex;align-items:center;gap:11px;border:1px solid rgba(123,175,223,.34);background:rgba(255,255,255,.035);color:#D7EDF8;padding:12px 15px;min-height:46px;border-radius:10px;font-size:12px;font-weight:780}
.motion-toggle[aria-pressed=true]{background:rgba(34,224,138,.10);border-color:rgba(34,224,138,.5)}
.motion-toggle-indicator{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#22E08A;box-shadow:0 0 0 4px rgba(34,224,138,.12)}
.motion-toggle[aria-pressed=true] .motion-toggle-indicator{background:#F8FAFC;box-shadow:none}
.motion-toggle:disabled{cursor:not-allowed;opacity:.78}
.motion-resume-label[hidden],.motion-pause-label[hidden]{display:none!important}
.motion-service-link{font-size:13px;font-weight:790;color:#91E5FF;text-decoration:underline;text-underline-offset:5px}
.motion-disclosure{margin-top:24px;color:#A3BDD6;font-size:11px;line-height:1.75;max-width:560px}
.motion-stage{
  --motion-cube-size:clamp(210px,22vw,292px);
  --motion-cube-depth:clamp(105px,11vw,146px);
  position:relative;isolation:isolate;min-width:0;height:570px;border-radius:28px;overflow:hidden;
  background:radial-gradient(circle at 52% 43%,rgba(0,212,255,.16),transparent 37%),
             radial-gradient(circle at 40% 60%,rgba(34,224,138,.09),transparent 48%),
             linear-gradient(145deg,rgba(15,41,82,.75),rgba(4,17,39,.9));
  border:1px solid rgba(116,173,226,.24);box-shadow:inset 0 1px rgba(206,244,255,.08),0 30px 80px rgba(0,0,0,.20);
  perspective:1100px;transform-style:preserve-3d;
}
.motion-stage-grid{position:absolute;inset:-16%;background-image:linear-gradient(rgba(120,185,234,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(120,185,234,.13) 1px,transparent 1px);background-size:42px 42px;transform:rotateX(69deg) translateY(75px);transform-origin:center;mask-image:radial-gradient(ellipse at center,#000 10%,transparent 72%);pointer-events:none}
.motion-halo{position:absolute;top:50%;left:50%;border:1px solid rgba(0,212,255,.36);border-radius:50%;box-shadow:0 0 34px rgba(0,212,255,.09);pointer-events:none;transform-style:preserve-3d}
.motion-halo-outer{width:440px;height:440px;margin:-220px;transform:rotateX(67deg) rotateZ(12deg);animation:motion-orbit 22s linear infinite}
.motion-halo-inner{width:340px;height:340px;margin:-170px;border-color:rgba(34,224,138,.35);transform:rotateY(68deg) rotateZ(19deg);animation:motion-orbit-reverse 19s linear infinite}
.motion-ambient{position:absolute;inset:17%;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.11),rgba(34,224,138,.08),transparent 67%);filter:blur(17px);animation:motion-pulse 8s ease-in-out infinite;pointer-events:none}
@keyframes motion-orbit{0%{transform:rotateX(67deg) rotateZ(12deg)}100%{transform:rotateX(67deg) rotateZ(372deg)}}
@keyframes motion-orbit-reverse{0%{transform:rotateY(68deg) rotateZ(19deg)}100%{transform:rotateY(68deg) rotateZ(-341deg)}}
@keyframes motion-pulse{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:1;transform:scale(1.12)}}
.motion-3d-pivot{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--motion-tilt-x)) rotateY(var(--motion-tilt-y));transition:transform .22s ease-out;pointer-events:none}
.motion-cube{position:absolute;top:50%;left:50%;width:var(--motion-cube-size);height:var(--motion-cube-size);transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(-17deg) rotateY(-25deg);transition:transform .95s cubic-bezier(.18,.78,.18,1.06);will-change:transform}
.motion-stage[data-motion-face="1"] .motion-cube{transform:translate(-50%,-50%) rotateX(-17deg) rotateY(-115deg)}
.motion-stage[data-motion-face="2"] .motion-cube{transform:translate(-50%,-50%) rotateX(-17deg) rotateY(-205deg)}
.motion-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;backface-visibility:hidden;border-radius:21px;padding:24px;border:1px solid rgba(199,239,255,.51);overflow:hidden;color:#F9FCFF;background:linear-gradient(155deg,rgba(0,105,255,.95),rgba(4,32,81,.98));box-shadow:inset 0 0 46px rgba(255,255,255,.08),0 0 24px rgba(0,212,255,.07)}
.motion-face small{font-weight:840;font-size:12px;letter-spacing:.16em;opacity:.82}
.motion-face strong{font-size:clamp(38px,4.9vw,66px);line-height:1.04;letter-spacing:-.065em;font-weight:890;position:relative;z-index:2}
.motion-face-pattern{position:absolute;width:75%;height:75%;border:30px solid rgba(255,255,255,.085);border-radius:41% 59% 64% 36%;top:11%;right:-13%;transform:rotate(29deg)}
.motion-front{transform:rotateY(0deg) translateZ(var(--motion-cube-depth))}
.motion-right{transform:rotateY(90deg) translateZ(var(--motion-cube-depth));background:linear-gradient(150deg,#008DE3,#00C5D8 53%,#064783)}
.motion-back{transform:rotateY(180deg) translateZ(var(--motion-cube-depth));background:linear-gradient(150deg,#16BA9A,#087D81 58%,#0B3856)}
.motion-left{transform:rotateY(-90deg) translateZ(var(--motion-cube-depth));background:linear-gradient(150deg,#164E90,#0B1E4B)}
.motion-top{transform:rotateX(90deg) translateZ(var(--motion-cube-depth));background:linear-gradient(150deg,#28C5ED,#0E66D6)}
.motion-bottom{transform:rotateX(-90deg) translateZ(var(--motion-cube-depth));background:linear-gradient(150deg,#0C3169,#073C5F)}
.motion-face-glyph{font-size:140px;font-weight:900;line-height:1;letter-spacing:-.12em;align-self:center;opacity:.5}
.motion-stage-badge{position:absolute;z-index:4;top:22px;inset-inline-end:21px;display:flex;flex-direction:column;gap:4px;min-width:113px;padding:11px 15px;border-radius:12px;border:1px solid rgba(170,216,255,.3);background:rgba(14,38,75,.69);backdrop-filter:blur(9px);color:#C4EAF8;font-size:10px;letter-spacing:.12em}
.motion-stage-badge b{color:#22E08A;font-size:13px}
.motion-stage-footer{position:absolute;z-index:4;bottom:22px;inset-inline:23px;display:flex;justify-content:space-between;color:#91C2DF;font-size:10px;font-weight:850;letter-spacing:.17em}
.motion-stage-footer span{color:#22E08A;font-size:22px;line-height:.6}
.motion-lab:not(.motion-in-view) .motion-halo,.motion-lab:not(.motion-in-view) .motion-ambient{animation-play-state:paused}

/* Perspective enhancement on existing demonstrator scenes. */
@media(hover:hover) and (pointer:fine){
  .studio-hero-art[data-motion-depth]{perspective:1000px}
  .studio-hero-art[data-motion-depth] .hero-demo-window{transform:translateZ(27px) rotate(-4deg);transform-style:preserve-3d;transition:transform .4s ease}
  .concept-scene[data-motion-depth]{perspective:1000px}
  .concept-scene[data-motion-depth] .scene-structure{transform-style:preserve-3d}
}
.motion-stage[data-motion-depth] .motion-3d-pivot{transform-style:preserve-3d}

@media(max-width:1120px){.motion-layout{gap:35px}.motion-stage{height:490px;--motion-cube-size:240px;--motion-cube-depth:120px}.motion-copy h2{font-size:clamp(44px,5vw,66px)}}
@media(max-width:760px){
  .motion-lab{padding-block:74px 83px}
  .motion-layout{grid-template-columns:1fr;gap:25px;min-height:0}
  .motion-copy h2{font-size:clamp(42px,9vw,57px)}
  .motion-intro{font-size:14px}
  .motion-chapters{min-height:0;margin-top:25px}
  .motion-controls{gap:10px;margin-top:23px}
  .motion-arrow{min-height:46px;padding:10px 14px}
  .motion-stage{height:430px;width:100%;--motion-cube-size:205px;--motion-cube-depth:102.5px}
  .motion-halo-outer{width:330px;height:330px;margin:-165px}.motion-halo-inner{width:270px;height:270px;margin:-135px}
  .motion-face{padding:19px;border-radius:16px}.motion-face strong{font-size:43px}
  .hero-3d-shape{height:49%;top:42px;width:85%;inset-inline-end:3%}
  .hero-3d-core{width:78px;height:78px;font-size:49px}
  .motion-stage-badge{top:13px;inset-inline-end:14px}
}
@media(max-width:440px){
  .motion-stage{height:375px;--motion-cube-size:175px;--motion-cube-depth:87.5px}
  .motion-halo-outer{width:265px;height:265px;margin:-132.5px}
  .motion-halo-inner{width:215px;height:215px;margin:-107.5px}
  .motion-face strong{font-size:37px}
  .motion-stage-footer{font-size:8px}
  .motion-copy h2{font-size:40px}
  .motion-controls{justify-content:flex-start}
  .motion-count{min-width:55px}
}
@media(pointer:coarse){
  .hero-stage[data-motion-depth],.studio-hero-art[data-motion-depth],.concept-scene[data-motion-depth]{transform:none!important}
  .motion-3d-pivot{transform:none!important}
  .motion-cube{will-change:auto}
}
@media(prefers-contrast:more){
  .motion-face{border:2px solid #FFFFFF}
  .motion-arrow,.motion-toggle{border-color:#D7F1FF;color:#FFFFFF}
  .motion-chapter p,.motion-intro,.motion-disclosure{color:#F8FAFC}
}
@media(forced-colors:active){
  .motion-face,.motion-stage{border:2px solid CanvasText}
  .motion-arrow,.motion-toggle{forced-color-adjust:auto;border:2px solid ButtonText}
}
@media(prefers-reduced-motion:reduce){
  html.motion-enhanced [data-motion-reveal],html.motion-enhanced [data-motion-reveal].motion-pending{opacity:1!important;transform:none!important;transition:none!important}
  .motion-halo,.motion-ambient,.hero-3d-hoop{animation:none!important}
  .motion-cube,.motion-3d-pivot,.studio-hero-art,.concept-scene,.hero-stage{transition:none!important}
  .hero-stage[data-motion-depth],.studio-hero-art[data-motion-depth],.concept-scene[data-motion-depth]{transform:none!important}
}
html.motion-paused .motion-halo,html.motion-paused .motion-ambient,html.motion-paused .hero-3d-hoop,html.motion-paused .hero-ribbon{animation-play-state:paused!important}
html.motion-paused .motion-cube,html.motion-paused .motion-3d-pivot,html.motion-paused .motion-arrow{transition:none!important}