/* Wilfa Dovre 40 design på Mister Flincks startsida: raden överst och sektionen efter ortsraden (bygg/bygg.py
   hem_dovre_rad och hem_dovre, bara med --dovre). Felix 20.10.2026: "en snygg animation som gör att man vill gå till
   dovre sidan på vanliga landing page också". Samma vinternatt som kampanjsidan: pumpen i Mist Grey med luften som
   blåser ur spjället, roboten på isen och −40° som räknar ner från +40° (js/dovre-start.js) när sektionen syns.
   Ligger i css/dovre/ så att den inte följer med sajtens egen granskningslänk. */

/* ---------------------------------------------------------------- Raden överst */
.kampanj--dovre { display: flex; align-items: center; justify-content: center; gap: 10px; }
.kampanj--dovre .ic { flex: none; width: 17px; height: 17px; }
.kampanj--dovre > span { min-width: 0; text-wrap: balance; }
@media (prefers-reduced-motion: no-preference) { .kampanj--dovre .ic { animation: dvr-snurra 9s linear 3; } }   /* tre varv, inte oändligt (WCAG 2.2.2: sidorna med raden har ingen pausknapp) */
/* Pausknappen i toppen (html.stilla) stoppar också Dovre-delens rörelser */
html.stilla :is(.kampanj--dovre .ic, .dvr *, .dvr *::before, .dvr *::after) { animation-play-state: paused !important; }
@keyframes dvr-snurra { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Sektionen */
.dvr { position: relative; isolation: isolate; overflow: hidden; color: var(--d-ink); padding: clamp(72px, 8vw, 116px) 0;
  background:
    radial-gradient(48% 62% at 76% 34%, rgba(124, 192, 255, .17), transparent 72%),
    radial-gradient(40% 50% at 12% 110%, rgba(226, 113, 0, .14), transparent 70%),
    linear-gradient(180deg, #060e1a 0%, #0a1729 58%, #0f2439 100%); }
.dvr { --fokus: var(--orange-hi); } /* fokusringen på den mörka vinternatten (sajtens --fokus är för ljus botten) */
.dvr__sno { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; color: rgba(235, 245, 255, .85); }
.dvr__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(36px, 5vw, 76px); align-items: center; }

.dvr__pill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 22px; font-size: .9rem; font-weight: 600; color: var(--d-ink-2); }
.dvr__pill b { padding: 7px 13px; border-radius: 999px; background: var(--orange); color: var(--navy-950); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dvr h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 4.3rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.dvr h2 em { display: block; margin-top: 14px; font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-style: normal; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: var(--ice); }
.dvr__lead { max-width: 33em; margin: 22px 0 0; font-size: 1.06rem; line-height: 1.6; color: var(--d-ink-2); }
.dvr__pris { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin: 28px 0 0; }
.dvr__pris b { font-size: clamp(2.1rem, 3.3vw, 2.7rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.dvr__pris span { font-size: .98rem; color: var(--d-ink-2); }
.dvr__knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 26px; }
.dvr__knapp { position: relative; overflow: hidden; isolation: isolate; padding: 17px 30px; font-size: 1.02rem; }
/* Ett ljusskimmer som drar över knappen då och då */
.dvr__knapp::after { content: ""; position: absolute; inset: 0 auto 0 -60%; z-index: -1; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); opacity: 0; }
.dvr__nedr { margin: 0; font-size: .92rem; color: var(--d-ink-2); }
.dvr__nedr b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Scenen: pumpen överst i natthimlen, isen under med roboten till vänster och −40° till höger (som på kampanjsidan) */
.dvr__scen { position: relative; display: block; aspect-ratio: 100 / 84; color: inherit; text-decoration: none; }
/* Isen: bara mjuka övertoningar, inget streck och ingen mask eller oskärpa (de gav en synlig ruta i WebKit).
   Felix 22.10.2026: "kanten e lite väl skarp" */
.dvr__is { position: absolute; left: -30%; right: -30%; bottom: -10%; height: 62%; pointer-events: none;
  background:
    radial-gradient(34% 9% at 50% 22%, rgba(205, 232, 255, .13), transparent 100%),
    radial-gradient(48% 70% at 50% 34%, rgba(124, 192, 255, .12), transparent 100%); }
.dvr__pump { position: absolute; left: 3%; right: 3%; top: 0; }
.dvr__svav { position: relative; display: block; }
.dvr__pbild { position: relative; display: block; }
.dvr__pbild img { display: block; }
.dvr__skugga { position: absolute; max-width: none; height: auto; pointer-events: none; }
.dvr__pumpbild { position: relative; width: 100%; height: auto; }
.dvr .luft { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1400 / 1060; overflow: visible; pointer-events: none; color: #ffe8d2; opacity: 0; transition: opacity 1.4s ease .5s; }
.dvr .luft__strom { fill: none; stroke: currentColor; stroke-opacity: .2; stroke-linecap: round; stroke-dasharray: 190 260; stroke-dashoffset: 450; }
.dvr--igang .luft { opacity: 1; }
.dvr--syns .luft__strom { animation: dvr-blasa 2.9s linear infinite; animation-delay: calc(var(--i) * -.53s); }
@keyframes dvr-blasa { from { stroke-dashoffset: 450; } to { stroke-dashoffset: 0; } }

.dvr__robot { position: absolute; left: 4%; bottom: 7%; width: 25%; }
.dvr__robot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .5)); }
.dvr__led { position: absolute; left: 41%; bottom: 33%; width: 18%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 180, 255, .95), transparent); mix-blend-mode: screen; opacity: .2; }
.dvr--syns .dvr__led { animation: dvr-led 1.6s ease-in-out infinite alternate; }
@keyframes dvr-led { from { opacity: .15; } to { opacity: 1; } }
.dvr__kyla { position: absolute; right: 2%; bottom: 7%; display: flex; flex-direction: column; align-items: flex-end; }
.dvr__tagg { display: block; margin-bottom: 8px; font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.dvr__tagg--robot { width: max-content; margin-left: 56.7%; color: var(--orange-hi); transform: translateX(-50%); }   /* mitt över stationen, 56,7 % in i bilden, hur lång rubriken än är */
.dvr__tagg--kyla { color: var(--ice); }
.dvr__minus { display: block; width: 2.3em; text-align: right; font-size: clamp(64px, 8.4vw, 118px); font-weight: 800; line-height: .85; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #d8ecff 34%, #7cc0ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--ice);
  filter: drop-shadow(0 2px 0 #3f78ab) drop-shadow(0 3px 0 #2c5a83) drop-shadow(0 20px 24px rgba(0, 0, 0, .55)); }

/* ---------------------------------------------------------------- Rörelserna (bara när skriptet körs och rörelse är tillåten) */
@media (prefers-reduced-motion: no-preference) {
  .js .dvr__text > * { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--n) * 90ms + .1s); }
  .js .dvr:not(.dvr--igang) .dvr__text > * { opacity: 0; transform: translateY(16px); }
  .js .dvr__pump { transition: opacity 1s ease, transform 1.3s cubic-bezier(.2, .8, .2, 1); }
  .js .dvr:not(.dvr--igang) .dvr__pump { opacity: 0; transform: translateY(-34px) scale(.96); }
  .js .dvr__robot { transition: opacity .8s ease .55s, transform 1.1s cubic-bezier(.2, .8, .2, 1) .55s; }
  .js .dvr:not(.dvr--igang) .dvr__robot { opacity: 0; transform: translateX(-28px); }
  .js .dvr__kyla { transition: opacity .6s ease .25s; }
  .js .dvr:not(.dvr--igang) .dvr__kyla { opacity: 0; }
  /* Pumpen svävar sakta och följer pekaren lite (--px, --py från −1 till 1, js/dovre-start.js) */
  .dvr--syns .dvr__svav { animation: dvr-svava 6.5s ease-in-out 1.4s infinite alternate; }
  .dvr__pump { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -8px); }
  .dvr__robot, .dvr__kyla { translate: calc(var(--px, 0) * -6px) 0; }
  .dvr--syns .dvr__knapp::after { animation: dvr-skimmer 5s ease-in-out 2.2s infinite; }
}
@keyframes dvr-svava { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes dvr-skimmer { 0% { left: -60%; opacity: 0; } 8% { opacity: 1; } 26% { left: 120%; opacity: 0; } 100% { left: 120%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dvr .luft { opacity: 1; transition: none; }
  .dvr__sno { display: none; }
}

/* Hela scenen leder också till kampanjsidan: pumpen lyfter lite när pekaren är över den */
@media (hover: hover) {
  .dvr__scen .dvr__pbild { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
  .dvr__scen:hover .dvr__pbild { transform: translateY(-6px); }
}

/* ---------------------------------------------------------------- Mindre skärmar: scenen först, texten under */
@media (max-width: 1000px) {
  .dvr__in { grid-template-columns: minmax(0, 1fr); }
  .dvr__scen { order: -1; width: min(100%, 620px); margin: 0 auto; }
  .dvr__text { max-width: 640px; }
}
@media (max-width: 600px) {
  .dvr { padding: 56px 0 64px; }
  .dvr__scen { aspect-ratio: 100 / 92; }
  .dvr__robot { width: 30%; bottom: 5%; }
  .dvr__kyla { bottom: 5%; }
  .dvr__minus { font-size: clamp(54px, 17vw, 78px); }
  .dvr__tagg { font-size: .74rem; letter-spacing: .1em; }
  .dvr__knapp { width: 100%; }
}

/* ---------------------------------------------------------------- Produktkortet bland luftvärmepumparna (kort_dovre) */
.pk--dovre .pk__tag--forhand { left: auto; right: 14px; background: var(--orange); color: var(--navy-950); }
.pk--dovre .pk__tag--dovre { background: var(--navy-900); color: #fff; }
.pk__robot { position: absolute; right: 12px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-end; width: 27%; }
.pk__bild .pk__robot img { position: static; inset: auto; width: 100%; height: auto; mix-blend-mode: normal; filter: drop-shadow(0 6px 8px rgba(11, 24, 40, .22)); }
.pk__robot b { margin-top: -4px; padding: 3px 8px; border-radius: 999px; background: var(--orange); color: var(--navy-950); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pk--dovre:hover .pk__robot img { transform: none; }