/* One short working-owl interlude, followed by the destination's own animation. */
@view-transition{navigation:none}
.page-loader{display:none;position:fixed;inset:0;z-index:200;background:#f8f3ed;color:#003366;place-items:center;text-align:center;padding:25px;isolation:isolate}
.page-loader[hidden]{display:none!important}
html:is([data-page-phase=preparing],[data-page-phase=leaving],[data-page-phase=revealing]) .page-loader:not([hidden]){display:grid}
.page-loader::before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,transparent 58%,#e4edf4 58.15%,#edf3f8 100%);z-index:-1}
.loader-content{width:min(360px,100%);position:relative}.loader-brand{font:700 1rem/1.5 var(--body);letter-spacing:.035em;margin-bottom:18px}
.loader-scene{width:min(280px,75vw);aspect-ratio:1;position:relative;margin:auto;display:grid;place-items:center}
.loader-scene::before{content:'';position:absolute;inset:8%;border:1px solid #c4d6e4;border-radius:50%;background:#e8eff4}
.loader-scene::after{content:'';position:absolute;bottom:10%;left:20%;right:20%;height:12px;background:#264a6726;border-radius:50%;filter:blur(5px)}
.loader-owl{width:100%;height:auto;position:relative;z-index:1;transform-origin:50% 78%;animation:owl-working 720ms ease-in-out infinite}
.loader-code{position:absolute;right:0;top:18%;z-index:2;border:1px solid #bdcddb;background:white;border-radius:10px;padding:10px 12px;box-shadow:0 6px 18px #0033660b;color:#003366;display:flex;gap:8px;align-items:center}
.loader-code .ui-icon{width:19px;height:19px}.loader-code i{display:block;width:21px;height:3px;background:#b54723;transform-origin:left;animation:owl-typing 900ms steps(4,end) infinite}
.loader-message{font:700 1.5rem/1.3 var(--display);margin-top:4px}.loader-status{font:400 1rem/1.7 var(--body);margin-top:12px;color:#526575}
.loader-dots{display:flex;justify-content:center;gap:7px;height:14px;margin-top:22px}.loader-dots i{height:5px;width:5px;border-radius:50%;background:#b54723;animation:owl-dot 900ms ease-in-out infinite}.loader-dots i:nth-child(2){animation-delay:120ms}.loader-dots i:nth-child(3){animation-delay:240ms}
html[data-page-phase=revealing] .page-loader{animation:owl-cover-leave 220ms ease-out forwards;pointer-events:none}
@keyframes owl-working{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(3px) rotate(.6deg)}}
@keyframes owl-typing{0%{transform:scaleX(.15)}85%,100%{transform:scaleX(1)}}
@keyframes owl-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@keyframes owl-cover-leave{to{opacity:0;transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.page-loader{display:none!important}.loader-owl,.loader-code i,.loader-dots i{animation:none!important}}
html[data-motion=off] .page-loader{display:none!important}
html[data-contrast=dark] .page-loader,html[data-contrast=high] .page-loader{background:#101b27;color:white}html:is([data-contrast=dark],[data-contrast=high]) .page-loader::before{display:none}html:is([data-contrast=dark],[data-contrast=high]) :where(.loader-status){color:white}
@media(max-height:580px){.loader-scene{width:155px}.loader-brand{margin-bottom:0}.loader-message{font-size:1.25rem}.loader-status{margin-top:6px}.loader-dots{margin-top:8px}}

/* Prepare the starting pose behind the cover, so the reveal cannot flash an end frame. */
html:is([data-page-phase=preparing],[data-page-phase=revealing]):not([data-motion=off]) main h1{transform:translateY(34px)}
html:is([data-page-phase=preparing],[data-page-phase=revealing]):not([data-motion=off]) .hero h1{transform:none}
html:is([data-page-phase=preparing],[data-page-phase=revealing]):not([data-motion=off]) .hero h1>span{transform:translateY(36px)}
html:is([data-page-phase=preparing],[data-page-phase=revealing]):not([data-motion=off]) :where(.hero-description,.hero .actions){transform:translateY(18px)}