/* The screen inside <app-root> in src/index.html, shown until the app starts: pages drawn in the
   browser (product pages, the admin, sign-in) and everything under `ng serve`. Pre-rendered
   pages arrive with their content instead. It is plain CSS in a file of its own because it has
   to work before the app's styles do. assets/theme-boot.js sets data-preloader="dark" for the
   admin in its dark theme, so that doesn't open on a bright screen. */

.hn-preloader {
    --hn-preloader-bg: #fffcf4;
    --hn-preloader-ink: #2a1709;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hn-preloader-bg);
}

:root[data-preloader='dark'] .hn-preloader {
    --hn-preloader-bg: #0d121d;
    --hn-preloader-ink: #fff3d6;
}

/* Waits a moment before appearing, so a quick start doesn't flash the logo. */
.hn-preloader-logo {
    width: min(44vw, 168px);
    height: auto;
    overflow: visible;
    animation: hn-preloader-in 0.4s 0.2s ease-out both;
}

.hn-preloader-frame {
    fill: #ffc60b;
}

.hn-preloader-ink {
    fill: var(--hn-preloader-ink);
}

.hn-preloader-gold {
    fill: #fdc113;
}

.hn-preloader-bee {
    fill: #232413;
}

.hn-preloader-bee-outline {
    fill: none;
    stroke: #232413;
    stroke-miterlimit: 10;
}

.hn-preloader-pool {
    fill: #e59a12;
    opacity: 0;
}

/* One beat, 2.4 seconds: light runs across the frame while a drop of honey gathers at the
   bottom of the cell, stretches, lets go and lands in a small pool. */
.hn-preloader-glow {
    transform-origin: 198.2px 217.5px;
    animation: hn-preloader-glow 2.4s ease-in-out infinite alternate;
}

.hn-preloader-shine {
    transform: translateX(0) skewX(-18deg);
    animation: hn-preloader-shine 2.4s ease-in-out infinite;
}

.hn-preloader-drop {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: hn-preloader-drip 2.4s infinite;
}

.hn-preloader-pool {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: hn-preloader-pool 2.4s infinite;
}

@keyframes hn-preloader-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes hn-preloader-glow {
    from {
        opacity: 0.55;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes hn-preloader-shine {
    0% {
        transform: translateX(0) skewX(-18deg);
    }
    45%,
    100% {
        transform: translateX(270px) skewX(-18deg);
    }
}

@keyframes hn-preloader-drip {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.25, 0.15);
        animation-timing-function: ease-in-out;
    }
    50% {
        transform: translateY(0) scale(0.9, 0.85);
        animation-timing-function: ease-in;
    }
    62% {
        transform: translateY(2px) scale(0.78, 1.18);
        animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
    }
    86% {
        opacity: 1;
        transform: translateY(40px) scale(0.72, 1.12);
    }
    88% {
        opacity: 0;
        transform: translateY(43px) scale(1.2, 0.4);
    }
    100% {
        opacity: 0;
        transform: translateY(0) scale(0.25, 0.15);
    }
}

@keyframes hn-preloader-pool {
    0%,
    85% {
        opacity: 0;
        transform: scale(0.3);
    }
    88% {
        opacity: 0.85;
        transform: scale(0.7, 0.8);
    }
    100% {
        opacity: 0;
        transform: scale(1.7, 1.2);
    }
}

/* Without motion: the logo with a drop resting at the bottom of the cell. */
@media (prefers-reduced-motion: reduce) {
    .hn-preloader * {
        animation: none !important;
    }

    .hn-preloader-drop {
        transform: scale(0.7, 0.65);
    }

    .hn-preloader-shine,
    .hn-preloader-pool {
        display: none;
    }
}