/* ==========================================================================
   glass-motion.css — motion layer for the Glass Dashboard UI
   Pair with glass-motion.js. All effects are opt-in via classes/attributes.
   Respects prefers-reduced-motion (everything snaps to its final state).
   ========================================================================== */
/* Tokens: --gm-dur, --gm-theme-dur, --gm-stagger, --gm-ease, --gm-ease-io, --gm-blur, --gm-rise and --gm-lift are generated
   into dist/glass.tokens.css (tokens/*.tokens.json) and arrive through glass.css (@import). Load glass.css with this file. */

/* ---------- Entrance: rise + fade + un-blur ------------------------------ */
.gm-in, .gm-stagger > * {
  animation: gm-rise var(--gm-dur) var(--gm-ease) both;
  animation-delay: calc(var(--gm-i, 0) * var(--gm-stagger) + var(--gm-delay, 0ms));
  will-change: opacity, transform, filter;
}
.gm-in[data-gm="scale"], .gm-stagger > [data-gm="scale"] { animation-name: gm-scale; }
.gm-in[data-gm="blur"],  .gm-stagger > [data-gm="blur"]  { animation-name: gm-blur; }
.gm-in[data-gm="fade"],  .gm-stagger > [data-gm="fade"]  { animation-name: gm-fade; }
.gm-in[data-gm="left"],  .gm-stagger > [data-gm="left"]  { animation-name: gm-left; }

/* Stagger index without JS for up to 12 children; JS sets --gm-i for more. */
.gm-stagger > :nth-child(1)  { --gm-i: 0; }  .gm-stagger > :nth-child(2)  { --gm-i: 1; }
.gm-stagger > :nth-child(3)  { --gm-i: 2; }  .gm-stagger > :nth-child(4)  { --gm-i: 3; }
.gm-stagger > :nth-child(5)  { --gm-i: 4; }  .gm-stagger > :nth-child(6)  { --gm-i: 5; }
.gm-stagger > :nth-child(7)  { --gm-i: 6; }  .gm-stagger > :nth-child(8)  { --gm-i: 7; }
.gm-stagger > :nth-child(9)  { --gm-i: 8; }  .gm-stagger > :nth-child(10) { --gm-i: 9; }
.gm-stagger > :nth-child(11) { --gm-i: 10; } .gm-stagger > :nth-child(12) { --gm-i: 11; }

/* Replaying: glass-motion.js toggles .gm-replay to restart the animations */
.gm-replay, .gm-replay > * { animation: none !important; }

@keyframes gm-rise  { from { opacity: 0; transform: translateY(var(--gm-rise)); filter: blur(var(--gm-blur)); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes gm-scale { from { opacity: 0; transform: scale(.94); filter: blur(var(--gm-blur)); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes gm-blur  { from { opacity: 0; filter: blur(var(--gm-blur)); } to { opacity: 1; filter: blur(0); } }
@keyframes gm-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes gm-left  { from { opacity: 0; transform: translateX(-14px); filter: blur(var(--gm-blur)); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- Word-by-word blur-in for headings ---------------------------- */
.gm-words > .gm-word { display: inline-block; white-space: pre; animation: gm-word 640ms var(--gm-ease) both; animation-delay: calc(var(--gm-i, 0) * 60ms + var(--gm-delay, 0ms)); }
@keyframes gm-word { from { opacity: 0; filter: blur(8px); transform: translateY(6px); } to { opacity: 1; filter: blur(0); transform: none; } }

/* ---------- Exit (used by page swap) ------------------------------------ */
.gm-out { animation: gm-out 220ms var(--gm-ease-io) both !important; pointer-events: none; }
@keyframes gm-out { to { opacity: 0; transform: translateY(-8px); filter: blur(6px); } }

/* ---------- Pages: show one [data-gm-page] at a time --------------------- */
[data-gm-page] { display: none; }
[data-gm-page].is-active { display: block; }

/* ---------- Hover lift (cards, kanban cards, tiles) ---------------------- */
.gm-lift { transition: transform 220ms var(--gm-ease), box-shadow 220ms var(--gm-ease); }
.gm-lift:hover { transform: translateY(var(--gm-lift)); box-shadow: 0 18px 40px rgba(0,0,0,.18), inset 0 1px 0 var(--g-highlight, rgba(255,255,255,.1)); }
.gm-press:active { transform: scale(.985); }

/* ---------- Bars grow from the bottom ------------------------------------ */
.gm-grow .g-bar__fill, .gm-grow > .gm-bar-fill {
  transform-origin: bottom; animation: gm-grow 700ms var(--gm-ease) both;
  animation-delay: calc(var(--gm-i, 0) * 60ms + 200ms);
}
.gm-grow .g-bar:nth-child(1) .g-bar__fill { --gm-i: 0; } .gm-grow .g-bar:nth-child(2) .g-bar__fill { --gm-i: 1; }
.gm-grow .g-bar:nth-child(3) .g-bar__fill { --gm-i: 2; } .gm-grow .g-bar:nth-child(4) .g-bar__fill { --gm-i: 3; }
.gm-grow .g-bar:nth-child(5) .g-bar__fill { --gm-i: 4; } .gm-grow .g-bar:nth-child(6) .g-bar__fill { --gm-i: 5; }
.gm-grow .g-bar:nth-child(7) .g-bar__fill { --gm-i: 6; }
@keyframes gm-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Rings / progress draw in */
.gm-draw .ring, .gm-draw .g-progress__fill { transition: stroke-dashoffset 900ms var(--gm-ease) 150ms, width 900ms var(--gm-ease) 150ms; }

/* ---------- Sliding indicator for .g-segment / nav pills ----------------- */
.g-segment[data-gm-slider] { position: relative; isolation: isolate; }
.g-segment[data-gm-slider] .g-segment__indicator {
  position: absolute; top: 3px; left: 0; height: calc(100% - 6px); width: 0; border-radius: var(--g-radius-pill, 999px);
  background: var(--g-surface-strong); box-shadow: 0 1px 2px rgba(0,0,0,.12); z-index: 0;
  transition: transform 360ms var(--gm-ease), width 360ms var(--gm-ease);
}
.g-segment[data-gm-slider] .g-segment__item { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; transition: color 200ms var(--gm-ease), filter 200ms var(--gm-ease); }
.g-segment[data-gm-slider].is-moving .g-segment__item[aria-pressed="true"] { filter: blur(1.5px); }
/* solid variant: dark pill with inverted label, as in a top nav */
.g-segment--solid[data-gm-slider] .g-segment__indicator { background: var(--g-text); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.g-segment--solid .g-segment__item[aria-pressed="true"] { color: var(--g-bg); }

/* ---------- Theme crossfade --------------------------------------------- */
/* 1.0.2: slower, like turning a page - the old page fades and slides out to the left, the new one slides in from the right.
   Tune with --gm-theme-dur on :root (default 900ms). */
.gm-theming, .gm-theming * { transition-duration: var(--gm-theme-dur, 900ms) !important; transition-timing-function: var(--gm-ease-io) !important; transition-property: background-color, color, border-color, box-shadow, fill, stroke !important; }
@keyframes gm-page-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-2.5%); } }
@keyframes gm-page-in  { from { opacity: 0; transform: translateX(2.5%); } to { opacity: 1; transform: translateX(0); } }
::view-transition-old(root) { animation: gm-page-out var(--gm-theme-dur, 900ms) var(--gm-ease-io) both; mix-blend-mode: normal; }
::view-transition-new(root) { animation: gm-page-in  var(--gm-theme-dur, 900ms) var(--gm-ease-io) both; mix-blend-mode: normal; }

/* ---------- Skeleton shimmer while loading ------------------------------- */
.gm-skeleton { position: relative; overflow: hidden; background: var(--g-track); border-radius: 8px; color: transparent !important; }
.gm-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); animation: gm-shimmer 1.4s infinite; }
@keyframes gm-shimmer { to { transform: translateX(100%); } }

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gm-in, .gm-stagger > *, .gm-words > .gm-word, .gm-grow .g-bar__fill, .gm-out { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .g-segment[data-gm-slider] .g-segment__indicator, .gm-lift { transition: none !important; }
  .gm-skeleton::after { animation: none; }
}