/* css/animations.css */

/* pop */
.pop{
    animation:pop .35s ease;
}

@keyframes pop{
    0%{transform:scale(.95);opacity:0;}
    100%{transform:scale(1);opacity:1;}
}

/* sparkles */
.sparkle{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    opacity:0;
}

.sparkle.show{
    animation:spark 0.8s ease-out forwards;
}

@keyframes spark{
    0%{transform:translateY(0);opacity:0;}
    30%{opacity:1;}
    100%{transform:translateY(-60px);opacity:0;}
}

/* lava lamp (simplified, less cursed) */
.lava-lamp{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    filter:blur(40px);
}

.lava-lamp::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,100,200,0.5), transparent 40%),
        radial-gradient(circle at 80% 60%, rgba(100,200,255,0.5), transparent 40%);
    animation:lava 12s ease-in-out infinite;
}

@keyframes lava{
    0%{transform:scale(1);}
    50%{transform:scale(1.2);}
    100%{transform:scale(1);}
}

.banner h1{
    display:inline-block;
    transform:skewX(-6deg);
    font-family:"Comic Sans MS", cursive !important;
}

.banner h1 span{
    font-family:"Comic Sans MS", cursive;
    display:inline-block;
    transform:skewX(-6deg);
    transform-origin:50% 50%;
    color: purple;
}

.banner h1.wave span{
    animation: wormWave 1.2s cubic-bezier(.22,.85,.34,1);
    animation-delay: calc(var(--i,0) * 90ms);
}

@keyframes wormWave{
    0%{ transform: skewX(-6deg) translateY(0); }
    30%{ transform: skewX(-6deg) translateY(-16px) rotate(-8deg); }
    60%{ transform: skewX(-6deg) translateY(6px); }
    100%{ transform: skewX(-6deg) translateY(0); }
}

.slot-window {
    height: 32px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    border-radius: 999px;
}

.reel-strip {
    display: flex;
    flex-direction: column;
    will-change: transform;
    transform: translateY(0);
}

.reel-item {
    height: 32px;
    min-height: 32px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;
    font-weight: 700;
}

.slot-viewport {
    height: 32px;
    overflow: hidden;
    position: relative;
}