/* o1tean nav logo: hover / keyboard-focus flap 1 -> l -> 1, CSS transforms only. Generated by ../build.mjs from the master geometry.
   Markup: <a class="o1-nav-logo" href="/"> + the contents of nav-logo.svg inline (inline it once per page: its ids are fixed).
   The flap follows the brand rig (motion-spec.md): each card falls about the hinge (y −70) along cos(π·u^1.7), the revealed card is
   uncovered from the top, the l stands whole for 125 ms, and the bottom card (stem + foot, shared by l and 1) never moves or changes.
   Leaving the link mid-flap snaps back to rest (the master); reduced motion: no animation. */
:root {
  --o1-void: #07050a; --o1-blush: #ffe3f6; --o1-pink: #ff5fd2; --o1-orchid: #d97cff; --o1-violet: #8b5cf6; --o1-plum: #2b0f3f; --o1-paper: #f4ecf8;
  --o1-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --o1-ease-spread: cubic-bezier(.25, .15, .7, .86);
  --o1-ease-retract: cubic-bezier(.55, 0, .45, 1);
  --o1-dur-flap: 267ms;
  --o1-dur-hover: 450ms;
  --o1-dur-spread: 400ms;
  --o1-rule: .1em;
  --o1-rule-offset: .18em;
  --o1-rule-end: round;   /* the liquid's one terminal: a plain round end, r = half the rule (sting, rule loader, underline) */
}
@media (prefers-reduced-motion: reduce) { :root { --o1-dur-hover: 0ms; --o1-dur-spread: 0ms; } }

.o1-nav-logo { display: inline-block; line-height: 0; }
.o1-nav-logo .o1-logo { display: block; height: 100%; width: auto; overflow: visible; }
.o1-nav-logo .o1-anim { transform-box: view-box; transform-origin: 0 0; }
.o1-nav-logo:hover .o1-top, .o1-nav-logo:focus-visible .o1-top { animation: o1-top var(--o1-dur-hover) linear; }
.o1-nav-logo:hover .o1-win-l, .o1-nav-logo:focus-visible .o1-win-l { animation: o1-win-l var(--o1-dur-hover) linear; }
.o1-nav-logo:hover .o1-card-l, .o1-nav-logo:focus-visible .o1-card-l { animation: o1-card-l var(--o1-dur-hover) linear; }
.o1-nav-logo:hover .o1-card-1, .o1-nav-logo:focus-visible .o1-card-1 { animation: o1-card-1 var(--o1-dur-hover) linear; }
.o1-nav-logo:hover .o1-win-1, .o1-nav-logo:focus-visible .o1-win-1 { animation: o1-win-1 var(--o1-dur-hover) linear; }
@media (prefers-reduced-motion: reduce) { .o1-nav-logo .o1-anim { animation: none !important; } }

@keyframes o1-top {
  0% { transform: translate(0, -70px) scale(1, 1) translate(0, 70px); }
  3.6% { transform: translate(0, -70px) scale(1, 0.999) translate(0, 70px); }
  7.21% { transform: translate(0, -70px) scale(1, 0.9889) translate(0, 70px); }
  10.81% { transform: translate(0, -70px) scale(1, 0.9564) translate(0, 70px); }
  14.41% { transform: translate(0, -70px) scale(1, 0.8854) translate(0, 70px); }
  18.01% { transform: translate(0, -70px) scale(1, 0.7606) translate(0, 70px); }
  21.62% { transform: translate(0, -70px) scale(1, 0.5709) translate(0, 70px); }
  25.22% { transform: translate(0, -70px) scale(1, 0.3136) translate(0, 70px); }
  28.82% { transform: translate(0, -70px) scale(1, 0) translate(0, 70px); }
  100% { transform: translate(0, -70px) scale(1, 0) translate(0, 70px); }
}
@keyframes o1-win-l {
  0% { transform: translate(0, -160px) scale(1, 0.0444) translate(0, 160px); }
  3.6% { transform: translate(0, -160px) scale(1, 0.0454) translate(0, 160px); }
  7.21% { transform: translate(0, -160px) scale(1, 0.0543) translate(0, 160px); }
  10.81% { transform: translate(0, -160px) scale(1, 0.0832) translate(0, 160px); }
  14.41% { transform: translate(0, -160px) scale(1, 0.1463) translate(0, 160px); }
  18.01% { transform: translate(0, -160px) scale(1, 0.2572) translate(0, 160px); }
  21.62% { transform: translate(0, -160px) scale(1, 0.4259) translate(0, 160px); }
  25.22% { transform: translate(0, -160px) scale(1, 0.6546) translate(0, 160px); }
  28.82% { transform: translate(0, -160px) scale(1, 0.9333) translate(0, 160px); }
  100% { transform: translate(0, -160px) scale(1, 1) translate(0, 160px); }
}
@keyframes o1-card-l {
  0% { transform: translate(0, -70px) scale(1, 1) translate(0, 70px); }
  56.67% { transform: translate(0, -70px) scale(1, 1) translate(0, 70px); }
  60.27% { transform: translate(0, -70px) scale(1, 0.999) translate(0, 70px); }
  63.87% { transform: translate(0, -70px) scale(1, 0.9889) translate(0, 70px); }
  67.48% { transform: translate(0, -70px) scale(1, 0.9564) translate(0, 70px); }
  71.08% { transform: translate(0, -70px) scale(1, 0.8854) translate(0, 70px); }
  74.68% { transform: translate(0, -70px) scale(1, 0.7606) translate(0, 70px); }
  78.28% { transform: translate(0, -70px) scale(1, 0.5709) translate(0, 70px); }
  81.89% { transform: translate(0, -70px) scale(1, 0.3136) translate(0, 70px); }
  85.49% { transform: translate(0, -70px) scale(1, 0) translate(0, 70px); }
  100% { transform: translate(0, -70px) scale(1, 0) translate(0, 70px); }
}
@keyframes o1-card-1 {
  0%, 56.64% { transform: translate(0, -70px) scale(1, 0) translate(0, 70px); }
  56.67%, 100% { transform: translate(0, -70px) scale(1, 1) translate(0, 70px); }
}
@keyframes o1-win-1 {
  0% { transform: translate(0, -160px) scale(1, 0.0444) translate(0, 160px); }
  56.67% { transform: translate(0, -160px) scale(1, 0.0444) translate(0, 160px); }
  60.27% { transform: translate(0, -160px) scale(1, 0.0454) translate(0, 160px); }
  63.87% { transform: translate(0, -160px) scale(1, 0.0543) translate(0, 160px); }
  67.48% { transform: translate(0, -160px) scale(1, 0.0832) translate(0, 160px); }
  71.08% { transform: translate(0, -160px) scale(1, 0.1463) translate(0, 160px); }
  74.68% { transform: translate(0, -160px) scale(1, 0.2572) translate(0, 160px); }
  78.28% { transform: translate(0, -160px) scale(1, 0.4259) translate(0, 160px); }
  81.89% { transform: translate(0, -160px) scale(1, 0.6546) translate(0, 160px); }
  85.49% { transform: translate(0, -160px) scale(1, 0.9333) translate(0, 160px); }
  100% { transform: translate(0, -160px) scale(1, 1) translate(0, 160px); }
}

/* Link underline / progress token: the liquid rule. Spreads both ways from the middle, draws back with the retract curve.
   Its terminal is the system's one liquid end (--o1-rule-end): a plain round end, radius = half the rule. A clip-path inset keeps the
   ends round at every width (scaleX would squash them); narrower than its thickness it is a dot, as the loader's liquid wells out. */
.o1-link { position: relative; text-decoration: none; color: inherit; }
.o1-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--o1-rule-offset)); height: var(--o1-rule);
  background: var(--o1-orchid); clip-path: inset(0 50% round calc(var(--o1-rule) / 2));
  transition: clip-path var(--o1-dur-spread) var(--o1-ease-retract);
}
.o1-link:hover::after, .o1-link:focus-visible::after, .o1-link[aria-current="page"]::after { clip-path: inset(0 0 round calc(var(--o1-rule) / 2)); transition-timing-function: var(--o1-ease-spread); }