/* Motion and manners. Every entrance keyframe only says where things come
   *from*; the end state is the element's own style, so nothing can get stuck
   hidden if an animation doesn't run. */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.3, 1.4, 0.45, 1);
}

/* ---------- screen changes: View Transitions ---------- */

#shell { view-transition-name: shell; }
nav { view-transition-name: nav; }
.toast { view-transition-name: toast; }

::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(shell) { overflow: clip; animation-duration: 0.42s; }
@media (min-width: 520px) and (min-height: 760px) {
  ::view-transition-group(shell) { border-radius: 34px; }
}
::view-transition-old(shell), ::view-transition-new(shell) { height: 100%; mix-blend-mode: normal; }

:root[data-vt='forward']::view-transition-old(shell) { animation: vt-park 0.42s var(--ease-out) both; }
:root[data-vt='forward']::view-transition-new(shell) { animation: vt-from-right 0.42s var(--ease-out) both; }
:root[data-vt='back']::view-transition-old(shell) { animation: vt-to-right 0.36s var(--ease-out) both; z-index: 1; }
:root[data-vt='back']::view-transition-new(shell) { animation: vt-unpark 0.36s var(--ease-out) both; }
:root[data-vt='tab']::view-transition-old(shell) { animation: fade-out 0.14s ease-in both; }
:root[data-vt='tab']::view-transition-new(shell) { animation: tab-in 0.32s var(--ease-out) both; }
:root[data-vt='fade']::view-transition-old(shell) { animation: fade-out 0.2s ease-in both; }
:root[data-vt='fade']::view-transition-new(shell) { animation: fade-in 0.36s ease-out both; }

::view-transition-group(nav), ::view-transition-group(toast) { animation: none; }
::view-transition-old(nav) { animation: fade-out 0.14s ease-in both; }
::view-transition-new(nav) { animation: none; }
::view-transition-old(toast) { display: none; }
::view-transition-new(toast) { animation: none; }

@keyframes vt-park { to { transform: translateX(-28%); filter: brightness(0.94); } }
@keyframes vt-from-right { from { transform: translateX(100%); } }
@keyframes vt-to-right { to { transform: translateX(100%); } }
@keyframes vt-unpark { from { transform: translateX(-28%); filter: brightness(0.94); } }
@keyframes tab-in { from { opacity: 0; transform: translateY(6px) scale(0.99); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------- the same, where View Transitions don't exist ---------- */

#shell.enter-forward > :not(nav):not(.toast) { animation: fb-right 0.34s var(--ease-out) backwards; }
#shell.enter-back > :not(nav):not(.toast) { animation: fb-left 0.32s var(--ease-out) backwards; }
#shell.enter-tab > :not(nav):not(.toast),
#shell.enter-fade > :not(nav):not(.toast) { animation: tab-in 0.3s var(--ease-out) backwards; }
@keyframes fb-right { from { opacity: 0; transform: translateX(36px); } }
@keyframes fb-left { from { opacity: 0; transform: translateX(-36px); } }

/* ---------- arrivals inside a screen ---------- */

.rise-in {
  animation: rise-in 0.46s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 45ms + 40ms);
}
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }

.fill-in { animation: fill-x 0.75s var(--ease-out) 0.2s backwards; transform-origin: left center; }
@keyframes fill-x { from { transform: scaleX(0); } }

/* the person page: the trend draws itself, then its readings pop in */
.trend svg path { stroke-dasharray: 600; animation: draw 1.1s cubic-bezier(0.45, 0, 0.2, 1) 0.25s backwards; }
.trend svg circle { transform-box: fill-box; transform-origin: center; animation: dot-pop 0.4s var(--spring) backwards; }
.trend svg circle:nth-of-type(1) { animation-delay: 0.45s; }
.trend svg circle:nth-of-type(2) { animation-delay: 0.65s; }
.trend svg circle:nth-of-type(3) { animation-delay: 0.85s; }
.trend svg circle:nth-of-type(4) { animation-delay: 1.05s; }
.trend svg circle:nth-of-type(n + 5) { animation-delay: 1.2s; }
.trend .big { display: inline-block; animation: rise-in 0.5s var(--ease-out) 0.15s backwards; }
@keyframes draw { from { stroke-dashoffset: 600; } }
@keyframes dot-pop { from { opacity: 0; transform: scale(0); } }

/* ---------- the intake ---------- */

.bubble-in { animation: bubble-in 0.42s var(--spring) backwards; }
.bubble.me.bubble-in { transform-origin: bottom right; }
.bubble.them.bubble-in { transform-origin: bottom left; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } }

.bubble.typing {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 5px;
  padding: 14px 16px; animation: bubble-in 0.3s var(--spring) backwards;
}
.bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dot-bounce 1s ease-in-out infinite; }
.bubble.typing i:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

.chip-pop { animation: chip-pop 0.55s var(--spring) backwards; }
@keyframes chip-pop { from { opacity: 0; transform: scale(0.4); } }

/* ---------- the bar ---------- */

nav a { position: relative; z-index: 1; }
.nav-ind {
  position: absolute; top: 7px; left: 0; z-index: 0;
  width: 58px; height: 32px; margin-left: -29px;
  border-radius: 16px; background: var(--plum-tint);
  pointer-events: none;
}
nav a.tab-pop svg { animation: tab-pop 0.5s var(--spring); }
@keyframes tab-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---------- toasts, sheets, the coach ---------- */

.toast { animation: toast-in 0.55s var(--spring); cursor: pointer; }
.toast.leaving { animation: toast-out 0.24s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(18px) scale(0.94); } }

/* no bar to sit above: drop in from the top instead of covering the screen's main button */
#shell:not(:has(> nav)) .toast { top: calc(14px + env(safe-area-inset-top)); bottom: auto; animation-name: toast-drop; }
#shell:not(:has(> nav)) .toast.leaving { animation-name: toast-lift; }
@keyframes toast-drop { from { opacity: 0; transform: translateY(-18px) scale(0.94); } }
@keyframes toast-lift { to { opacity: 0; transform: translateY(-10px) scale(0.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(0.97); } }

.scrim { animation: fade-in 0.35s ease-out backwards; }
.coach { animation: pop-up 0.6s var(--spring) 0.12s backwards; }
.coach-arrow { animation: fade-in 0.3s ease-out 0.45s backwards; }
@keyframes pop-up { from { opacity: 0; transform: translateY(24px) scale(0.96); } }

.sheet { animation: sheet-up 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.sheet > * { animation: rise-in 0.45s var(--ease-out) backwards; }
.sheet > :nth-child(2) { animation-delay: 0.12s; }
.sheet > :nth-child(3) { animation-delay: 0.18s; }
.sheet > :nth-child(4) { animation-delay: 0.24s; }
.sheet > :nth-child(5) { animation-delay: 0.3s; }
.sheet > :nth-child(n + 6) { animation-delay: 0.36s; }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ---------- getting something done ---------- */

.burst { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none; }
.burst > * { grid-area: 1 / 1; }
.burst .disc {
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); box-shadow: 0 14px 34px rgba(46, 125, 91, 0.35);
  animation: burst-disc 1.1s var(--spring) forwards;
}
.burst .ring { width: 86px; height: 86px; border-radius: 50%; border: 3px solid var(--green); opacity: 0; animation: ring 0.85s ease-out 0.12s forwards; }
.burst path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tick 0.36s ease-out 0.22s forwards; }
@keyframes burst-disc { 0% { opacity: 0; transform: scale(0); } 25%, 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.86); } }
@keyframes ring { 0% { opacity: 0.6; transform: scale(0.9); } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes tick { to { stroke-dashoffset: 0; } }

.switch.flip-on { animation: sw-on 0.28s ease; }
.switch.flip-off { animation: sw-off 0.28s ease; }
.switch.flip-on span { animation: knob-on 0.38s var(--spring); }
.switch.flip-off span { animation: knob-off 0.38s var(--spring); }
@keyframes sw-on { from { background: var(--plum-tint-2); } }
@keyframes sw-off { from { background: var(--plum); } }
@keyframes knob-on { from { transform: translateX(-20px); } }
@keyframes knob-off { from { transform: translateX(20px); } }

/* ---------- touch ---------- */

a, button, label { -webkit-tap-highlight-color: transparent; }

.btn, .big-btn, .dashed, a.card, button.card, .decide, .round, .choice, .pick, .shelf a, a.pill, .slot, nav a, .mk-link, .avatar[href] {
  transition: transform 0.16s cubic-bezier(0.3, 0.7, 0.4, 1), background-color 0.2s, box-shadow 0.2s, filter 0.2s;
}
.btn:active, .big-btn:active, .dashed:active, a.card:active, button.card:active, .decide:active,
.round:active, .choice:active, .pick:active, .shelf a:active, a.pill:active, .slot:active, .mk-link:active, .avatar[href]:active {
  transform: scale(0.97);
}
nav a:active svg { transform: scale(0.9); transition: transform 0.1s; }
a.row, button.row { transition: background-color 0.2s; }
a.row:active, button.row:active { background-color: var(--line-2); }

@media (hover: hover) {
  a.card:hover, .decide:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(30, 21, 38, 0.08); }
  a.row:hover, button.row:hover { background-color: #fbfafd; }
  .btn:hover, .big-btn:hover { filter: brightness(1.05); }
  .dashed:hover { border-color: var(--plum); color: var(--plum); }
}

:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; border-radius: 6px; }

/* small controls get a 44px target without growing visually */
.x, .back, .mk-signin, [data-act='remove-helper'] { position: relative; }
.x::after, .back::after, .mk-signin::after, [data-act='remove-helper']::after { content: ''; position: absolute; inset: -10px; }
.btn.quiet { min-height: 44px; }

/* ---------- waiting, and getting it wrong ---------- */

.is-busy { position: relative; pointer-events: none; }
.is-busy > *, .btn.is-busy { color: transparent; }
.is-busy > * { opacity: 0; }
.is-busy::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.card.is-busy::after, .btn.ghost.is-busy::after { border-color: var(--plum-tint-2); border-top-color: var(--plum); }
@keyframes spin { to { transform: rotate(360deg); } }

.f-bad { border-color: var(--ochre) !important; animation: shake 0.36s ease; }
.f-err.shake { animation: shake 0.36s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------- before the first screen ---------- */

.skel-screen { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; }
.skel-screen .wordmark { margin-bottom: 10px; }
.skel {
  border-radius: 14px;
  background: linear-gradient(90deg, #ebe6f2 0%, #f7f4fb 45%, #ebe6f2 90%);
  background-size: 300% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skel.line { height: 14px; border-radius: 7px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* landing: the demo is one tap away */
.mk-demo { display: flex; flex-direction: column; gap: 6px; }
.mk-demo .btn { gap: 8px; color: var(--plum); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}