/* ===========================================================
   Polar View — polish.css (hører til assets/js/polish.js)
   =========================================================== */

/* 1) Bilder toner inn når de er lastet */
.pv-laster{opacity:0}
.card-media img,.also-media img,.story-media img,.founder-media img{transition:opacity .28s ease-out, transform .5s var(--ease)}

/* 2) Handlekurv-telleren dunker (320 ms, én gang) */
@keyframes pvDunk{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.cart-count.pv-dunk{animation:pvDunk .32s var(--ease)}

/* 4) Produktbildet flyr mellom forside og produktside */
@view-transition{navigation:auto}
.static-product #mImg{view-transition-name:pv-produkt}
::view-transition-group(root){animation-duration:.24s}
::view-transition-group(pv-produkt){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(pv-produkt),::view-transition-new(pv-produkt){height:100%;object-fit:contain}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .static-product #mImg{view-transition-name:none}
}

/* 5) Kjøpsbar på produktsidene */
.pv-kjopsbar{position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(7,11,16,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-strong);padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .28s var(--ease);pointer-events:none}
.pv-kjopsbar.vis{transform:none;pointer-events:auto}
.pv-kjopsbar-inner{display:flex;align-items:center;gap:14px}
.pv-kjopsbar img{width:64px;height:48px;object-fit:cover;flex:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
.pv-kjopsbar-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pv-kjopsbar-txt b{font-family:var(--display);font-weight:500;font-size:17px}
.pv-kjopsbar-txt span{font-size:13px;color:var(--mist);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-kjopsbar .buy-btn{flex:none;padding:11px 22px}
.pv-kjopsbar .buy-btn[hidden]{display:none}
@media (max-width:560px){ .pv-kjopsbar img{display:none} .pv-kjopsbar .buy-btn{padding:11px 16px} }
@media (prefers-reduced-motion:reduce){ .pv-kjopsbar{transition:none} }

/* 6) Zoom på produktbildet (desktop) */
.static-product .modal-media{overflow:hidden}
.pv-zoombar{cursor:zoom-in;transition:transform .32s var(--ease)}
.pv-zoombar.pv-zoom{transform:scale(1.8)}
@media (prefers-reduced-motion:reduce){ .pv-zoombar{transition:none} }

/* 7) Horisontlinjen tegner seg ut når den scrolles inn (ren CSS, scroll-drevet) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .horizon{animation:pvHorisont linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    @keyframes pvHorisont{from{transform:scaleX(.1);opacity:0}to{transform:scaleX(1);opacity:.6}}
  }
}

/* 8) Detaljvinduet toner også UT (i dag forsvinner det brått) — ren CSS */
@media (prefers-reduced-motion:no-preference){
  .modal{transition:opacity .2s ease-out,display .2s allow-discrete}
  .modal[hidden]{opacity:0;pointer-events:none}
  .modal .modal-card{transition:transform .2s ease-out}
  .modal[hidden] .modal-card{transform:translateY(10px) scale(.985)}
}

/* ===== Generell polish (gjennomgang 2026-09-24) ===== */
/* A) Kort: .reveal overstyrer .card sin transition (hover-løft blir 700 ms, kant/skygge hopper) */
.card.reveal{transition:opacity .45s ease-out,transform .45s var(--ease),border-color .25s ease-out,box-shadow .25s ease-out}
.card.reveal.in{transition:opacity .45s ease-out,transform .25s var(--ease),border-color .25s ease-out,box-shadow .25s ease-out}
/* B) Rolig hover på bilde: bare svak zoom, ingen rotasjon — og kun på ekte mus */
.card:hover .card-media img{transform:none}
@media (hover:hover) and (pointer:fine){
  .card:hover .card-media img{transform:scale(1.035)}
}
@media (hover:none){ .card:hover{transform:none;box-shadow:none;border-color:var(--line)} }
/* C) Jevn baseline for pris/knapp i 5-kolonners rutenettet */
@media (min-width:1100px){
  #productGrid .card .specs{min-height:62px;align-content:flex-start}
  #productGrid .card-foot{min-height:70px}
}
/* D) Desktop-produktside + detaljvindu: bildet følger med mens du leser */
@media (min-width:761px){
  .modal-media{position:sticky;top:0;align-self:start}
  .static-product .modal-media{top:90px}
}
/* E) Detaljvinduet over menylinja (lukk-knappen havnet under nav) */
.modal{z-index:10010}
/* F) Typografi */
h1,h2,h3,.display,.h2,.also-title,.news-pop-title{text-wrap:balance}
p,.lead,.hero-trust,li{text-wrap:pretty}
.price .n,.modal-price .n,.price .old,.modal-price .old,.cart-count,.stock-low,.rev-summary-score,.ship-meter{font-variant-numeric:tabular-nums}
/* G) Mobil: ingen grå trykk-boks, men tydelig trykk-respons */
a,button,[role="button"],.swatch{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  .btn:active,.buy-btn:active,.filter:active,.add-btn:active{transform:scale(.97)}
  .card-media:active img{opacity:.85}
}
/* H) Menylinja: gjennomsiktig over hero, glass når du scroller */
.nav:not(.scrolled):not(.open){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Direktør-fotoet har lysere grå studiobakgrunn: rund «spotlight»-fjær i stedet for grå firkant */
.card-media img[src*="direktor"],.modal-media #mImg[src*="direktor"],.also-media img[src*="direktor"]{
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
/* Historie-bildet: ingen ramme, toner ut nederst i natta */
.story-media{border:0;background:none;overflow:visible}
.story-media img{border-radius:var(--r-lg) var(--r-lg) 0 0;
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent);mask-image:linear-gradient(to bottom,#000 58%,transparent)}
/* Scroll-reveal i tråd med MASTER.md (150–320 ms, kort vei) */
.reveal{transform:translateY(14px);transition:opacity .32s ease-out,transform .32s var(--ease)}
/* Evig hoppende pil = mas: to hopp holder */
.restsalg-teaser svg{animation-iteration-count:2}
/* Mobil: alle fire filterknapper på én linje */
@media (max-width:560px){.filter{padding:8px 14px;font-size:13.5px}.filters{flex-wrap:nowrap}}

/* Mobil: demp det sekundære, la det viktigste stå frem (mindre tekst på små flater) */
@media (max-width:560px){
  .value p{display:none}                       /* ikon + tittel sier nok i 2×2-rutenettet */
  .value{padding:18px 16px;gap:8px}
  .tech-card .tech-points{display:none}        /* punktlistene gjentar avsnittet rett over */
  .tech-illu svg{max-height:150px}
  .custom-teaser-text p{font-size:.85rem}
}

/* 9) Hero-brillen «lander», et lysglimt glir over glasset (én gang), deretter rolig sveving.
      Brillen er synlig fra første bilde (starter på 96 % størrelse, aldri usynlig) — LCP påvirkes ikke.
      Bruker de egne CSS-egenskapene `scale`/`translate`, så pekerparallaksen (transform i styles.css)
      får være i fred. Glimtet (.pv-glimt) lages av polish.js, maskeres med selve brillebildet
      (lyset treffer bare brillen, ikke bakgrunnen) og fjernes når det er ferdig. */
@media (prefers-reduced-motion:no-preference){
  .hero-visual{--pv-svev:-7px}
  .hero-visual img,.hero-visual .pv-glimt{
    animation:pvLand .9s cubic-bezier(.2,.7,.2,1) both, pvSvev 7s ease-in-out .9s infinite alternate;
  }
  @keyframes pvLand{from{scale:.96}to{scale:1}}
  @keyframes pvSvev{from{translate:0 0}to{translate:0 var(--pv-svev)}}

  .hero-visual .pv-glimt{
    position:absolute;z-index:2;pointer-events:none;overflow:hidden;
    /* samme vinkel + parallaks som bildet (se .hero-visual img i styles.css) */
    transform:rotate(-3deg) translate3d(calc(var(--px,0) * 14px), calc(var(--py,0) * 14px), 0);
    transition:transform .45s var(--ease);
    -webkit-mask:url("../../Media/sport-cut.webp") center / contain no-repeat;
            mask:url("../../Media/sport-cut.webp") center / contain no-repeat;
  }
  .hero-visual .pv-glimt i{
    position:absolute;top:-10%;bottom:-10%;left:0;width:32%;
    background:linear-gradient(100deg,rgba(140,203,238,0) 18%,rgba(190,228,250,.3) 40%,rgba(255,255,255,.8) 50%,rgba(190,228,250,.3) 60%,rgba(140,203,238,0) 82%);
    mix-blend-mode:screen;
    animation:pvGlimt 1.4s cubic-bezier(.4,0,.3,1) .3s both;
  }
  @keyframes pvGlimt{
    0%{transform:translateX(-110%) skewX(-14deg);opacity:0}
    15%,85%{opacity:1}
    100%{transform:translateX(330%) skewX(-14deg);opacity:0}
  }
}
@media (prefers-reduced-motion:no-preference) and (max-width:860px){
  .hero-visual{--pv-svev:-4px}
}