/* --------------------------------------------------------------------------
   Project Steve - Floating 3D Sticker Field
   Organic random scattering.
   Only the top stickers disappear after generating workflow.
   -------------------------------------------------------------------------- */

.sticker-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.sticker-field .sticker > img.sticker-img {
    width: 100%;
    height: 100%;
    display: block;
    will-change: transform;
    pointer-events: auto;
    transition: filter 0.2s ease;
}

.sticker-field .sticker {
    position: absolute;
    display: block;
    width: var(--w);
    height: var(--w);
    left: var(--x);
    top: var(--y);
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
    animation: sticker-float var(--dur, 8s) cubic-bezier(.45, 0, .55, 1) infinite;
    animation-delay: var(--delay, 0s);
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
    max-width: 22vw;
    max-height: 22vw;
}

.sticker-field .sticker::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 64%;
    height: 24%;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(28, 28, 28, .22), transparent 74%);
    filter: blur(4px);
    z-index: -1;
    pointer-events: none;
}

@keyframes sticker-float {
    0%, 100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
    50% {
        transform:
            translate(-50%, calc(-50% + var(--lift, -12px)))
            rotate(calc(var(--rot, 0deg) + var(--sway, 4deg)));
    }
}

/* ONLY the top stickers disappear after generating workflow */
.sticker-field .sticker.sticker-top {
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

body.workflow-active .sticker-field .sticker.sticker-top {
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.3) !important;
    pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   ORGANIC RANDOM SCATTER POSITIONS (78 STICKERS)
   -------------------------------------------------------------------------- */
    .sticker-field .s01 {
        /* cursor.webp */
        --x: 93.6%;
        --y: 89.6%;
        --w: 48px;
        --rot: -2deg;
        --dur: 10.0s;
        --delay: -2.18s;
        --lift: -8px;
        --sway: 6deg;
    }
    .sticker-field .s02 {
        /* api.webp */
        --x: 50.2%;
        --y: 91.3%;
        --w: 46px;
        --rot: 9deg;
        --dur: 8.6s;
        --delay: -1.31s;
        --lift: -12px;
        --sway: -8deg;
    }
    .sticker-field .s03 {
        /* medal.webp */
        --x: 85.9%;
        --y: 7.6%;
        --w: 48px;
        --rot: 13deg;
        --dur: 9.2s;
        --delay: -4.72s;
        --lift: -6px;
        --sway: 4deg;
    }
    .sticker-field .s04 {
        /* firewall.webp */
        --x: 95.2%;
        --y: 76.7%;
        --w: 48px;
        --rot: -16deg;
        --dur: 11.1s;
        --delay: -4.09s;
        --lift: -12px;
        --sway: 4deg;
    }
    .sticker-field .s05 {
        /* hourglass.webp */
        --x: 94.6%;
        --y: 51.8%;
        --w: 46px;
        --rot: -7deg;
        --dur: 11.7s;
        --delay: -1.25s;
        --lift: -6px;
        --sway: -8deg;
    }
    .sticker-field .s06 {
        /* layers.webp */
        --x: 96.4%;
        --y: 39.5%;
        --w: 42px;
        --rot: 8deg;
        --dur: 8.4s;
        --delay: -0.85s;
        --lift: -12px;
        --sway: -8deg;
    }
    .sticker-field .s07 {
        /* lightning-bolt.webp */
        --x: 10.3%;
        --y: 79.1%;
        --w: 48px;
        --rot: -6deg;
        --dur: 8.8s;
        --delay: -2.45s;
        --lift: -8px;
        --sway: 8deg;
    }
    .sticker-field .s08 {
        /* calculator.webp */
        --x: 67.8%;
        --y: 95.4%;
        --w: 48px;
        --rot: -4deg;
        --dur: 9.7s;
        --delay: -5.09s;
        --lift: -8px;
        --sway: -8deg;
    }
    .sticker-field .s09 {
        /* lock.webp */
        --x: 4.6%;
        --y: 19.5%;
        --w: 48px;
        --rot: 1deg;
        --dur: 9.8s;
        --delay: -3.69s;
        --lift: -10px;
        --sway: 6deg;
    }
    .sticker-field .s10 {
        /* robot-2.webp */
        --x: 38.3%;
        --y: 95.6%;
        --w: 46px;
        --rot: -14deg;
        --dur: 8.0s;
        --delay: -3.93s;
        --lift: -8px;
        --sway: -8deg;
    }
    .sticker-field .s11 {
        /* trophy.webp */
        --x: 47.7%;
        --y: 6.1%;
        --w: 46px;
        --rot: 2deg;
        --dur: 11.5s;
        --delay: -3.11s;
        --lift: -6px;
        --sway: 6deg;
    }
    .sticker-field .s12 {
        /* code.webp */
        --x: 85.5%;
        --y: 58.3%;
        --w: 42px;
        --rot: 9deg;
        --dur: 10.3s;
        --delay: -3.32s;
        --lift: -10px;
        --sway: 8deg;
    }
    .sticker-field .s13 {
        /* workflow.webp */
        --x: 91.1%;
        --y: 10.9%;
        --w: 52px;
        --rot: -7deg;
        --dur: 8.0s;
        --delay: -2.86s;
        --lift: -12px;
        --sway: 4deg;
    }
    .sticker-field .s14 {
        /* shield.webp */
        --x: 63.2%;
        --y: 91.4%;
        --w: 52px;
        --rot: -17deg;
        --dur: 8.3s;
        --delay: -2.94s;
        --lift: -10px;
        --sway: -6deg;
    }
    .sticker-field .s15 {
        /* chip.webp */
        --x: 85.8%;
        --y: 31.2%;
        --w: 48px;
        --rot: 8deg;
        --dur: 11.3s;
        --delay: -3.73s;
        --lift: -10px;
        --sway: -4deg;
    }
    .sticker-field .s16 {
        /* cloud.webp */
        --x: 9.1%;
        --y: 92.9%;
        --w: 46px;
        --rot: 0deg;
        --dur: 9.7s;
        --delay: -4.04s;
        --lift: -6px;
        --sway: 4deg;
    }
    .sticker-field .s17 {
        /* brain.webp */
        --x: 82.7%;
        --y: 89.1%;
        --w: 38px;
        --rot: 11deg;
        --dur: 10.4s;
        --delay: -3.6s;
        --lift: -10px;
        --sway: -8deg;
    }
    .sticker-field .s18 {
        /* database.webp */
        --x: 4.5%;
        --y: 55.8%;
        --w: 48px;
        --rot: 16deg;
        --dur: 8.7s;
        --delay: -2.45s;
        --lift: -8px;
        --sway: 6deg;
    }
    .sticker-field .s19 {
        /* test-tube.webp */
        --x: 92.9%;
        --y: 19.3%;
        --w: 44px;
        --rot: -12deg;
        --dur: 11.6s;
        --delay: -4.88s;
        --lift: -12px;
        --sway: -4deg;
    }
    .sticker-field .s20 {
        /* line-chart.webp */
        --x: 87.1%;
        --y: 79.2%;
        --w: 44px;
        --rot: 2deg;
        --dur: 8.4s;
        --delay: -4.42s;
        --lift: -12px;
        --sway: 4deg;
    }
    .sticker-field .s21 {
        /* sparkles.webp */
        --x: 23.4%;
        --y: 67.4%;
        --w: 44px;
        --rot: -11deg;
        --dur: 8.2s;
        --delay: -2.77s;
        --lift: -8px;
        --sway: -4deg;
    }
    .sticker-field .s22 {
        /* server.webp */
        --x: 41.4%;
        --y: 78.9%;
        --w: 46px;
        --rot: -17deg;
        --dur: 8.9s;
        --delay: -4.02s;
        --lift: -12px;
        --sway: -4deg;
    }
    .sticker-field .s23 {
        /* star.webp */
        --x: 14.8%;
        --y: 4.4%;
        --w: 52px;
        --rot: 1deg;
        --dur: 7.9s;
        --delay: -2.68s;
        --lift: -8px;
        --sway: 4deg;
    }
    .sticker-field .s24 {
        /* microscope.webp */
        --x: 5.7%;
        --y: 43.8%;
        --w: 42px;
        --rot: -10deg;
        --dur: 8.5s;
        --delay: -5.65s;
        --lift: -6px;
        --sway: -4deg;
    }
    .sticker-field .s25 {
        /* book.webp */
        --x: 24.5%;
        --y: 87.1%;
        --w: 48px;
        --rot: 12deg;
        --dur: 9.5s;
        --delay: -0.62s;
        --lift: -10px;
        --sway: 8deg;
    }
    .sticker-field .s26 {
        /* chart.webp */
        --x: 11.6%;
        --y: 72.1%;
        --w: 44px;
        --rot: -15deg;
        --dur: 10.4s;
        --delay: -5.74s;
        --lift: -10px;
        --sway: 4deg;
    }
    .sticker-field .s27 {
        /* gear.webp */
        --x: 23.9%;
        --y: 5.2%;
        --w: 42px;
        --rot: 7deg;
        --dur: 10.6s;
        --delay: -3.86s;
        --lift: -10px;
        --sway: 6deg;
    }
    .sticker-field .s28 {
        /* rocket.webp */
        --x: 35.3%;
        --y: 88.8%;
        --w: 44px;
        --rot: 11deg;
        --dur: 10.3s;
        --delay: -2.84s;
        --lift: -6px;
        --sway: 8deg;
    }
    .sticker-field .s29 {
        /* plug.webp */
        --x: 13.0%;
        --y: 19.7%;
        --w: 52px;
        --rot: -12deg;
        --dur: 11.8s;
        --delay: -5.7s;
        --lift: -10px;
        --sway: 8deg;
    }
    .sticker-field .s30 {
        /* robot.webp */
        --x: 16.5%;
        --y: 51.9%;
        --w: 52px;
        --rot: -8deg;
        --dur: 11.7s;
        --delay: -5.23s;
        --lift: -10px;
        --sway: 8deg;
    }
    .sticker-field .s31 {
        /* satellite.webp */
        --x: 10.3%;
        --y: 34.4%;
        --w: 52px;
        --rot: -6deg;
        --dur: 8.4s;
        --delay: -4.22s;
        --lift: -8px;
        --sway: -4deg;
    }
    .sticker-field .s32 {
        /* key.webp */
        --x: 95.5%;
        --y: 63.1%;
        --w: 46px;
        --rot: 4deg;
        --dur: 11.0s;
        --delay: -0.93s;
        --lift: -10px;
        --sway: 8deg;
    }
    .sticker-field .s33 {
        /* crown.webp */
        --x: 58.6%;
        --y: 62.0%;
        --w: 44px;
        --rot: -14deg;
        --dur: 9.3s;
        --delay: -4.63s;
        --lift: -10px;
        --sway: 6deg;
    }
    .sticker-field .s34 {
        /* clock.webp */
        --x: 95.9%;
        --y: 69.8%;
        --w: 46px;
        --rot: -2deg;
        --dur: 10.3s;
        --delay: -2.3s;
        --lift: -8px;
        --sway: 4deg;
    }
    .sticker-field .s35 {
        /* idea.webp */
        --x: 27.3%;
        --y: 73.9%;
        --w: 44px;
        --rot: 11deg;
        --dur: 11.5s;
        --delay: -3.94s;
        --lift: -12px;
        --sway: -8deg;
    }
    .sticker-field .s36 {
        /* checkmark.webp */
        --x: 76.1%;
        --y: 89.4%;
        --w: 52px;
        --rot: -4deg;
        --dur: 8.5s;
        --delay: -3.46s;
        --lift: -8px;
        --sway: -4deg;
    }
    .sticker-field .s37 {
        /* bug.webp */
        --x: 63.4%;
        --y: 81.7%;
        --w: 46px;
        --rot: 2deg;
        --dur: 8.5s;
        --delay: -1.45s;
        --lift: -10px;
        --sway: 8deg;
    }
    .sticker-field .s38 {
        /* compass.webp */
        --x: 65.5%;
        --y: 70.1%;
        --w: 48px;
        --rot: 6deg;
        --dur: 8.7s;
        --delay: -3.41s;
        --lift: -10px;
        --sway: 4deg;
    }
    .sticker-field .s39 {
        /* bot.webp */
        --x: 44.8%;
        --y: 88.3%;
        --w: 52px;
        --rot: -1deg;
        --dur: 8.7s;
        --delay: -0.55s;
        --lift: -12px;
        --sway: -4deg;
    }
    .sticker-field .s40 {
        /* puzzle.webp */
        --x: 70.3%;
        --y: 6.1%;
        --w: 44px;
        --rot: -12deg;
        --dur: 10.5s;
        --delay: -0.82s;
        --lift: -10px;
        --sway: 4deg;
    }
    .sticker-field .s41 {
        /* cloud.webp */
        --x: 7.1%;
        --y: 86.4%;
        --w: 52px;
        --rot: -7deg;
        --dur: 7.8s;
        --delay: -2.78s;
        --lift: -8px;
        --sway: -6deg;
    }
    .sticker-field .s42 {
        /* lightning-bolt.webp */
        --x: 2.8%;
        --y: 26.7%;
        --w: 38px;
        --rot: -1deg;
        --dur: 9.1s;
        --delay: -1.59s;
        --lift: -6px;
        --sway: 6deg;
    }
    .sticker-field .s43 {
        /* line-chart.webp */
        --x: 11.5%;
        --y: 14.7%;
        --w: 52px;
        --rot: -6deg;
        --dur: 10.0s;
        --delay: -5.74s;
        --lift: -12px;
        --sway: -6deg;
    }
    .sticker-field .s44 {
        /* compass.webp */
        --x: 4.9%;
        --y: 70.4%;
        --w: 42px;
        --rot: 12deg;
        --dur: 10.4s;
        --delay: -3.96s;
        --lift: -8px;
        --sway: -4deg;
    }
    .sticker-field .s45 {
        /* puzzle.webp */
        --x: 79.0%;
        --y: 3.8%;
        --w: 46px;
        --rot: -6deg;
        --dur: 9.3s;
        --delay: -3.03s;
        --lift: -6px;
        --sway: -4deg;
    }
    .sticker-field .s46 {
        /* idea.webp */
        --x: 94.3%;
        --y: 33.4%;
        --w: 46px;
        --rot: -13deg;
        --dur: 11.2s;
        --delay: -0.54s;
        --lift: -8px;
        --sway: 4deg;
    }
    .sticker-field .s47 {
        /* microscope.webp */
        --x: 71.8%;
        --y: 66.0%;
        --w: 44px;
        --rot: 15deg;
        --dur: 9.9s;
        --delay: -3.73s;
        --lift: -12px;
        --sway: 6deg;
    }
    .sticker-field .s48 {
        /* checkmark.webp */
        --x: 85.0%;
        --y: 65.7%;
        --w: 44px;
        --rot: 5deg;
        --dur: 11.8s;
        --delay: -3.68s;
        --lift: -10px;
        --sway: -6deg;
    }
    .sticker-field .s49 {
        /* bug.webp */
        --x: 94.9%;
        --y: 81.6%;
        --w: 44px;
        --rot: 1deg;
        --dur: 11.6s;
        --delay: -4.83s;
        --lift: -8px;
        --sway: 6deg;
    }
    .sticker-field .s50 {
        /* test-tube.webp */
        --x: 84.9%;
        --y: 22.3%;
        --w: 52px;
        --rot: -15deg;
        --dur: 10.8s;
        --delay: -2.13s;
        --lift: -6px;
        --sway: 8deg;
    }
    .sticker-field .s51 {
        /* medal.webp */
        --x: 83.9%;
        --y: 38.0%;
        --w: 52px;
        --rot: -2deg;
        --dur: 9.1s;
        --delay: -5.65s;
        --lift: -10px;
        --sway: -8deg;
    }
    .sticker-field .s52 {
        /* rocket.webp */
        --x: 16.2%;
        --y: 59.6%;
        --w: 38px;
        --rot: -5deg;
        --dur: 10.8s;
        --delay: -5.17s;
        --lift: -12px;
        --sway: -4deg;
    }
    .sticker-field .s53 {
        /* server.webp */
        --x: 79.0%;
        --y: 62.7%;
        --w: 42px;
        --rot: -1deg;
        --dur: 8.9s;
        --delay: -3.83s;
        --lift: -12px;
        --sway: 4deg;
    }
    .sticker-field .s54 {
        /* clock.webp */
        --x: 97.4%;
        --y: 46.8%;
        --w: 48px;
        --rot: -15deg;
        --dur: 11.5s;
        --delay: -2.18s;
        --lift: -8px;
        --sway: -4deg;
    }
    .sticker-field .s55 {
        /* chart.webp */
        --x: 6.9%;
        --y: 5.3%;
        --w: 46px;
        --rot: 18deg;
        --dur: 8.2s;
        --delay: -1.48s;
        --lift: -6px;
        --sway: 6deg;
    }
    .sticker-field .s56 {
        /* robot.webp */
        --x: 87.5%;
        --y: 48.0%;
        --w: 44px;
        --rot: 11deg;
        --dur: 10.6s;
        --delay: -3.64s;
        --lift: -8px;
        --sway: 4deg;
    }
    .sticker-field .s57 {
        /* bot.webp */
        --x: 3.9%;
        --y: 48.5%;
        --w: 46px;
        --rot: 12deg;
        --dur: 9.9s;
        --delay: -3.11s;
        --lift: -10px;
        --sway: 4deg;
    }
    .sticker-field .s58 {
        /* api.webp */
        --x: 78.4%;
        --y: 94.2%;
        --w: 46px;
        --rot: 7deg;
        --dur: 11.7s;
        --delay: -4.48s;
        --lift: -12px;
        --sway: -4deg;
    }
    .sticker-field .s59 {
        /* crown.webp */
        --x: 48.0%;
        --y: 83.8%;
        --w: 52px;
        --rot: -16deg;
        --dur: 11.6s;
        --delay: -0.93s;
        --lift: -10px;
        --sway: 8deg;
    }
    .sticker-field .s60 {
        /* brain.webp */
        --x: 11.8%;
        --y: 48.1%;
        --w: 44px;
        --rot: -14deg;
        --dur: 11.3s;
        --delay: -1.87s;
        --lift: -10px;
        --sway: 6deg;
    }
    .sticker-field .s61 {
        /* cursor.webp */
        --x: 91.6%;
        --y: 28.2%;
        --w: 38px;
        --rot: 16deg;
        --dur: 9.2s;
        --delay: -2.9s;
        --lift: -6px;
        --sway: -8deg;
    }
    .sticker-field .s62 {
        /* database.webp */
        --x: 6.3%;
        --y: 62.9%;
        --w: 42px;
        --rot: 11deg;
        --dur: 8.2s;
        --delay: -3.94s;
        --lift: -10px;
        --sway: 6deg;
    }
    .sticker-field .s63 {
        /* book.webp */
        --x: 88.3%;
        --y: 71.1%;
        --w: 48px;
        --rot: -17deg;
        --dur: 10.4s;
        --delay: -4.51s;
        --lift: -6px;
        --sway: -6deg;
    }
    .sticker-field .s64 {
        /* layers.webp */
        --x: 55.7%;
        --y: 75.3%;
        --w: 48px;
        --rot: -7deg;
        --dur: 9.0s;
        --delay: -2.93s;
        --lift: -12px;
        --sway: -4deg;
    }
    .sticker-field .s65 {
        /* trophy.webp */
        --x: 54.5%;
        --y: 3.6%;
        --w: 52px;
        --rot: 0deg;
        --dur: 10.7s;
        --delay: -1.7s;
        --lift: -6px;
        --sway: -6deg;
    }
    .sticker-field .s66 {
        /* lock.webp */
        --x: 39.2%;
        --y: 5.7%;
        --w: 52px;
        --rot: 16deg;
        --dur: 9.4s;
        --delay: -2.47s;
        --lift: -8px;
        --sway: 6deg;
    }
    .sticker-field .s67 {
        /* gear.webp */
        --x: 14.7%;
        --y: 65.0%;
        --w: 42px;
        --rot: 10deg;
        --dur: 11.7s;
        --delay: -2.36s;
        --lift: -12px;
        --sway: 6deg;
    }
    .sticker-field .s68 {
        /* sparkles.webp */
        --x: 96.8%;
        --y: 6.7%;
        --w: 46px;
        --rot: -10deg;
        --dur: 8.2s;
        --delay: -2.1s;
        --lift: -6px;
        --sway: -8deg;
    }
    .sticker-field .s69 {
        /* workflow.webp */
        --x: 27.3%;
        --y: 94.2%;
        --w: 38px;
        --rot: -4deg;
        --dur: 9.3s;
        --delay: -1.74s;
        --lift: -6px;
        --sway: 8deg;
    }
    .sticker-field .s70 {
        /* code.webp */
        --x: 2.9%;
        --y: 10.0%;
        --w: 52px;
        --rot: 0deg;
        --dur: 10.0s;
        --delay: -2.86s;
        --lift: -12px;
        --sway: -8deg;
    }
    .sticker-field .s71 {
        /* key.webp */
        --x: 84.0%;
        --y: 16.9%;
        --w: 38px;
        --rot: 6deg;
        --dur: 7.9s;
        --delay: -3.42s;
        --lift: -12px;
        --sway: -4deg;
    }
    .sticker-field .s72 {
        /* calculator.webp */
        --x: 16.5%;
        --y: 80.9%;
        --w: 38px;
        --rot: 5deg;
        --dur: 10.1s;
        --delay: -5.3s;
        --lift: -10px;
        --sway: -6deg;
    }
    .sticker-field .s73 {
        /* shield.webp */
        --x: 32.7%;
        --y: 4.1%;
        --w: 52px;
        --rot: -15deg;
        --dur: 11.5s;
        --delay: -4.23s;
        --lift: -6px;
        --sway: -8deg;
    }
    .sticker-field .s74 {
        /* hourglass.webp */
        --x: 70.3%;
        --y: 77.7%;
        --w: 48px;
        --rot: -4deg;
        --dur: 8.0s;
        --delay: -1.25s;
        --lift: -6px;
        --sway: 8deg;
    }
    .sticker-field .s75 {
        /* star.webp */
        --x: 15.6%;
        --y: 88.4%;
        --w: 42px;
        --rot: -6deg;
        --dur: 10.6s;
        --delay: -4.17s;
        --lift: -8px;
        --sway: 4deg;
    }
    .sticker-field .s76 {
        /* satellite.webp */
        --x: 47.9%;
        --y: 78.0%;
        --w: 38px;
        --rot: 6deg;
        --dur: 11.4s;
        --delay: -3.04s;
        --lift: -8px;
        --sway: 4deg;
    }
    .sticker-field .s77 {
        /* chip.webp */
        --x: 78.0%;
        --y: 71.2%;
        --w: 38px;
        --rot: -12deg;
        --dur: 9.0s;
        --delay: -4.51s;
        --lift: -12px;
        --sway: -8deg;
    }
    .sticker-field .s78 {
        /* robot-2.webp */
        --x: 2.5%;
        --y: 36.8%;
        --w: 46px;
        --rot: -7deg;
        --dur: 10.1s;
        --delay: -2.46s;
        --lift: -10px;
        --sway: 6deg;
    }
@media (max-width: 768px) {
    .sticker-field .sticker {
        --w: 28px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .sticker-field .sticker {
        --w: 36px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sticker-field .sticker {
        animation: none !important;
        transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) !important;
    }
}