/* ══ Rhythme — cute motion layer ══ */

/* entrance: cards float up in sequence */
@keyframes rise { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
.scroll > * { animation: rise .55s cubic-bezier(.22,1,.36,1) backwards; }
.scroll > *:nth-child(1){animation-delay:.05s} .scroll > *:nth-child(2){animation-delay:.13s}
.scroll > *:nth-child(3){animation-delay:.21s} .scroll > *:nth-child(4){animation-delay:.29s}
.scroll > *:nth-child(5){animation-delay:.37s} .scroll > *:nth-child(6){animation-delay:.45s}
.scroll > *:nth-child(7){animation-delay:.53s} .scroll > *:nth-child(8){animation-delay:.61s}

/* pastel dots drift like dust motes */
@keyframes drift { 0%,100%{ transform:translate(0,0) } 33%{ transform:translate(6px,-10px) } 66%{ transform:translate(-5px,-4px) } }
.dots i { animation: drift 9s ease-in-out infinite; }
.dots i:nth-child(2){ animation-duration:11s; animation-delay:-3s }
.dots i:nth-child(3){ animation-duration:13s; animation-delay:-6s }
.dots i:nth-child(4){ animation-duration:10s; animation-delay:-1.5s }

/* rings draw themselves in */
@keyframes ringdraw { from { stroke-dashoffset: var(--len, 600); } to { stroke-dashoffset: 0; } }
svg .drawin { animation: ringdraw 1.4s cubic-bezier(.4,0,.2,1) backwards; }

/* gentle breathing for hero icons */
@keyframes breathe2 { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.07) } }
.breathe { animation: breathe2 3.6s ease-in-out infinite; transform-origin:center; }

/* sway for the spa/phase icon */
@keyframes sway { 0%,100%{ transform:rotate(-6deg) } 50%{ transform:rotate(6deg) } }
.sway { animation: sway 4.5s ease-in-out infinite; transform-origin:50% 90%; display:inline-block; }

/* sparkle twinkle */
@keyframes twinkle { 0%,100%{ transform:scale(1) rotate(0deg); opacity:1 } 50%{ transform:scale(1.25) rotate(18deg); opacity:.75 } }
.twinkle { animation: twinkle 2.6s ease-in-out infinite; display:inline-block; }

/* heartbeat */
@keyframes beat { 0%,100%{transform:scale(1)} 12%{transform:scale(1.22)} 24%{transform:scale(1)} 36%{transform:scale(1.14)} 48%{transform:scale(1)} }
.beat { animation: beat 1.8s ease-in-out infinite; display:inline-block; transform-origin:center; }

/* tap feedback — squish */
.chip, .btn, .day, .tab, .lrow, .g-card, .nav a, .metric { transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s, background .2s; }
.chip:active, .day:active, .tab:active, .metric:active { transform: scale(.93); }
.btn:active { transform: scale(.97); }
.nav a:active .n-ic { transform: scale(1.25); }
.nav a .n-ic { transition: transform .18s cubic-bezier(.34,1.56,.64,1); }

/* pop when a chip gets selected */
@keyframes pop { 0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)} }
.chip.pop { animation: pop .32s cubic-bezier(.34,1.56,.64,1); }

/* wiggle for playful icons */
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-9deg)} 75%{transform:rotate(9deg)} }
.chip.on .c-ic { animation: wiggle .4s ease-in-out; display:inline-block; }

/* nav active bounce-in dot */
.nav a.on { position:relative; }
.nav a.on::after { content:""; position:absolute; top:-2px; width:5px; height:5px; border-radius:50%;
  background:var(--terracotta); animation: pop .4s cubic-bezier(.34,1.56,.64,1); }

/* floating hero art */
@keyframes floaty2 { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
.floaty { animation: floaty2 5s ease-in-out infinite; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@keyframes bloomSpin { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
.spin-soft { animation: bloomSpin 5s ease-in-out infinite; transform-origin:center; }

/* ══ v2 — livelier motion across the whole app ══ */
/* living aurora background */
@keyframes auroraShift {
  0%,100% { transform: translate3d(0,0,0) scale(1);   filter: blur(26px) saturate(1.12) hue-rotate(0deg); }
  50%     { transform: translate3d(0,-2%,0) scale(1.06); filter: blur(30px) saturate(1.2) hue-rotate(10deg); }
}
.washes::before { animation: auroraShift 20s ease-in-out infinite; }
/* flower-of-life drifts */
@keyframes flospin { to { transform: translateX(-50%) rotate(360deg); } }
.dots::before, .phone > .aura { animation: flospin 140s linear infinite; }

/* soft shimmer sweep over tinted hero cards */
.card { position:relative; }
@keyframes shimmer { 0%{ background-position:-160% 0; } 55%,100%{ background-position:160% 0; } }
.card.tint-blush::after, .card.tint-sage::after, .card.tint-gold::after, .card.tint-lavender::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.30) 48%, transparent 64%);
  background-size:220% 100%; animation:shimmer 7s ease-in-out infinite; mix-blend-mode:soft-light;
}

/* hover / press lift on cards */
.card, .g-card, .lrow { transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .2s; }
@media (hover:hover){ .card:hover, .g-card:hover, .lrow:hover { transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(110,70,84,.42); } }
.card:active, .lrow:active { transform:scale(.992); }

/* more entrance stagger slots */
.scroll > *:nth-child(9){animation-delay:.69s}  .scroll > *:nth-child(10){animation-delay:.77s}
.scroll > *:nth-child(11){animation-delay:.85s} .scroll > *:nth-child(12){animation-delay:.93s}
.scroll > *:nth-child(13){animation-delay:1.0s} .scroll > *:nth-child(14){animation-delay:1.07s}

/* page fade-in */
@keyframes pageIn { from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.app { animation: pageIn .42s ease; }

/* gentle pulse on status badges */
@keyframes softPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(159,167,143,0);} 50%{ box-shadow:0 0 0 5px rgba(159,167,143,.14);} }
.badge.ok { animation: softPulse 3.4s ease-in-out infinite; }
@keyframes softPulseW { 0%,100%{ box-shadow:0 0 0 0 rgba(229,180,92,0);} 50%{ box-shadow:0 0 0 5px rgba(229,180,92,.16);} }
.badge.warn { animation: softPulseW 3s ease-in-out infinite; }

/* ══ chart motion (auto-applied by appnav.js) ══ */
@keyframes drawLine { to { stroke-dashoffset: 0; } }
.anim-line { animation: drawLine 1.5s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.anim-bar { transform-origin: bottom; animation: growBar .9s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none; } }
.anim-fade { animation: fadeUp .7s ease backwards; }
@keyframes areaRise { from { opacity:0; transform:translateY(10px) scaleY(.85);} to { opacity:1; transform:none; } }
.anim-area { transform-origin:bottom; animation: areaRise 1.1s cubic-bezier(.22,1,.36,1) backwards; }

/* Cancelling an entrance animation must reveal its final content. appnav sets
   an inline dash offset before adding anim-line; override only that animation,
   not measurement/progress rings whose offsets carry actual state. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .anim-line, svg .drawin { stroke-dashoffset: 0 !important; }
  .scroll > *, .anim-fade, .anim-area, .anim-bar { opacity: 1; }
  .card:hover, .card:active, .g-card:hover, .lrow:hover, .lrow:active,
  .chip:active, .day:active, .tab:active, .metric:active, .btn:active,
  .nav a:active .n-ic { transform: none; }
  .card.tint-blush::after, .card.tint-sage::after,
  .card.tint-gold::after, .card.tint-lavender::after { display: none; }
}