/*
 * Underskin — Premium motion layer
 *
 * Motion thesis: things get applied to paper, like in a tattoo shop.
 * The tape is pressed on, a stamp hits, a polaroid is set down, a paper
 * lands. One easing family, short distances, every element animates once,
 * nothing loops offscreen, no movement under reduced motion.
 *
 * Content is visible by default: pre-states only apply under html.mo,
 * which motion.js sets after it has decided which elements to animate.
 * Out of scope on purpose: the home hero (video only), header and
 * navigation, portfolio, artist cards (their current behaviour is kept).
 */

:root {
    --mo-out: cubic-bezier(0.16, 1, 0.3, 1);      /* confident arrival */
    --mo-press: cubic-bezier(0.34, 1.32, 0.64, 1); /* small physical settle, not a bounce */
}

/* Tape applied (signature): unrolls left to right and settles to its
   resting angle. clip-path + the independent `rotate` property, which
   composes with the existing transform: rotate(-3deg). No layout change. */
html.mo .mo-tape {
    clip-path: inset(-20% 100% -20% 0);
    rotate: -4deg;
    opacity: 0;
}

html.mo .mo-tape.mo-in {
    clip-path: inset(-20% 0 -20% 0);
    rotate: 0deg;
    opacity: 1;
    transition:
        clip-path 520ms var(--mo-out) var(--mo-d, 0ms),
        rotate 620ms var(--mo-press) var(--mo-d, 0ms),
        opacity 120ms linear var(--mo-d, 0ms);
}

/* Stamp (Claudius section titles): lands slightly oversized and presses
   into the paper. One element, once; no per-letter split. */
html.mo .mo-stamp {
    opacity: 0;
    scale: 1.07;
    filter: blur(2px);
}

html.mo .mo-stamp.mo-in {
    opacity: 1;
    scale: 1;
    filter: blur(0);
    transition:
        opacity 220ms linear var(--mo-d, 0ms),
        scale 420ms var(--mo-out) var(--mo-d, 0ms),
        filter 320ms var(--mo-out) var(--mo-d, 0ms);
}

/* Polaroid set down (artist CTA band): drops in from a steeper angle and
   settles; its "Prenota" tape is applied right after. */
html.mo .mo-polaroid {
    opacity: 0;
    translate: 0 -28px;
    rotate: -7deg;
}

html.mo .mo-polaroid.mo-in {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
    transition:
        opacity 260ms linear,
        translate 700ms var(--mo-out),
        rotate 800ms var(--mo-press);
}

html.mo .mo-polaroid .artist-cta__polaroid-tape {
    --mo-d: 380ms;
}

/* Paper lands (event, merch, guest, explore cards; visit and form posters):
   a short rise and fade, staggered among siblings. */
html.mo .mo-paper {
    opacity: 0;
    translate: 0 22px;
}

html.mo .mo-paper.mo-in {
    opacity: 1;
    translate: 0 0;
    transition:
        opacity 300ms linear var(--mo-d, 0ms),
        translate 640ms var(--mo-out) var(--mo-d, 0ms);
}

/* After the entrance motion.js removes the mo-* classes, so each element
   is left with its own styles and hover transitions exactly as before. */

/* Press feedback on buttons and filter chips: a 90ms scale to 0.97.
   `scale` composes with the existing hover translateY(-1px). */
.btn:active,
.site-header__cta:active,
.portfolio-filters__chip:active,
.role-filter__link:active,
.event-filter__link:active,
.merch-filter__link:active,
.faq-nav__chip:active {
    scale: 0.97;
    transition: scale 90ms ease-out;
}

/* Infinite loops pause while offscreen (motion.js toggles the class). */
.mo-offscreen,
.mo-offscreen * {
    animation-play-state: paused !important;
}

/* Reduced motion: no spatial motion, content shown in place. */
@media (prefers-reduced-motion: reduce) {
    html.mo .mo-tape,
    html.mo .mo-stamp,
    html.mo .mo-polaroid,
    html.mo .mo-paper {
        opacity: 1 !important;
        clip-path: none !important;
        translate: none !important;
        rotate: none !important;
        scale: none !important;
        filter: none !important;
        transition: none !important;
    }
}