/* animations.css — subtle/polished additive layer. Safe to remove. */

:root{
  --anim-ease: cubic-bezier(.2,.8,.2,1);
  --anim-fast: 140ms;
  --anim-med: 260ms;
  --anim-slow: 420ms;
}

/* App reveal — soften existing body opacity flip */
body{transition:opacity var(--anim-slow) var(--anim-ease)}

/* View enter — runs each time .view gains .active (JS toggles class) */
.view{will-change:opacity,transform}
.view.active{animation:viewEnter var(--anim-med) var(--anim-ease) both}
@keyframes viewEnter{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* Button micro-interactions */
button{transition:transform var(--anim-fast) var(--anim-ease), filter var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease)}
button:not(:disabled):active{transform:translateY(1px) scale(.985)}

/* Input focus glow */
input,textarea,select{transition:border-color var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease)}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14);
}

/* Scroll-reveal — opt-in via data-reveal attr */
[data-reveal]{opacity:0;transform:translateY(10px);transition:opacity var(--anim-slow) var(--anim-ease), transform var(--anim-slow) var(--anim-ease)}
[data-reveal].is-revealed{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:60ms}
[data-reveal][data-reveal-delay="2"]{transition-delay:120ms}
[data-reveal][data-reveal-delay="3"]{transition-delay:180ms}

/* Skeleton shimmer utility — add .skeleton class */
.skeleton{
  position:relative;overflow:hidden;
  background:linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 100%);
  background-size:200% 100%;
  animation:skeletonShimmer 1.4s linear infinite;
  border-radius:6px;
}
@keyframes skeletonShimmer{
  from{background-position:200% 0}
  to{background-position:-200% 0}
}

/* List stagger — opt-in via .anim-stagger on parent */
.anim-stagger > *{animation:itemRise var(--anim-med) var(--anim-ease) both}
.anim-stagger > *:nth-child(1){animation-delay:0ms}
.anim-stagger > *:nth-child(2){animation-delay:40ms}
.anim-stagger > *:nth-child(3){animation-delay:80ms}
.anim-stagger > *:nth-child(4){animation-delay:120ms}
.anim-stagger > *:nth-child(5){animation-delay:160ms}
.anim-stagger > *:nth-child(6){animation-delay:200ms}
.anim-stagger > *:nth-child(7){animation-delay:240ms}
.anim-stagger > *:nth-child(n+8){animation-delay:280ms}
@keyframes itemRise{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* Modal/overlay polish — apply to anything with .modal-open style overlays */
.modal,[id$="Modal"]{transition:opacity var(--anim-med) var(--anim-ease)}

/* Respect user preference */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .view.active{animation:none}
  [data-reveal]{opacity:1;transform:none}
}