/* ==============================================
   360° Product Viewer — Scoped styles (.pv360-*)
   All selectors prefixed to avoid theme conflicts
   ============================================== */

/* Wrapper — the [data-viewer360] element itself */
[data-viewer360] {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2; /* Default ratio — override in your theme CSS */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

[data-viewer360]:fullscreen {
  aspect-ratio: unset;
  width: 100vw;
  height: 100vh;
  background: var(--white, #fff);
}

/* ---- Scrolläge ----
   Wrappern blir ett högt spår; scenen inuti nålas fast och fyller fönstret
   medan spåret scrollar förbi. overflow måste vara synligt — en förfader med
   overflow: hidden gör sticky verkningslöst. */
.pv360--scroll {
  cursor: default;
}

.pv360--pinned {
  aspect-ratio: unset;
  overflow: visible;
  height: var(--pv360-scroll-height, 250vh);
}

.pv360--pinned .pv360-stage {
  position: sticky;
  top: var(--pv360-stage-top, 0px);
  /* viewer.js sätter --pv360-stage-h till bildens höjd; utan JS fylls fönstret */
  height: var(--pv360-stage-h, calc(100svh - var(--pv360-stage-top, 0px)));
  overflow: hidden;
}

.pv360--scroll:not(.pv360--pinned) .pv360-stage {
  position: absolute;
  inset: 0;
}

/* ---- Yttre spår: hela sektionen nålas ----
   Två klasser som sätts på Bricks-elementen, inte av shortcoden: sektionen får
   pv360-track och bär scrollsträckan, containern inuti får pv360-pin och står
   still medan sträckan passerar. Snurran läser bara av hur långt den kommit.

   Varför layouten ligger i Bricks och inte här: det som ska stå still är
   rubriken, texten OCH maskinen tillsammans. Den grupperingen är sidans
   uppbyggnad, och den ska gå att redigera i byggaren.

   overflow måste vara synligt hela vägen upp — en förfader med overflow: hidden
   gör sticky verkningslöst utan att något syns i inspektorn. */
.pv360-track {
  min-height: var(--pv360-track-h, 250vh);
  overflow: visible;
}

.pv360-pin {
  position: sticky;
  top: var(--pv360-pin-top, 0px);
  /* Ingen höjd: innehållet bestämmer, så sektionen kan vara text bredvid bild
     utan att något sträcks ut. */
}

/* I yttre spår har snurran ingen egen nålning och inget reserverat spår — den
   är en vanlig ruta i sin container, och containern är den som står still.
   Egen klass, inte .pv360--scroll: den senare gäller även det inre nålade
   läget, och en static scen där hade tagit bort dess sticky. */
.pv360--extern .pv360-stage { position: static; inset: auto; height: 100%; }
.pv360--extern { aspect-ratio: 3 / 2; }

/* ---- Toning in medan man scrollar ----
   Elementen hänger på --pv360-scroll-progress, som komponenten skriver på
   spåret. Varje element har ett eget fönster i sträckan: --rev-in där det
   börjar synas och --rev-out där det är helt framme.

   Låst till scrollen, inte utlöst av den. Maskinen vrider sig baklänges när
   man scrollar upp, och text som blev kvar framme hade fått sektionen att läsa
   som två system som inte hör ihop. Nu skrubbar hela sektionen som en enhet.

   Fönstren överlappar. Utan överlapp blir det stackato — ett element i taget,
   var för sig — och med överlapp blir det en rörelse. Knapparna har var sitt
   fönster, inte ett gemensamt: två knappar som tänds samtidigt läser som en
   enda bred yta, och den andra tappar sin roll som andrahandsval. Allt är
   framme strax efter 40 % av sträckan, så resten är ren rotation utan att
   tävla om blicken.

   Klassen pv360-track--live sätts av JS först när spåret är hittat och mätt.
   Utan den är allt synligt: texten får aldrig kunna bli permanent osynlig för
   att ett skript inte kom igång. */
.pv360-track--live .pv360-reveal {
  /* Andelen av det EGNA fönstret som passerat, 0..1. */
  --t: clamp(0, calc((var(--pv360-scroll-progress, 0) - var(--rev-in, 0))
                     / (var(--rev-out, 0.2) - var(--rev-in, 0))), 1);
  /* Ease-out: 1 - (1-t)². Linjärt kändes mekaniskt — det sista lilla av
     toningen ska ta längre tid än det första, annars "klickar" den fram. */
  --e: calc(1 - (1 - var(--t)) * (1 - var(--t)));

  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * var(--rev-shift, 16px)));
  will-change: opacity, transform;
}

/* Fönstren. Egna klasser i stället för siffror per element, så tidsättningen
   sätts i Bricks genom att välja klass. Vill man ha ett eget fönster går
   --rev-in och --rev-out att sätta på elementet. */
.pv360-reveal--1 { --rev-in: 0;    --rev-out: 0.15; }
.pv360-reveal--2 { --rev-in: 0.08; --rev-out: 0.25; }
.pv360-reveal--3 { --rev-in: 0.20; --rev-out: 0.35; }
.pv360-reveal--4 { --rev-in: 0.28; --rev-out: 0.43; }

@media (prefers-reduced-motion: reduce) {
  .pv360-track--live .pv360-reveal {
    opacity: 1;
    transform: none;
  }
}

/* Canvas fills the wrapper */
.pv360-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Loading overlay ---- */
.pv360-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Ingen egen bakgrund: snurran ligger på grå platta i produktmallen och på
     vitt på startsidan — canvasen är genomskinlig och ytan bakom syns ändå. */
  background: transparent;
  z-index: 10;
  transition: opacity 0.4s ease;
}

.pv360-loading-overlay.pv360-overlay--done {
  opacity: 0;
  pointer-events: none;
}

.pv360-progress-bar-track {
  width: 200px;
  height: 4px;
  background: #eee;
  border-radius: 2px;
  overflow: hidden;
}

.pv360-progress-bar {
  height: 100%;
  /* Full width, scaled down — the bar is driven by transform, not width, so the
     loading progress (288 frames, an update per frame) never triggers layout.
     viewer.js sets --pv360-progress; transform-origin keeps it growing rightward. */
  width: 100%;
  transform: scaleX(var(--pv360-progress, 0));
  transform-origin: left center;
  background: #444;
  border-radius: 2px;
  transition: transform 0.1s ease;
}

.pv360-progress-text {
  margin-top: 12px;
  font-size: 13px;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0.02em;
}

/* ---- Control bar ----
   Uppe till vänster (Anders 2026-10-09; låg till höger, där armen och redskapet
   står) och bara vid hover: knapparna ska inte ligga och konkurrera med maskinen
   i bilden. Utan hovring (pekskärm) visas de alltid, annars vore fullskärm
   oåtkomlig där. */
.pv360-controls {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}

[data-viewer360]:hover .pv360-controls,
[data-viewer360]:focus-within .pv360-controls {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .pv360-controls {
    opacity: 1;
    pointer-events: auto;
  }
}

.pv360-btn {
  width: 34px;
  height: 34px;
  background: var(--white, #fff);
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  padding: 0;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  flex-shrink: 0;
}

.pv360-btn:hover {
  border-color: #bbb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.pv360-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke-width: 1.75; /* ikonsetet vid 16 px */
}

.pv360-divider {
  width: 1px;
  height: 18px;
  background: #eee;
  margin: 0 4px;
  flex-shrink: 0;
}