/* Ekrano: forsiden, seksjon 5 (filmen som følger rullingen, A7) og seksjon 6 (Every screen: Apples produktbilder med
   løkkene, og galleriene, A10). Pakke F2. Lastes bare av forsiden, etter forside.css; skriptet er skjermer.js.
   Apples produktbilder (img.ramme) står helt stille: ingen inntoning, transform, filter, skygge eller overgang på dem
   eller på noe rundt dem, aldri beskåret, og tekst står aldri oppå (PLAN.md kapittel 11). Uten skript og med redusert
   bevegelse står alt stille: filmen er en vanlig avspiller, og rammene viser et stillbilde. */

/* == 5: filmen ==
   Rullebanen (.film-spor) er lang, festet (.film-feste) står fast i vinduet, og hvor langt du har rullet i banen, er
   hvor du er i filmen (som .video-sec på automagisk.app). Klassen rull settes av skriptet; uten den er banen vanlig høy. */
.film-sec{padding-bottom:0;overflow-x:clip}   /* clip, ikke hidden: da står filmen fortsatt fast (sticky) */
.film-intro{padding-bottom:clamp(6px,1.5vh,20px)}
.film-spor{position:relative;padding:clamp(30px,5vh,56px) 0 clamp(90px,12vw,150px)}
.rull .film-spor{height:calc(100vh + var(--rull,2600px));height:calc(100svh + var(--rull,2600px));padding:0}
.film-feste{--kant:max(clamp(20px,4vw,48px),calc((100% - 1200px)/2 + clamp(20px,4vw,48px)));
  padding:0 max(clamp(20px,4vw,48px),calc((100% - 1440px)/2 + clamp(20px,4vw,48px))) 0 var(--kant);display:grid;align-items:center;
  grid-template-columns:minmax(0,17.5rem) minmax(0,1fr);gap:clamp(28px,4vw,64px)}
/* Lista står på sidens venstre kant, som overskriftene; filmen får resten av bredden, ut mot vinduets marg. */
.rull .film-feste{position:sticky;top:0;height:100vh;height:100svh;padding-top:calc(var(--nav,72px) + 8px);padding-bottom:12px}
/* Et svakt, varmt lys under filmen, som gløden over byen. */
.film-feste::before{content:'';position:absolute;left:50%;bottom:-8%;width:min(1200px,100%);height:70%;
  transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,#ff7a6b1f,#ffa65c0d 52%,transparent)}
.film-feste>*{position:relative}

/* filmen: liggende 16:9 der det er plass, stående 9:16 på smale skjermer (valgt av skriptet før lasting) */
.film-boks{justify-self:center;width:100%;max-width:calc((100vh - var(--nav,72px) - 118px)*16/9);
  max-width:calc((100svh - var(--nav,72px) - 118px)*16/9)}
.staaende .film-boks{max-width:calc((100vh - var(--nav,72px) - 126px)*9/16);max-width:calc((100svh - var(--nav,72px) - 126px)*9/16)}
.film-note{font:12.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--fg2);margin-bottom:12px}
.film-ramme{position:relative;border-radius:clamp(12px,1.3vw,18px);overflow:hidden;background:#000;
  box-shadow:0 0 0 1px var(--line-dusk),0 50px 110px -50px #000,0 24px 100px -30px #ff8c5a2e}
.film-ramme video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;object-fit:cover;max-width:none}
.staaende .film-ramme video{aspect-ratio:9/16}
/* uten skript: avspilleren i <noscript> (med plakat) står i stedet for den rullestyrte */
html:not(.js) #ekranofilm{display:none}
.film-linje{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff1f;display:none}
.film-linje i{display:block;height:100%;width:0;background:var(--glow)}
.rull .film-linje{display:block}

/* under filmen: hintet før du ruller, så scenen du er i (på smale skjermer, der lista ikke får plass) */
.film-under{position:relative;height:2.9em;margin-top:12px}
.film-hint,.film-naa{position:absolute;inset:0 0 auto;display:none;justify-content:center;align-items:center;gap:10px;
  font:11.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--fg2);transition:opacity .5s var(--ease)}
.rull .film-hint{display:flex;text-transform:uppercase;letter-spacing:.14em;color:var(--amber)}
.film-hint::after{content:'';width:7px;height:7px;margin-top:-4px;border-right:1.5px solid;border-bottom:1.5px solid;
  transform:rotate(45deg);animation:film-pil 1.6s var(--ease) infinite}
@keyframes film-pil{50%{transform:translateY(4px) rotate(45deg);opacity:.55}}
.film-naa b{font-weight:500;color:var(--amber)}
.film-naa .vindu{font-size:16px}
.rull .film-naa{opacity:0}
.rull.i-gang .film-naa{opacity:1}
.rull.i-gang .film-hint{opacity:0}

/* scenelista: et lite vindu per scene, som tennes når filmen kommer dit */
.film-stegboks{position:relative;padding-left:30px}
.film-steg{position:relative;z-index:1;display:grid;gap:13px;font:12.5px/1.45 var(--mono);letter-spacing:.02em;color:var(--fg3)}
.film-steg li{position:relative;transition:color .35s}
.film-steg li::before{content:'';position:absolute;left:-30px;top:.3em;width:13px;height:10px;border-radius:2.5px;
  background:#16151b;box-shadow:inset 0 0 0 1.3px #ffd6aa3d;transition:background .35s,box-shadow .35s}
.film-steg .st-t{display:block}
.film-steg .st-e{display:block;font-size:11px;letter-spacing:.05em;color:var(--fg3);margin-top:1px}
.film-steg li.vist{color:var(--fg2)}
.film-steg li.vist::before,html:not(.js) .film-steg li::before{background:linear-gradient(45deg,#ff7a6b99,#ffa65c99 55%,#ffc98f99);box-shadow:inset 0 0 0 1.3px #f5f5f7a6}
.film-steg li.naa{color:var(--on-dusk)}
.film-steg li.naa .st-e{color:var(--cream)}
.film-steg li.naa::before{background:var(--glow);box-shadow:inset 0 0 0 1.3px #f5f5f7eb,0 0 12px #ffa65cbf}
.film-strek{position:absolute;left:6px;top:.4em;bottom:.4em;width:1px;background:var(--line-dusk)}
.film-strek i{display:block;width:100%;height:0;background:linear-gradient(var(--cream),var(--amber) 45%,var(--coral))}

@media(max-width:900px){
  .film-feste{grid-template-columns:minmax(0,1fr);justify-items:center}
  .film-boks{order:-1}
  .js .film-stegboks{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  html:not(.js) .film-stegboks{justify-self:start;margin-top:26px}
  .js .film-naa{display:flex}
  .rull .film-feste{align-content:center}
}

/* == 6: Every screen == */
.skjermer{overflow:hidden}
/* Én kolonne som aldri blir bredere enn seksjonen: galleriene er bredere enn vinduet og ville ellers dratt den med seg. */
.rader{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(110px,13vw,190px);margin-top:clamp(64px,8vw,112px)}
.rad{min-width:0}
/* Enheten får den brede kolonnen og teksten den smale, annenhver side: Apple TV og iPad til venstre, iPhone og Mac
   til høyre. Teksten står først i HTML-en, så skjermlesere får overskriften før bildet. */
.rad-inn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.62fr);align-items:center;gap:clamp(32px,5.6vw,88px)}
.rad.tv .rad-inn,.rad.ipad .rad-inn{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
.rad.tv .enhet,.rad.ipad .enhet{order:-1}
.rad-inn>.enhet,.rad-inn>.snarveier{justify-self:center}
.rad-tekst{max-width:28rem;width:100%}
.rad-tekst .eyebrow{margin-bottom:18px}
.rad-tekst h3{font:700 clamp(32px,3.9vw,54px)/1.03 var(--disp);letter-spacing:-.032em;margin-bottom:22px;text-wrap:balance}
.rad-tekst ul.vinduer{font-size:clamp(16.5px,1.35vw,18px);line-height:1.5;color:var(--fg2);gap:12px}
.rad-tekst ul.vinduer li::before{top:.5em}
.rad-tekst .hent{margin-top:30px}
.rad-tekst .sok{font-size:14.5px;color:var(--fg2);margin-top:16px;max-width:36ch;line-height:1.55}

/* Apples bilde av enheten, uendret og stille, med skjermen i den målte åpningen (rammer.json). Bildet ligger øverst,
   så rammens egne runde hjørner dekker skjermens. */
.enhet{position:relative;margin:0;width:100%;aspect-ratio:var(--ar);isolation:isolate}
.enhet .skjerm{position:absolute;left:var(--x);top:var(--y);width:var(--b);height:var(--h);border-radius:var(--r);
  overflow:hidden;background:#000}
.enhet .skjerm img,.enhet .skjerm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none}
html:not(.js) .enhet .skjerm video{display:none}
.enhet .ramme{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;pointer-events:none}
/* Vinduslys bak enheten: en bakgrunn i rommet, ikke en skygge eller glans på bildet. */
.enhet::before{content:'';position:absolute;left:50%;top:50%;z-index:-1;width:var(--lys,130%);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#ffa65c33,#ffa65c12 48%,transparent 72%)}
.enhet.tv{--ar:4300/2780;--x:2.39535%;--y:4.28058%;--b:89.30233%;--h:77.69784%;--r:0;--lys:118%}
.enhet.iphone{--ar:1470/3000;--x:5.10204%;--y:2.2%;--b:89.79592%;--h:95.6%;--r:10%/4.6025%;--lys:210%;
  width:clamp(240px,24vw,318px)}
.enhet.ipad{--ar:3000/2300;--x:4.13333%;--y:5.13043%;--b:91.73333%;--h:89.73913%;--r:1.0174%/1.3566%;--lys:125%}

/* Mac: ingen opptak ennå, og ingen tegning av Mac (Apples regel). Snarveiene fra appens menyer står der bildet skal. */
.snarveier{width:100%;max-width:29rem;background:var(--dusk);color:var(--on-dusk);border-radius:22px;
  padding:clamp(22px,3vw,34px) clamp(22px,3vw,36px);box-shadow:0 30px 70px -36px #15110e80}
.s-hode{font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dusk-muted);margin-bottom:12px}
.snarveier dl div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 0;border-top:1px solid var(--line-dusk)}
.snarveier dt{font-size:15.5px}
.snarveier dd{display:flex;gap:5px;flex:none}
.snarveier kbd{display:inline-grid;place-items:center;min-width:2.05em;height:2.05em;padding:0 .45em;border-radius:7px;
  font:500 14px/1 -apple-system,BlinkMacSystemFont,'Segoe UI Symbol','Segoe UI',var(--mono);color:var(--cream);
  background:var(--dusk3);border:1px solid #ffd6aa29}
/* ⌘ og ⌃ finnes ikke i skriftene på siden: systemskriften har dem (SF på Apple-enheter, Segoe UI Symbol på Windows). */
.s-fot{font-size:14px;color:var(--on-dusk-muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--line-dusk)}
.s-fot kbd{min-width:1.9em;height:1.9em;font-size:12.5px;vertical-align:-.15em}

/* galleriene: rene skjermbilder som blas sidelengs, fra kanten av teksten til kanten av vinduet */
.galleri{margin-top:clamp(48px,6vw,80px)}
.g-rull{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  --kant:max(clamp(20px,4vw,48px),calc((100% - 1200px)/2 + clamp(20px,4vw,48px)));scroll-padding-inline:var(--kant)}
.g-rull::-webkit-scrollbar{display:none}
.g-rull:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:0}
.g-liste{display:flex;gap:clamp(14px,1.7vw,24px);width:max-content;padding:4px var(--kant) 6px}
.g-liste li{flex:none;width:var(--gb);scroll-snap-align:start}
.galleri.tv{--gb:clamp(272px,34vw,488px)}
.galleri.ipad{--gb:clamp(262px,30vw,432px)}
.galleri.iphone{--gb:clamp(200px,16.5vw,232px)}
.g-liste figure{margin:0}
.g-liste img{display:block;width:100%;height:auto;border-radius:var(--gr,12px);background:var(--dusk);
  box-shadow:0 0 0 1px #15110e14,0 22px 40px -30px #15110e73}
.galleri.iphone img{--gr:clamp(20px,2vw,28px)}
.galleri.ipad img{--gr:clamp(10px,1vw,14px)}
.g-liste figcaption{margin-top:14px;font-size:15px;line-height:1.45;color:var(--fg2);max-width:34ch;padding-right:4px}
.g-liste figcaption b{display:block;font:600 16.5px/1.3 var(--disp);letter-spacing:-.01em;color:var(--fg);margin-bottom:3px}
.g-knapper{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.g-knapper[hidden]{display:none}
.g-knapper button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--fg);
  background:var(--card);border:1px solid var(--card-rule);transition:border-color .25s,opacity .25s,background .25s}
.g-knapper button:hover{border-color:var(--card-hover)}
.g-knapper button:disabled{opacity:.4;cursor:default}
.g-knapper svg{width:16px;height:16px}

@media(max-width:900px){
  .rad-inn,.rad.tv .rad-inn,.rad.ipad .rad-inn{grid-template-columns:minmax(0,1fr);gap:clamp(30px,6vw,44px)}
  .rad.tv .enhet,.rad.ipad .enhet{order:0}
  .rad-tekst{max-width:34rem}
  .enhet.iphone{width:min(64vw,290px);justify-self:center}
  /* På nettbrett ville TV-en og iPad-en ellers fylt hele bredden og blitt like store: TV størst, så iPad, så iPhone. */
  .enhet.tv{max-width:640px}
  .enhet.ipad{max-width:520px}
  .snarveier{justify-self:start}
}
@media(max-width:560px){.g-knapper{display:none}}

/* == redusert bevegelse: stillbildet i rammene (via <picture>), filmen som vanlig avspiller == */
@media(prefers-reduced-motion:reduce){
  .enhet .skjerm video{display:none}   /* like spesifikk som display:block over, og senere */
  .film-hint::after{animation:none}
  .film-steg li,.film-steg li::before{transition:none}
}