/* Cinematic layer on every page: page transitions, split-flap numbers, the quill loader */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    /* Logo, page heading and its panel morph; one element per name on each page */
    body.hp-ui :is(.hp-header .hp-logo, .hpg-header .hp-logo, .site-header :is(.brand, .brand-logo) > img, .admin-sidebar-brand img, .feature-brand > img) { view-transition-name: hp-logo; }
    body.hp-ui :is(#heroTitle, .hpg-banner-title, .page-shell > .hero h1) { view-transition-name: hp-title; }
    body.hp-ui :is(.hp-hero, .hpg-banner, .page-shell > .hero) { view-transition-name: hp-card; }
    /* A heading or panel with no partner on the next page just fades */
    ::view-transition-old(*):only-child { animation: hpVtOut .2s ease both; }

    ::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
    ::view-transition-old(root) { animation: hpVtOut .22s ease-in both; }
    ::view-transition-new(root) { animation: hpVtIn .46s .06s cubic-bezier(.2, .8, .2, 1) both; }

    /* Into the sign-in pages only the logo travels; a raking blade uncovers the rest */
    html:has(> body.hp-auth)::view-transition-old(root) { animation: hpVtDim .6s cubic-bezier(.7, 0, .2, 1) both; }
    html:has(> body.hp-auth)::view-transition-new(root) { animation: hpVtBlade .62s cubic-bezier(.7, 0, .2, 1) both; }
    html[dir="rtl"]:has(> body.hp-auth)::view-transition-new(root) { animation-name: hpVtBladeRtl; }

    /* Admin: a quiet cross-fade only */
    html:has(> body.hp-admin)::view-transition-group(*) { animation-duration: .2s; }
    html:has(> body.hp-admin)::view-transition-old(root) { animation: hpVtOut .16s ease both; }
    html:has(> body.hp-admin)::view-transition-new(root) { animation: hpVtFade .2s ease both; }
}
@keyframes hpVtOut { to { opacity: 0; } }
@keyframes hpVtFade { from { opacity: 0; } }
@keyframes hpVtIn { from { opacity: 0; transform: translateY(14px); } }
@keyframes hpVtDim { to { opacity: .4; transform: translateX(-3%); } }
@keyframes hpVtBlade { from { clip-path: polygon(110% 0, 130% 0, 120% 100%, 100% 100%); } to { clip-path: polygon(-30% 0, 130% 0, 120% 100%, -40% 100%); } }
@keyframes hpVtBladeRtl { from { clip-path: polygon(-30% 0, -10% 0, 0 100%, -20% 100%); } to { clip-path: polygon(-30% 0, 130% 0, 140% 100%, -20% 100%); } }

/* ---------- Split-flap numbers ---------- */
body.hp-ui .hp-flip {
    --hpf-top: #fbf7ef; --hpf-bot: #f2eadb; --hpf-ink: var(--hx-ink); --hpf-edge: rgba(184, 137, 74, .55);
    display: inline-flex; align-items: center; vertical-align: -.1em; white-space: pre;
    font-family: var(--hx-f-display); font-weight: 400; font-style: normal; line-height: 1; letter-spacing: 0;
}
html[data-hp-theme="dark"] body.hp-ui .hp-flip,
body.hp-ui :is(.hp-plan.is-featured, .hp-hero, .hp-story-copy) .hp-flip { --hpf-top: #183026; --hpf-bot: #12261d; --hpf-ink: #f4ecdd; --hpf-edge: rgba(217, 178, 119, .5); }
body.hp-ui .hp-flip-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.hp-ui .hp-flip-face { display: inline-flex; align-items: center; gap: .06em; }
body.hp-ui .hpf-c {
    position: relative; display: inline-block; width: .72em; height: 1.1em; border-radius: .1em; color: var(--hpf-ink);
    background: linear-gradient(var(--hpf-top) 50%, var(--hpf-bot) 50%);
    box-shadow: inset 0 0 0 1px var(--hpf-edge), 0 .05em .1em -.03em rgba(8, 26, 19, .35);
    perspective: 2.6em;
}
body.hp-ui .hpf-c::before, body.hp-ui .hpf-f::before, body.hp-ui .hpf-s::before {
    content: attr(data-v); display: flex; align-items: center; justify-content: center;
}
body.hp-ui .hpf-c::before, body.hp-ui .hpf-f::before { position: absolute; inset: 0; padding-top: .06em; }
/* The hinge */
body.hp-ui .hpf-c::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: rgba(8, 26, 19, .3); box-shadow: 0 1px 0 rgba(255, 255, 255, .22); }
body.hp-ui .hpf-s { padding-inline: .03em; }
body.hp-ui .hpf-f { position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: inherit; box-shadow: inset 0 0 0 1px var(--hpf-edge); backface-visibility: hidden; transform-origin: 50% 50%; }
body.hp-ui .hpf-t { clip-path: inset(0 0 50% 0); z-index: 3; }
body.hp-ui :is(.hpf-b, .hpf-b0) { clip-path: inset(50% 0 0 0); }
body.hp-ui .hp-price .hp-flip { font-size: .9em; }
body.hp-ui.hp-app .metric-value .hp-flip { font-size: .82em; }
body.hp-ui .hp-calc-name .hp-flip { margin-inline: .15em; }
body.hp-ui .hp-demo-stat .hp-flip { font-size: 1.3rem; min-width: 0; }
body.hp-ui .hp-calc-name .hp-flip span { font-size: 1.35rem; font-weight: 400; color: var(--hpf-ink); }
@media print { body.hp-ui .hpf-f { display: none; } }

/* ---------- The quill loader ---------- */
.hp-ql-on > :not(.hp-ql):not(#estimateText) { display: none !important; }
body.hp-ui .hp-ql { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(440px, 100%); margin-inline: auto; text-align: center; }
body.hp-ui .hp-ql-sig { display: block; width: min(330px, 78%); height: auto; overflow: visible; direction: ltr; }
body.hp-ui .hp-ql-sig path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui .hp-ql-ghost { stroke: color-mix(in srgb, var(--hx-quill) 16%, transparent); stroke-width: 2.2; }
body.hp-ui .hp-ql-ink { stroke: var(--hx-quill); stroke-width: 2.6; filter: drop-shadow(0 0 .6px color-mix(in srgb, var(--hx-quill) 60%, transparent)); }
body.hp-ui .hp-ql-nib path { fill: #7c5524; stroke: none; }
body.hp-ui .hp-ql-nib .hp-ql-vane { fill: var(--hx-quill); opacity: .85; }
html[data-hp-theme="dark"] body.hp-ui .hp-ql-nib path { fill: var(--hx-cream); }
body.hp-ui .hp-ql-label { margin-top: 4px; font: 600 1.02rem/1.4 var(--hx-f-body); color: var(--hx-ink); }
body.hp-ui .hp-ql-line { min-height: 1.5em; font-size: .92rem; line-height: 1.5; color: var(--hx-ink-3); }
body.hp-ui .hp-ql-meta { display: inline-flex; align-items: center; gap: 10px; margin-top: 2px; color: var(--hx-ink-3); font: 500 .76rem/1 var(--hx-f-mono); }
body.hp-ui .hp-ql-bar { width: 120px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--hx-line); }
body.hp-ui .hp-ql-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--hx-royal), var(--hx-quill)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s linear; }
[dir="rtl"] body.hp-ui .hp-ql-bar i { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--hx-royal), var(--hx-quill)); }
body.hp-ui .hp-ql-float { position: fixed; z-index: 60; inset-inline: 16px; bottom: 16px; margin-inline: auto; width: min(380px, calc(100% - 32px)); padding: 16px 18px; border-radius: 20px; background: var(--hx-surface); border: 1px solid var(--hx-line); box-shadow: var(--hx-shadow-lg); }
body.hp-ui .hp-ql-float .hp-ql-sig { width: 200px; }