/* =================================================================
   PORTFOLJVYN. Ett eget kapitel man gar IN i, inte nagot man
   scrollar forbi. Joakim 2026-09-03:
   "man vill liksom att portfolion ska vara ett kapitel, man kan
    klicka sig igenom och titta, och inte vara nagot man scrollar forbi"
   ================================================================= */

/* knappen i flygturen */
.pf-oppna{display:inline-flex;align-items:center;gap:11px;margin-top:20px;
  background:rgba(61,255,180,.12);border:1px solid rgba(61,255,180,.5);
  border-radius:999px;padding:14px 26px;color:#EAF2FF;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  transition:background .3s,border-color .3s,transform .35s cubic-bezier(.22,1,.36,1)}
.pf-oppna:hover{background:rgba(61,255,180,.2);border-color:#3DFFB4;transform:translateY(-2px)}
.pf-oppna b{font-weight:600;color:#3DFFB4}

/* sjalva vyn */
.pfv{position:fixed;inset:0;z-index:120;display:none;
  background:rgba(4,6,12,.97);backdrop-filter:blur(22px);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pfv.pa{display:block}
.pfv-topp{position:sticky;top:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:16px clamp(16px,3.4vw,44px);
  background:linear-gradient(180deg,rgba(4,6,12,.98),rgba(4,6,12,.75) 70%,transparent);
  backdrop-filter:blur(10px)}
.pfv-titel{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#8B97AD}
.pfv-titel b{color:#EAF2FF;font-weight:500}
.pfv-stang{background:none;border:1px solid rgba(234,242,255,.28);border-radius:999px;
  width:42px;height:42px;flex:none;cursor:pointer;position:relative;
  transition:border-color .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.pfv-stang:hover{border-color:#EAF2FF;transform:rotate(90deg)}
.pfv-stang::before,.pfv-stang::after{content:"";position:absolute;left:50%;top:50%;
  width:15px;height:1px;background:#EAF2FF}
.pfv-stang::before{transform:translate(-50%,-50%) rotate(45deg)}
.pfv-stang::after{transform:translate(-50%,-50%) rotate(-45deg)}

.pfv-natet{display:grid;gap:clamp(14px,2vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  padding:8px clamp(16px,3.4vw,44px) clamp(60px,9vh,120px)}
@media (min-width:1300px){ .pfv-natet{grid-template-columns:repeat(4,1fr)} }
.pfv-natet .case{opacity:0;transform:translateY(22px) scale(.97)}

/* detaljvyn, nar man klickat pa ett arbete */
.pfd{position:fixed;inset:0;z-index:130;display:none;background:rgba(3,5,10,.985);
  backdrop-filter:blur(26px);flex-direction:column}
.pfd.pa{display:flex}
.pfd-topp{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px clamp(14px,3vw,34px);border-bottom:1px solid rgba(234,242,255,.1)}
.pfd-namn{min-width:0}
.pfd-namn b{display:block;font-size:clamp(15px,2vw,21px);letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfd-namn i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:#8B97AD;margin-top:3px}
.pfd-knappar{display:flex;gap:8px;align-items:center;flex:none}
.pfd-kn{background:none;border:1px solid rgba(234,242,255,.26);border-radius:999px;
  width:40px;height:40px;cursor:pointer;color:#EAF2FF;font-size:16px;line-height:1;
  transition:border-color .3s,background .3s}
.pfd-kn:hover{border-color:#EAF2FF;background:rgba(234,242,255,.08)}
.pfd-kn[disabled]{opacity:.3;cursor:default}
.pfd-lank{border:1px solid rgba(61,255,180,.5);background:rgba(61,255,180,.12);
  border-radius:999px;padding:11px 18px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#EAF2FF;
  transition:background .3s,border-color .3s}
.pfd-lank:hover{background:rgba(61,255,180,.22);border-color:#3DFFB4}
.pfd-ram{flex:1;min-height:0;position:relative;background:#06080F}
.pfd-ram iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;
  transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.pfd-ram iframe.inne{opacity:1}
.pfd-ram .pfd-vanta{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#8B97AD}
.pfd-rad{display:flex;gap:8px;padding:11px clamp(14px,3vw,34px);overflow-x:auto;
  border-top:1px solid rgba(234,242,255,.1);scrollbar-width:none}
.pfd-rad::-webkit-scrollbar{display:none}
.pfd-punkt{flex:none;width:7px;height:7px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(234,242,255,.28);transition:background .3s,transform .3s}
.pfd-punkt.nu{background:#3DFFB4;transform:scale(1.5)}
html.pfv-oppen,body.pfv-oppen{overflow:hidden}

/* ---------------------------------------------------------------
   KAPITLET I FLYGTUREN.
   Tre kort som svavade i ett tomt norrskensfalt sag ut som ett
   misstag. Nu driver alla arton forbi i tva band at var sitt hall,
   sa man ser omfattningen direkt och ytan far nagot att gora.
   --------------------------------------------------------------- */
.arb-band{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.arb-band + .arb-band{margin-top:clamp(10px,1.4vw,18px)}
.arb-spar{display:flex;gap:clamp(10px,1.4vw,18px);width:max-content;will-change:transform}
.arb-bricka{flex:none;width:clamp(150px,17vw,244px);border-radius:10px;overflow:hidden;
  border:1px solid rgba(234,242,255,.14);background:#070A12;position:relative;
  transition:border-color .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.arb-bricka img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  object-position:top center;opacity:.72;transition:opacity .4s}
.arb-bricka b{position:absolute;left:0;right:0;bottom:0;padding:16px 11px 8px;
  font-size:11.5px;font-weight:500;letter-spacing:-.01em;color:#EAF2FF;
  background:linear-gradient(180deg,transparent,rgba(5,7,15,.92));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arb-bricka:hover{border-color:rgba(61,255,180,.55);transform:translateY(-4px)}
.arb-bricka:hover img{opacity:1}
#ovArbeten .arb-rutnat{display:none}
#ovArbeten .arb-ing{max-width:52ch;margin-inline:auto}
.pf-oppna{margin-top:clamp(20px,3vh,34px)}
@media (max-width:620px){ .arb-bricka{width:clamp(128px,42vw,176px)} }

/* Norrskenet lyste rakt igenom brickorna sa de blev omojliga att lasa.
   Kapitlet far en egen mork botten, och bilderna gar upp i styrka. */
#ovArbeten::before{content:"";position:absolute;inset:-8vh -6vw;z-index:-1;
  background:radial-gradient(78% 58% at 50% 42%,rgba(4,6,12,.93),rgba(4,6,12,.72) 62%,transparent);
  pointer-events:none}
.arb-bricka{background:#04060C;box-shadow:0 18px 40px -22px rgba(0,0,0,.85)}
.arb-bricka img{opacity:.94}
.arb-bricka:hover img{opacity:1}
.arb-bricka b{background:linear-gradient(180deg,transparent,rgba(4,6,12,.96))}