:root {
    --layer-count:          14;
    --filament:             #FF6B00;
    --filament-line:        #7a2f06;
    --layer-height:         calc(100lvh / var(--layer-count));
    --transition-duration:  0.48s;
}

html.js body::before {
    content: '';
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100lvh;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
        to top,
        var(--filament) 0,
        var(--filament) calc(var(--layer-height) - 2px),
        var(--filament-line) calc(var(--layer-height) - 2px),
        var(--filament-line) var(--layer-height)
    );
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
    will-change: clip-path;
}

html.revealing body::before {
    animation: wipeDown var(--transition-duration) cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

html.revealed body::before {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

html.painting body::before {
    animation: paintUp var(--transition-duration) cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

@keyframes paintUp {
    0%  { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
    100%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes wipeDown {
    0%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    100%  { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
}


#filament-nozzle {
    position: fixed;
    z-index: 10000;
    pointer-events: none;
    width: 44px;
    height: 54px;
    left: -60px;
    bottom: 0;
    opacity: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
    will-change: left bottom opacity;
}

#filament-nozzle.active { opacity: 1; }