/* ============================================================================
   Take a Spin — mini CTA spinner (decorative). Shared component, loaded on the
   home and tips pages (see app/partials/header.php). Mounted as <div class="spin-mini">
   inside the CTA's image box — .spin__visual (home) / .tspin__preview (tips) — on top
   of the static composite. Built + driven by assets/js/spin-mini.js, which sizes
   --sm-photo from the box height so exactly 3 tiles fit at any container height.
   The whole thing is aria-hidden. Palette mirrors spinner.css, scoped to .spin-mini.
   ============================================================================ */
.spin-mini {
    --green:      oklch(0.575 0.135 150);
    --green-deep: oklch(0.500 0.130 150);
    --cream:      oklch(0.967 0.018 95);
    --sm-shadow:  oklch(0.410 0.018 118);
    --sm-radius:  9px;
    --sm-gap:     12px;
    --sm-photo:   92px;   /* default; spin-mini.js recomputes per box height (3 tiles fill it) */

    position: absolute; inset: 0; z-index: 2; overflow: hidden;
    background: #e6f1e8;          /* cream — matches the static composite's backdrop */
    opacity: 0;                   /* hidden until JS arms it; no-JS / reduced-motion -> static composite shows */
    pointer-events: none;
}
/* JS arms this on load (motion only), INSTANTLY (no transition) so the static spin-cta.webp
   placeholder is never seen fading under it — the opaque cream box just covers it from the start. */
.spin-mini.is-armed { opacity: 1; }
/* Motion off → never initialised; the static spin-cta.webp shows through instead. */
@media (prefers-reduced-motion: reduce) { .spin-mini { display: none; } }

.spin-mini__reel {
    position: absolute; top: 0; left: 10px; right: 10px;
    display: flex; flex-direction: column; gap: var(--sm-gap);
    transform: translateY(0); will-change: transform;   /* only WAAPI animates this — no CSS transition */
}

/* every tile is hidden until it's the centred intro tile, or the reel is spinning
   (once spinning starts it never turns off, so neighbours simply stay visible — no fade-out). */
/* align-items:center -> the green card sits at its natural (shorter) height, vertically
   centered against the taller photo, like the real spinner (not stretched to the photo). */
.sm-tile { display: flex; align-items: center; opacity: 0; transition: opacity .28s ease; }
.sm-tile.sm-center,
.spin-mini__reel.is-spinning .sm-tile { opacity: 1; }

.sm-photo {
    position: relative; z-index: 2; flex: none;
    width: var(--sm-photo); height: var(--sm-photo);
    border-radius: var(--sm-radius); overflow: hidden; background: #231f20;
    box-shadow: 5px 5px 0 0 var(--sm-shadow);
}
.sm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.sm-card {
    position: relative; z-index: 1; flex: 1 1 0; min-width: 0;
    margin-left: -14px; padding: 9px 11px 9px 24px;
    border-radius: var(--sm-radius);
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    color: var(--cream);
    background-image: linear-gradient(140deg, var(--green) 0%, var(--green-deep) 100%);
    box-shadow: 5px 5px 0 0 var(--sm-shadow);
}
.sm-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sm-title {
    margin: 0; flex: 1 1 auto; min-width: 0;
    font-weight: 700; font-size: 14px; line-height: 1.05; letter-spacing: -0.01em; color: #fff;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.sm-title em { font-style: italic; }
.sm-ic {
    flex: none; width: 20px; height: 20px; background: var(--cream);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.sm-lines { display: flex; flex-direction: column; gap: 4px; }
.sm-lines span { height: 1.5px; border-radius: 2px; background: oklch(0.967 0.018 95 / 0.78); }
.sm-lines span:nth-child(1) { width: 96%; }
.sm-lines span:nth-child(2) { width: 90%; }
.sm-lines span:nth-child(3) { width: 64%; }

.sm-ic.dance { animation: smIconDance 1.8s ease-in-out infinite; transform-origin: 50% 85%; }
@keyframes smIconDance {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25%      { transform: rotate(4deg) translateY(-1px); }
    50%      { transform: rotate(0deg) translateY(0); }
    75%      { transform: rotate(-4deg) translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) { .sm-ic.dance { animation: none; } }