/* Motion follows creative momentum. Typography and layout stay as they are. */
.motion-toggle{display:inline-flex;align-items:center;gap:7px;margin-left:14px;padding:4px 9px;min-height:30px;border:1px solid #625272;border-radius:5px;background:#ffffff06;color:#ddd3ef;font:inherit;font-size:11px;letter-spacing:.01em;vertical-align:middle;white-space:nowrap}
.motion-toggle[hidden]{display:none}
.motion-toggle>span:first-child{font-size:12px;line-height:1}
.motion-toggle:hover{border-color:#b69bd9;background:#ad96ff16}
.depth-panel{--depth-roll:2deg;--depth-range:2.6deg;--depth-sway:3.2deg;--depth-lift:7px;--pointer-x:0deg;--pointer-y:0deg;--shine-x:50%;--shine-y:38%;position:relative;overflow:visible;isolation:auto;transform-style:preserve-3d;transform:perspective(1100px) rotateX(-2.6deg) rotateY(3.2deg) rotateZ(var(--depth-roll));box-shadow:inset 0 1px 0 #e5d1ff22,inset 1px 0 0 #e5d1ff16,0 3px 0 #30263e,0 8px 0 #17141f,0 24px 38px #0007,0 32px 80px #7d41941a}
.depth-panel:before{content:'';position:absolute;inset:-1px;border:1px solid #83709080;border-radius:inherit;background:linear-gradient(145deg,#43334e,#151620);transform:translateZ(-17px);pointer-events:none;z-index:-1;box-shadow:0 15px 28px #0006}
.depth-panel:not(.service-art):after{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at var(--shine-x) var(--shine-y),#deccff24,transparent 62%),linear-gradient(125deg,#ffffff0a,transparent 42%,#a9d5ec05);transform:translateZ(1px);pointer-events:none}
.learning-poster.depth-panel,.creator-wordmark.depth-panel{--depth-roll:-2deg}
.enterprise-poster.depth-panel{--depth-roll:1deg}
.hero-art.depth-panel,.creative-art.depth-panel{--depth-roll:0deg}
.creative-art.depth-panel{overflow:clip;border:1px solid #51445f;border-radius:16px;background:radial-gradient(ellipse at 50% 45%,#774fcc24,transparent 68%),#10121b}
.depth-panel.depth-compact{--depth-roll:0deg;--depth-range:1deg;--depth-sway:1.4deg;--depth-lift:2px;border-radius:8px;box-shadow:inset 0 1px 0 #e5d1ff1a,0 3px 8px #0005}
.depth-compact:before{inset:1px;transform:translateZ(-6px);box-shadow:0 5px 8px #0004}
.depth-compact:not(.service-art):after{background:radial-gradient(ellipse at var(--shine-x) var(--shine-y),#deccff16,transparent 62%)}
.workflow-grid .mini-visual.depth-panel{overflow:hidden;border-radius:6px}
.workflow-grid .mini-visual.depth-panel:before{background:linear-gradient(140deg,#1a1926,#0d1017)}
.workflow-grid .mini-visual>i{transform-origin:center}
.workflow-grid .timeline-visual{grid-template-columns:minmax(0,1fr)}
.workflow-grid .timeline-visual>i{width:min(190px,calc(100% - 8px))}
.workflow-grid .timeline-visual>i:nth-child(2){width:min(140px,calc(100% - 38px))}
.workflow-grid .timeline-visual>i:nth-child(3){width:min(170px,calc(100% - 20px))}
.flow-poster.depth-panel .poster-label{transform:translateZ(10px)}
.flow-poster.depth-panel .flow-station{transform:translateZ(24px)}
.flow-poster.depth-panel .flow-branches{transform:translateZ(15px)}
.flow-poster.depth-panel .final-station{transform:translateZ(32px)}
.learning-poster.depth-panel>p,.creator-wordmark.depth-panel>p,.beta-poster.depth-panel>.poster-word{transform:translateZ(24px)}
.learning-poster.depth-panel>.learning-track,.beta-poster.depth-panel>.poster-lines{transform:translateZ(16px)}
.enterprise-poster.depth-panel>.team-orbit{transform:translateZ(24px)}
.enterprise-poster.depth-panel>h2{transform:translateZ(16px)}
.creative-art.depth-panel img{transform:translateZ(24px) rotate(-8deg)}
.hero-art.depth-panel>picture{transform:translateZ(7px)}
.hero-art.depth-panel>.art-sticker,.hero-art.depth-panel>.art-caption{translate:0 0 18px}
.lesson-card-art.depth-panel>b{transform:translateZ(12px)}
.service-art.depth-panel{transform-style:flat;isolation:isolate}
.service-art.depth-panel:before{display:none}

/* Shadows belong to the raised content, keeping the panel's 3D context intact. */
.depth-panel{--plane-text-shadow:0 2px 1px #03040bb3,0 7px 9px #03040bb3,0 14px 20px #0007;--plane-tile-shadow:inset 0 1px 0 #eadbff1f,0 2px 0 #14111d,0 10px 14px -4px #02030ae6,0 20px 28px -9px #000a}
.depth-panel :is(.poster-label,.poster-kicker,.poster-footer,.poster-paths),.depth-panel>small{transform:translateZ(10px);text-shadow:0 3px 4px #000c}
.flow-poster.depth-panel .flow-station{transform:translateZ(36px);transform-style:preserve-3d;background:linear-gradient(135deg,#30243ef2,#151620f5);box-shadow:var(--plane-tile-shadow);text-shadow:var(--plane-text-shadow)}
.flow-poster.depth-panel .flow-station>span{transform:translateZ(10px)}
.flow-poster.depth-panel .final-station{transform:translateZ(44px);background:linear-gradient(135deg,#253029f0,#151a20f5)}
.flow-poster.depth-panel .flow-branches{transform:translateZ(22px);transform-style:preserve-3d}
.flow-poster.depth-panel .flow-branches>span{transform:translateZ(12px);background-image:linear-gradient(135deg,#2b2638e8,#181b25f0);box-shadow:var(--plane-tile-shadow);text-shadow:0 3px 4px #000c}
.flow-poster.depth-panel>p{transform:translateZ(12px);text-shadow:0 3px 4px #000c}
.learning-poster.depth-panel>p,.creator-wordmark.depth-panel>p,.beta-poster.depth-panel>.poster-word{transform:translateZ(36px);text-shadow:var(--plane-text-shadow)}
.learning-poster.depth-panel>.learning-track{transform:translateZ(24px);text-shadow:0 3px 4px #000c}
.learning-poster.depth-panel .learning-track>i{box-shadow:0 5px 7px #000b}
.enterprise-poster.depth-panel>.team-orbit{transform-style:preserve-3d}
.enterprise-poster.depth-panel .team-orbit>span{transform:translateZ(14px);text-shadow:var(--plane-text-shadow),0 0 36px #c8e49e1c}
.enterprise-poster.depth-panel .team-orbit>i{transform:translateZ(16px);box-shadow:var(--plane-tile-shadow);text-shadow:0 3px 4px #000c}
.enterprise-poster.depth-panel>h2{transform:translateZ(30px);text-shadow:var(--plane-text-shadow)}
.beta-poster.depth-panel>.poster-lines{transform:translateZ(24px)}
.beta-poster.depth-panel .poster-lines>i{box-shadow:inset 0 1px 0 #ffffff17,0 6px 9px #0009}
.creative-art.depth-panel>.floating-label{transform:translateZ(36px);box-shadow:var(--plane-tile-shadow);text-shadow:0 3px 4px #000c}
.hero-art.depth-panel>.art-sticker{box-shadow:inset 0 1px 0 #f5ffc65c,0 2px 0 #52642c,0 12px 20px #0009;text-shadow:0 1px 1px #efffb033,0 3px 4px #25340938}
.hero-art.depth-panel>.art-caption{box-shadow:0 7px 12px #0009;text-shadow:0 3px 4px #000c}
.lesson-card-art.depth-panel>b{transform:translateZ(20px);text-shadow:var(--plane-text-shadow)}
.service-art.depth-panel>h4{text-shadow:var(--plane-text-shadow)}

.motion-arrow{display:inline-block;transform-origin:center;--arrow-x:3px;--arrow-y:-3px}
.motion-arrow[data-direction=down]{--arrow-x:0px;--arrow-y:4px}
.motion-arrow[data-direction=up]{--arrow-x:0px;--arrow-y:-4px}
.motion-arrow[data-direction=right]{--arrow-x:4px;--arrow-y:0px}
.motion-inline-link{gap:.35em}

@media(prefers-reduced-motion:no-preference){
  .button,.text-link,.filter-button,.phase-tabs>button,.view-switch>button{
    transition:background-color .2s,border-color .2s,box-shadow .2s;
  }
  .motion-arrow{transition:translate .24s cubic-bezier(.2,.7,.2,1)}
  :is(.button,.text-link):is(:hover,:focus-visible) .motion-arrow{
    translate:var(--arrow-x) var(--arrow-y);
  }
  .menu>span{display:inline-block;transition:rotate .25s cubic-bezier(.2,.7,.2,1)}
  .menu[aria-expanded=true]>span{rotate:45deg}
  summary>span{display:inline-block;transition:rotate .25s}
  details[open]>summary>span{rotate:45deg}
  .phase-tabs>button>b,.lesson-link>b{display:inline-block;transition:translate .22s}
  .phase-tabs>button:is(:hover,:focus-visible)>b,
  .lesson-card:is(:hover,:focus-visible) .lesson-link>b{translate:3px -3px}
  .close{transition:rotate .2s,border-color .2s}
  .close:is(:hover,:focus-visible){rotate:6deg}
  .lesson-card-art>b{display:inline-block;transition:rotate .35s,scale .35s}
  .lesson-card:is(:hover,:focus-visible) .lesson-card-art>b{rotate:-8deg;scale:1.06}
  .service-art img{transition:scale .5s cubic-bezier(.2,.7,.2,1)}
  .service-card:hover .service-art img{scale:1.035}

  /* Scroll entries start only when visible; content is never hidden by setup. */
  html.motion-enabled .motion-appeared{
    animation:super-enter .45s cubic-bezier(.2,.7,.2,1) both;
    animation-delay:var(--motion-delay,0ms);
  }
  @keyframes super-enter{from{opacity:.65;translate:0 8px}to{opacity:1;translate:0 0}}

  /* Short entry accents coexist with the continuously moving illustration surfaces. */
  html.motion-enabled .motion-in-view :is(.status-dot,.capability-strip>i){
    animation:super-pulse 3.2s ease-in-out;
  }
  html.motion-enabled .flow-poster.motion-in-view .flow-station>span{
    display:inline-block;animation:super-spark 3.6s ease-in-out;
  }
  html.motion-enabled .flow-poster.motion-in-view .final-station>span{animation-delay:.4s}
  html.motion-enabled .flow-poster.motion-in-view .flow-branches>span{
    animation:super-route 1.25s ease-in-out;
  }
  html.motion-enabled .flow-poster.motion-in-view .flow-branches>span:nth-child(2){animation-delay:.25s}
  html.motion-enabled .flow-poster.motion-in-view .flow-branches>span:nth-child(3){animation-delay:.5s}
  html.motion-enabled .team-orbit.motion-in-view>span,
  html.motion-enabled .creator-wordmark.motion-in-view>p>b,
  html.motion-enabled .home-creators.motion-in-view>.creator-home-spark,
  html.motion-enabled .beta-poster.motion-in-view .beta-spark{
    display:inline-block;animation:super-spark 4.1s ease-in-out;
  }
  html.motion-enabled .team-orbit.motion-in-view:before,
  html.motion-enabled .creative-art.motion-in-view .orbit-one{animation:super-orbit 4.4s ease-in-out}
  html.motion-enabled .team-orbit.motion-in-view:after,
  html.motion-enabled .creative-art.motion-in-view .orbit-two{animation:super-orbit-reverse 4.4s ease-in-out}
  html.motion-enabled .creative-art.motion-in-view img{animation:super-float 4s ease-in-out}
  html.motion-enabled .creative-section.motion-in-view .feature-line>span,
  html.motion-enabled .beta-expectation-grid.motion-in-view article>span,
  html.motion-enabled .lesson-card.motion-in-view .lesson-card-art>b{
    display:inline-block;animation:super-float 3.4s ease-in-out;
  }
  html.motion-enabled .beta-expectation-grid.motion-in-view article:nth-child(2)>span{animation-delay:.25s}
  html.motion-enabled .beta-expectation-grid.motion-in-view article:nth-child(3)>span{animation-delay:.5s}
  html.motion-enabled .beta-poster.motion-in-view .poster-lines>i{
    transform-origin:bottom;animation:super-bars 1.5s ease-in-out;
  }
  html.motion-enabled .beta-poster.motion-in-view .poster-lines>i:nth-child(2){animation-delay:.2s}
  html.motion-enabled .beta-poster.motion-in-view .poster-lines>i:nth-child(3){animation-delay:.4s}
  html.motion-enabled .learning-poster.motion-in-view .learning-track>i{
    transform-origin:left;animation:super-line 1.2s ease-in-out;
  }
  html.motion-enabled .learning-poster.motion-in-view .learning-track>i:last-of-type{animation-delay:.4s}
  html.motion-enabled .learning-poster.motion-in-view>p>span{animation:super-pulse 3.2s ease-in-out}
  /* Independent loops keep every workflow illustration gently alive. */
  html.motion-enabled .workflow-grid .media-visual>i{animation:workflow-card-float 7.5s ease-in-out infinite;animation-delay:-.8s}
  html.motion-enabled .workflow-grid .media-visual>i:nth-child(2){animation-duration:8.2s;animation-delay:-2.7s}
  html.motion-enabled .workflow-grid .media-visual>i:nth-child(3){animation-duration:6.8s;animation-delay:-5.3s}
  html.motion-enabled .workflow-grid .timeline-visual>i{animation:workflow-track-flow 8s ease-in-out infinite;animation-delay:-.6s}
  html.motion-enabled .workflow-grid .timeline-visual>i:nth-child(2){animation-delay:-3s}
  html.motion-enabled .workflow-grid .timeline-visual>i:nth-child(3){animation-delay:-5.2s}
  html.motion-enabled .workflow-grid .timeline-visual>b{animation:workflow-playhead-sweep 7.2s ease-in-out infinite}
  html.motion-enabled .workflow-grid .wheels-visual>i{animation:workflow-wheel-float 6.4s ease-in-out infinite,workflow-wheel-turn 24s linear infinite;animation-delay:-1s,-5s}
  html.motion-enabled .workflow-grid .wheels-visual>i:nth-child(2){animation-delay:-3s,-12s;animation-direction:normal,reverse}
  html.motion-enabled .workflow-grid .wheels-visual>i:nth-child(3){animation-delay:-5s,-19s}
  html.motion-enabled .workflow-grid .delivery-visual>i{animation:workflow-format-drift 8s ease-in-out infinite;animation-delay:-.7s}
  html.motion-enabled .workflow-grid .delivery-visual>i:nth-child(2){animation-delay:-3.2s}
  html.motion-enabled .workflow-grid .delivery-visual>i:nth-child(3){animation-delay:-5.7s}

  @keyframes workflow-card-float{0%,100%{translate:0 1px;rotate:-1deg;scale:.95}35%{translate:-2px -5px;rotate:1.5deg;scale:1.04}70%{translate:2px -1px;rotate:-.7deg;scale:.99}}
  @keyframes workflow-track-flow{0%,100%{translate:0 0;scale:1 1}33%{translate:4px -1px;scale:.93 .92}65%{translate:-3px 1px;scale:1.025 1.03}}
  @keyframes workflow-playhead-sweep{0%,100%{translate:-22px 0}50%{translate:36px 0}}
  @keyframes workflow-wheel-float{0%,100%{translate:0 2px;scale:.95}50%{translate:0 -4px;scale:1.075}}
  @keyframes workflow-wheel-turn{to{rotate:360deg}}
  @keyframes workflow-format-drift{0%,100%{translate:0 2px;rotate:-1.5deg;scale:.94}35%{translate:0 -4px;rotate:1.5deg;scale:1.055}70%{translate:1px -1px;rotate:-.5deg;scale:1}}

  @keyframes super-spark{0%,100%{translate:0 0;rotate:0deg;scale:1}35%{translate:0 -5px;rotate:12deg;scale:1.04}70%{translate:0 -2px;rotate:-6deg;scale:1.01}}
  @keyframes super-float{0%,100%{translate:0 0}40%{translate:0 -5px}75%{translate:0 2px}}
  @keyframes super-pulse{0%,100%{opacity:1;scale:1}40%{opacity:.65;scale:.88}70%{opacity:1;scale:1.05}}
  @keyframes super-orbit{0%,100%{rotate:0deg}50%{rotate:20deg}}
  @keyframes super-orbit-reverse{0%,100%{rotate:0deg}50%{rotate:-16deg}}
  @keyframes super-route{0%,100%{border-color:#525468;background-color:transparent}50%{border-color:#b7a2e4;background-color:#ad96ff16}}
  @keyframes super-bars{0%,100%{scale:1 1}45%{scale:1 .65}75%{scale:1 1.06}}
  @keyframes super-line{0%,100%{scale:1 1;opacity:1}40%{scale:.2 1;opacity:.5}75%{scale:1 1;opacity:1}}
  @keyframes super-playhead{0%,100%{translate:0 0}55%{translate:32px 0}}

  html.motion-enabled .depth-panel{animation:super-depth-drift var(--depth-duration,14s) ease-in-out infinite;animation-play-state:paused}
  html.motion-enabled .depth-panel.depth-active{animation-play-state:running}
  html.motion-enabled .depth-panel:not(.service-art):after{animation:super-depth-light 11s ease-in-out infinite}
  html.motion-enabled .depth-panel.motion-in-view .flow-station>span,
  html.motion-enabled .depth-panel.motion-in-view .team-orbit>span,
  html.motion-enabled .depth-panel.motion-in-view>p>b,
  html.motion-enabled .depth-panel.motion-in-view .beta-spark{animation:super-spark 7s ease-in-out infinite}
  html.motion-enabled .depth-panel.motion-in-view .flow-branches>span{animation:super-route 5s ease-in-out infinite}
  html.motion-enabled .depth-panel.motion-in-view .flow-branches>span:nth-child(2){animation-delay:-1.7s}
  html.motion-enabled .depth-panel.motion-in-view .flow-branches>span:nth-child(3){animation-delay:-3.4s}
  html.motion-enabled .depth-panel.motion-in-view .team-orbit:before,
  html.motion-enabled .depth-panel.motion-in-view .orbit-one{animation:super-orbit 15s ease-in-out infinite}
  html.motion-enabled .depth-panel.motion-in-view .team-orbit:after,
  html.motion-enabled .depth-panel.motion-in-view .orbit-two{animation:super-orbit-reverse 18s ease-in-out infinite}
  html.motion-enabled .depth-panel.motion-in-view .poster-lines>i{animation:super-bars 5.5s ease-in-out infinite}
  html.motion-enabled .depth-panel.motion-in-view .poster-lines>i:nth-child(2){animation-delay:-1.8s}
  html.motion-enabled .depth-panel.motion-in-view .poster-lines>i:nth-child(3){animation-delay:-3.6s}
  html.motion-enabled .depth-panel.motion-in-view>.learning-track>i{animation:super-line 5s ease-in-out infinite}
  html.motion-enabled .depth-panel.motion-in-view>.learning-track>i:last-of-type{animation-delay:-2.5s}
  html.motion-enabled .learning-poster.depth-panel.motion-in-view>p>span{animation:super-pulse 6s ease-in-out infinite}
  html.motion-enabled .lesson-card-art.depth-panel.motion-in-view>b,html.motion-enabled .creative-art.depth-panel.motion-in-view img{animation:super-float 7s ease-in-out infinite}
  html.motion-enabled .depth-panel:not(.depth-active),
  html.motion-enabled .depth-panel:not(.depth-active) *,
  html.motion-enabled .depth-panel:not(.depth-active) *:before,
  html.motion-enabled .depth-panel:not(.depth-active) *:after,
  html.motion-enabled .depth-panel:not(.depth-active):before,
  html.motion-enabled .depth-panel:not(.depth-active):after{animation-play-state:paused!important}

  @keyframes super-depth-drift{
    0%,100%{transform:perspective(1100px) rotateX(calc(var(--pointer-x) - var(--depth-range))) rotateY(calc(var(--pointer-y) + var(--depth-sway))) rotateZ(var(--depth-roll)) translate3d(0,0,0)}
    50%{transform:perspective(1100px) rotateX(calc(var(--pointer-x) + var(--depth-range))) rotateY(calc(var(--pointer-y) - var(--depth-sway))) rotateZ(calc(var(--depth-roll) - .4deg)) translate3d(0,calc(0px - var(--depth-lift)),0)}
  }
  @keyframes super-depth-light{0%,100%{opacity:.45}50%{opacity:1}}
}

html.motion-paused *,html.motion-paused *:before,html.motion-paused *:after,
html.motion-hidden *,html.motion-hidden *:before,html.motion-hidden *:after{animation-play-state:paused!important;transition:none!important}
html.motion-paused .motion-appeared,html.motion-paused .hero-intro,html.motion-paused .hero-art,html.motion-paused .art-sticker,html.motion-paused .workspace-panel,html.motion-paused .beta-intro{animation:none!important;opacity:1;translate:none}
html.motion-paused .reveal-ready{opacity:1!important;transform:none!important}

@media(max-width:760px){
  .depth-panel{--depth-roll:1deg;--depth-range:1.4deg;--depth-sway:1.6deg;--depth-lift:4px}
  .creator-wordmark.depth-panel{--depth-roll:-1deg}
  .hero-art.depth-panel,.creative-art.depth-panel,.depth-panel.depth-compact{--depth-roll:0deg}
  .depth-panel.depth-compact{--depth-range:.7deg;--depth-sway:.8deg;--depth-lift:1.5px}
  .motion-toggle{margin-left:9px;min-height:30px}
}

@media(prefers-reduced-motion:reduce){
  .motion-appeared{opacity:1;translate:none}
  .motion-arrow,.menu>span,summary>span,.lesson-card-art>b{translate:none;rotate:none;scale:none}
  .depth-panel{transform:rotate(var(--depth-roll));transform-style:flat}
  .depth-panel:before{display:none}
  .depth-panel *{transform-style:flat}
  .motion-toggle{display:none}
}