:root {
  --cream: #f4edda;
  --ink: #1e1a16;
  --tomato: #ed3f25;
  --butter: #f7cb45;
  --pink: #e99abf;
}

body.booting { margin: 0; overflow: hidden; background: var(--cream); }
.boot-loader, .boot-loader * { box-sizing: border-box; }
.boot-loader { position: fixed; z-index: 999; inset: 0; overflow: hidden; color: var(--ink); visibility: visible; font-family: Arial, Helvetica, sans-serif; transition: visibility 0s .72s; }
.boot-loader__curtain { position: absolute; inset-block: 0; width: 50.1%; transition: transform .72s cubic-bezier(.76,0,.24,1); }
.boot-loader__curtain::before { content: ''; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(var(--ink) .65px, transparent .8px); background-size: 10px 10px; }
.boot-loader__curtain--left { left: 0; background: var(--butter); }
.boot-loader__curtain--right { right: 0; background: var(--pink); }
.boot-loader__meta { position: absolute; z-index: 4; top: clamp(20px, 3vw, 44px); left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-size: 8px; font-weight: 900; letter-spacing: .14em; transition: opacity .25s; }
.boot-loader__stage { position: absolute; z-index: 4; left: 50%; top: 50%; width: min(68vw, 650px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.boot-pizza { position: absolute; inset: 8%; filter: drop-shadow(0 24px 20px rgba(69,35,13,.2)); }
.boot-pizza__crust { position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 49% 51% 47% 53%; background: linear-gradient(135deg, #efbd67, #cd8339 50%, #eeb15b); box-shadow: inset 0 0 0 10px rgba(255,221,133,.32), inset -12px -15px 18px rgba(105,48,15,.18); animation: bootCrustIn .7s cubic-bezier(.2,.9,.2,1) both; }
.boot-pizza__crust::after { content: ''; position: absolute; inset: 9%; border: 1px solid #6d411f; border-radius: 50%; background: #e3b746; }
.boot-pizza__half { position: absolute; z-index: 2; inset: 9%; overflow: hidden; border-radius: 50%; }
.boot-pizza__half--left { clip-path: inset(0 50% 0 0); background: radial-gradient(circle at 32% 25%, #ce4930 0 6%, transparent 6.5%), radial-gradient(circle at 27% 68%, #ce4930 0 7%, transparent 7.5%), radial-gradient(circle at 45% 48%, #ce4930 0 6%, transparent 6.5%), #edc34f; animation: bootLeftIn .72s cubic-bezier(.18,.9,.24,1) both; }
.boot-pizza__half--right { clip-path: inset(0 0 0 50%); background: radial-gradient(ellipse at 68% 25%, #448044 0 5%, transparent 5.5%), radial-gradient(ellipse at 78% 66%, #448044 0 6%, transparent 6.5%), radial-gradient(ellipse at 58% 47%, #448044 0 5%, transparent 5.5%), #9fbe58; animation: bootRightIn .72s cubic-bezier(.18,.9,.24,1) both; }
.boot-pizza__half::after { content: ''; position: absolute; inset: 0; opacity: .32; background-image: radial-gradient(#7e4b1f 1px, transparent 1.5px); background-size: 14px 13px; }
.boot-pizza__half i { position: absolute; z-index: 2; display: block; }
.boot-pizza__half--left i { width: 12%; aspect-ratio: 1; border: 1px solid #76251a; border-radius: 50%; background: #bd3c29; box-shadow: inset -2px -3px 0 rgba(93,25,17,.25); }
.boot-pizza__half--left i:nth-child(1) { left: 17%; top: 17%; }
.boot-pizza__half--left i:nth-child(2) { left: 34%; top: 38%; }
.boot-pizza__half--left i:nth-child(3) { left: 15%; top: 57%; }
.boot-pizza__half--left i:nth-child(4) { left: 37%; top: 73%; }
.boot-pizza__half--left i:nth-child(5) { left: 25%; top: 84%; }
.boot-pizza__half--right i { width: 12%; height: 7%; border: 1px solid #24552c; border-radius: 100% 0 100% 0; background: #4f8d48; }
.boot-pizza__half--right i:nth-child(1) { left: 59%; top: 17%; transform: rotate(25deg); }
.boot-pizza__half--right i:nth-child(2) { left: 76%; top: 35%; transform: rotate(-15deg); }
.boot-pizza__half--right i:nth-child(3) { left: 56%; top: 50%; transform: rotate(55deg); }
.boot-pizza__half--right i:nth-child(4) { left: 72%; top: 69%; transform: rotate(12deg); }
.boot-pizza__half--right i:nth-child(5) { left: 57%; top: 80%; transform: rotate(-24deg); }
.boot-pizza__seam { position: absolute; z-index: 3; left: 50%; top: 11%; bottom: 11%; border-left: 2px dashed rgba(45,32,18,.65); }
.boot-pizza b { position: absolute; z-index: 5; left: 50%; top: 50%; width: 82px; height: 82px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; color: var(--cream); background: var(--tomato); box-shadow: 4px 5px 0 var(--ink); transform: translate(-50%, -50%) rotate(-7deg); text-align: center; font: 900 17px/.8 Arial Black, Arial, sans-serif; letter-spacing: -.06em; animation: bootStamp .75s .16s cubic-bezier(.2,1,.3,1) both; }
.boot-loader__orbit { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.boot-loader__orbit i { flex: 1; border-top: 1px solid var(--ink); }
.boot-loader__orbit span:last-child { text-align: right; }
.boot-loader__status { position: absolute; z-index: 4; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(20px, 3vw, 38px); display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; font-size: 8px; font-weight: 900; letter-spacing: .13em; transition: opacity .25s; }
.boot-loader__status i { height: 5px; overflow: hidden; border: 1px solid var(--ink); border-radius: 99px; }
.boot-loader__status i::after { content: ''; display: block; width: 100%; height: 100%; background: var(--tomato); transform-origin: left; animation: bootPairing .8s cubic-bezier(.65,0,.35,1) both; }
.boot-loader__status small { font-size: 7px; }
.boot-loader.is-finished { visibility: hidden; }
.boot-loader.is-finished .boot-loader__curtain--left { transform: translateX(-100%); }
.boot-loader.is-finished .boot-loader__curtain--right { transform: translateX(100%); }
.boot-loader.is-finished .boot-loader__meta, .boot-loader.is-finished .boot-loader__status { opacity: 0; }
.boot-loader.is-finished .boot-pizza__crust, .boot-loader.is-finished .boot-pizza b, .boot-loader.is-finished .boot-loader__orbit { opacity: 0; transition: opacity .18s; }
.boot-loader.is-finished .boot-pizza__half--left { animation: bootLeftOut .68s cubic-bezier(.76,0,.24,1) both; }
.boot-loader.is-finished .boot-pizza__half--right { animation: bootRightOut .68s cubic-bezier(.76,0,.24,1) both; }
@keyframes bootLeftIn { from { transform: translateX(-78vw) rotate(-45deg); } }
@keyframes bootRightIn { from { transform: translateX(78vw) rotate(45deg); } }
@keyframes bootCrustIn { from { opacity: 0; transform: scale(.62) rotate(-22deg); } }
@keyframes bootStamp { from { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(18deg); } }
@keyframes bootPairing { from { transform: scaleX(0); } }
@keyframes bootLeftOut { to { transform: translateX(-78vw) rotate(-35deg); } }
@keyframes bootRightOut { to { transform: translateX(78vw) rotate(35deg); } }

@media (max-width: 720px) {
  .boot-loader__meta span:first-child, .boot-loader__status small { display: none; }
  .boot-loader__meta { justify-content: flex-end; }
  .boot-loader__stage { width: 102vw; }
  .boot-pizza { inset: 12%; }
  .boot-pizza b { width: 64px; height: 64px; font-size: 14px; }
  .boot-loader__orbit { padding-inline: 3vw; font-size: 6px; }
  .boot-loader__status { grid-template-columns: auto 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-loader *, .boot-loader *::before, .boot-loader *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}