/* Shared portfolio loader: original character animation in a circular window.
   Scoped to its ID so the portfolio’s light surface tokens cannot override it. */
#page-loader.page-loader{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:32px 24px;background:var(--color-bg);color:var(--color-text);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s;isolation:isolate;overflow:hidden}
/* Broad radial fields move on separate layers; transforms keep the flow inexpensive. */
#page-loader.page-loader::before,#page-loader.page-loader::after{content:'';position:absolute;inset:-25%;z-index:-1;pointer-events:none;background-repeat:no-repeat;animation-play-state:paused}
/* The hero CTA spectrum, softened over the hero's cool white surface. */
#page-loader.page-loader::before{background:radial-gradient(ellipse 60% 72% at 8% 65%,color-mix(in srgb,var(--spectrum-peach) 22%,transparent) 0%,transparent 76%),radial-gradient(ellipse 60% 75% at 92% 32%,color-mix(in srgb,var(--spectrum-blue) 26%,transparent) 0%,transparent 78%),radial-gradient(ellipse 54% 60% at 54% 12%,color-mix(in srgb,var(--spectrum-lilac) 18%,transparent) 0%,transparent 80%);filter:blur(48px);animation:loader-gradient-drift 10s ease-in-out -3s infinite alternate paused}
#page-loader.page-loader::after{background:radial-gradient(ellipse 56% 54% at 28% 18%,color-mix(in srgb,var(--spectrum-pink) 18%,transparent) 0%,transparent 80%),radial-gradient(ellipse 65% 55% at 64% 88%,color-mix(in srgb,var(--spectrum-teal) 24%,transparent) 0%,transparent 80%);filter:blur(64px);opacity:.8;animation:loader-gradient-tide 13s ease-in-out -6s infinite alternate paused}
.is-page-loading #page-loader.page-loader{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .16s ease,visibility 0s}
.is-page-loading #page-loader.page-loader::before,.is-page-loading #page-loader.page-loader::after{animation-play-state:running;will-change:transform}
html.is-page-loading,html.is-page-loading body{overflow:hidden}
.loader-stage{position:relative;width:min(188px,46vw);aspect-ratio:1;flex:none;overflow:hidden;isolation:isolate;border:0;border-radius:50%;background:linear-gradient(var(--color-surface),var(--color-bg)) padding-box;box-shadow:0 16px 48px #6379a414,inset 0 1px 0 #ffffffb3}
.loader-stage::after{content:'';position:absolute;inset:0;z-index:3;padding:3px;border-radius:50%;background:conic-gradient(from 0deg,var(--spectrum-peach),var(--spectrum-pink),var(--spectrum-lilac),var(--spectrum-blue),var(--spectrum-teal),var(--spectrum-peach));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;animation:loader-ring-spin 4s linear infinite paused}
.is-page-loading .loader-stage::after{animation-play-state:running}
.is-page-loading .loader-stage{animation:loader-window-enter .5s cubic-bezier(.2,.8,.2,1) both}
.loader-art{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.loader-sprite{position:absolute;left:0;top:0;width:100%;height:100%;display:none;background-repeat:no-repeat;transform-origin:0 0;filter:none}
[data-animated=ready] .loader-sprite{display:block}
[data-animated=ready] .loader-static{visibility:hidden}
/* Lower the artwork inside the circular crop so the desk front stays below its edge. */
.loader-art,.loader-sprite{translate:0 11%}
.loader-sheet-source{display:none!important}
.loader-caption{font-family:var(--font-body,Mori,Arial,sans-serif);font-weight:500;font-size:22px;line-height:1.4;letter-spacing:-.02em;text-align:center;margin:0;max-width:min(440px,100%);min-height:32px;transition:opacity .16s ease,transform .16s ease}
.loader-caption.is-changing{opacity:0;transform:translateY(3px)}
.loader-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#page-loader.page-loader .loader-preview-close{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:12px 18px;min-height:44px;border:1px solid #bbc7de;background:#ffffff80;color:#45516b;border-radius:14px;font-family:'Instrument Sans',Arial,sans-serif;font-size:14px;cursor:pointer;transition:background .2s,border-color .2s}
#page-loader.page-loader .loader-preview-close[hidden]{display:none}
#page-loader.page-loader .loader-preview-close:hover{background:#ffffffc7;border-color:#92a4cb}
#page-loader.page-loader .loader-preview-close:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}
[data-loader-mode=transition] .loader-stage{animation-duration:.22s}
@keyframes loader-gradient-drift{from{transform:translate(-12%,-8%) rotate(-12deg) scale(1.02)}to{transform:translate(12%,12%) rotate(18deg) scale(1.12)}}
@keyframes loader-gradient-tide{from{transform:translate(14%,-12%) rotate(18deg) scale(1.1)}to{transform:translate(-14%,12%) rotate(-18deg) scale(.98)}}
@keyframes loader-ring-spin{to{transform:rotate(360deg)}}
@keyframes loader-window-enter{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:809px){#page-loader.page-loader{gap:24px;padding:24px}.loader-stage{width:min(168px,calc(100vw - 112px))}.loader-caption{font-size:19px;max-width:min(320px,100%);min-height:27px}}
@media(max-width:359px){.loader-stage{width:min(152px,calc(100vw - 120px))}.loader-caption{font-size:17px}#page-loader.page-loader{gap:22px}}
@media(max-height:550px){#page-loader.page-loader{gap:16px;padding-block:16px}.loader-stage{width:min(164px,36vh)}.loader-caption{font-size:18px;min-height:25px}#page-loader.page-loader .loader-preview-close{bottom:12px}}
@media(prefers-reduced-motion:reduce){#page-loader.page-loader,.loader-caption,#page-loader.page-loader .loader-preview-close{transition:none}#page-loader.page-loader::before,#page-loader.page-loader::after,.is-page-loading .loader-stage,.loader-stage::after{animation:none;will-change:auto}.loader-sprite{display:none!important}[data-animated=ready] .loader-static{visibility:visible}}