/* Comments for this file live in .claude/comment.md -- moved there so they
   stop shipping to every visitor. Search it for the selector you are about
   to change; several of these decisions were reverted once already. */
/* The doubled classes (.ozl.ozl-bars) and the !important are both
   load-bearing. main.css has body.is-preload * { animation: none !important },
   which is (0,1,1) -- the body element counts -- and sits on the body for the
   whole load, exactly when this loader is on screen. !important alone loses at
   .ozl-bars (0,1,0); doubling the class makes it (0,2,0) and wins. */
.ozl-wrap.ozl-wrap {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e1e1e;

    transition: opacity .45s ease !important;
}

.ozl-wrap.ozl-wrap.is-done {
    opacity: 0;
    pointer-events: none;
}

.ozl {
    --ozl-c: #fff;
    display: block;
}

.ozl.ozl-bars,
.ozl.ozl-bars::before,
.ozl.ozl-bars::after {
    width: 14px;
    height: 52px;
    background: var(--ozl-c);
    border-radius: 2px;
    animation: ozl-stretch 1s ease-in-out infinite !important;
}

.ozl.ozl-bars {
    position: relative;
    animation-delay: -.16s;
}

.ozl.ozl-bars::before,
.ozl.ozl-bars::after {
    content: '';
    position: absolute;
    top: 0;
}

.ozl.ozl-bars::before { left: -24px; animation-delay: -.32s; }
.ozl.ozl-bars::after  { left:  24px; animation-delay: 0s; }

@keyframes ozl-stretch {
    0%, 40%, 100% { transform: scaleY(.45); opacity: .55; }
    20%           { transform: scaleY(1);   opacity: 1; }
}

.ozl.ozl-fold {
    width: 52px;
    height: 52px;
    background: var(--ozl-c);
    animation: ozl-fold 1.2s cubic-bezier(.4, 0, .2, 1) infinite !important;
}

@keyframes ozl-fold {
    0%   { transform: perspective(120px) rotateX(0)      rotateY(0); }
    50%  { transform: perspective(120px) rotateX(-180deg) rotateY(0); }
    100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
}

.ozl.ozl-sweep {
    position: relative;
    width: 132px;
    height: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
}

.ozl.ozl-sweep::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 40%;
    background: var(--ozl-c);
    border-radius: 8px;
    animation: ozl-sweep 1.1s ease-in-out infinite !important;
}

@keyframes ozl-sweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.ozl.ozl-corner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--ozl-c);
    border-radius: 6px;
    animation: ozl-corner 1.4s ease-in-out infinite !important;
}

@keyframes ozl-corner {
    0%        { transform: rotate(0)      scale(1); }
    50%       { transform: rotate(180deg) scale(.6); }
    100%      { transform: rotate(360deg) scale(1); }
}

.ozl.ozl-swap {
    position: relative;
    width: 76px;
    height: 28px;
}

.ozl.ozl-swap::before,
.ozl.ozl-swap::after {
    content: '';
    position: absolute;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--ozl-c);
    animation: ozl-swap 1.3s ease-in-out infinite !important;
}

.ozl.ozl-swap::before { left: 0; }
.ozl.ozl-swap::after  { left: 48px; animation-delay: -.65s; }

@keyframes ozl-swap {
    0%, 100% { transform: translateX(0)    scale(1); }
    50%      { transform: translateX(48px) scale(.7); }
}

.ozl.ozl-grow {
    width: 150px;
    height: 10px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .22);
    position: relative;
    overflow: hidden;
}

.ozl.ozl-grow::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 100%;
    background: var(--ozl-c);
    border-radius: 5px;
    transform: translateX(-50%) scaleX(0);
    animation: ozl-grow 1.2s ease-in-out infinite !important;
}

@keyframes ozl-grow {
    0%   { transform: translateX(-50%) scaleX(0);   opacity: 1; }
    70%  { transform: translateX(-50%) scaleX(1);   opacity: 1; }
    100% { transform: translateX(-50%) scaleX(1);   opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ozl.ozl,
    .ozl.ozl::before,
    .ozl.ozl::after {
        animation: ozl-pulse 1.8s ease-in-out infinite !important;
        transform: none !important;
    }

    .ozl.ozl-sweep::after,
    .ozl.ozl-grow::after {
        width: 100%;
        left: 0;
    }
}

@keyframes ozl-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}