@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap');

#preloader{position:fixed;inset:0;z-index:99999;background:#0C0A08;display:flex;flex-direction:column;align-items:center;justify-content:center}
#preloader.exit{animation:preloaderExit 1.2s cubic-bezier(.76,0,.24,1) forwards}
@keyframes preloaderExit{0%{clip-path:inset(0)}100%{clip-path:inset(50% 0);opacity:0}}
#preloader::before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:1}
#dustCanvas{position:absolute;inset:0;z-index:0;opacity:.6}
.stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;max-width:700px;padding:0 20px}
.phase-label{font-family:'Space Grotesk',sans-serif;font-size:clamp(.65rem,1.5vw,.8rem);letter-spacing:.4em;color:rgba(184,115,51,.5);text-transform:uppercase;margin-bottom:30px;min-height:1.2em;transition:opacity .4s;text-align:center}
.kitchen-scene{width:100%;max-width:600px;aspect-ratio:16/10;margin-bottom:36px;filter:drop-shadow(0 20px 60px rgba(184,115,51,.08))}
.kitchen-scene svg{width:100%;height:100%}
.k-part{opacity:0;transition:opacity .6s ease,transform .8s cubic-bezier(.34,1.56,.64,1)}
.k-part.visible{opacity:1}
.k-slide-up{transform:translateY(30px)}.k-slide-up.visible{transform:translateY(0)}
.k-slide-down{transform:translateY(-30px)}.k-slide-down.visible{transform:translateY(0)}
.k-slide-left{transform:translateX(-40px)}.k-slide-left.visible{transform:translateX(0)}
.k-slide-right{transform:translateX(40px)}.k-slide-right.visible{transform:translateX(0)}
.k-scale{transform:scale(.7)}.k-scale.visible{transform:scale(1)}
.k-fade.visible{opacity:1}
@keyframes glowPulse{0%{filter:drop-shadow(0 0 0 rgba(184,115,51,0))}50%{filter:drop-shadow(0 0 12px rgba(184,115,51,.6))}100%{filter:drop-shadow(0 0 0 rgba(184,115,51,0))}}
.k-part.glow{animation:glowPulse .8s ease-out}
.grid-overlay{opacity:.08;animation:gridFade 4s ease-out forwards}
@keyframes gridFade{0%{opacity:.12}100%{opacity:.03}}
.measure-line{opacity:0;transition:opacity .5s ease}
.measure-line.visible{opacity:.4;animation:measureFlash 2s ease-out forwards}
@keyframes measureFlash{0%{opacity:0}30%{opacity:.6}100%{opacity:0}}
#preloader .brand{text-align:center;margin-bottom:28px;opacity:0;animation:preloaderFadeUp .8s ease-out .5s forwards}
#preloader .brand-name{font-family:'Syne',sans-serif;font-size:clamp(1.4rem,4vw,2.2rem);font-weight:700;letter-spacing:.12em;color:transparent;background:linear-gradient(135deg,#B87333,#D67E5C,#E8A87C,#B87333);background-size:300% auto;-webkit-background-clip:text;background-clip:text;animation:preloaderShimmer 4s linear infinite;margin-bottom:0}
#preloader .brand-tagline{font-family:'Space Grotesk',sans-serif;font-size:clamp(.6rem,1.5vw,.75rem);letter-spacing:.35em;color:rgba(184,115,51,.35);text-transform:uppercase;margin-top:6px}
@keyframes preloaderShimmer{0%{background-position:300% center}100%{background-position:-300% center}}
@keyframes preloaderFadeUp{0%{opacity:0;transform:translateY(20px);filter:blur(8px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
.progress-area{width:clamp(200px,50vw,300px);display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:preloaderFadeUp .8s ease-out .8s forwards}
#preloader .progress-track{width:100%;height:2px;background:rgba(184,115,51,.1);border-radius:2px;overflow:visible;position:relative}
#preloader .progress-bar{height:100%;width:0;background:linear-gradient(90deg,#B87333,#D67E5C);border-radius:2px;position:relative;transition:width .4s cubic-bezier(.4,0,.2,1)}
#preloader .progress-bar::after{content:'';position:absolute;right:-3px;top:-3px;width:8px;height:8px;background:#E8A87C;border-radius:50%;box-shadow:0 0 12px #B87333,0 0 24px rgba(184,115,51,.2)}
.progress-info{width:100%;display:flex;justify-content:space-between;font-family:'Space Grotesk',sans-serif;font-size:.65rem;letter-spacing:.2em;color:rgba(184,115,51,.35)}
.progress-pct{color:rgba(184,115,51,.7);font-weight:600;font-variant-numeric:tabular-nums}
.progress-status{transition:opacity .3s}
.corner{position:fixed;z-index:3;opacity:0;animation:preloaderFadeUp .6s ease-out .2s forwards}
.corner::before,.corner::after{content:'';position:absolute;background:rgba(184,115,51,.15)}
.c-tl{top:16px;left:16px}.c-tl::before{width:24px;height:1px;top:0;left:0}.c-tl::after{width:1px;height:24px;top:0;left:0}
.c-tr{top:16px;right:16px}.c-tr::before{width:24px;height:1px;top:0;right:0}.c-tr::after{width:1px;height:24px;top:0;right:0}
.c-bl{bottom:16px;left:16px}.c-bl::before{width:24px;height:1px;bottom:0;left:0}.c-bl::after{width:1px;height:24px;bottom:0;left:0}
.c-br{bottom:16px;right:16px}.c-br::before{width:24px;height:1px;bottom:0;right:0}.c-br::after{width:1px;height:24px;bottom:0;right:0}