/* Brand motion: calm, short, one easing. Loaded after app.css. All motion respects prefers-reduced-motion. */
:root { --ease: cubic-bezier(.22, .61, .36, 1); --t-fast: .16s; --t-base: .24s; }

/* ---------- Brand loader (inline SVG; variants orbit / tilt / flip / spiral / breath) ---------- */
.bl { display: block; width: var(--bl-size, 72px); height: var(--bl-size, 72px); color: var(--blue); overflow: visible; }
.bl .mark { fill: currentColor; }
.bl .mark path, .bl .mark circle { transform-box: fill-box; transform-origin: 50% 100%; animation: bl-bar 1.8s var(--ease) infinite; }
.bl .mark path:nth-child(2) { animation-delay: .12s; }
.bl .mark path:nth-child(3) { animation-delay: .24s; }
.bl .mark path:nth-child(4) { animation-delay: .36s; }
.bl .mark circle { animation-delay: .48s; transform-origin: 50% 50%; }
.bl .d { fill: currentColor; }
.bl .ring { transform-origin: 50px 50px; animation: bl-spin 2.4s linear infinite; }
.bl .tilt { transform-origin: 50px 50px; transform: rotate(-20deg) scaleY(.42); }
.bl .flip { transform-origin: 50px 50px; animation: bl-flip 2.4s ease-in-out infinite; }
.bl .breath { transform-origin: 50px 50px; animation: bl-breath 2.4s ease-in-out infinite; }
.bl .sp { transform-origin: 50px 50px; animation: bl-spiral 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.06s); }
.bl-tilt .d { opacity: .95; }
@keyframes bl-spin { to { transform: rotate(360deg); } }
@keyframes bl-bar { 0%, 100% { opacity: .35; transform: scaleY(.82); } 40% { opacity: 1; transform: scaleY(1); } }
@keyframes bl-flip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(-1); } }
@keyframes bl-breath { 0%, 100% { transform: scale(.72); } 50% { transform: scale(1); } }
@keyframes bl-spiral {
    0% { transform: rotate(var(--a)) translateX(0); opacity: .5; }
    50% { transform: rotate(calc(var(--a) + 360deg)) translateX(38px); opacity: 1; }
    100% { transform: rotate(calc(var(--a) + 720deg)) translateX(0); opacity: .5; }
}
.bl-slot { display: inline-flex; vertical-align: middle; --bl-size: 28px; }
.bl-slot.bl-lg { --bl-size: 72px; }

/* loader inside buttons: only the dot ring, drawn thicker */
.bl-btn { display: inline-flex; margin-inline-end: 8px; vertical-align: middle; }
.bl-btn .bl { --bl-size: 18px; color: currentColor; }
.bl-btn .bl .mark { display: none; }
.bl-btn .bl .d { stroke: currentColor; stroke-width: 6; }
button.is-busy, .btn-pill.is-busy, .btn-outline.is-busy { pointer-events: none; opacity: .85; cursor: progress; }
.add-cart-btn.is-busy > .icon, .add-cart-btn.is-busy > svg:not(.bl) { display: none; }
.add-cart-btn .bl-btn { margin: 0; display: flex; align-items: center; justify-content: center; }

/* ---------- Navigation progress bar + slow-network overlay ---------- */
#bl-bar { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none; opacity: 0; transform: scaleX(0); transform-origin: right center; background: linear-gradient(270deg, var(--blue), #4aa8ff); box-shadow: 0 0 8px rgba(26, 86, 184, .45); }
#bl-bar.on { opacity: 1; transform: scaleX(.85); transition: transform 12s cubic-bezier(.08, .7, .2, 1), opacity .1s; }
#bl-bar.done { opacity: 0; transform: scaleX(1); transition: transform .2s ease-out, opacity .35s .15s; }

#bl-ov { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; pointer-events: none; visibility: hidden; opacity: 0; background: rgba(255, 255, 255, .5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: opacity var(--t-base) var(--ease), visibility 0s var(--t-base); }
#bl-ov.show { visibility: visible; opacity: 1; transition: opacity var(--t-base) var(--ease); }
.bl-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 28px 16px; border-radius: 22px; background: #fff; color: #10213f; box-shadow: 0 14px 44px rgba(16, 33, 63, .2); font-size: .9rem; text-align: center; max-width: 80vw; animation: ov-pop var(--t-base) var(--ease); }
.bl-card .bl { --bl-size: 84px; }
.bl-text { font-weight: 600; line-height: 1.7; }
#bl-ov.slow .bl-text { font-weight: 500; color: #4a5a78; }
@keyframes ov-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } }
html.is-navigating .site-main { opacity: .6; transition: opacity var(--t-base) var(--ease); }
html.is-navigating .admin-main, html.is-navigating .admin .content { opacity: .75; transition: opacity var(--t-base); }

/* ---------- Page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: var(--ease); }
::view-transition-group(pimg) { animation-duration: .32s; animation-timing-function: var(--ease); }
::view-transition-old(pimg), ::view-transition-new(pimg) { height: 100%; object-fit: contain; }
.site-header { view-transition-name: site-header; }
.bottom-nav { view-transition-name: bottom-nav; }
::view-transition-group(site-header), ::view-transition-group(bottom-nav) { animation-duration: 0s; }
.page-enter { animation: pg-in .24s var(--ease); }
@keyframes pg-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Scroll reveal ---------- */
.rv { opacity: 0; translate: 0 14px; transition: opacity .45s var(--ease) var(--rv-d, 0ms), translate .45s var(--ease) var(--rv-d, 0ms), transform .2s, box-shadow .2s, background .15s, border-color .15s; }
.rv.rv-in { opacity: 1; translate: 0 0; }

/* ---------- Micro-interactions ---------- */
.btn-pill:active, .add-cart button:active, .card-more:active, .icon-btn:active { transform: scale(.97); }
.product-card:hover { transform: translateY(-3px); }
.product-card .thumb img { transition: transform .35s var(--ease); }
.product-card:hover .thumb img { transform: scale(1.03); }
.bump { animation: cnt-bump .5s var(--ease); }
@keyframes cnt-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.add-cart-btn.added, .btn-pill.added { animation: add-ok .6s var(--ease); }
@keyframes add-ok { 0% { transform: scale(1); } 30% { transform: scale(1.18); } 60% { transform: scale(.96); } 100% { transform: scale(1); } }
.add-cart-btn.added::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: #1f9d55; color: #fff; font-size: 1rem; animation: add-tick .9s var(--ease) forwards; }
@keyframes add-tick { 0% { opacity: 0; transform: scale(.6); } 20%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.product-cart-notice:not([hidden]), #store-connection-toast:not([hidden]) { animation: toast-in .25s var(--ease); }
.nav-soon { position: relative; }
.nav-soon::before { content: ""; position: absolute; top: 2px; inset-inline-end: -8px; width: 6px; height: 6px; border-radius: 50%; background: #e0a526; animation: soon-pulse 2.4s ease-in-out infinite; }
@keyframes soon-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.badge-pill.soon-pill { animation: soon-pulse-soft 3s ease-in-out infinite; }
@keyframes soon-pulse-soft { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.icon-btn .icon, .compare-toggle .icon { transition: transform var(--t-fast) var(--ease); }
.icon-btn:hover .icon { transform: translateY(-1px); }
.compare-toggle.on .icon, .compare-toggle[aria-pressed="true"] .icon { animation: add-ok .5s var(--ease); }
.pd-skel { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; padding: 12px 0 24px; }
.pd-skel .shimmer.g { height: 340px; border-radius: 16px; }
.pd-skel .col { display: grid; gap: 12px; align-content: start; }
.pd-skel .shimmer.l { height: 18px; }
.pd-skel .shimmer.l.w1 { width: 85%; } .pd-skel .shimmer.l.w2 { width: 60%; } .pd-skel .shimmer.l.w3 { width: 40%; height: 34px; }
.pd-skel-note { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; color: #4a5a78; font-size: .88rem; }
@media (max-width: 720px) { .pd-skel { grid-template-columns: 1fr; } .pd-skel .shimmer.g { height: 240px; } }

/* ---------- Reduced motion: no movement, loaders become still marks ---------- */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .bl *, .bl, .rv, .page-enter, .bump, .added, .nav-soon::before, .badge-pill.soon-pill, .bl-card, #bl-bar { animation: none !important; transition: none !important; }
    .rv { opacity: 1; translate: none; }
    .product-card:hover, .product-card:hover .thumb img { transform: none; }
    html.is-navigating .site-main { opacity: 1; }
}