/* ══════════════════════════════════════════════════════
   Vision Tracker — Microinteraction Keyframe Library
   All animations wrapped in no-preference media query.
   Reduced-motion users get instant state changes only.
   ══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 1. INLINE EDIT SHIMMER ── */
@keyframes editShimmer {
  0%   { background-position: -250% center; }
  100% { background-position: 250% center; }
}
.field-shimmer {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,151,58,.08) 35%,
    rgba(200,151,58,.22) 50%,
    rgba(200,151,58,.08) 65%,
    transparent 100%) !important;
  background-size: 300% 100% !important;
  animation: editShimmer 350ms ease forwards;
}
.field-active-glow {
  border-left: 3px solid #C8973A !important;
  background: #fffcf4 !important;
}

/* ── 2. AUTOSAVE SVG CHECKMARK ── */
@keyframes checkDraw {
  0%   { stroke-dashoffset: 32; opacity: 0; }
  15%  { opacity: 1; }
  55%  { stroke-dashoffset: 0; }
  82%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.save-check-path {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: checkDraw 2.0s cubic-bezier(.4,0,.2,1) forwards;
}

/* ── 3. TASK ROW SPRING REORDER ── */
@keyframes springLift {
  0%   { transform: translateY(0)   scale(1);    box-shadow: none; }
  12%  { transform: translateY(-3px) scale(1.015); box-shadow: 0 8px 20px rgba(0,0,0,.11); }
  100% { transform: translateY(0)   scale(1);    box-shadow: none; }
}
.row-spring { animation: springLift 280ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* ── 4. ADD MILESTONE SPRING ── */
@keyframes milestoneIn {
  0%   { transform: scale(0);    opacity: 0; }
  55%  { transform: scale(1.1);  opacity: 1; }
  78%  { transform: scale(0.95); }
  100% { transform: scale(1);    opacity: 1; }
}
.milestone-entering {
  animation: milestoneIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Arrow draw-in alongside new milestone */
@keyframes arrowDraw {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
.arrow-draw { animation: arrowDraw 250ms ease-out 80ms both; }

/* ── 5. REMOVE MILESTONE BUBBLE POP ── */
@keyframes milestoneOut {
  0%   { transform: scale(1);   opacity: 1; }
  40%  { transform: scale(1.05); }
  100% { transform: scale(0);   opacity: 0; }
}
@keyframes bubblePop {
  0%   { transform: scale(0.9); opacity: .55; }
  100% { transform: scale(2.8); opacity: 0;   }
}
.milestone-exiting { animation: milestoneOut 200ms ease-in forwards; }
.bubble-pop {
  position: absolute; inset: 0;
  border: 2px solid rgba(200,151,58,.45);
  border-radius: 12px;
  pointer-events: none;
  animation: bubblePop 280ms ease-out forwards;
}

/* ── 6. CARD WATERMARK SWAY (pure CSS hover) ── */
@keyframes flowerSway {
  0%,100% { transform: rotate(0deg); }
  28%      { transform: rotate( 3deg); }
  72%      { transform: rotate(-3deg); }
}
.project-card .card-watermark {
  transition: opacity .25s;
}
.project-card:hover .card-watermark svg {
  transform-origin: bottom center;
  animation: flowerSway 2s ease-in-out infinite;
}
/* decelerate on leave — achieved by letting the animation finish its current cycle */

/* ── 7a. PRIORITY LOW→MEDIUM flame ── */
@keyframes flameFlicker {
  0%,100% { transform: scaleY(1)    translateY(0); opacity: 1;  }
  30%      { transform: scaleY(1.3)  translateY(-3px); opacity: .9; }
  60%      { transform: scaleY(0.85) translateY(1px); opacity: .7; }
}
.flame-icon { animation: flameFlicker 250ms ease 2 forwards; }

/* ── 7b. PRIORITY MEDIUM→HIGH sparks handled in JS canvas ── */
@keyframes badgeBurst {
  0%   { transform: scale(1);   }
  45%  { transform: scale(1.15); }
  100% { transform: scale(1);   }
}
.badge-burst { animation: badgeBurst 220ms cubic-bezier(0.34,1.56,0.64,1); }

/* ── 7c. PRIORITY HIGH→LOW exhale rings ── */
@keyframes exhaleRing {
  0%   { transform: scale(0.6); opacity: .5; }
  100% { transform: scale(2.6); opacity: 0;  }
}

/* ── 8a. STATUS → ACTIVE confetti handled in JS ── */

/* ── 8b. STATUS → ON HOLD hourglass ── */
@keyframes hourglassTurn {
  0%   { transform: rotate(0deg);   opacity: 1; }
  80%  { transform: rotate(180deg); opacity: 1; }
  100% { transform: rotate(180deg); opacity: 0; }
}
.hourglass-anim { animation: hourglassTurn 700ms ease-in-out forwards; }

/* ── 8c. STATUS → COMPLETED star ── */
@keyframes starAppear {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  45%  { transform: scale(1.45) rotate(10deg); opacity: 1; }
  70%  { transform: scale(1) rotate(0deg);  opacity: 1; }
  88%  { transform: scale(1) rotate(0deg);  opacity: 1; }
  100% { transform: scale(0.5) rotate(0deg); opacity: 0; }
}
@keyframes starRay {
  from { transform: scaleX(0); opacity: 1; }
  to   { transform: scaleX(1); opacity: 0; }
}
.star-anim  { animation: starAppear 900ms cubic-bezier(0.34,1.2,0.64,1) forwards; }
.star-ray   { animation: starRay 350ms ease-out 400ms forwards; transform-origin: left center; }

/* ── 9. ADD TASK SPROUT ── */
@keyframes stemRise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes leafOpen {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}
@keyframes sproutFadeOut {
  0%,60% { opacity: 1; }
  100%   { opacity: 0; }
}
.sprout-wrap  { animation: sproutFadeOut 500ms ease forwards; pointer-events:none; }
.sprout-stem  { transform-origin: bottom center; animation: stemRise 200ms ease-out forwards; }
.sprout-leaf-l { transform-origin: right center; animation: leafOpen 150ms ease-out 190ms both; }
.sprout-leaf-r { transform-origin: left  center; animation: leafOpen 150ms ease-out 220ms both; }

/* ── 10. DELETE TASK CRUMPLE ── */
@keyframes crumple {
  0%   { transform: scaleY(1)    scaleX(1);    opacity: 1; }
  35%  { transform: scaleY(0.55) scaleX(0.98); opacity: .7; }
  70%  { transform: scaleY(0.2)  scaleX(0.96); opacity: .4; }
  100% { transform: scaleY(0)    scaleX(0.93); opacity: 0; max-height:0; margin:0; padding:0; }
}
.task-crumpling {
  animation: crumple 350ms ease-in forwards;
  overflow: hidden;
  pointer-events: none;
}

/* ── 10b. DELETE TRASH SHAKE ── */
@keyframes trashShake {
  0%,100% { transform: translateX(0); }
  18%     { transform: translateX(-3px) rotate(-5deg); }
  36%     { transform: translateX( 3px) rotate( 5deg); }
  54%     { transform: translateX(-3px) rotate(-3deg); }
  72%     { transform: translateX( 2px) rotate( 3deg); }
}
.trash-shake { animation: trashShake 300ms ease; }

/* ── 11. ENHANCED PETAL ── */
@keyframes petalEnhanced {
  0%   { opacity: 1;  transform: translateY(0)    rotate(var(--pr)) scale(1); }
  100% { opacity: 0;  transform: translateY(130px) rotate(calc(var(--pr) + 420deg)) scale(.48); }
}
.petal-enhanced {
  position: fixed; pointer-events: none; z-index: 9999;
  animation: petalEnhanced var(--pd,1.8s) ease-out var(--pdelay,0s) forwards;
}
/* golden pulse ring from checkbox */
@keyframes petalPulse {
  0%   { transform: scale(0.7); opacity: .85; }
  100% { transform: scale(3.2); opacity: 0;   }
}
.petal-ring {
  position: fixed; pointer-events: none; z-index: 9998;
  border-radius: 50%;
  border: 2.5px solid #C8973A;
  animation: petalPulse 550ms ease-out forwards;
}

/* ── 12. PAPER AIRPLANE ── */
@keyframes planeFly {
  0%   { offset-distance: 0%;   opacity: 1; }
  85%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ── 13. MODAL BLOOM ── */
@keyframes modalBloom {
  from { clip-path: circle(0% at var(--bx,50%) var(--by,50%)); }
  to   { clip-path: circle(150% at var(--bx,50%) var(--by,50%)); }
}
.overlay-bloom {
  animation: modalBloom 360ms cubic-bezier(0.34, 1.1, 0.64, 1) forwards !important;
  /* override the generic fadeIn */
}
.modal-pulse {
  animation: none !important;
  background: radial-gradient(ellipse at 50% 30%, #fffdf4 0%, #fff 60%) !important;
}

/* ── 14. CARD RIPPLE ── */
@keyframes cardRipple {
  from { transform: translate(-50%,-50%) scale(0); opacity: .55; }
  to   { transform: translate(-50%,-50%) scale(5); opacity: 0;   }
}
.card-ripple-el {
  position: absolute; width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.8);
  pointer-events: none;
  animation: cardRipple 320ms ease-out forwards;
  z-index: 5;
}

/* ── 15. LEAF DRIFT ── */
@keyframes leafDrift {
  0%   { transform: translateX(0)   translateY(0);              opacity: 1; }
  40%  { transform: translateX(35vw) translateY(var(--ly,-12px)); opacity: .85; }
  100% { transform: translateX(108vw) translateY(0);             opacity: 0; }
}
.leaf-drift {
  position: fixed; pointer-events: none; z-index: 8000;
  animation: leafDrift 520ms ease-in-out var(--ldelay,0s) forwards;
}

/* ── 15b. PAGE SLIDE TRANSITIONS ── */
@keyframes slideOutRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(32px); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-22px); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-exit-right { animation: slideOutRight 280ms ease forwards; }
.page-exit-left  { animation: slideOutLeft  280ms ease forwards; }
.page-enter-left { animation: slideInLeft   300ms ease both; }
.page-enter-up   { animation: slideInUp     320ms ease both; }

/* ── 16. EXPORT FLYING DOC ── */
@keyframes docFly {
  0%   { transform: translate(0,0)     rotate(0deg)  scale(1);   opacity: 1; }
  38%  { transform: translate(8px,-18px) rotate(6deg) scale(1.2); opacity: 1; }
  100% { transform: translate(16px,-58px) rotate(10deg) scale(.7); opacity: 0; }
}
.doc-fly { animation: docFly 420ms ease-out forwards; }

@keyframes exportGreen {
  0%,100% { background: var(--primary); box-shadow: 0 2px 10px rgba(200,151,58,.28); }
  50%     { background: #5A8A5A;       box-shadow: 0 4px 14px rgba(90,138,90,.38); color: #fff; }
}
.export-success { animation: exportGreen 400ms ease; }