/* Vimbara: "calm planner". Slow, soft fades with long easing, icons that draw themselves, a labelled
   example of the "Tell it" bar, and an example savings ring that fills.
   Static styles first; anything that moves only runs under html.motion (see landing.js and demo.js). */
body { --stagger: .12; --calm: cubic-bezier(.22, 1, .36, 1); }

/* the "Tell it" example (a still picture without motion) */
.demo {
  position: relative; max-width: 460px; margin: 44px auto 0; padding: 18px; text-align: left;
  border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 30px 70px #000a;
}
.demo-tag {
  position: absolute; top: -10px; right: 16px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-accent); background: var(--a);
}
.tell { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #0b0b0d; font-size: 15px; }
.tell-ico svg { display: block; width: 18px; height: 18px; fill: none; stroke: var(--link); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tell-text { white-space: nowrap; overflow: hidden; }
.caret { flex: none; width: 2px; height: 1.15em; margin-left: -9px; border-radius: 1px; background: var(--a); }
.draft {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kind add" "title add" "detail add"; gap: 1px 12px; align-items: center;
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--a) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--a) 30%, var(--line));
}
.draft-kind { grid-area: kind; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.draft-title { grid-area: title; }
.draft-detail { grid-area: detail; font-size: 13.5px; color: var(--muted); }
.draft-add { grid-area: add; padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--on-accent); background: linear-gradient(135deg, var(--a), var(--b)); }

/* the example savings ring in the "Savings goals" card */
.ring { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.ring svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring-bg { stroke: var(--line); }
.ring-fg { stroke: var(--a); stroke-linecap: round; stroke-dasharray: 64 100; }

.note { position: relative; }

@keyframes vb-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vb-blink { 50% { opacity: 0; } }

/* hero: a slow, soft settle */
html.motion .hero.in .icon, html.motion .hero.in h1, html.motion .hero.in .lead, html.motion .hero.in .cta, html.motion .hero.in .meta { animation: vb-in 1.2s var(--calm) both; }
html.motion .hero.in h1 { animation-delay: .15s; }
html.motion .hero.in .lead { animation-delay: .3s; }
html.motion .hero.in .cta { animation-delay: .45s; }
html.motion .hero.in .meta { animation-delay: .6s; }

/* the example: fades in, then demo.js types each phrase and shows the card the app would draft */
html.motion .demo { opacity: 0; transform: translateY(calc(var(--dir, 1) * 20px)); transition: opacity 1.2s var(--calm) .5s, transform 1.2s var(--calm) .5s; }
html.motion .demo.in { opacity: 1; transform: none; }
html.motion .caret { animation: vb-blink 1s steps(1) infinite; }
html.motion .demo .draft { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--calm), transform .6s var(--calm); }
html.motion .demo .draft.show { opacity: 1; transform: none; }

/* cards drift in slowly and their icons draw themselves */
html.motion .card { opacity: 0; transform: translateY(calc(var(--dir, 1) * 16px)); transition: opacity 1s var(--calm) var(--d, 0s), transform 1.1s var(--calm) var(--d, 0s), border-color .3s; }
html.motion .card.in { opacity: 1; transform: none; }
html.motion .card h3 svg * { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s ease-in-out calc(var(--d, 0s) + .3s); }
html.motion .card.in h3 svg * { stroke-dashoffset: 0; }
html.motion .card:hover { border-color: color-mix(in srgb, var(--a) 40%, var(--line)); }
html.motion .ring-fg { stroke-dasharray: 0 100; transition: stroke-dasharray 1.8s var(--calm) calc(var(--d, 0s) + .6s); }
html.motion .card.in .ring-fg { stroke-dasharray: 64 100; }

/* the privacy note's line grows downward as it appears */
html.motion .note { opacity: 0; border-left-color: transparent; transition: opacity 1.2s var(--calm); }
html.motion .note::before { content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; background: var(--a); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.4s var(--calm) .2s; }
html.motion .note.in { opacity: 1; }
html.motion .note.in::before { transform: none; }

/* everything else settles in gently */
html.motion section h2, html.motion section .sub, html.motion details, html.motion .final .cta {
  opacity: 0; transform: translateY(calc(var(--dir, 1) * 12px)); transition: opacity 1.1s var(--calm) var(--d, 0s), transform 1.1s var(--calm) var(--d, 0s);
}
html.motion section h2.in, html.motion section .sub.in, html.motion details.in, html.motion .final .cta.in { opacity: 1; transform: none; }

/* FAQ answers open slowly */
@supports (interpolate-size: allow-keywords) {
  html.motion { interpolate-size: allow-keywords; }
  html.motion details::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size .5s var(--calm), opacity .5s var(--calm), content-visibility .5s allow-discrete; }
  html.motion details[open]::details-content { block-size: auto; opacity: 1; }
}

/* until the hero is on screen (and again after it has left), its parts wait hidden so the load
   animation replays each time you come back to the top */
html.motion .hero:not(.in) :is(.icon, h1, .lead, .cta, .meta) { opacity: 0; }

/* opening: calm. A soft teal veil, the icon drifts up into view, then the veil fades away slowly.
   Reveals start at --intro (landing.js). */
body { --intro: .9; }
@keyframes vb-veil { to { opacity: 0; visibility: hidden; } }
@keyframes vb-icon { 0% { opacity: 0; transform: translateY(16px) scale(.96); } 55% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
html.motion .intro {
  background: radial-gradient(60% 50% at 50% 45%, color-mix(in srgb, var(--a) 14%, var(--bg)), var(--bg));
  animation: vb-veil 1s var(--calm) .55s both;
}
.intro-icon { width: 88px; height: 88px; border-radius: 22px; }
html.motion .intro-icon { animation: vb-icon 1.2s var(--calm) both; }