/* ============================================================
   CANOMARA ZIP 3D (kanootti.js). Varakuva näkyy, kunnes malli on
   ladattu; sitten kangas häivyttyy esiin. Värinapit alareunassa.
   Taustaton: ei laatikkoa, varjoa eikä pyöristystä.
   ============================================================ */
.kanootti{ position:relative; width:100%; aspect-ratio:1.45; }
.kanootti > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity 600ms linear; }
.kanootti__kangas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 600ms linear; cursor:grab; }
.kanootti__kangas:active{ cursor:grabbing; }
.kanootti--valmis > img{ opacity:0; }
.kanootti--valmis .kanootti__kangas{ opacity:1; }

.kanootti__varit{
  /* Pystylista värin nimen kanssa (Jenna 28.10.2026): ei taustalaatikkoa eikä
     varjoa, pallero on selvästi painike. Työpöydällä kanootin oikealla puolella. */
  position:absolute; right:0; top:50%; translate:0 -50%; display:grid; gap:6px;
  opacity:0; transition:opacity 600ms linear 300ms; color:var(--musta);
}
.ps-case .kanootti__varit{ color:var(--kerma); }   /* punaisella pohjalla vaalea */
.kanootti--valmis .kanootti__varit{ opacity:1; }
.kanootti__vari{
  /* Sivuston tyyliin (Jenna 28.10.2026: "ruma"): tasainen pallo, nimi pienellä
     monolla versaalina kuten sivuston pienet tekstit; valittu ympyröidään
     käsin piirretyllä tussilla. */
  display:flex; align-items:center; gap:1.1em; padding:7px 0; border:0; background:none; cursor:pointer;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; line-height:1;
  color:inherit; text-align:left;
}
.kanootti__nimi{ opacity:.6; transition:opacity 200ms linear; }
.kanootti__vari:hover .kanootti__nimi, .kanootti__vari[aria-pressed="true"] .kanootti__nimi{ opacity:1; }
.kanootti__pallo{
  position:relative; isolation:isolate; flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--vari); box-shadow:inset 0 0 0 1px rgba(25,25,25,.22);
  transition:scale 300ms cubic-bezier(.16,1,.3,1);
}
.kanootti__vari:hover .kanootti__pallo{ scale:1.18; }
.ps-case .kanootti__pallo{ box-shadow:inset 0 0 0 1.5px var(--kerma); }   /* punainen pallo erottuu punaiselta pohjalta */
/* Valittu: rengas pallon ympärillä tekstin värillä. */
.kanootti__vari[aria-pressed="true"] .kanootti__pallo{ box-shadow:inset 0 0 0 1px rgba(25,25,25,.22), 0 0 0 3px var(--pohja, var(--kerma)), 0 0 0 4.5px currentColor; }
.ps-case .kanootti__vari[aria-pressed="true"] .kanootti__pallo{ --pohja:var(--puna); box-shadow:inset 0 0 0 1.5px var(--kerma), 0 0 0 3px var(--puna), 0 0 0 4.5px currentColor; }
.kanootti__vari:focus-visible{ outline:2px solid currentColor; outline-offset:4px; }
/* Työpöydällä värilistalle oma tila oikealla, ettei se peitä kanoottia. */
@media (min-width:861px){
  .kanootti > img, .kanootti__kangas{ right:150px; width:auto; }
  .kanootti__varit{ right:12px; }
}
/* Kapealla lista kanootin alle. */
@media (max-width:860px){
  .kanootti{ margin-bottom:210px; }
  .kanootti__varit{ right:auto; left:0; top:calc(100% + 16px); translate:none; }
}
@media (prefers-reduced-motion:reduce){ .kanootti > img, .kanootti__kangas, .kanootti__varit, .kanootti__pallo, .kanootti__vari{ transition:none; } }

/* Referenssisivulla kanootille koko vapaa leveys (Jenna 28.10.2026: "paljon tilaa"). */
@media (min-width:901px){
  .c-kuva:has(> .kanootti){ --w:67 !important; }
  .c-kuva > .kanootti{ aspect-ratio:1.3; }
}

/* Muotoilusivun case: kanootille leveämpi palsta (Jenna 28.10.2026: liian pieni). */
@media (min-width:861px){
  .ps-case:has(.kanootti){ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
  .ps-case .kanootti{ aspect-ratio:1.2; }
}

/* Referenssisivulla kanootti kaikkien muiden lappujen päällä (Jenna 28.10.2026). */
.c-kuva:has(> .kanootti){ z-index:60 !important; }