/* ==========================================================================
   Sawti — Motion Layer (v1)
   Single central motion system. Pure CSS only: no JS library, no Framer
   Motion (the site is vanilla HTML/CSS/JS, so a React library would force
   a rewrite). This file only adds transition / animation / transform /
   opacity / box-shadow. It never changes layout, colours, sizes or text.
   Existing cinematic timings (hero fan 1.4s, dialect fan 1.2s) are
   deliberately preserved: they are part of the product feel, not UI chrome.
   --------------------------------------------------------------------------
   Tokens:
     durations: fast 150ms · normal 300ms · slow 600ms
     easing:    --motion-ease (soft, no bounce) · --motion-ease-out
     distance:  8px (subtle) · 16px (standard) · 24px (max, sections only)
     scale:     max 1.02 on hover, 0.98 on press. No rotation except the
                existing logo ring (Super Agent only, untouched here).
   Reduced motion: everything in this file is switched off below.
   ========================================================================== */
:root{
  --motion-fast:150ms;
  --motion-normal:300ms;
  --motion-slow:600ms;
  --motion-ease:cubic-bezier(.16,1,.3,1);
  --motion-ease-out:cubic-bezier(.23,1,.32,1);
  --motion-rise:16px;
  --motion-rise-sm:8px;
  --motion-rise-lg:24px;
}

@keyframes motion-fade-rise{
  from{opacity:0;transform:translateY(var(--motion-rise))}
  to{opacity:1;transform:translateY(0)}
}
@keyframes motion-fade-rise-sm{
  from{opacity:0;transform:translateY(var(--motion-rise-sm))}
  to{opacity:1;transform:translateY(0)}
}
@keyframes motion-fade-in{from{opacity:0}to{opacity:1}}
@keyframes motion-eq{
  0%,100%{transform:scaleY(.35)}
  50%{transform:scaleY(1)}
}
@keyframes motion-spin-soft{to{transform:rotate(360deg)}}

/* NOTE: page/section entry animation REMOVED (v136).
   It used transform with fill-mode both on .view/.trow, which permanently
   creates a stacking context around the dialect fan and traps
   .dfan.has-open (z-index 140) below .dialect-blur (z-index 130),
   so the blur covered the open card. The original .rv reveal
   (transform:none when .in) already gives the entry motion and does
   not trap stacking, so it is left to do that job alone. */

/* ---------- Cards: light lift + shadow on hover, soft press ---------- */
.voice-card,.plan-card,.project-card,.sample-card,.scard,.feat-card,.how-card,
.stat-card,.history-item,.card,.mcp-card,.agent-poster{
  transition:transform var(--motion-normal) var(--motion-ease),
    box-shadow var(--motion-normal) var(--motion-ease),
    border-color var(--motion-normal) var(--motion-ease);
}
.voice-card:hover,.plan-card:hover,.project-card:hover,.sample-card:hover,
.scard:hover,.feat-card:hover,.how-card:hover,.stat-card:hover,
.history-item:hover,.card:hover,.mcp-card:hover,.agent-poster:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
.voice-card:active,.plan-card:active,.project-card:active,.sample-card:active,
.scard:active,.feat-card:active,.how-card:active,.stat-card:active,
.history-item:active,.card:active,.mcp-card:active,.agent-poster:active{
  transform:translateY(0) scale(.98);
  transition-duration:var(--motion-fast);
}

/* ---------- Buttons: hover / active / loading / disabled ---------- */
.btn,.chip,.icon-btn,.seg-btn,.rail-link,.tab,.improve-btn,.fx-chip,.dir-chip{
  transition:transform var(--motion-normal) var(--motion-ease),
    background-color var(--motion-normal) var(--motion-ease),
    border-color var(--motion-normal) var(--motion-ease),
    box-shadow var(--motion-normal) var(--motion-ease),
    opacity var(--motion-normal) var(--motion-ease);
}
.btn:hover,.chip:hover,.icon-btn:hover,.seg-btn:hover,.rail-link:hover,
.tab:hover,.improve-btn:hover,.fx-chip:hover,.dir-chip:hover{
  transform:translateY(-1px);
}
.btn:active,.chip:active,.icon-btn:active,.seg-btn:active,.rail-link:active,
.tab:active,.improve-btn:active,.fx-chip:active,.dir-chip:active{
  transform:translateY(0) scale(.98);
  transition-duration:var(--motion-fast);
}
.btn:disabled,.chip:disabled,.icon-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.btn.generating,.btn.working,.btn[aria-busy="true"]{
  animation:motion-fade-in var(--motion-slow) var(--motion-ease) infinite alternate;
  opacity:.75;
  pointer-events:none;
}

/* ---------- Audio player: live waveform + smooth play/pause ---------- */
.vsec-play,.wave-play,.vtile-play,.preview-btn,.scard-play{
  transition:transform var(--motion-normal) var(--motion-ease),
    background-color var(--motion-normal) var(--motion-ease);
}
.vsec-play:hover,.wave-play:hover,.vtile-play:hover,.preview-btn:hover,.scard-play:hover{
  transform:scale(1.05);
}
.vsec-play:active,.wave-play:active,.vtile-play:active,.preview-btn:active,.scard-play:active{
  transform:scale(.96);
  transition-duration:var(--motion-fast);
}
.eq-bars i,.vbars i{
  transform-origin:center;
  animation:motion-eq 1s var(--motion-ease) infinite;
}
.eq-bars i:nth-child(2),.vbars i:nth-child(2){animation-delay:.15s}
.eq-bars i:nth-child(3),.vbars i:nth-child(3){animation-delay:.3s}
.eq-bars i:nth-child(4),.vbars i:nth-child(4){animation-delay:.45s}
.playing .eq-bars i,.speaking .eq-bars i,
.playing .vbars i,.speaking .vbars i{animation-play-state:running}
:not(.playing):not(.speaking) .eq-bars i,
:not(.playing):not(.speaking) .vbars i{animation-play-state:paused;transform:scaleY(.35)}

/* ---------- Inputs: focus animation, gentle error entry ---------- */
input,select,textarea{
  transition:border-color var(--motion-normal) var(--motion-ease),
    box-shadow var(--motion-normal) var(--motion-ease);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field-error,.form-err,.alert{
  animation:motion-fade-rise-sm var(--motion-normal) var(--motion-ease) both;
}
input.invalid,select.invalid,textarea.invalid{
  border-color:var(--danger);
  animation:motion-fade-rise-sm var(--motion-fast) var(--motion-ease) both;
}

/* ---------- Menus, drawers, modals, toast: smooth open/close ---------- */
.modal-card,.modal-box{
  animation:motion-fade-rise var(--motion-normal) var(--motion-ease) both;
}
.profile-drawer,.main-drawer{
  transition:transform var(--motion-normal) var(--motion-ease),
    visibility 0s linear var(--motion-normal);
}
.profile-drawer.open,.main-drawer.open{
  transition:transform var(--motion-normal) var(--motion-ease);
}
.drawer-backdrop,.main-backdrop{
  transition:opacity var(--motion-normal) var(--motion-ease);
}
.toast{
  transition:opacity var(--motion-normal) var(--motion-ease),
    transform var(--motion-normal) var(--motion-ease);
}
.toast:not(.hidden){
  animation:motion-fade-rise-sm var(--motion-normal) var(--motion-ease) both;
}
.promo-banner{
  animation:motion-fade-rise-sm var(--motion-normal) var(--motion-ease) both;
}
details.faq[open ] .faq-body,
.faq[open ] .faq-body{animation:motion-fade-rise-sm var(--motion-normal) var(--motion-ease) both}

/* ---------- Steps / progress: smooth fill, no jump ---------- */
.steps-fill,.mm-track > *,.tokens-meter .mm-track > *{
  transition:transform var(--motion-slow) var(--motion-ease),
    width var(--motion-slow) var(--motion-ease);
}

/* ---------- Reduced motion: everything off ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}