/* Startsidans nedre del, del 1: produkten i 3D (#produkt). Paketen (#paket) ligger nu direkt efter heron, i landning-a.css.
   Bygger på designsystemet i style.css (tokens, .sektion, .sektion-huvud, .knapp, .marke). Underlag: docs/research-nedre.md.
   Resten av nedre delen (galleri, bento, ärligt, så går det till, frågor, avslut) ligger i landning-b.css. */

/* ==== Produkten: tavlan i 3D, scrollstyrd ==============================================================
   produkt3d.js låter kameran gå runt tavlan och ljuset svepa över papperet medan sektionen passerar skärmen.
   Tre korta rader byts i takt. Utan JavaScript eller med "minska rörelse": stillbilden och alla tre raderna. */
.ned-produkt { padding-block: var(--sektion) calc(var(--sektion) * .5); overflow: clip; }
.pr-huvud { text-align: center; }
.pr-huvud .ingress { margin: var(--s4) auto 0; color: var(--text-2); }

.produkt-bild { margin: 0; }
.produkt-scen {
  position: relative; width: min(100%, 1200px); height: clamp(520px, 70vh, 820px); margin-inline: auto;
  display: grid; place-items: center;
}
/* Stillbilden: står kvar utan WebGL, med "minska rörelse" eller sparat data */
.produkt-scen img {
  width: auto; height: 82%; max-width: 86%; object-fit: contain; border-radius: 2px;
  box-shadow: 0 2px 4px rgb(0 0 0 / .08), 0 24px 48px -12px rgb(0 0 0 / .28);
  transition: opacity .6s var(--ut);
}
.produkt-scen canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s var(--ut); }
/* Kanterna tonar ut, så att tavlan aldrig klipps med en hård linje när kameran går nära */
.produkt-scen canvas { -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); }
.produkt-scen.tre canvas { opacity: 1; }
.produkt-scen.tre img { opacity: 0; }

.pr-under { display: grid; justify-items: center; gap: var(--s5); text-align: center; }
.pr-steg { margin: 0; padding: 0; list-style: none; max-width: 36em; color: var(--text-2); }
.pr-steg li + li { margin-top: var(--s2); }
.pr-steg b { color: var(--text); font-weight: 600; }

/* Valet mellan de två tryckta paketen: två raka flikar, ingen pillerform */
.produkt-val { display: inline-flex; border: 1px solid var(--linje-stark); border-radius: var(--r-liten); overflow: hidden; }
.produkt-val label { position: relative; cursor: pointer; }
.produkt-val label + label { border-left: 1px solid var(--linje-stark); }
/* produkt3d.js håller valets plats (osynligt) tills 3D-scenen visar det, så att inget under hoppar */
.produkt-val.reserverad[hidden] { display: inline-flex !important; visibility: hidden; }
.produkt-val input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.produkt-val span {
  display: block; padding: 10px 18px; white-space: nowrap; font-size: var(--fs-liten); letter-spacing: var(--ls-liten); line-height: 1.2857;
  color: var(--text-2); font-variant-numeric: tabular-nums; transition: background-color .3s var(--ui), color .3s var(--ui);
}
.produkt-val span b { font-weight: 600; color: var(--text); margin-right: .35em; transition: color .3s var(--ui); }
.produkt-val label:hover span { background: var(--yta-3); }
.produkt-val input:checked + span { background: var(--text); color: var(--yta-3); }
.produkt-val input:checked + span b { color: var(--yta); }
.produkt-val input:focus-visible + span { outline: 2px solid var(--bla); outline-offset: -4px; }
.produkt-not { margin: 0; max-width: 40em; font-size: var(--fs-fot); letter-spacing: var(--ls-fot); line-height: var(--lh-fot); color: var(--text-2); }

/* Kort: ingen sticky-sträcka längre. Kameran går runt tavlan medan sektionen passerar skärmen
   (produkt3d.js räknar då framsteget från att scenen kommer in nertill tills den lämnar upptill). */
@media (prefers-reduced-motion: no-preference) {
  .js .produkt-scen { height: clamp(460px, 62vh, 640px); }
  .js .pr-steg { display: grid; }
  .js .pr-steg li { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ui), transform .7s var(--ut); }
  .js .pr-steg li.aktiv { opacity: 1; transform: none; transition-delay: .12s; }
}

/* ==== Mindre skärmar ================================================================================== */
@media (max-width: 734px) {
  .produkt-scen { height: min(118vw, 560px); }
  .produkt-val span { padding: 10px 14px; }
}