/* ============================================================================ Bukhara Plov — Logo Loading Animation loader.css · self-contained, framework-free, prefixed with .bpl- Pairs with loader.js. Drop both into the site and add the two tags to . ============================================================================ */ .bpl-loader{ /* tokens (scoped — will not clash with the site) */ --bpl-green-950:#0f2a0a; --bpl-green-900:#143708; --bpl-green-800:#1d4a10; --bpl-green-700:#2a6318; --bpl-green-600:#3a7c21; --bpl-green-400:#6eaa48; --bpl-green-300:#9dc27a; --bpl-green-200:#c6dbae; --bpl-green-100:#e5eed6; --bpl-cream:#f7f3e8; --bpl-paper:#fcfaf3; --bpl-muted:#6a7359; --bpl-gold:#b8872a; --bpl-amber:#d9a441; --bpl-body:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --bpl-ease:cubic-bezier(.22,.61,.36,1); --bpl-speed:1.2; /* overridden inline by loader.js */ position:fixed;inset:0;z-index:99999;display:none; align-items:center;justify-content:center;overflow:hidden; background:var(--bpl-cream); font-family:var(--bpl-body); } .bpl-loader.bpl-active{display:flex;} .bpl-loader::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 22%, rgba(110,170,72,.10), transparent 60%), radial-gradient(140% 120% at 50% 120%, rgba(15,42,10,.08), transparent 55%);} .bpl-loader[data-bg="paper"]{background:var(--bpl-paper);} .bpl-loader[data-bg="green"]{background:var(--bpl-green-950);} .bpl-loader[data-bg="green"]::before{ background:radial-gradient(120% 90% at 50% 22%, rgba(110,170,72,.18), transparent 60%), radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.4), transparent 55%);} .bpl-core{position:relative;display:flex;flex-direction:column;align-items:center; transition:opacity .45s var(--bpl-ease), transform .55s var(--bpl-ease);} .bpl-loader.bpl-reveal .bpl-core{opacity:0;transform:translateY(-14px) scale(.97);} .bpl-loader.bpl-reveal{transition:opacity .5s var(--bpl-ease);opacity:0;} /* logo stage + ambient halo */ .bpl-stage{position:relative;width:184px;height:196px;overflow:visible;} .bpl-stage::before{content:"";position:absolute;left:50%;top:38%;width:150px;height:150px; transform:translate(-50%,-50%);filter:blur(4px); background:radial-gradient(circle, rgba(110,170,72,.18), transparent 68%); animation:bpl-halo calc(3s / var(--bpl-speed)) ease-in-out infinite;} .bpl-loader[data-accent="gold"] .bpl-stage::before{background:radial-gradient(circle, rgba(217,164,65,.20), transparent 68%);} .bpl-loader[data-bg="green"] .bpl-stage::before{background:radial-gradient(circle, rgba(157,194,122,.22), transparent 68%);} @keyframes bpl-halo{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(.95);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}} .bpl-host{position:relative;width:100%;height:100%;overflow:visible;} .bpl-host svg{width:100%;height:100%;display:block;overflow:visible;} .bpl-host path{will-change:transform,opacity;} /* group + child transform boxes (set up by loader.js) */ .bpl-host .bpl-g-struct,.bpl-host .bpl-g-bowl,.bpl-host .bpl-g-steam, .bpl-host .bpl-g-grain,.bpl-host .bpl-g-word{transform-box:fill-box;} .bpl-host .bpl-g-struct{transform-origin:50% 100%;} .bpl-host .bpl-g-bowl{transform-origin:50% 60%;} .bpl-host .bpl-grain,.bpl-host .bpl-steam,.bpl-host .bpl-word{transform-box:fill-box;} .bpl-host .bpl-grain{transform-origin:50% 50%;} .bpl-host .bpl-steam{transform-origin:50% 100%;} .bpl-host .bpl-word{transform-origin:50% 100%;} /* recolor the dark-green logo so it stays visible on a dark background */ .bpl-loader[data-bg="green"] .bpl-host .cls-2{fill:#e3efd2;} .bpl-loader[data-bg="green"] .bpl-host .cls-1{fill:#c6dbae;} .bpl-loader[data-bg="green"] .bpl-host .cls-3{fill:#9dc27a;} /* ---------- ASSEMBLE (plays once each time the loader opens) ---------- */ .bpl-host.bpl-assemble .bpl-g-struct{animation:bpl-riseUp calc(.85s / var(--bpl-speed)) var(--bpl-ease) both;} .bpl-host.bpl-assemble .bpl-g-bowl{animation:bpl-scaleIn calc(.6s / var(--bpl-speed)) var(--bpl-ease) calc(.28s / var(--bpl-speed)) both;} .bpl-host.bpl-assemble .bpl-grain{animation:bpl-popIn calc(.5s / var(--bpl-speed)) var(--bpl-ease) calc(var(--d) / var(--bpl-speed)) both;} .bpl-host.bpl-assemble .bpl-word{animation:bpl-letterIn calc(.55s / var(--bpl-speed)) var(--bpl-ease) calc(var(--d) / var(--bpl-speed)) both;} .bpl-host.bpl-assemble .bpl-g-steam{opacity:0;} /* ---------- LIVING LOOP (runs until photos are ≥ the gate, default 80%) ---------- */ .bpl-host.bpl-living .bpl-g-struct{animation:bpl-skyline calc(3s / var(--bpl-speed)) ease-in-out infinite;} .bpl-host.bpl-living .bpl-g-bowl{animation:bpl-bob calc(3s / var(--bpl-speed)) ease-in-out infinite;} .bpl-host.bpl-living .bpl-grain{animation:bpl-twinkle calc(1.7s / var(--bpl-speed)) ease-in-out calc(var(--d) / var(--bpl-speed)) infinite;} .bpl-host.bpl-living .bpl-steam{animation:bpl-steamRise calc(2.3s / var(--bpl-speed)) ease-in-out calc(var(--d) / var(--bpl-speed)) infinite;} /* toggles */ .bpl-loader[data-steam="off"] .bpl-host .bpl-g-steam{display:none;} .bpl-loader[data-sway="off"] .bpl-host.bpl-living .bpl-g-struct{animation:bpl-breatheOnly calc(3.6s / var(--bpl-speed)) ease-in-out infinite;} /* ---------- SETTLE on finish ---------- */ .bpl-loader.bpl-done .bpl-host .bpl-g-struct,.bpl-loader.bpl-done .bpl-host .bpl-g-bowl, .bpl-loader.bpl-done .bpl-host .bpl-grain,.bpl-loader.bpl-done .bpl-host .bpl-steam, .bpl-loader.bpl-done .bpl-host .bpl-word{animation:none !important;opacity:1 !important;transform:none !important;} .bpl-loader.bpl-done .bpl-host{animation:bpl-settle calc(.55s / var(--bpl-speed)) var(--bpl-ease);} @keyframes bpl-settle{0%{transform:scale(1);}42%{transform:scale(1.045);}100%{transform:scale(1);}} @keyframes bpl-riseUp{from{opacity:0;transform:translateY(16px) scaleY(.5);}to{opacity:1;transform:translateY(0) scaleY(1);}} @keyframes bpl-scaleIn{from{opacity:0;transform:scale(.25);}to{opacity:1;transform:scale(1);}} @keyframes bpl-popIn{0%{opacity:0;transform:scale(0);}70%{opacity:1;transform:scale(1.35);}100%{transform:scale(1);}} @keyframes bpl-letterIn{from{opacity:0;transform:translateY(11px);}to{opacity:1;transform:translateY(0);}} @keyframes bpl-skyline{0%,100%{transform:rotate(0deg) scaleY(1);}25%{transform:rotate(2.4deg) scaleY(1.018);}75%{transform:rotate(-2.4deg) scaleY(1.018);}} @keyframes bpl-breatheOnly{0%,100%{transform:scaleY(1) scaleX(1);}50%{transform:scaleY(1.025) scaleX(1.008);}} @keyframes bpl-bob{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(1.6px) scale(1.012);}} @keyframes bpl-twinkle{0%,100%{opacity:.6;transform:scale(.86);}50%{opacity:1;transform:scale(1.16);}} @keyframes bpl-steamRise{0%,100%{opacity:.28;transform:translateY(2px) scaleX(.92) scaleY(.95);}35%{opacity:.92;transform:translateY(-6px) scaleX(1.18) scaleY(1.05);}70%{opacity:.4;transform:translateY(-17px) scaleX(1.7) scaleY(1.2);}} /* tagline / status / progress */ .bpl-tagline{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--bpl-green-600);font-weight:600; margin-top:22px;opacity:0;transform:translateY(8px);animation:bpl-up .7s var(--bpl-ease) .25s forwards;} .bpl-loader[data-bg="green"] .bpl-tagline{color:var(--bpl-green-300);} .bpl-loader[data-accent="gold"] .bpl-tagline{color:var(--bpl-gold);} .bpl-status{height:15px;margin-top:13px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bpl-muted); opacity:0;transform:translateY(8px);animation:bpl-up .7s var(--bpl-ease) .36s forwards;} .bpl-loader[data-bg="green"] .bpl-status{color:var(--bpl-green-300);} .bpl-bar{position:relative;width:158px;height:2px;margin-top:18px;border-radius:2px;overflow:hidden; background:var(--bpl-green-200);opacity:0;animation:bpl-up .7s var(--bpl-ease) .46s forwards;} .bpl-loader[data-bg="green"] .bpl-bar{background:rgba(255,255,255,.14);} .bpl-bar-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:2px;background:var(--bpl-green-600);transition:width .25s var(--bpl-ease);} .bpl-loader[data-accent="gold"] .bpl-bar-fill{background:var(--bpl-gold);} .bpl-loader[data-bg="green"] .bpl-bar-fill{background:var(--bpl-green-300);} @keyframes bpl-up{to{opacity:1;transform:translateY(0);}} /* respect reduced motion: show the resting logo, no looping motion */ @media (prefers-reduced-motion:reduce){ .bpl-host .bpl-g-struct,.bpl-host .bpl-g-bowl,.bpl-host .bpl-grain, .bpl-host .bpl-steam,.bpl-host .bpl-word{animation:none !important;opacity:1 !important;transform:none !important;} .bpl-stage::before{animation:none;} }