/* =====================================================================
   Vaultornet Vero — v33 smoother transitions (loaded after v32.css)
   ===================================================================== */
:root { --v33-out: cubic-bezier(.22, 1, .36, 1); --v33-in: cubic-bezier(.4, 0, 1, 1); --v33-spring: cubic-bezier(.34, 1.36, .44, 1); }

/* ---- 1. Page to page (v33.js names the parts) ---- */
::view-transition-group(*) { animation-duration: .34s; animation-timing-function: var(--v33-out); }
::view-transition-old(root) { animation: v33-out .16s var(--v33-in) both; }
::view-transition-new(root) { animation: v33-in .24s var(--v33-out) both; }
/* The top bar, the menu and the Vero AI button stay still. */
::view-transition-group(vero-top), ::view-transition-group(vero-nav), ::view-transition-group(vero-fab),
::view-transition-old(vero-top), ::view-transition-old(vero-nav), ::view-transition-old(vero-fab),
::view-transition-new(vero-top), ::view-transition-new(vero-nav), ::view-transition-new(vero-fab) { animation: none; }
::view-transition-old(vero-top), ::view-transition-old(vero-nav), ::view-transition-old(vero-fab) { opacity: 0; }
/* The page content slides. */
::view-transition-group(vero-main) { animation: none; }
::view-transition-old(vero-main) { animation: v33-out-up .16s var(--v33-in) both; }
::view-transition-new(vero-main) { animation: v33-in-up .38s var(--v33-out) both; }
html[data-vt="fwd"]::view-transition-old(vero-main)  { animation-name: v33-out-left; }
html[data-vt="fwd"]::view-transition-new(vero-main)  { animation-name: v33-in-right; }
html[data-vt="back"]::view-transition-old(vero-main) { animation-name: v33-out-right; }
html[data-vt="back"]::view-transition-new(vero-main) { animation-name: v33-in-left; }
html[data-vt="phase"]::view-transition-old(vero-main) { animation: v33-out .12s linear both; }
html[data-vt="phase"]::view-transition-new(vero-main) { animation: v33-in .2s var(--v33-out) both; }
/* The highlighted menu entry glides to its new place. */
::view-transition-group(vero-pill) { animation-duration: .44s; animation-timing-function: var(--v33-spring); }
::view-transition-old(vero-pill), ::view-transition-new(vero-pill) { block-size: 100%; animation-duration: .3s; }
@keyframes v33-out { to { opacity: 0; } }
@keyframes v33-in { from { opacity: 0; } }
@keyframes v33-out-up { to { opacity: 0; transform: translateY(-6px); } }
@keyframes v33-in-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes v33-out-left { to { opacity: 0; transform: translateX(-28px); } }
@keyframes v33-in-right { from { opacity: 0; transform: translateX(36px); } }
@keyframes v33-out-right { to { opacity: 0; transform: translateX(28px); } }
@keyframes v33-in-left { from { opacity: 0; transform: translateX(-36px); } }

/* With a page transition the content already slides in as one piece, so
   the per-card rise from v32 stays off (only small tiles still stagger). */
html.vt-nav .vn-app .pf-main,
html.vt-nav .vn-app .pf-main > :not([data-phase-stage]) { animation: none; }
html.vt-nav .vn-kpis > *, html.vt-nav .vn-kpi-row > * { animation: v32-rise .42s var(--v33-out) backwards; }
.vn-kpis > :nth-child(2), .vn-kpi-row > :nth-child(2) { animation-delay: 40ms; }
.vn-kpis > :nth-child(3), .vn-kpi-row > :nth-child(3) { animation-delay: 80ms; }
.vn-kpis > :nth-child(n+4), .vn-kpi-row > :nth-child(n+4) { animation-delay: 120ms; }

/* ---- 2. Touch feedback ---- */
.btn:active, .pf-navlink:active, .vn-tab:active, .vn-tb-btn:active, .pf-navrow:active { transform: scale(.97); transition-duration: .08s; }
.pf-navlink, .pf-navdrop-item, .pf-navrow { transition: background-color .18s ease, color .18s ease, box-shadow .24s ease, transform .26s var(--v33-out), padding-left .22s var(--v33-out); }
.pf-navdrop-item:hover, .pf-navrow:hover { padding-left: 16px; }
.vn-card:hover, .pf-card:hover { box-shadow: 0 10px 28px -16px rgba(15, 30, 25, .25); }
input:focus, select:focus, textarea:focus { transition: box-shadow .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- 3. Menus drop open instead of appearing ---- */
.pf-navdrop::details-content { block-size: auto; overflow: visible; opacity: 1; transition: none; }
.pf-navdrop[open] > .pf-navdrop-panel { animation: v33-drop .22s var(--v33-out) both; transform-origin: top left; }
@keyframes v33-drop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.pf-navdrop > summary .vn-icon, .pf-navdrop > summary svg { transition: transform .26s var(--v33-out); }
.pf-navdrop[open] > summary .vn-icon, .pf-navdrop[open] > summary svg { transform: rotate(180deg); }
.vn-search:not([hidden]) .vn-search-box { animation: v32-pop .26s var(--v33-out) both; }
.vn-search:not([hidden]) { animation: v33-in .2s ease both; }
.pf-drawer-backdrop { transition: opacity .3s ease, visibility .3s; }

/* ---- 4. Messages arrive with a short drop ---- */
.vn-flash, .pf-flash, .flash, .alert { animation: v33-drop-in .38s var(--v33-out) backwards; }
@keyframes v33-drop-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---- 5. The pressed button shows it is working ---- */
.btn.v33-busy, button.v33-busy { position: relative; pointer-events: none; color: transparent !important; }
.btn.v33-busy > *, button.v33-busy > * { visibility: hidden; }
.btn.v33-busy::after, button.v33-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--v33-busy, currentColor); border-right-color: transparent; border-bottom-color: color-mix(in srgb, var(--v33-busy, #888) 30%, transparent);
  animation: v33-spin .7s linear infinite;
}
@keyframes v33-spin { to { transform: rotate(360deg); } }

/* ---- 6. Company profile: a question that depends on an earlier answer
        opens in place ---- */
.vn-pq[hidden] { display: none !important; }
.vn-pq-dep { border-left: 3px solid color-mix(in srgb, var(--color-accent, #2f8f5b) 55%, transparent); padding-left: 12px; }
.vn-pq-reveal { animation: v33-reveal .5s var(--v33-out) both; }
@keyframes v33-reveal {
  from { opacity: 0; transform: translateY(-8px); background: color-mix(in srgb, var(--color-accent, #2f8f5b) 14%, transparent); }
  60%  { opacity: 1; transform: none; background: color-mix(in srgb, var(--color-accent, #2f8f5b) 10%, transparent); }
  to   { background: transparent; }
}

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

/* The "Not answered" badge is drawn by CSS, so the page translator never
   sees it: give it its Hindi text here. */
html[lang="hi"] .vn-pq.is-missing .vn-pq-q::after { content: "उत्तर नहीं दिया"; }

/* v34 — agent 4 install step */
.vn-agent-dl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vn-agent-steps { margin: 10px 0 0; padding-left: 20px; font-size: 13px; color: var(--vn-soft); display: grid; gap: 4px; }
.vn-agent-steps b { color: var(--color-text); }
.vn-agent-more summary { cursor: pointer; color: var(--vn-soft); }
.vn-code pre { white-space: pre-wrap; word-break: break-all; }
.vn-demo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; background: #fff4d6; color: #7a5300; border: 1px solid #f0d48a; }