/* Shippwell brand motion. ONE file for the site, social and the brand book.
   Source of truth: brand/final/logo/motion/motion.css (built from round2/b-motion/motion.css, timings untouched,
   plus the final additions at the end). The brand mark is .swm3. */

/* Shippwell, logo B in motion. Round 2.
   One curve for everything: cubic-bezier(.22,1,.36,1). No springs, no libraries, CSS and SVG only.

   Markup, inline SVG (the demo files in svg/ carry this same sheet inside a <style>):
     <svg class="sw swm1" viewBox="0 0 128.07 100">
       <rect class="sw-knob" .../>                      M2 only: the lime ON plate, drawn first so it sits behind
       <g transform="translate(47.368 80.702) scale(1.24054) rotate(45)">
         <rect class="sw-base" x="-43" y="-11" width="54" height="22"/>
         <rect class="sw-bar"  x="-11" y="-81" width="22" height="62.667"/>
       </g>
     </svg>
   The two strokes are drawn upright, as an L, and the group turns them 45 degrees.
   So every move below runs along a stroke: translateY on the bar is the launch axis.
   Units are the master grid: stroke 22, gap 7.33 (a third of the stroke). They scale with the group.

   States
     .is-loading   loader, 1.1 s, plays once. Past 1.1 s of waiting, switch to .is-looping.
     .is-looping   avatar and long wait loop. M1 3.6 s, M2 4 s.
     .is-hover     forces the hover state (a:hover and a:focus-visible do it for real).
     .is-on        M2 only: the lime knob is on (app icon, avatar rest, active page).
     .is-frame     a paused still at time --t, used for frame strips.
     .sw-ship      form success component, add .is-shipped to the form.
   Reduced motion: every animation and transition is dropped and the rest frame shows. Rest frame = shipped. */

:root{ --sw-ink:#0A0A0A; --sw-lime:#C8F031; --sw-white:#FFFFFF; }

.sw{ overflow:visible; }
.sw .sw-base,.sw .sw-bar{ fill:currentColor; transform-box:fill-box; }
.sw .sw-base{ transform-origin:0% 50%; }     /* the free end, top left once turned */
.sw .sw-bar{ transform-origin:50% 100%; }    /* the foot, standing on the base */
.sw .sw-knob{ fill:var(--sw-lime); transform-box:fill-box; transform-origin:50% 50%; }

/* =====================================================================
   M1  LIFTOFF
   Written like a hand check, then the long stroke lifts off its base.
   The gap is the launch.
   ===================================================================== */

/* Loader, 1100 ms
   0 to 330     land: the short stroke is written from its free end into the corner
   290 to 660   draw: the long stroke rises from the corner with the gap closed, an ordinary tick
   660 to 1100  lift: it travels up its own axis, overshoots by a third of the gap, settles. Gap open. */
.swm1.is-loading .sw-base{ animation:swm1-base 1.1s both; }
.swm1.is-loading .sw-bar{ animation:swm1-bar 1.1s both; }
@keyframes swm1-base{
  0%{ transform:scaleX(0); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  30%,100%{ transform:none; }
}
@keyframes swm1-bar{
  0%,26%{ transform:translateY(7.6px) scaleY(0); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  60%{ transform:translateY(7.6px) scaleY(1); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  84%{ transform:translateY(-2.4px) scaleY(1); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  100%{ transform:none; }
}

/* Hover, 420 ms: the bar lifts to 1.6 times the gap and waits there. Press closes the gap: built. Release: shipped. */
.swm1 .sw-bar{ transition:transform .42s cubic-bezier(.22,1,.36,1); }
a:hover .swm1 .sw-bar,a:focus-visible .swm1 .sw-bar,.swm1.is-hover .sw-bar{ transform:translateY(-4.4px); }
a:active .swm1 .sw-bar,.swm1.is-press .sw-bar{ transform:translateY(7.6px); transition-duration:.14s; }

/* Loop, 3600 ms: land, draw, lift, hold, launch out of frame, base fades, again. */
.swm1.is-looping .sw-base{ animation:swm1-loop-base 3.6s infinite; }
.swm1.is-looping .sw-bar{ animation:swm1-loop-bar 3.6s infinite; }
@keyframes swm1-loop-base{
  0%{ transform:scaleX(0); opacity:1; animation-timing-function:cubic-bezier(.22,1,.36,1); }
  10%,80%{ transform:none; opacity:1; animation-timing-function:cubic-bezier(.22,1,.36,1); }
  92%,100%{ transform:none; opacity:0; }
}
@keyframes swm1-loop-bar{
  0%,7%{ transform:translateY(7.6px) scaleY(0); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  18%{ transform:translateY(7.6px) scaleY(1); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  25%{ transform:translateY(-2.4px) scaleY(1); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  31%,70%{ transform:none; animation-timing-function:cubic-bezier(.22,1,.36,1); }
  84%,100%{ transform:translateY(-170px) scaleY(1); }
}

/* =====================================================================
   M2  SWITCH ON  (borrowed from C)
   The long stroke is built in four weekly hops, then the lime knob
   switches on behind it. Lime is the shipped state; the tick stays ink.
   ===================================================================== */

.swm2 .sw-knob{ opacity:0; transform:translateX(-32%);
  transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .24s cubic-bezier(.22,1,.36,1); }
.swm2.is-on .sw-knob,.swm2.is-loading .sw-knob,.swm2.is-looping .sw-knob,
a:hover .swm2 .sw-knob,a:focus-visible .swm2 .sw-knob,.swm2.is-hover .sw-knob{ opacity:1; transform:none; }

/* Loader, 1100 ms
   0 to 110     set: the base drops in
   110 to 600   build: four hops, a quarter of the stroke each, one per Friday
   640 to 1040  ship: the knob slides into the ON position behind the tick */
.swm2.is-loading .sw-base{ animation:swm2-base 1.1s both; }
.swm2.is-loading .sw-bar{ animation:swm2-bar 1.1s both; }
.swm2.is-loading .sw-knob{ animation:swm2-knob 1.1s both; }
@keyframes swm2-base{
  0%{ opacity:0; transform:translateX(-6px); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  10%,100%{ opacity:1; transform:none; }
}
@keyframes swm2-bar{
  0%,10%{ transform:scaleY(0); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  18%,22%{ transform:scaleY(.25); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  30%,34%{ transform:scaleY(.5); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  42%,46%{ transform:scaleY(.75); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  54%,100%{ transform:none; }
}
@keyframes swm2-knob{
  0%,58%{ opacity:0; transform:translateX(-32%); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  94%,100%{ opacity:1; transform:none; }
}

/* Hover: the knob slides on behind the symbol and back off on leave (the transition above).
   In the lockup the knob pushes the wordmark right by 160 units, so the lockup gap stays the same. */
.swm2 .sw-word{ transition:transform .42s cubic-bezier(.22,1,.36,1); }
.swm2.is-on .sw-word,a:hover .swm2 .sw-word,a:focus-visible .swm2 .sw-word,.swm2.is-hover .sw-word{ transform:translateX(160px); }

/* Loop, 4000 ms: on, switch off, tick clears, four hops, switch on. Ground is white when off. */
.swm2.is-looping .sw-base{ animation:swm2-loop-base 4s infinite; }
.swm2.is-looping .sw-bar{ animation:swm2-loop-bar 4s infinite; }
.swm2.is-looping .sw-knob{ animation:swm2-loop-knob 4s infinite; }
@keyframes swm2-loop-knob{
  0%,40%{ transform:none; animation-timing-function:cubic-bezier(.22,1,.36,1); }
  50%,85%{ transform:translateX(-101%); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  97%,100%{ transform:none; }
}
@keyframes swm2-loop-base{
  0%,50%{ opacity:1; transform:none; animation-timing-function:cubic-bezier(.22,1,.36,1); }
  55%,58%{ opacity:0; transform:none; }
  58.01%{ opacity:0; transform:translateX(-6px); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  62%,100%{ opacity:1; transform:none; }
}
@keyframes swm2-loop-bar{
  0%,50%{ opacity:1; transform:none; animation-timing-function:cubic-bezier(.22,1,.36,1); }
  55%{ opacity:0; transform:none; }
  55.01%,62%{ opacity:1; transform:scaleY(0); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  65.5%,67%{ transform:scaleY(.25); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  70.5%,72%{ transform:scaleY(.5); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  75.5%,77%{ transform:scaleY(.75); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  80.5%,100%{ transform:none; }
}

/* =====================================================================
   SHIPPED  form success
   <form class="sw-ship sw-ship--m1"> ... <button class="sw-ship-btn">
       <span class="sw-ship-fill"></span>
       <span class="sw-ship-idle">Send brief</span>
       <span class="sw-ship-done"><svg class="sw swm1">...</svg><span>Shipped</span></span>
     </button> <p class="sw-ship-note">...</p></form>
   Add .is-shipped to the form. The end state is plain CSS, the animation only gets you there.
   ===================================================================== */
.sw-ship-btn{ position:relative; overflow:hidden; isolation:isolate; }
.sw-ship-fill{ position:absolute; inset:0; z-index:-1; background:var(--sw-lime); transform:translateX(-101%); }
.sw-ship-idle,.sw-ship-done{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; }
.sw-ship-done{ position:absolute; inset:0; opacity:0; }
.sw-ship-done .sw{ height:1em; width:auto; }
.sw-ship-note{ opacity:0; }
.sw-ship.is-shipped .sw-ship-idle{ opacity:0; transform:translateY(-60%); animation:sw-out .22s cubic-bezier(.22,1,.36,1) both; }
.sw-ship.is-shipped .sw-ship-done{ opacity:1; }
.sw-ship.is-shipped .sw-ship-note{ opacity:1; transform:none; animation:sw-note .5s cubic-bezier(.22,1,.36,1) .9s both; }
@keyframes sw-out{ from{ opacity:1; transform:none; } to{ opacity:0; transform:translateY(-60%); } }
@keyframes sw-note{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* M1: the button stays ink, a lime tick is written and lifts off, then "Shipped" arrives. 1.25 s. */
.sw-ship--m1 .sw-ship-done{ color:var(--sw-lime); }
.sw-ship--m1 .sw-ship-done > span{ color:var(--sw-white); }
.sw-ship--m1.is-shipped .sw-ship-done .sw-base{ animation:swm1-base 1.1s .15s both; }
.sw-ship--m1.is-shipped .sw-ship-done .sw-bar{ animation:swm1-bar 1.1s .15s both; }
.sw-ship--m1.is-shipped .sw-ship-done > span{ animation:sw-label .45s cubic-bezier(.22,1,.36,1) .72s both; }
@keyframes sw-label{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }

/* M2: a lime tick is built in hops on the ink button, then the lime knob travels the whole
   button and the content turns ink. Ink on lime, always. 1.3 s. */
.sw-ship--m2 .sw-ship-done{ color:var(--sw-ink); }
.sw-ship--m2.is-shipped .sw-ship-btn{ background-color:var(--sw-lime); animation:sw-bg 1.2s both; }
@keyframes sw-bg{ 0%,99%{ background-color:var(--sw-ink); } 100%{ background-color:var(--sw-lime); } }
.sw-ship--m2.is-shipped .sw-ship-fill{ transform:none; animation:sw-fill .5s cubic-bezier(.22,1,.36,1) .66s both; }
.sw-ship--m2.is-shipped .sw-ship-done{ animation:sw-ink 1.2s both; }
.sw-ship--m2.is-shipped .sw-ship-done .sw-base{ animation:swm2-base 1.1s .12s both; }
.sw-ship--m2.is-shipped .sw-ship-done .sw-bar{ animation:swm2-bar 1.1s .12s both; }
.sw-ship--m2.is-shipped .sw-ship-done > span{ animation:sw-label .45s cubic-bezier(.22,1,.36,1) .8s both; }
@keyframes sw-fill{ from{ transform:translateX(-101%); } to{ transform:none; } }
@keyframes sw-ink{ 0%,62%{ color:var(--sw-lime); } 74%,100%{ color:var(--sw-ink); } }

/* =====================================================================
   Stills and reduced motion
   ===================================================================== */
.sw.is-frame *{ animation-play-state:paused!important; animation-delay:calc(var(--t,0s) * -1)!important; transition:none!important; }

@media (prefers-reduced-motion:reduce){
  .sw:not(.is-frame) *,.sw-ship *{ animation:none!important; transition:none!important; }
}

/* =====================================================================
   M3  FINAL (owner's pick): M1's start (written, never faded), the liftoff
   with a small kick, then M2's lime ground switches on. Loop resets by
   launching the bar out up its axis and sliding the base out down its axis, never by fading.
   ===================================================================== */
.swm3 .sw-knob{ transform:translateX(-101%); }
.swm3.is-on .sw-knob{ transform:none; }
/* Loader, 1500 ms: write, draw, lift + kick, switch on. Ends in the shipped rest state. */
.swm3.is-loading .sw-base{ animation:swm3-base 1.5s both; }
.swm3.is-loading .sw-bar{ animation:swm3-bar 1.5s both; }
.swm3.is-loading .sw-knob{ animation:swm3-knob 1.5s both; }
@keyframes swm3-base{ 0%{ transform:scaleX(0); animation-timing-function:cubic-bezier(.22,1,.36,1); } 24%,100%{ transform:none; } }
@keyframes swm3-bar{
  0%,18%{ transform:translateY(7.6px) scaleY(0); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  27%,30%{ transform:translateY(7.6px) scaleY(.25); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  38%,41%{ transform:translateY(7.6px) scaleY(.5); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  49%,52%{ transform:translateY(7.6px) scaleY(.75); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  60%{ transform:translateY(7.6px) scaleY(1); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  72%{ transform:translateY(-4px) scaleY(1); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  80%,100%{ transform:none; }
}
@keyframes swm3-knob{ 0%,72%{ transform:translateX(-101%); animation-timing-function:cubic-bezier(.22,1,.36,1); } 96%,100%{ transform:none; } }
/* Loop, 4000 ms: write, draw, lift + kick, lime on, hold, launch out, lime off + un-write, again. */
.swm3.is-looping .sw-base{ animation:swm3-loop-base 4s infinite; }
.swm3.is-looping .sw-bar{ animation:swm3-loop-bar 4s infinite; }
.swm3.is-looping .sw-knob{ animation:swm3-loop-knob 4s infinite; }
@keyframes swm3-loop-base{
  0%{ transform:scaleX(0); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  8%,74%{ transform:none; animation-timing-function:cubic-bezier(.32,0,.67,0); }
  84%,100%{ transform:translateX(200px); }
}
@keyframes swm3-loop-bar{
  0%,6%{ transform:translateY(7.6px) scaleY(0); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  9.5%,11%{ transform:translateY(7.6px) scaleY(.25); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  14.5%,16%{ transform:translateY(7.6px) scaleY(.5); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  19.5%,21%{ transform:translateY(7.6px) scaleY(.75); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  24.5%{ transform:translateY(7.6px) scaleY(1); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  30%{ transform:translateY(-4px) scaleY(1); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  35%,74%{ transform:none; animation-timing-function:cubic-bezier(.32,0,.67,0); }
  84%,100%{ transform:translateY(-190px) scaleY(1); }
}
@keyframes swm3-loop-knob{
  0%,31%{ transform:translateX(-101%); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  41%,82%{ transform:none; animation-timing-function:cubic-bezier(.22,1,.36,1); }
  94%,100%{ transform:translateX(101%); }
}
@media (prefers-reduced-motion:reduce){ .swm3 .sw-base,.swm3 .sw-bar,.swm3 .sw-knob{ animation:none!important; } .swm3 .sw-knob{ transform:none; } }

/* =====================================================================
   FINAL ADDITIONS (brand/final). Everything above is the approved file, unchanged.
   The brand mark is .swm3. Loader 1.5 s: written base, four hops (one per
   Friday build), liftoff with a small kick, lime on. Avatar loop 4 s.
   ===================================================================== */

/* Hover on the logo, adapted from M1: the long stroke lifts to 1.6 times the gap
   and waits. Press closes the gap (built). Release: shipped again. 420 ms, 140 ms press. */
.swm3 .sw-bar{ transition:transform .42s cubic-bezier(.22,1,.36,1); }
a:hover .swm3 .sw-bar,a:focus-visible .swm3 .sw-bar,.swm3.is-hover .sw-bar{ transform:translateY(-4.4px); }
a:active .swm3 .sw-bar,.swm3.is-press .sw-bar{ transform:translateY(7.6px); transition-duration:.14s; }

/* Form success with the final mark: ink button, a lime tick is written, built in four hops,
   kicks off, then "Sent" arrives. Markup as .sw-ship above, with class sw-ship--m3 on the form. */
.sw-ship--m3 .sw-ship-done{ color:var(--sw-lime); }
.sw-ship--m3 .sw-ship-done > span{ color:var(--sw-white); }
.sw-ship--m3.is-shipped .sw-ship-done .sw-base{ animation:swm3-base 1.5s .12s both; }
.sw-ship--m3.is-shipped .sw-ship-done .sw-bar{ animation:swm3-bar 1.5s .12s both; }
.sw-ship--m3.is-shipped .sw-ship-done > span{ animation:sw-label .45s cubic-bezier(.22,1,.36,1) 1.2s both; }

/* Page loader: a white sheet with the mark on a 112 px tile. It plays .swm3.is-loading
   once (1.5 s, ends as the lime app icon), then the sheet slides up and away.
   Shown only when <html> has .sw-first (set by the head script: first visit per session,
   no reduced motion, no ?still=1). */
.sw-loader{ position:fixed; inset:0; z-index:1000; display:none; place-items:center; background:var(--sw-white); }
.sw-first .sw-loader{ display:grid; }
.sw-loader .sw{ width:112px; height:112px; border-radius:25px; overflow:hidden; }
.sw-loader.is-out{ transform:translateY(-100%); transition:transform .7s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion:reduce){ .sw-loader{ display:none!important; } }