/* A continuous curve, revealed by two opposite compositor transforms. */
.site-hero { isolation: isolate; --hero-image-position-x: 50%; background-position: var(--hero-image-position-x) 50%; }
.site-hero .hero-content { z-index: 3; }
.site-hero .topbar { z-index: 4; }
.hero-ribbon-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; visibility: hidden; }
.hero-ribbon-scene[data-ready="true"] { visibility: visible; }
.hero-ribbon-reveal, .hero-ribbon-paint, .hero-ribbon-foreground { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-ribbon-reveal { overflow: hidden; transform: translate3d(-100%, 0, 0); }
.hero-ribbon-paint { transform: translate3d(100%, 0, 0); }
.hero-ribbon-paint svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-ribbon-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-ribbon-path--body { stroke-width: var(--ribbon-width); }
.hero-ribbon-path--shadow { stroke-width: calc(var(--ribbon-width) + 4px); transform: translateY(5px); opacity: .28; }
.hero-ribbon-path--shade { stroke-width: calc(var(--ribbon-width) * .07); transform: translateY(calc(var(--ribbon-width) * .4)); opacity: .3; }
.hero-ribbon-path--light { stroke-width: calc(var(--ribbon-width) * .17); transform: translateY(calc(var(--ribbon-width) * -.28)); }
.hero-ribbon-scene[data-ready="true"] .hero-ribbon-reveal { animation: heroRibbonReveal 4200ms cubic-bezier(.3, 0, .25, 1) 180ms both; }
.hero-ribbon-scene[data-ready="true"] .hero-ribbon-paint { animation: heroRibbonCounterReveal 4200ms cubic-bezier(.3, 0, .25, 1) 180ms both; }
.hero-ribbon-scene[data-animating="true"] :is(.hero-ribbon-reveal, .hero-ribbon-paint) { will-change: transform; }
.hero-ribbon-scene[data-paused="true"] :is(.hero-ribbon-reveal, .hero-ribbon-paint) { animation-play-state: paused; }
@keyframes heroRibbonReveal { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes heroRibbonCounterReveal { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@media (max-width: 680px) { .site-hero { --hero-image-position-x: 62%; } }
@media (prefers-reduced-motion: reduce) { .hero-ribbon-scene { display: none; } }
@media print { .hero-ribbon-scene { display: none; } }