/* Loading and reveal primitives shared by the storefront and account. */
.ju-loader { display:block; position:relative; width:104px; height:104px; margin:auto; border-radius:50%; overflow:hidden; background:#fffaf9; box-shadow:0 8px 35px #b64c6812; }
.ju-loader img { display:block; width:104px; height:104px; object-fit:contain; }
.ju-loader > img { opacity:.22; filter:grayscale(1); }
.ju-loader > span { position:absolute; inset:0; clip-path:inset(100% 0 0); animation:ju-fill 2s ease-in-out infinite; }
@keyframes ju-fill { 0% {clip-path:inset(100% 0 0)} 80%,100% {clip-path:inset(0)} }
.ju-busy-dialog { width:min(360px,calc(100vw - 40px)); max-height:90dvh; border:1px solid #f4dce4; border-radius:28px; padding:34px 26px; background:#fffcfb; color:#282326; text-align:center; box-shadow:0 18px 70px #65364922; }
.ju-busy-dialog::backdrop { background:#fff7f5dc; backdrop-filter:blur(5px); }
.ju-busy-dialog h2 { font:500 27px/1.15 'Playfair Display',Georgia,serif; margin:24px 0 12px; outline:none; }
.ju-busy-caption { font:14px/1.6 'DM Sans',sans-serif; color:#7b7076; margin:0; }
.ju-success { display:grid; place-items:center; width:76px; height:76px; margin:12px auto 16px; border-radius:50%; color:white; background:#43856a; box-shadow:0 0 0 10px #e7f3eb; }
.ju-success svg { width:44px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.ju-busy-dialog [hidden] { display:none; }
@keyframes ju-appear { from {opacity:0;translate:0 12px} to {opacity:1;translate:0 0} }
.page-opening { display:none; }
.ju-opening .page-opening { opacity:1; visibility:visible; }
.page-opening { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:#f4faf5; color:#527262; opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; }
.page-opening .ju-loader { width:112px; height:112px; margin:0; }
.page-opening .ju-loader img { width:112px; height:112px; }
.page-opening p { font:13px/1.6 'DM Sans',sans-serif; margin:0; }
.ju-opening .home .page { visibility:hidden; }
/* Later visits: hidden until the showcase draws the piece in front (page-entry.js), then a short fade, the bar above the
   page (announcement-bar.js) with it. Opacity, not visibility: the showcase marks its pieces visibility:visible, which
   would show through a hidden parent. */
.ju-returning .home :is(.page, .announce-bar) { opacity:0; pointer-events:none; }
.ju-returned .home :is(.page, .announce-bar) { animation:ju-return .24s ease-out both; }
@keyframes ju-return { from {opacity:0} to {opacity:1} }
.ju-arrived .home .site-header { animation:ju-appear .42s both; }
.ju-arrived .home .showcase { animation:ju-appear .55s .07s both; }
.hero-fallback { display:block; width:auto; height:auto; max-width:min(100%,300px); max-height:100%; margin:auto; }
/* While the page waits for the showcase (opening screen, or a later visit), the picture written in the page stays out:
   being lazy, it then never fetches the butterfly for a visitor the home opens on another piece (page-entry.js). */
.ju-opening .hero-fallback,.ju-returning .hero-fallback { display:none; }
.piece .image-unavailable { position:absolute; inset:20% 10%; display:grid; place-content:center; text-align:center; font:14px/1.5 'DM Sans',sans-serif; color:var(--theme-muted); }
.ju-arrived .catalog-home { animation:ju-appear .55s .14s both; }
.product-rail-art { position:relative; }
.product-rail-card.is-loading .product-rail-art::after,.catalog-placeholder i { content:''; background:linear-gradient(100deg,#f5eef0 20%,#fffafa 48%,#f5eef0 75%); background-size:220% 100%; animation:ju-shimmer 1.8s ease-in-out infinite; }
.product-rail-card.is-loading .product-rail-art::after { position:absolute; inset:18px; border-radius:16px; }
.product-rail-card.is-loading .product-rail-art img { opacity:0; }
.product-rail-art img { transition:opacity .3s ease,transform .4s ease; }
.catalog-placeholder { display:flex; gap:22px; justify-content:center; overflow:hidden; min-height:526px; padding:12px 0; }
.catalog-placeholder > span { flex:0 0 min(340px,75vw); border:1px solid #eadde1; border-radius:22px; padding:18px; background:#fffcfb; }
.catalog-placeholder i { display:block; height:16px; margin-bottom:14px; border-radius:8px; }
.catalog-placeholder i:first-child { height:230px; }
.catalog-placeholder i:last-child { height:46px; margin-top:24px; border-radius:30px; }
.catalog-placeholder i:nth-child(3) { width:65%; }
.image-unavailable { font-size:13px; color:var(--muted); text-align:center; padding:20px; }
@keyframes ju-shimmer { to {background-position:-220% 0} }
@media(prefers-reduced-motion:reduce) { .ju-loader > span { animation:none; clip-path:inset(40% 0 0); } .ju-arrived .home .site-header,.ju-arrived .home .showcase,.ju-arrived .catalog-home,.ju-returned .home :is(.page, .announce-bar) {animation:none} .page-opening {transition:none} .product-rail-card.is-loading .product-rail-art::after,.catalog-placeholder i {animation:none} }