/* ============================================================================
   THE SEARCH INTERFACE SYSTEM · v2 · logo-motion.css
   ----------------------------------------------------------------------------
   Companion to search-interface.css, loaded only on pages that use the motion
   lockup (assets/logo/motion/svt-*.motion.svg). Keyframes and timing are taken
   from the reference animations at brand/logo/motion/_source/corner-signal/
   (corner-signal.svg, 2.88s) for the load, and from _source/corner-glitch.svg
   for the hover; clip-path geometry lives inside each inlined SVG, not here,
   since it differs per file.

   Load, once, "corner signal": the mark starts shifted right (roughly
   centered in the lockup's own canvas), its top-left quadrant glitches
   twice, the whole mark slides left into its final position, flickers once
   more as a whole (with a brief ghost echo), then the word and (full lockup
   only) the tagline slide in. The icon-only file skips the slide and the
   word/tagline steps: corner-glitch twice, flicker, hold.

   Two magnitude tiers, because the short lockup's icon is an independently
   rescaled drawing, not a uniform transform of the same path as the icon
   alone and the full lockup: default (svt-mark.motion.svg,
   svt-lockup-h.motion.svg, byte-identical icon geometry, source numbers used
   unscaled) and `.svt-logo--short` (svt-lockup-h-short.motion.svg, every
   translate and the position shift scaled to its own, smaller icon and its
   own canvas width). Equal-specificity rules, `--short` declared after
   default, so source order decides on a `.svt-logo.svt-logo--short` root.

   Hover: one quadrant jump and resettle, once per hover, never looping
   (.motion-corner-hover, triggered by :hover on the .svt-logo root). It is
   nested one level inside .motion-corner, which already carries the load's
   corner-glitch-twice animation: two different animations naming the same
   element risks a restart the moment :hover changes the computed value, so
   the hover trigger lives on its own child instead.

   No hex: these rules never set colour, the SVG's own fill="currentColor"
   plus the host element's `color` handle that. Zero em dashes, same as every
   file in this kit. ============================================================================ */

@keyframes svt-combo-position {
  0%, 81.8965517241% { transform: translateX(360px); }
  100% { transform: translateX(0); }
}
@keyframes svt-combo-position-short {
  0%, 81.8965517241% { transform: translateX(383.805px); }
  100% { transform: translateX(0); }
}

@keyframes svt-combo-corner {
  0%, 17%, 31%, 65%, 84%, 100% { transform: translate(0, 0); }
  19% { transform: translate(-8px, -5px); }
  22% { transform: translate(6px, 0); }
  25% { transform: translate(-4px, 6px); }
  28% { transform: translate(3px, -3px); }
  68% { transform: translate(-7px, -4px); }
  72% { transform: translate(6px, 2px); }
  77% { transform: translate(-4px, 5px); }
  81% { transform: translate(3px, -2px); }
}
@keyframes svt-combo-corner-short {
  0%, 17%, 31%, 65%, 84%, 100% { transform: translate(0, 0); }
  19% { transform: translate(-6.54px, -4.088px); }
  22% { transform: translate(4.905px, 0); }
  25% { transform: translate(-3.27px, 4.905px); }
  28% { transform: translate(2.453px, -2.453px); }
  68% { transform: translate(-5.723px, -3.27px); }
  72% { transform: translate(4.905px, 1.635px); }
  77% { transform: translate(-3.27px, 4.088px); }
  81% { transform: translate(2.453px, -1.635px); }
}

@keyframes svt-combo-signal {
  0%, 12% { transform: translate(0, 0); opacity: 1; }
  22% { transform: translate(-7px, 0); }
  32% { transform: translate(6px, 2px); }
  43% { transform: translate(-4px, -3px); opacity: .45; }
  56% { transform: translate(3px, 0); opacity: 1; }
  72%, 100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes svt-combo-signal-short {
  0%, 12% { transform: translate(0, 0); opacity: 1; }
  22% { transform: translate(-5.723px, 0); }
  32% { transform: translate(4.905px, 1.635px); }
  43% { transform: translate(-3.27px, -2.453px); opacity: .45; }
  56% { transform: translate(2.453px, 0); opacity: 1; }
  72%, 100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes svt-combo-echo {
  0%, 12%, 43%, 72%, 100% { opacity: 0; }
  22%, 56% { opacity: .45; transform: translate(9px, -2px); }
}
@keyframes svt-combo-echo-short {
  0%, 12%, 43%, 72%, 100% { opacity: 0; }
  22%, 56% { opacity: .45; transform: translate(7.358px, -1.635px); }
}

@keyframes svt-combo-word {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes svt-combo-word-short {
  from { opacity: 0; transform: translateX(-13.11px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Hover, unchanged concept from the first brief: one jump, resettle, never a
   loop. steps(1,end) 1 so re-hovering always replays from the start. */
@keyframes svt-corner {
  0%, 12%, 29%, 100% { transform: translate(0, 0); }
  14% { transform: translate(-7.99px, -4.57px); }
  18% { transform: translate(6.28px, 0); }
  22% { transform: translate(-4px, 5.71px); }
  25% { transform: translate(2.86px, -2.86px); }
}
@keyframes svt-corner-short {
  0%, 12%, 29%, 100% { transform: translate(0, 0); }
  14% { transform: translate(-6.54px, -3.73px); }
  18% { transform: translate(5.14px, 0); }
  22% { transform: translate(-3.27px, 4.67px); }
  25% { transform: translate(2.33px, -2.33px); }
}

.svt-logo { display: inline-block; overflow: visible; }

/* Load, default tier: svt-mark.motion.svg and svt-lockup-h.motion.svg. */
.svt-logo .svt-position { animation: svt-combo-position 2.32s cubic-bezier(.16, 1, .3, 1) both; }
.svt-logo .svt-symbol { animation: svt-combo-signal .55s 1.96s steps(1, end) both; }
.svt-logo .svt-echo { animation: svt-combo-echo .55s 1.96s steps(1, end) both; opacity: 0; }
.svt-logo .motion-corner { animation: svt-combo-corner 1.8s steps(1, end) both; }
.svt-logo .svt-word { animation: svt-combo-word .6s 2.13s cubic-bezier(.16, 1, .3, 1) both; }
.svt-logo .svt-tagline { animation: svt-combo-word .6s 2.28s cubic-bezier(.16, 1, .3, 1) both; }

/* Load, short-lockup tier: its icon is a separately rescaled drawing, not the
   same path through a uniform transform, so every magnitude above gets its
   own scaled keyframe. Same selector depth as the rules above; this is
   later in the file, so it wins on a `.svt-logo.svt-logo--short` root. */
.svt-logo--short .svt-position { animation: svt-combo-position-short 2.32s cubic-bezier(.16, 1, .3, 1) both; }
.svt-logo--short .svt-symbol { animation: svt-combo-signal-short .55s 1.96s steps(1, end) both; }
.svt-logo--short .svt-echo { animation: svt-combo-echo-short .55s 1.96s steps(1, end) both; opacity: 0; }
.svt-logo--short .motion-corner { animation: svt-combo-corner-short 1.8s steps(1, end) both; }
.svt-logo--short .svt-word { animation: svt-combo-word-short .6s 2.13s cubic-bezier(.16, 1, .3, 1) both; }

/* Hover: one corner jump, resettle, never loops. On the icon-only file this
   is the only motion a repeat visitor ever sees again. */
.svt-logo:hover .motion-corner-hover { animation: svt-corner .6s steps(1, end) 1; }
.svt-logo--short:hover .motion-corner-hover { animation: svt-corner-short .6s steps(1, end) 1; }

@media (prefers-reduced-motion: reduce) {
  .svt-logo .svt-position,
  .svt-logo .svt-symbol,
  .svt-logo .svt-word,
  .svt-logo .svt-tagline,
  .svt-logo .motion-corner { animation: none !important; opacity: 1 !important; transform: none !important; }
  .svt-logo .svt-echo { animation: none !important; opacity: 0 !important; }
  .svt-logo:hover .motion-corner-hover { animation: none !important; transform: none !important; }
}