/* Etusivun kortit v3 (Designer /workspace/nettisivut-ikonit, Rolf 11.10.2026): splash-still + hover-video.
   Poikkeus SPECistä (Rolf 22.29): kaikki kehykset, korostusviiva ja Tila-otsikko brändisyaanina,
   kehys levossa 0.45 ja hoverissa 1.0 (Designer final 22.51), siirtymä 200 ms. */
[data-view="etusivu"] .modes { gap: 20px; }
[data-view="etusivu"] .card { --frame: #00B4FF; --frame-rest: 0.45; position: relative; isolation: isolate; background: #0A0A0C; border: 0; border-radius: 22px; box-shadow: none !important; min-height: 0; outline: none; }
[data-view="etusivu"] .card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1px;
  background: var(--frame); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--frame-rest); transition: opacity 200ms ease; }
[data-view="etusivu"] .card:hover::before, [data-view="etusivu"] .card:focus-visible::before, [data-view="etusivu"] .card:focus-within::before { opacity: 1; }
[data-view="etusivu"] .card .shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111114; border-radius: 22px 22px 0 0; }
[data-view="etusivu"] .card .shot img, [data-view="etusivu"] .card .shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
[data-view="etusivu"] .card .shot video { opacity: 0; transition: none; }
/* Hover-viiva (Rolf 00.23): toistuva video on oma koostekerroksensa, ja murto-pikselikorkeudella (kortti 429,33 px → kuva 241,5 px)
   se pyöristyy eri riviin kuin 1 px:n jakoviiva ja maalautuu sen päälle sahalaitaisena. Video päättyy 1 px ennen viivaa,
   ja viiva on omassa kerroksessaan videon yläpuolella. */
[data-view="etusivu"] .card .shot video { bottom: 1px; height: calc(100% - 1px); }
[data-view="etusivu"] .card .shot::after { z-index: 3; transform: translateZ(0); }
[data-view="etusivu"] .card .shot.is-playing video { opacity: 1; }
[data-view="etusivu"] .card .shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1; background: var(--frame); opacity: 0.8; transition: opacity 200ms ease; }
[data-view="etusivu"] .card:hover .shot::after, [data-view="etusivu"] .card:focus-within .shot::after { opacity: 1; }
[data-view="etusivu"] .card .label { color: #00B4FF; }
[data-view="etusivu"] .body { padding: 22px; }
[data-view="etusivu"] .body p { color: rgba(242,242,242,0.62); }
[data-view="etusivu"] .feat span { border: 1px solid rgba(242,242,242,0.10); background: rgba(242,242,242,0.04); color: rgba(242,242,242,0.72); }
@media (prefers-reduced-motion: reduce) { [data-view="etusivu"] .card::before, [data-view="etusivu"] .card .shot video, [data-view="etusivu"] .card .shot::after { transition: none; } }