/* ClipMakerIA Motion v2
 * A deliberately small, additive motion layer. It only styles elements that
 * js/motion-v2.js marks, so existing feature CSS and inline handlers remain
 * the source of truth for layout and behavior.
 */

:root {
  --cm-motion-purple: #a855f7;
  --cm-motion-pink: #ec4899;
  --cm-motion-cyan: #38bdf8;
  --cm-motion-ease: cubic-bezier(.22, .72, .18, 1);
}

/* Sidebar: a quiet active capsule with a luminous rail, inspired by the
   dashboard recording but using ClipMakerIA's purple/pink/cyan palette. */
#app-sidebar .nav-item[data-cm-motion-nav] {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border-left-color: transparent !important;
  transition: transform .2s var(--cm-motion-ease), background-color .2s ease,
    box-shadow .24s ease, color .18s ease;
}

#app-sidebar .nav-item[data-cm-motion-nav]::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -7px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--cm-motion-pink), var(--cm-motion-purple) 55%, var(--cm-motion-cyan));
  box-shadow: 0 0 13px rgba(168, 85, 247, .78);
  opacity: 0;
  transform: scaleY(.35);
  transform-origin: center;
  transition: opacity .2s ease, transform .24s var(--cm-motion-ease);
  pointer-events: none;
}

#app-sidebar .nav-item[data-cm-motion-nav]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 2px 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(110deg, rgba(168, 85, 247, .14), rgba(236, 72, 153, .08), transparent) padding-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, border-color .22s ease;
}

#app-sidebar .nav-item[data-cm-motion-nav]:hover {
  transform: translateX(2px);
}

#app-sidebar .nav-item[data-cm-motion-nav]:hover::after,
#app-sidebar .nav-item[data-cm-motion-nav].active-nav::after {
  opacity: 1;
}

#app-sidebar .nav-item[data-cm-motion-nav].active-nav {
  background: linear-gradient(100deg, rgba(126, 34, 206, .27), rgba(168, 85, 247, .1) 65%, transparent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(76, 29, 149, .12);
}

#app-sidebar .nav-item[data-cm-motion-nav].active-nav::before {
  opacity: 1;
  transform: scaleY(1);
}

#app-sidebar .nav-item[data-cm-motion-nav] > svg,
#app-sidebar .nav-item[data-cm-motion-nav] > i,
#app-sidebar .nav-item[data-cm-motion-nav] > span:first-child {
  position: relative;
  z-index: 1;
  transition: transform .2s var(--cm-motion-ease), filter .2s ease;
}

#app-sidebar .nav-item[data-cm-motion-nav]:hover > svg,
#app-sidebar .nav-item[data-cm-motion-nav]:hover > i,
#app-sidebar .nav-item[data-cm-motion-nav]:hover > span:first-child {
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 0 6px rgba(192, 132, 252, .42));
}

/* Buttons and controls. The shimmer is a hover-only sweep; it never captures
   pointer events and therefore cannot interfere with onclick handlers. */
[data-cm-motion-button] {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s var(--cm-motion-ease), box-shadow .2s ease,
    border-color .18s ease, background-color .18s ease, filter .18s ease;
}

[data-cm-motion-button]:not(:disabled):hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

[data-cm-motion-button]:not(:disabled):active {
  transform: translateY(1px) scale(.985);
  filter: brightness(.98);
}

[data-cm-motion-button][data-cm-primary] {
  overflow: hidden;
  isolation: isolate;
}

[data-cm-motion-button][data-cm-primary]::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -35% auto -35% -70%;
  width: 42%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg) translateX(-120%);
  opacity: 0;
  pointer-events: none;
}

[data-cm-motion-button][data-cm-primary]:hover::after {
  opacity: 1;
  animation: cm-motion-shimmer .9s var(--cm-motion-ease) both;
}

@keyframes cm-motion-shimmer {
  to { transform: skewX(-18deg) translateX(430%); }
}

/* A restrained focus treatment makes the motion layer usable from the
   keyboard without overriding component-specific focus styles. */
.cm-motion-v2 :where(button, a, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid rgba(192, 132, 252, .95);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, .18), 0 0 20px rgba(168, 85, 247, .2);
}

/* Cards get a border light rather than a heavy permanent glow. */
[data-cm-motion-card] {
  position: relative;
  transition: transform .24s var(--cm-motion-ease), border-color .22s ease,
    box-shadow .24s ease, background-color .22s ease;
}

[data-cm-motion-card]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(168, 85, 247, .0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, border-color .22s ease;
}

[data-cm-motion-card]:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 85, 247, .38) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28), 0 0 28px rgba(168, 85, 247, .1);
}

[data-cm-motion-card]:hover::after {
  opacity: 1;
  border-color: rgba(168, 85, 247, .32);
}

/* Page entrance is opt-in per marked page and uses a capped stagger. */
.cm-motion-page > .cm-motion-enter {
  opacity: 0;
  transform: translateY(10px);
}

.cm-motion-page.cm-motion-page-ready > .cm-motion-enter {
  animation: cm-motion-page-enter .48s var(--cm-motion-ease) both;
  animation-delay: calc(var(--cm-motion-index, 0) * 42ms);
}

/* Transparent module shells must not become isolated compositor layers.
   Chromium can otherwise paint their backdrop as a hard black rectangle. */
.cm-motion-page > :is(#projects-v2-root, #analytics-v2-root, .cm-projects-v2, .cm-analytics-v2),
.cm-motion-page.cm-motion-page-ready > :is(#projects-v2-root, #analytics-v2-root, .cm-projects-v2, .cm-analytics-v2) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@keyframes cm-motion-page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fixed header polish: respects the app's existing height and z-index. */
main > header[data-cm-motion-header] {
  background: linear-gradient(180deg, rgba(10, 10, 16, .92), rgba(10, 10, 16, .72));
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: rgba(168, 85, 247, .14) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

main > header[data-cm-motion-header]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .42), rgba(236, 72, 153, .24), transparent);
  pointer-events: none;
}

/* Navigation overlay: transparent to input, so even an interrupted route
   transition cannot block clicks or auth controls. */
#cm-motion-route-overlay {
  display: none !important;
  position: fixed;
  z-index: 9998;
  inset: 0;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(circle at 50% 44%, rgba(78, 24, 122, .22), transparent 30%), rgba(5, 5, 9, .18);
  transition: opacity .24s ease, visibility 0s linear .24s;
}

#cm-motion-route-overlay.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

#cm-motion-route-overlay .cm-motion-route-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translateY(7px) scale(.96);
  opacity: 0;
  transition: transform .32s var(--cm-motion-ease), opacity .24s ease;
}

#cm-motion-route-overlay.is-active .cm-motion-route-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

#cm-motion-route-overlay img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, .65));
}

#cm-motion-route-overlay .cm-motion-route-wordmark {
  color: rgba(244, 244, 245, .88);
  font: 900 10px/1 Inter, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

[data-cm-skeleton-target] {
  position: relative;
}

[data-cm-skeleton-target] > .cm-motion-skeleton-layer {
  position: absolute;
  z-index: 20;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(24, 24, 30, .98) 25%, rgba(54, 42, 70, .88) 47%, rgba(24, 24, 30, .98) 70%);
  background-size: 220% 100%;
  animation: cm-motion-skeleton 1.15s linear infinite;
  pointer-events: none;
}

@keyframes cm-motion-skeleton {
  to { background-position: -220% 0; }
}

[data-cm-motion-counter].cm-motion-counter-bump {
  animation: cm-motion-counter-bump .38s var(--cm-motion-ease) both;
}

@keyframes cm-motion-counter-bump {
  0% { transform: scale(1); }
  45% { transform: scale(1.09); color: #e9d5ff; text-shadow: 0 0 18px rgba(168, 85, 247, .58); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #app-sidebar .nav-item[data-cm-motion-nav],
  #app-sidebar .nav-item[data-cm-motion-nav]::before,
  #app-sidebar .nav-item[data-cm-motion-nav]::after,
  #app-sidebar .nav-item[data-cm-motion-nav] > svg,
  #app-sidebar .nav-item[data-cm-motion-nav] > i,
  #app-sidebar .nav-item[data-cm-motion-nav] > span:first-child,
  [data-cm-motion-button],
  [data-cm-motion-card],
  [data-cm-motion-card]::after,
  #cm-motion-route-overlay,
  #cm-motion-route-overlay .cm-motion-route-card,
  main > header[data-cm-motion-header] {
    transition: none !important;
  }

  [data-cm-motion-button][data-cm-primary]:hover::after,
  [data-cm-skeleton-target] > .cm-motion-skeleton-layer,
  [data-cm-motion-counter].cm-motion-counter-bump,
  .cm-motion-page.cm-motion-page-ready > .cm-motion-enter {
    animation: none !important;
  }

  .cm-motion-page > .cm-motion-enter {
    opacity: 1;
    transform: none;
  }
}