:root {
--sg-ease: cubic-bezier(.22, 1, .36, 1); --sg-dur: 800ms; --sg-step: 70;
--sg-from: 0 24px; --sg-item-from: 0 28px; --sg-item-scale: 1;
--sg-word-from: 0 108%; --sg-word-o: 1; --sg-word: 45ms; --sg-dur-title: 800ms;
--sg-cover: var(--g-bg, #fff); --sg-cover-origin: 100% 50%; --sg-cover-to: 0 1; --sg-dur-cover: 900ms; --sg-ease-cover: cubic-bezier(.77, 0, .18, 1);
--sg-settle: 1.15; --sg-dur-media: 1200ms; --sg-bar-h: 2px; --sg-bar: var(--g-accent, currentColor);
--sg-rule-h: var(--sg-bar-h); --sg-rule: var(--sg-bar); --sg-rule-origin: 0 50%; --sg-dur-rule: 900ms;
}
.sg-bar { display: none; }
@media (prefers-reduced-motion: no-preference) {
.sg-on :is([data-sg="text"], [data-sg="item"], [data-sg="act"], [data-sg="photo"]):not(.sg-in) { opacity: 0; }
.sg-on [data-sg="title"]:not(.sg-in) .sg-w > span { translate: var(--sg-word-from); opacity: var(--sg-word-o); }
.sg-w { display: inline-block; overflow: clip; padding-block: .16em; margin-block: -.16em; }
.sg-w > span { display: inline-block; }
.sg-cover { position: absolute; inset: -1px; z-index: 1; background: var(--sg-cover); transform-origin: var(--sg-cover-origin); pointer-events: none; }
.sg-in:is([data-sg="text"], [data-sg="act"]) { animation: sg-in-rise var(--sg-dur) var(--sg-ease) var(--sg-d, 0ms) backwards; }
.sg-in[data-sg="item"] { animation: sg-in-item var(--sg-dur) var(--sg-ease) var(--sg-d, 0ms) backwards; }
.sg-in[data-sg="photo"] { animation: sg-in-photo var(--sg-dur-media) var(--sg-ease) var(--sg-d, 0ms) backwards; }
.sg-in[data-sg="title"] .sg-w > span { animation: sg-in-word var(--sg-dur-title) var(--sg-ease) calc(var(--sg-d, 0ms) + var(--i, 0) * var(--sg-word)) backwards; }
.sg-in[data-sg="media"] > img { animation: sg-in-settle var(--sg-dur-media) var(--sg-ease) var(--sg-d, 0ms) backwards; }
.sg-in[data-sg="media"] > .sg-cover { animation: sg-in-cover var(--sg-dur-cover) var(--sg-ease-cover) var(--sg-d, 0ms) forwards; }
.sg-rule { position: absolute; inset-inline: 0; height: max(var(--sg-bw), min(var(--sg-rule-h), calc(var(--sg-bw) + 1px))); background: var(--sg-rule); transform-origin: var(--sg-rule-origin); scale: 0 1; pointer-events: none; }
.sg-rule-top { top: calc(-1 * var(--sg-bw)); }
.sg-rule-bottom { bottom: calc(-1 * var(--sg-bw)); }
.sg-step-top { border-top-color: transparent !important; }
.sg-step-bottom { border-bottom-color: transparent !important; }
.sg-lit > .sg-rule { scale: 1 1; transition: scale var(--sg-dur-rule) var(--sg-ease) var(--sg-rd, 0ms); }
@supports (animation-timeline: view()) {
[data-sg-px] > img { scale: 1.14; animation: sgx-drift linear both; animation-timeline: view(); }
[data-sg-px].sg-in > img { animation: sg-in-settle var(--sg-dur-media) var(--sg-ease) var(--sg-d, 0ms) backwards, sgx-drift linear both; animation-timeline: auto, view(); }
.sg-bar { display: block; position: fixed; inset: 0 0 auto; height: var(--sg-bar-h); z-index: 2147482000; background: var(--sg-bar); transform-origin: 0 50%; scale: 0 1; pointer-events: none; animation: sgx-bar linear both; animation-timeline: scroll(root); }
}
html.sg-cur::before, html.sg-cur::after { content: ""; position: fixed; z-index: 2147483000; pointer-events: none; }
html.sg-hold [data-part="hero"], html.sg-hold [data-part="hero"] * { animation-play-state: paused !important; }
.sg-head-away { animation: sgx-head-away 360ms cubic-bezier(.4, 0, 1, 1) forwards; }
.sg-head-back { animation: sgx-head-back 480ms var(--sg-ease); }
.sg-busy { position: absolute; inset: auto 22% 18%; height: 2px; border-radius: 1px; background: currentColor; opacity: .65; transform-origin: 0 50%; pointer-events: none; animation: sgx-busy 900ms var(--sg-ease) infinite alternate; }
:root[class*="sg-"] .form-note:target { animation: sgx-note var(--sg-dur) var(--sg-ease) .15s backwards; }
:root[class*="sg-"] #send-failed.form-note:target { animation: sgx-note var(--sg-dur) var(--sg-ease) .15s backwards, sgx-nudge 420ms ease-in-out calc(.15s + var(--sg-dur)); }
:root[class*="sg-"] #sent.form-note:target::before { content: ""; display: inline-block; inline-size: .6em; block-size: .32em; margin-inline-end: .6em; border-inline-start: 2px solid; border-block-end: 2px solid; translate: 0 -.22em; rotate: -45deg; animation: sgx-tick 520ms var(--sg-ease) calc(.15s + var(--sg-dur) * .5) backwards; }
.sg-nudge { animation: sgx-nudge 420ms ease-in-out; }
}
@keyframes sg-in-rise { from { opacity: 0; translate: var(--sg-from); } }
@keyframes sg-in-item { from { opacity: 0; translate: var(--sg-item-from); scale: var(--sg-item-scale); } }
@keyframes sg-in-photo { from { opacity: 0; scale: .96; } }
@keyframes sg-in-word { from { translate: var(--sg-word-from); opacity: var(--sg-word-o); } }
@keyframes sg-in-settle { from { scale: var(--sg-settle); } }
@keyframes sg-in-cover { from { scale: 1; } to { scale: var(--sg-cover-to); } }
@keyframes sgx-drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
@keyframes sgx-bar { to { scale: 1 1; } }
@keyframes sgx-head-away { to { translate: 0 -110%; } }
@keyframes sgx-head-back { from { translate: 0 -110%; } }
@keyframes sgx-busy { from { scale: .15 1; } to { scale: 1 1; } }
@keyframes sgx-note { from { opacity: 0; translate: 0 10px; } }
@keyframes sgx-tick { from { opacity: 0; scale: 0; } }
@keyframes sgx-nudge { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }
:root {
--sg-ease: cubic-bezier(.16, 1, .3, 1); --sg-dur: 700ms; --sg-step: 60;
--sg-from: -28px 0; --sg-item-from: -40px 0;
--sg-word-from: 0 108%; --sg-word: 32ms; --sg-dur-title: 550ms;
--sg-cover: var(--g-bg, #fff); --sg-cover-origin: 100% 50%; --sg-cover-to: 0 1; --sg-dur-cover: 650ms; --sg-ease-cover: cubic-bezier(.77, 0, .18, 1);
--sg-settle: 1.2; --sg-dur-media: 1100ms; --sg-bar-h: 3px; --sg-dur-rule: 600ms;
}
@media (prefers-reduced-motion: no-preference) {
html.sg-cur::before, html.sg-cur::after { inset-inline: 0; height: 50.5vh; background: #0c0c0d; background: light-dark(var(--g-ink, #0c0c0d), var(--g-bg, #0c0c0d)); }
html.sg-cur::before { top: 0; animation: sgx-blade-up 620ms cubic-bezier(.77, 0, .18, 1) 300ms forwards; }
html.sg-cur::after { bottom: 0; animation: sgx-blade-down 620ms cubic-bezier(.77, 0, .18, 1) 340ms forwards; }
:root.sg-blade::view-transition-old(root) { animation: sgx-blade-out 220ms cubic-bezier(.7, 0, .84, 0) both; }
:root.sg-blade::view-transition-new(root) { animation: sgx-blade-in 520ms var(--sg-ease) both; }
}
@keyframes sgx-blade-up { to { translate: 0 -100%; } }
@keyframes sgx-blade-down { to { translate: 0 100%; } }
@keyframes sgx-blade-out { to { opacity: 0; translate: 24px 0; } }
@keyframes sgx-blade-in { from { opacity: 0; translate: -32px 0; } }