/* Drawn accents borrow the portfolio's existing ink, ivory and warm light. */
.home-motion{display:block;pointer-events:none;user-select:none;overflow:visible;stroke:currentColor;stroke-width:.8;vector-effect:non-scaling-stroke;opacity:0;transition:opacity 1s ease;contain:layout style}
.home-motion.mg-visible{opacity:1}
.mg-draw{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--mg-progress,0));transition:stroke-dashoffset .14s linear}
.mg-secondary{opacity:.4}
.mg-audio{width:100%;height:66px;margin:15px 0 0;color:#c8ba98;stroke-width:1;transform:scaleY(var(--mg-amplitude,1));transform-origin:center;transition:opacity 1s,transform .6s ease}
.mg-wave{transform-origin:50% 50%;animation:mg-wave-drift 6s ease-in-out infinite;animation-play-state:paused}
.mg-wave-0{opacity:.65}.mg-wave-1{opacity:.32;animation-delay:-2s;stroke:#b1c9c8}.mg-wave-2{opacity:.2;animation-delay:-4s;stroke:#e1d4bc}
.mg-baseline{stroke-width:.5;opacity:.1}
.mg-host-yoga{position:relative;isolation:isolate}
.mg-host-yoga>img{position:relative;z-index:1}
.mg-yoga{position:absolute;inset:0;width:100%;height:100%;z-index:0;color:#c8d7b7;stroke-width:.7}
.mg-yoga.mg-visible{opacity:.48}
.mg-breath{transform-origin:200px 190px;animation:mg-breathe 9s ease-in-out infinite;animation-play-state:paused}
.mg-breath circle:nth-child(2){opacity:.6}.mg-breath circle:nth-child(3){opacity:.35}
#contact .mg-contact{position:absolute;right:-8%;top:8%;width:62%;height:84%;color:#afc8c0;stroke-width:.8;z-index:0}
#contact .mg-contact.mg-visible{opacity:.2}
.mg-host-contact{overflow:clip}
#contact>.eyebrow,#contact>h2,#contact>.email,#contact>.footer-bottom{position:relative;z-index:1}
.mg-visible .mg-wave,.mg-visible .mg-breath{animation-play-state:running}
.mg-paused .home-motion *{animation-play-state:paused!important}
body.case-mode .home-motion{visibility:hidden}
@keyframes mg-wave-drift{0%,100%{transform:scaleY(.62) translateY(0)}50%{transform:scaleY(1) translateY(-2px)}}
@keyframes mg-breathe{0%,100%{transform:scale(.88);opacity:.55}50%{transform:scale(1.025);opacity:1}}
.mg-host-universe{isolation:isolate;overflow:clip}
.mg-host-universe>.section-heading,.mg-host-universe>.world-word-sequence{position:relative;z-index:1}
.mg-universe{position:absolute;right:-4%;top:0;width:66%;height:100%;z-index:0;color:#d3bd93;stroke-width:.8;overflow:hidden}
.mg-universe.mg-visible{opacity:.27}
.mg-universe-paths{transform-origin:300px 400px;animation:mg-universe-sway 17s ease-in-out infinite alternate;animation-play-state:paused}
.mg-universe-paths ellipse:nth-child(2){opacity:.42}
.mg-orbit-one,.mg-orbit-two{fill:currentColor;stroke:none;transform-origin:300px 400px;animation:mg-orbit 24s linear infinite;animation-play-state:paused}
.mg-orbit-two{animation-direction:reverse;animation-duration:32s;opacity:.6}
.mg-visible .mg-universe-paths,.mg-visible .mg-orbit-one,.mg-visible .mg-orbit-two{animation-play-state:running}
@keyframes mg-universe-sway{from{transform:rotate(-9deg) scale(.95)}to{transform:rotate(10deg) scale(1.04)}}
@keyframes mg-orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.brand-motion-sheen{position:absolute;inset:-25%;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(112deg,transparent 25%,#f3e3bc04 37%,#fff9e761 48%,#c3e1e92b 53%,transparent 67%);transform:translateX(-110%) rotate(-12deg)}
.is-light-surface .brand-motion-sheen{background:linear-gradient(112deg,transparent 25%,#233c4303 37%,#193e493d 48%,#816b3521 53%,transparent 67%)}
.brand-motion-frame{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);pointer-events:none;z-index:4;fill:none;stroke:#f3e4c1;stroke-width:.7;opacity:0}
.brand-motion-frame rect{vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.is-light-surface .brand-motion-frame{stroke:#24494c}
.brand-motion-active .brand-motion-sheen{animation:mg-brand-sheen 2.6s cubic-bezier(.2,.6,.2,1) both}
.brand-motion-active .brand-motion-frame{animation:mg-brand-frame 3.2s ease both}
.brand-motion-active .brand-motion-frame rect{animation:mg-brand-outline 2.2s ease both}
.brand-caption-active>.sothys-caption-logo{animation:mg-caption-arrive .85s cubic-bezier(.2,.65,.2,1) both}
.brand-caption-active>strong{animation:mg-caption-arrive .85s .08s cubic-bezier(.2,.65,.2,1) both}
.brand-caption-active>span:not(.sothys-caption-logo){animation:mg-caption-arrive .9s .16s cubic-bezier(.2,.65,.2,1) both}
@keyframes mg-brand-sheen{0%{opacity:0;transform:translateX(-110%) rotate(-12deg)}18%{opacity:.8}75%{opacity:.6}100%{opacity:0;transform:translateX(110%) rotate(-12deg)}}
@keyframes mg-brand-frame{0%{opacity:0}25%,65%{opacity:.55}100%{opacity:0}}
@keyframes mg-brand-outline{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mg-caption-arrive{from{opacity:0;translate:0 18px;filter:blur(3px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(max-width:700px){.mg-universe{width:100%;right:-24%;opacity:.18}.mg-universe.mg-visible{opacity:.18}.brand-motion-frame{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}}
@media(prefers-reduced-motion:reduce){.brand-motion-sheen,.brand-motion-frame{display:none}.brand-caption-active>*{animation:none!important;translate:none!important;filter:none!important}.mg-universe-paths,.mg-orbit-one,.mg-orbit-two{animation:none!important}}
@media(max-width:999px){.mg-audio{height:48px;margin-top:10px}#contact .mg-contact{width:85%;right:-28%}.mg-yoga.mg-visible{opacity:.25}}
@media(prefers-reduced-motion:reduce){.home-motion,.home-motion *{animation:none!important;transition:none!important;transform:none!important}.mg-draw{stroke-dashoffset:0}.home-motion{opacity:1}.mg-yoga{opacity:.25}}