/* On Agency's paper collage, with separate layers for moving, falling, and jiggling. */
.switzerland-memo .folder-collage {
    position: relative;
    margin: 44px 0 0;
}
.switzerland-memo .sticker-passage {
    position: relative;
    padding: 88px 54px 84px;
}
.switzerland-memo .sticker-passage + .sticker-passage { padding-top: 60px; }
.switzerland-memo .sticker-passage > :is(h3, h4) { margin-top: 0; }
.switzerland-memo .sticker-passage > p { margin-bottom: 0; }
.switzerland-memo .sticker-question {
    background: var(--baby-yellow);
    border-radius: 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.switzerland-memo .folder-sticker {
    position: absolute;
    z-index: 3;
    display: block;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    line-height: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.switzerland-memo .folder-sticker.is-dragging { cursor: grabbing; }
.switzerland-memo .sticker-art {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: rotate(var(--sticker-tilt));
    transform-origin: center;
    pointer-events: none;
}
.switzerland-memo .sticker-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}
.switzerland-memo .sticker-yellow { width: 118px; top: -24px; left: -8px; }
.switzerland-memo .sticker-pink { width: 112px; top: 38%; right: -50px; }
.switzerland-memo .sticker-silver { width: 120px; bottom: -20px; left: 64px; }
.switzerland-memo .sticker-blue { width: 94px; top: 38%; left: -34px; }
.switzerland-memo .sticker-pixel { width: 146px; top: -42px; right: 18px; }
.switzerland-memo .sticker-outline { width: 150px; bottom: -22px; right: 22px; }

/* Trim empty source canvas on the image itself, so rotation and jiggle never clip the artwork. */
.switzerland-memo .brand-collage { position: relative; margin: 24px 0 30px; }
.switzerland-memo .brand-passage { padding: 100px 54px 94px; }
.switzerland-memo .brand-passage > h3 { margin-bottom: 12px; scroll-margin-top: 132px; }
.switzerland-memo .brand-sticker-field { position: absolute; inset: 0; pointer-events: none; }
.switzerland-memo .brand-sticker { pointer-events: auto; }
.switzerland-memo .brand-sticker .sticker-art { position: relative; overflow: visible; }
.switzerland-memo .brand-sticker .sticker-art img {
    position: absolute;
    width: var(--art-size, 216%);
    height: auto;
    max-width: none;
    clip-path: inset(var(--art-crop, 20%));
    left: var(--art-left, -58%);
    top: var(--art-top, -58%);
}
/* Heading and paragraph share the folder collage's inset; stickers frame that text block. */
.switzerland-memo .sticker-provider-openai { width: 44px; top: 135px; left: -9px; --art-crop: 25.0000% 25.0000% 25.0000% 25.9259%; }
.switzerland-memo .sticker-provider-claude { width: 42px; top: 44px; left: 4px; --art-crop: 25.1852% 25.0926% 25.0926% 25.1852%; }
.switzerland-memo .sticker-provider-gemini { width: 46px; top: 3px; left: 88px; --art-size: 240%; --art-left: -70%; --art-top: -67%; --art-crop: 27.2222% 28.4259% 29.6296% 28.4259%; }
.switzerland-memo .sticker-provider-code { width: 54px; bottom: 50px; right: 96px; aspect-ratio: 1.5; --art-size: 174.2%; --art-left: -37.1%; --art-top: -81.5%; --art-crop: 32.1296% 20.7407% 29.8148% 20.7407%; }
.switzerland-memo .sticker-provider-terminal { width: 48px; top: 70px; right: 72px; --art-size: 200%; --art-left: -50%; --art-top: -50%; --art-crop: 24.1667% 24.0741% 24.0741% 24.1667%; }
.switzerland-memo .sticker-provider-silver { width: 46px; top: 143px; right: -8px; --art-size: 300%; --art-left: -95%; --art-top: -98%; --art-crop: 31.4815% 32.4074% 31.9444% 31.4815%; }
.switzerland-memo .sticker-provider-mascot { width: 40px; bottom: 4px; right: 20px; --art-size: 257.1%; --art-left: -79.3%; --art-top: -78.1%; --art-crop: 30.2778% 30.0000% 30.4630% 30.4630%; }

.switzerland-memo .sticker-wrapper-cursor { width: 48px; top: 150px; left: -8px; --art-size: 208%; --art-left: -54%; --art-top: -54%; --art-crop: 25.2778% 28.7037% 25.3704% 28.6111%; }
.switzerland-memo .sticker-wrapper-squares { width: 38px; top: 12px; left: 76px; --art-size: 240%; --art-left: -70%; --art-top: -70%; --art-crop: 28.0556% 28.0556% 28.0556% 28.0556%; }
.switzerland-memo .sticker-wrapper-hexagons { width: 44px; top: 58px; left: 0; --art-size: 180%; --art-left: -40%; --art-top: -40%; --art-crop: 21.1111% 24.6296% 21.1111% 24.6296%; }
.switzerland-memo .sticker-wrapper-flower { width: 38px; bottom: 4px; right: 115px; --art-crop: 25.2778% 25.2778% 25.2778% 25.2778%; }
.switzerland-memo .sticker-wrapper-notion { width: 48px; bottom: 38px; right: 54px; --art-size: 180%; --art-left: -40%; --art-top: -40%; --art-crop: 20.7407% 21.7593% 20.7407% 21.8519%; }
.switzerland-memo .sticker-wrapper-conductor { width: 44px; bottom: 12px; right: 0; --art-size: 240%; --art-left: -70%; --art-top: -70%; --art-crop: 28.0556% 27.9630% 28.0556% 27.9630%; }

.switzerland-memo [data-sticker-state='waiting'] .folder-sticker:not([data-moved]),
.switzerland-memo [data-sticker-state='loading'] .folder-sticker:not([data-moved]) { visibility: hidden; }
.switzerland-memo [data-sticker-state='revealing'] .folder-sticker:not([data-moved]) .sticker-art {
    animation: folder-sticker-fall 800ms cubic-bezier(.22, .7, .3, 1) var(--sticker-delay) both;
}
@media (hover: hover) and (pointer: fine) {
    .switzerland-memo .folder-collage:has(.sticker-question:hover) [data-sticker-state='settled'] .folder-sticker:not(.is-dragging) img,
    .switzerland-memo [data-sticker-state='settled'] .folder-sticker:hover:not(.is-dragging) img {
        animation: folder-sticker-jiggle 480ms ease-in-out;
    }
}
@keyframes folder-sticker-fall {
    from { opacity: 0; transform: translateY(-20px) rotate(calc(var(--sticker-tilt) - 5deg)); }
    65% { opacity: 1; }
    82% { transform: translateY(2px) rotate(calc(var(--sticker-tilt) + 1deg)); }
    to { opacity: 1; transform: translateY(0) rotate(var(--sticker-tilt)); }
}
@keyframes folder-sticker-jiggle {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-2px) rotate(-2deg); }
    55% { transform: translateY(1px) rotate(2deg); }
    80% { transform: translateY(0) rotate(-1deg); }
}
@media (max-width: 800px) {
    .switzerland-memo .folder-collage { margin-top: 32px; }
    .switzerland-memo .sticker-passage,
    .switzerland-memo .sticker-passage + .sticker-passage { padding: 80px 0 72px; }
    .switzerland-memo .sticker-yellow { width: 100px; top: -18px; left: 0; }
    .switzerland-memo .sticker-pink { width: 80px; top: -5px; right: 2px; }
    .switzerland-memo .sticker-silver { width: 100px; bottom: -9px; left: auto; right: 16px; }
    .switzerland-memo .sticker-blue { width: 88px; top: -4px; left: 12px; }
    .switzerland-memo .sticker-pixel { width: 112px; top: -12px; right: 0; }
    .switzerland-memo .sticker-outline { width: 128px; bottom: -18px; right: 8px; }
    .switzerland-memo .brand-passage { padding: 104px 26px 100px; }
    .switzerland-memo .brand-passage > h3 { margin-bottom: 12px; }
    .switzerland-memo .sticker-provider-openai { width: 30px; left: -8px; top: 142px; }
    .switzerland-memo .sticker-provider-claude { width: 32px; left: 8px; top: 36px; }
    .switzerland-memo .sticker-provider-gemini { width: 36px; left: 56px; top: 6px; }
    .switzerland-memo .sticker-provider-terminal { width: 36px; right: 32px; top: 68px; }
    .switzerland-memo .sticker-provider-silver { width: 32px; right: -8px; top: 157px; }
    .switzerland-memo .sticker-provider-code { width: 42px; right: 75px; bottom: 52px; }
    .switzerland-memo .sticker-provider-mascot { width: 32px; right: 10px; bottom: 15px; }
    .switzerland-memo .sticker-wrapper-cursor { width: 30px; left: -8px; top: 156px; }
    .switzerland-memo .sticker-wrapper-squares { width: 34px; left: 50px; top: 16px; }
    .switzerland-memo .sticker-wrapper-hexagons { width: 40px; left: 12px; top: 57px; }
    .switzerland-memo .sticker-wrapper-flower { width: 30px; right: 89px; bottom: 10px; }
    .switzerland-memo .sticker-wrapper-notion { width: 38px; right: 45px; bottom: 50px; }
    .switzerland-memo .sticker-wrapper-conductor { width: 36px; right: -4px; bottom: 25px; }

}
@media (prefers-reduced-motion: reduce) {
    .switzerland-memo .folder-sticker .sticker-art,
    .switzerland-memo .folder-sticker img { animation: none !important; }
    .switzerland-memo [data-sticker-state] .folder-sticker { visibility: visible; }
}
