/*
 * SpaceTools · Motion v2  (staging/new-ui)
 * ---------------------------------------------------------------
 * Additive stylesheet, linked last in <head> from base.html.
 * Every rule is scoped to html.st-v2 (set by spacetools-motion-v2.js)
 * or to elements that script creates, so removing the two include
 * lines restores the current look completely.
 */

/* ---------- 1. page transitions (cross-document) ---------- */

@view-transition { navigation: auto; }

/* the nav stays put while the page changes underneath it */
html.st-v2 #st-navigation { view-transition-name: st-nav; }
::view-transition-group(st-nav) { animation: none; z-index: 10; }
::view-transition-old(st-nav) { display: none; }
::view-transition-new(st-nav) { animation: none; }

/* default (no type / unsupported browsers): short crossfade */
::view-transition-old(root) { animation: st-v2-fade-out .16s ease both; }
::view-transition-new(root) { animation: st-v2-fade-in .22s ease both; }

/* different section: the new page "prints" in, layer by layer, bottom-up */
html:active-view-transition-type(st-layers)::view-transition-old(root) {
  animation: st-v2-fade-out .16s ease both;
}
html:active-view-transition-type(st-layers)::view-transition-new(root) {
  animation: st-v2-print .36s steps(6, end) both;
}

/* same section: short horizontal slide */
html:active-view-transition-type(st-slide)::view-transition-old(root) {
  animation: st-v2-slide-out .18s cubic-bezier(.4, 0, 1, 1) both;
}
html:active-view-transition-type(st-slide)::view-transition-new(root) {
  animation: st-v2-slide-in .26s cubic-bezier(.22, 1, .36, 1) both;
}

/* home / other: focus pull */
html:active-view-transition-type(st-fade)::view-transition-new(root) {
  animation: st-v2-focus .24s ease both;
}

@keyframes st-v2-fade-out { to { opacity: 0; } }
@keyframes st-v2-fade-in  { from { opacity: 0; } }
@keyframes st-v2-print    { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes st-v2-slide-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes st-v2-slide-in  { from { opacity: 0; transform: translateX(24px); } }
/* no blur here: a full-screen blur on every navigation was the heaviest frame */
@keyframes st-v2-focus    { from { opacity: 0; transform: scale(.992); } to { opacity: 1; transform: none; } }

/* ---------- 2. quieter chrome ---------- */

/* background glow + particles off: calmer canvas for the new language */
html.st-v2 .bg-blobs,
html.st-v2 #bgParticles { display: none !important; }

/* rotating rim on the nav bar stops; the underline carries the motion now */
html.st-v2 #st-navigation .tabs::before { animation: none !important; }

/* active tab: flat, the sliding underline marks it */
html.st-v2 #st-navigation .tabs > .tab.active,
html.st-v2 #st-navigation .tabs > .st-native-nav-group > .st-native-nav-trigger.active {
  background: rgba(255, 255, 255, .045) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.st-v2 #st-navigation .tabs .tab::after,
html.st-v2 #st-navigation .tabs .tab.active::after,
html.st-v2 #st-navigation .tabs .tab[href].active::after { opacity: 0 !important; }
html.st-v2 #st-navigation .tabs .tab::before { display: none !important; }
html.st-v2 #st-navigation .tabs .tab.active .nav-dot::after { animation: none !important; opacity: 0; }

/* ---------- 3. sliding underline ---------- */

.st-v2-ind {
  position: absolute;
  z-index: 3;
  bottom: 10px; /* inside the tab, so an open dropdown never covers it */
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #c4a3f2;
  pointer-events: none;
  opacity: 0;
  transition:
    left .45s cubic-bezier(.22, 1, .36, 1),
    width .45s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease;
}
.st-v2-ind.st-v2-ind-instant { transition: none !important; }
@media (max-width: 900px) { .st-v2-ind { display: none; } }

/* ---------- 4. dropdown reveal ---------- */

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  html.st-v2 #st-navigation .st-native-nav-dropdown {
    clip-path: inset(0 0 100% 0 round 0 0 16px 16px);
    transition:
      opacity .16s ease,
      visibility .34s ease,
      clip-path .34s cubic-bezier(.22, 1, .36, 1) !important;
  }
  html.st-v2 #st-navigation .st-native-nav-group:hover > .st-native-nav-dropdown,
  html.st-v2 #st-navigation .st-native-nav-group:focus-within > .st-native-nav-dropdown {
    clip-path: inset(0 0 0 0 round 0 0 16px 16px);
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab {
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity .22s ease,
      transform .3s cubic-bezier(.22, 1, .36, 1),
      color .22s ease, background .22s ease, border-color .22s ease !important;
  }
  html.st-v2 #st-navigation .st-native-nav-group:hover > .st-native-nav-dropdown > .tab,
  html.st-v2 #st-navigation .st-native-nav-group:focus-within > .st-native-nav-dropdown > .tab {
    opacity: 1;
    transform: none;
  }
  html.st-v2 #st-navigation .st-native-nav-group:hover > .st-native-nav-dropdown > .tab:nth-child(2),
  html.st-v2 #st-navigation .st-native-nav-group:focus-within > .st-native-nav-dropdown > .tab:nth-child(2) { transition-delay: .04s; }
  html.st-v2 #st-navigation .st-native-nav-group:hover > .st-native-nav-dropdown > .tab:nth-child(3),
  html.st-v2 #st-navigation .st-native-nav-group:focus-within > .st-native-nav-dropdown > .tab:nth-child(3) { transition-delay: .08s; }
  html.st-v2 #st-navigation .st-native-nav-group:hover > .st-native-nav-dropdown > .tab:nth-child(4),
  html.st-v2 #st-navigation .st-native-nav-group:focus-within > .st-native-nav-dropdown > .tab:nth-child(4) { transition-delay: .12s; }
}

/* ---------- 5. animated tool icons ---------- */

html.st-v2 #st-navigation .st-native-nav-icon.st-mi-holder {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}
html.st-v2 #st-navigation .st-native-nav-icon svg.st-mi {
  width: 22px;
  height: 22px;
  overflow: visible;
  stroke-width: 3.2;
}
svg.st-mi * { transform-box: fill-box; transform-origin: center; }
svg.st-mi .st-mi-acc { stroke: #f3eff7; }

/* paused until the row is hovered or focused */
/* html prefix: must outrank the animation shorthands below, which reset play-state */
html svg.st-mi [class*="mi-"] { animation-play-state: paused; }
html #st-navigation .tab:hover svg.st-mi [class*="mi-"],
html #st-navigation .tab:focus-visible svg.st-mi [class*="mi-"] { animation-play-state: running; }

svg.st-mi .mi-d2 { animation-delay: .08s; }
svg.st-mi .mi-d3 { animation-delay: .16s; }
svg.st-mi .mi-d4 { animation-delay: .24s; }
svg.st-mi .mi-ch-d.mi-d2 { animation-delay: .15s; }
svg.st-mi .mi-ch-d.mi-d3 { animation-delay: .3s; }

/* image -> cube (Create / upload) */
svg.st-mi .mi-mk-img  { animation: st-mi-mkImg 3.2s cubic-bezier(.7, 0, .2, 1) infinite; }
svg.st-mi .mi-mk-cube { stroke-dasharray: 1; animation: st-mi-mkCube 3.2s cubic-bezier(.7, 0, .2, 1) infinite; }
@keyframes st-mi-mkImg  { 0%, 25% { opacity: 1; transform: scale(1); } 40%, 88% { opacity: 0; transform: scale(.7); } 100% { opacity: 1; transform: scale(1); } }
@keyframes st-mi-mkCube { 0%, 28% { stroke-dashoffset: 1; opacity: 1; } 62%, 84% { stroke-dashoffset: 0; opacity: 1; } 94%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* model editor: cut line + lift */
svg.st-mi .mi-ed-top { animation: st-mi-edTop 3s cubic-bezier(.7, 0, .2, 1) infinite; }
svg.st-mi .mi-ed-cut { transform-origin: left center; animation: st-mi-edCut 3s cubic-bezier(.7, 0, .2, 1) infinite; }
@keyframes st-mi-edTop { 0%, 40% { transform: translateY(0); } 55%, 80% { transform: translateY(-5px); } 95%, 100% { transform: translateY(0); } }
@keyframes st-mi-edCut { 0%, 8% { transform: scaleX(0); opacity: 1; } 35%, 80% { transform: scaleX(1); opacity: 1; } 95%, 100% { transform: scaleX(1); opacity: 0; } }

/* design chat: typing dots */
svg.st-mi .mi-ch-d { animation: st-mi-chD 1.4s ease-in-out infinite; }
@keyframes st-mi-chD { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }

/* library: file drops into folder */
svg.st-mi .mi-lb-file { animation: st-mi-lbFile 2.8s cubic-bezier(.7, 0, .2, 1) infinite; }
svg.st-mi .mi-lb-fold { fill: #0c0911; transform-origin: center bottom; animation: st-mi-lbFold 2.8s ease infinite; }
@keyframes st-mi-lbFile { 0% { transform: translateY(-4px); opacity: 0; } 15% { transform: translateY(-4px); opacity: 1; } 45% { transform: translateY(12px); opacity: 1; } 55%, 100% { transform: translateY(12px); opacity: 0; } }
@keyframes st-mi-lbFold { 0%, 44% { transform: scale(1); } 50% { transform: scale(1.06, .92); } 58%, 100% { transform: scale(1); } }

/* STL library: grid pops */
svg.st-mi .mi-md { animation: st-mi-md 3s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes st-mi-md { 0%, 70% { transform: scale(1); opacity: 1; } 78%, 86% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* telegram: plane lands in tray */
svg.st-mi .mi-tg-plane { animation: st-mi-tgP 2.6s cubic-bezier(.7, 0, .2, 1) infinite; }
svg.st-mi .mi-tg-tray  { transform-origin: center bottom; animation: st-mi-tgT 2.6s ease infinite; }
@keyframes st-mi-tgP { 0%, 10% { transform: translate(-4px, -2px); opacity: 1; } 55% { transform: translate(4px, 14px) rotate(24deg) scale(.5); opacity: 1; } 62%, 90% { transform: translate(4px, 14px) rotate(24deg) scale(.5); opacity: 0; } 91% { transform: translate(-4px, -2px); opacity: 0; } 100% { transform: translate(-4px, -2px); opacity: 1; } }
@keyframes st-mi-tgT { 0%, 52% { transform: none; } 58% { transform: scale(1.05, .9); } 66%, 100% { transform: none; } }

/* stickers: peel */
svg.st-mi .mi-st-flap { transform-origin: 100% 100%; animation: st-mi-stF 2.6s ease-in-out infinite; }
@keyframes st-mi-stF { 0%, 20% { transform: scale(1); } 50%, 70% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* etsy convert: arrows turn */
svg.st-mi .mi-cv   { animation: st-mi-cv 3s cubic-bezier(.7, 0, .2, 1) infinite; }
svg.st-mi .mi-cv-c { animation: st-mi-cvC 3s cubic-bezier(.7, 0, .2, 1) infinite; }
@keyframes st-mi-cv  { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }
@keyframes st-mi-cvC { 0%, 20% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }

/* listings: swinging tag */
svg.st-mi .mi-es-tag { transform-origin: 50% 0; animation: st-mi-esT 2.4s ease-in-out infinite; }
@keyframes st-mi-esT { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } 50% { transform: rotate(-11deg); } 75% { transform: rotate(5deg); } }

/* ---------- 6. staging badge ---------- */

.st-v2-badge {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 10060;
  padding: 6px 10px;
  border: 1px solid #3a3048;
  border-radius: 999px;
  background: #0c0911;
  color: #c4a3f2;
  font: 700 11px/1 "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  pointer-events: none;
}

/* ---------- 7. reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .st-v2-ind { transition: none !important; }
  html.st-v2 #st-navigation .st-native-nav-dropdown,
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab { transition: opacity .12s ease, visibility .12s ease !important; transform: none !important; }
  svg.st-mi * { animation: none !important; }
}