/* editchemist logo motion: the three chosen moves. Reference page: docs/marketing/brand/editchemist-motion.html
   Markup the classes expect (paths from the outlined SVGs in this folder):
     wordmark: <svg class="el-word" viewBox="-60 -92 787 114"> <g class="r">red path</g> <g class="c">cyan path</g> <g class="w">ink path</g> </svg>
     loader:   <svg class="el-e" viewBox="0 0 64 64"> <g transform="translate(17.34 45.10)"> <g class="r" style="mix-blend-mode:screen">red e</g> <g class="c" style="mix-blend-mode:screen">cyan e</g> </g> </svg>
   Offsets are in SVG user units (the wordmark is set at 96 units, so 4.03 is the medium split). */

/* resting state */
.el-word .r { transform: translate(var(--rx, -4.03px), var(--ry, 0px)); }
.el-word .c { transform: translate(var(--cx, 4.03px), var(--cy, 0px)); }

/* 1. Loader: swap, softer. Use for anything that waits (report being written, joining a screening). */
.el-e .r, .el-e .c { filter: blur(0.4px); }
.el-e .r { animation: el-swap-r 1.6s ease-in-out infinite; }
.el-e .c { animation: el-swap-c 1.6s ease-in-out infinite; }
@keyframes el-swap-r { 0%, 100% { transform: translateX(-2.2px); } 50% { transform: translateX(6px); } }
@keyframes el-swap-c { 0%, 100% { transform: translateX(2.2px); } 50% { transform: translateX(-6px); } }

/* 2. Signal lock, hard. Add .el-lock to the wordmark svg to play once (1.1 s); it ends on the resting state. */
.el-lock .r { animation: el-hard-r 1.1s steps(1, end) both; }
.el-lock .c { animation: el-hard-c 1.1s steps(1, end) both; }
.el-lock .w { animation: el-hard-w 1.1s steps(1, end) both; }
.el-lock { animation: el-hard-skew 1.1s steps(1, end) both; }
@keyframes el-hard-r { 0% { transform: translateX(-70px); } 10% { transform: translateX(40px) translateY(-6px); } 20% { transform: translateX(-52px); } 30% { transform: translateX(22px) translateY(4px); } 40% { transform: translateX(-30px); } 50% { transform: translateX(8px); } 62% { transform: translateX(-14px); } 74% { transform: translateX(-1px); } 86%, 100% { transform: translateX(-4.03px); } }
@keyframes el-hard-c { 0% { transform: translateX(64px); } 10% { transform: translateX(-36px) translateY(6px); } 20% { transform: translateX(48px); } 30% { transform: translateX(-18px); } 40% { transform: translateX(28px) translateY(-4px); } 50% { transform: translateX(-6px); } 62% { transform: translateX(12px); } 74% { transform: translateX(2px); } 86%, 100% { transform: translateX(4.03px); } }
@keyframes el-hard-w { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: .9; transform: translateX(18px); } 20% { opacity: .2; transform: translateX(-12px); } 30% { opacity: 1; transform: translateX(6px); } 40% { opacity: .4; transform: translateX(-4px); } 50%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes el-hard-skew { 0% { transform: skewX(14deg); } 10% { transform: skewX(-9deg); } 20% { transform: skewX(6deg); } 30% { transform: skewX(-3deg); } 40%, 100% { transform: skewX(0deg); } }

/* 3. Follow: the hero logo. motion.js sets --rx/--ry/--cx/--cy from the pointer. */
.el-follow .r, .el-follow .c { transition: transform 120ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .el-e .r, .el-e .c, .el-lock, .el-lock .r, .el-lock .c, .el-lock .w { animation: none !important; }
  .el-follow .r, .el-follow .c { transition: none; }
}