/* =============================================================
   Hover-snurr på produktkorten — [brokk_card_spin]
   Samma yta som kortets vanliga bild (4:3, contain). Ruta 1 är en
   vanlig <img>; spriten ligger ovanpå och tänds när den laddats.
   ============================================================= */

.brk-spin {
    /* Två faktorer, multiplicerade.

       --brk-spin-air: luft runt maskinen. 360-rutorna är tajt beskurna
       (bygg-skriptet lägger bara 1,5 % marginal), medan produktbilderna
       på korten utan snurr har egen luft i filen.

       --brk-spin-size: maskinens storlek i förhållande till den högsta
       maskinen med snurra, 0–1, satt av PHP ur transporthöjden. Utan den
       ritas alla maskiner lika stora, eftersom varje serie beskärs för
       sig — och då går det inte att se att en 70+ är hälften så hög som
       en 500+.

       Skalning i stället för padding: padding i procent räknas alltid på
       bredden, även upptill och nedtill, så rutan hade tappat sina 4:3 och
       spriten sträckts på nytt. */
    --brk-spin-air:   0.85;
    --brk-spin-scale: calc(var(--brk-spin-air) * var(--brk-spin-size, 1));

    position:      relative;
    display:       block;
    width:         100%;
    aspect-ratio:  4 / 3;
    overflow:      hidden;
    cursor:        ew-resize;
    touch-action:  pan-y;
}

/* Maskinerna står på en gemensam marklinje, som på /compare-models/ —
   skalas de från mitten svävar de små i luften och storleken går inte
   att jämföra. Linjen ligger en bit upp från kortets kant.

   object-position nedtill: rutan passas in på höjden i dag (alla serier
   är smalare än 4:3), men en bred maskin skulle annars centreras
   lodrätt och lyfta från marken. */
.brk-spin__poster,
.brk-spin__sprite {
    scale:            var(--brk-spin-scale);
    transform-origin: 50% 92%;
}

.brk-spin__poster {
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      contain;
    object-position: 50% 100%;
    transition:      opacity 120ms ease-out;
}

/* Spriten: bakgrundsbild med kolumner x rader, positionen sätts av JS.
   En ruta ritas över hela ytan (600% 600% = sex rutor i var led), så
   rutan måste ha samma proportion som ytan. Den byggs därför som 4:3
   med maskinen inpassad — se pv360-build-2026-09-10.py. Med tajt
   beskurna rutor (1,125:1) sträckte samma regel maskinen 19 % bredare
   så fort man förde pekaren över kortet. */
.brk-spin__sprite {
    position:            absolute;
    inset:               0;
    background-repeat:   no-repeat;
    background-size:     calc(var(--brk-spin-cols, 6) * 100%) calc(var(--brk-spin-rows, 6) * 100%);
    background-position: var(--brk-spin-x, 0%) var(--brk-spin-y, 0%);
    opacity:             0;
    pointer-events:      none;
}

.brk-spin.is-ready .brk-spin__sprite { opacity: 1; }
.brk-spin.is-ready .brk-spin__poster { opacity: 0; }

/* Liten etikett: säger att bilden går att vrida. Bara där hover finns. */
.brk-spin__badge {
    position:       absolute;
    right:          var(--space-xs, 0.8rem);
    bottom:         var(--space-xs, 0.8rem);
    padding:        0.3em 0.7em;
    border-radius:  var(--radius-xs, 2px);
    background:     var(--text-dark, #000);
    color:          var(--white, #fff);
    font-size:      var(--text-xs, 1.2rem);
    font-weight:    600;
    letter-spacing: 0.06em;
    line-height:    1;
    opacity:        0.85;
    pointer-events: none;
    transition:     opacity var(--dur-fast) ease-out;
}

.brk-spin.is-ready .brk-spin__badge { opacity: 0; }

@media (hover: none) {
    .brk-spin { cursor: pointer; }
    .brk-spin__badge { display: none; }
}

/* ── Stillbild på snurrans scen (card-spin.php, [brokk_card_still]) ──
   Positionen räknas i PHP ur maskinens kontur i filen, så att den står på
   samma marklinje och i samma skala som snurrkorten. */
.brk-still {
    position:     relative;
    width:        100%;
    aspect-ratio: 4 / 3;
    margin:       0;
    overflow:     hidden;
}

.brk-still img {
    position:  absolute;
    top:       var(--brk-still-t);
    left:      var(--brk-still-l);
    height:    var(--brk-still-h);
    width:     auto;
    max-width: none;
}

.brk-still--plain img {
    position:   static;
    width:      100%;
    height:     100%;
    object-fit: contain;
}