@font-face{font-family:Rubik;src:url('rubik.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;background:#0c0c0c;color:#fff;font-family:Rubik,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;min-width:240px}
.holding-page{min-height:100svh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:48px 24px;overflow:hidden}
.brand{position:relative;width:clamp(250px,33vw,390px);max-width:85vw;aspect-ratio:1;isolation:isolate}
.brand img{position:absolute;inset:0;width:100%;height:auto;display:block;filter:contrast(1.2);mix-blend-mode:lighten}
.barrel{clip-path:polygon(0 0,38% 0,38% 25%,42% 27.8%,58% 27.8%,62% 25%,62% 0,100% 0,100% 100%,0 100%)}
.flame-window{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 72.2% 0);mix-blend-mode:lighten}
.brand .flame{clip-path:polygon(38% 0,62% 0,62% 24.8%,58% 27.8%,42% 27.8%,38% 25%);transform-origin:50% 28%;animation:fire 4.4s cubic-bezier(.45,0,.2,1) infinite;will-change:transform,opacity}
h1{font-size:clamp(1.125rem,2.1vw,1.5rem);line-height:1.6;font-weight:400;text-align:center;letter-spacing:.015em;margin:32px 0 0;color:#c9c9c9}
h1 span{color:#fff}
.embers{display:flex;gap:8px;margin-top:24px;height:6px;align-items:center}
.embers i{width:4px;height:4px;border-radius:50%;background:#a8181f;animation:ember 2.2s ease-in-out infinite}
.embers i:nth-child(2){animation-delay:.22s}.embers i:nth-child(3){animation-delay:.44s}
@keyframes fire{0%,100%{transform:translateY(24%) scale(.74);opacity:0}12%{opacity:1}32%{transform:translateY(0) scale(1);opacity:1}43%{transform:translateY(-.7%) scaleX(.98) scaleY(1.025)}54%{transform:translateY(.3%) scaleX(1.018) scaleY(.985)}65%{transform:translateY(-.3%) scale(1);opacity:1}86%{opacity:1}96%{transform:translateY(24%) scale(.74);opacity:0}}
@keyframes ember{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media(max-width:600px){.brand{width:290px}h1{margin-top:26px}.holding-page{padding:36px 24px}}
@media(max-height:620px) and (min-width:601px){.brand{width:260px}h1{margin-top:18px}.holding-page{padding:24px}}
@media(prefers-reduced-motion:reduce){.brand .flame{animation:none;transform:none;opacity:1}.embers i{animation:none;opacity:.7}}

/* Blend the complete brand group into the page, including its clipped layers. */
.brand{mix-blend-mode:lighten}
.barrel{clip-path:polygon(0 0,36% 0,36% 25.8%,41% 25.8%,42% 28%,58% 28%,59% 25.8%,64% 25.8%,64% 0,100% 0,100% 100%,0 100%)}
.brand .flame{clip-path:polygon(36% 0,64% 0,64% 25.8%,59% 25.8%,58% 28%,42% 28%,41% 25.8%,36% 25.8%)}