/* OBJEKTET — riktning 3 av 5.
   Referens: Hiroto Sato (hirotos.com), Awwwards SOTD 18 juli 2026, skärminspelad.
   Lärdomen: ett enda fysiskt objekt bär hela sidan, och navigationen sitter PÅ
   objektet i stället för i en rad. Vit duk, pytteliten metadata i tre spalter.
   Facit: _referens-awwwards/RIBBAN.md */

@font-face{font-family:General;src:url(fonts/general-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:General;src:url(fonts/general-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:General;src:url(fonts/general-600.woff2) format('woff2');font-weight:600;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --duk:#f7f7f5;        /* nästan vitt, en gnutta varmt — inte kliniskt vitt */
  --ink:#131313;
  --grå:#63615c;
  --linje:#dcdad4;
  --stal:#8d9296;       /* objektets metall, används bara i objektet */
}

html{overflow-x:clip}
body{
  background:var(--duk);color:var(--ink);
  font-family:General,system-ui,sans-serif;font-size:15px;line-height:1.5;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}

/* ══════════ LADDSKÄRMEN ══════════
   Hiroto Sato säger "THANKS FOR WAITING – ALL SET." Poängen är att väntan
   erkänns i stället för att döljas bakom en spinner. */
.lastar{
  position:fixed;inset:0;z-index:90;background:var(--duk);
  display:grid;place-content:center;justify-items:center;gap:.6rem;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grå);
  transition:opacity .7s ease,visibility .7s;
}
.lastar.klar{opacity:0;visibility:hidden}
.lastar__tal{font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ══════════ TOPPEN ══════════ */
.topp{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  padding:clamp(1rem,2.2vw,1.7rem) clamp(1.1rem,3vw,2.4rem);
}
.marke{font-weight:600;font-size:1.02rem;letter-spacing:-.01em;justify-self:start}
.marke sup{font-size:.5em;vertical-align:super;font-weight:400}
.topp__mitt,.topp__lank{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grå);
}
.topp__mitt{justify-self:center}
.topp__lank{justify-self:end;transition:color .2s ease}
.topp__lank:hover{color:var(--ink)}
@media (max-width:760px){.topp__mitt{display:none}}

/* ══════════ OBJEKTET ══════════ */
.scen{position:fixed;inset:0;z-index:1}
.scen canvas{display:block;width:100%;height:100%}

/* ══════════ FÄSTPUNKTERNA ══════════
   Navigationen sitter på objektet: varje etikett pixellåses mot en punkt i 3D
   och följer den när konstruktionen vrids. Det är inte en meny ovanpå en bild. */
.faste{position:fixed;inset:0;z-index:12;pointer-events:none}
.punkt{
  position:absolute;top:0;left:0;
  display:flex;align-items:center;gap:.5rem;
  pointer-events:auto;cursor:pointer;
  transform-origin:0 50%;
  will-change:transform,opacity;
}
.punkt__ring{
  width:9px;height:9px;flex:none;border-radius:50%;
  border:1px solid var(--ink);background:var(--duk);
  transition:background .25s ease,transform .25s ease;
}
.punkt__txt{
  font-size:11px;letter-spacing:.06em;white-space:nowrap;
  padding:.16em .5em;background:var(--duk);
  border:1px solid var(--linje);
  transition:border-color .25s ease,color .25s ease;
}
.punkt:hover .punkt__ring,.punkt.ar-aktiv .punkt__ring{background:var(--ink);transform:scale(1.25)}
.punkt:hover .punkt__txt,.punkt.ar-aktiv .punkt__txt{border-color:var(--ink)}
/* .22 gjorde bakre etiketter oläsliga samtidigt som de krockade med de främre */
.punkt.ar-bakom{opacity:.34}
.punkt.ar-bakom .punkt__ring{transform:scale(.8)}
.punkt.ar-bakom .punkt__txt{border-color:transparent}
@media (max-width:820px){.punkt__txt{display:none}}

/* ══════════ LÄSBANDET ══════════
   Stationerna är tomma höjd. Objektet är det som rör sig; texten byts i .lasare. */
.las{position:relative;z-index:10;pointer-events:none}
.station{min-height:100svh;display:grid;align-content:center;
  padding:0 clamp(1.1rem,3vw,2.4rem);pointer-events:none}
.station[data-station]{min-height:118svh}

.station--ingang{max-width:34rem}
.station--ingang h1{
  font-weight:600;font-size:clamp(2.1rem,5.2vw,4.1rem);line-height:1.02;letter-spacing:-.032em;
}
.station--ingang p{margin-top:1.2rem;max-width:32ch;color:var(--grå);font-size:1.02rem}
.vink{
  margin-top:2.4rem!important;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink)!important;
}

.station--utgang{
  text-align:center;justify-items:center;pointer-events:auto;
  background:linear-gradient(to bottom,rgba(247,247,245,0),var(--duk) 32%);
}
.station--utgang h2{
  font-weight:600;font-size:clamp(1.8rem,4.4vw,3.4rem);line-height:1.04;letter-spacing:-.028em;
}
.station--utgang p{margin-top:1rem;color:var(--grå)}
.knapp{
  margin-top:2rem;border:1px solid var(--ink);
  padding:.78em 2em;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease;
}
.knapp:hover{background:var(--ink);color:var(--duk)}

/* ══════════ LÄSAREN ══════════ */
.lasare{
  position:fixed;left:clamp(1.1rem,3vw,2.4rem);bottom:clamp(5rem,9vh,7.5rem);
  z-index:20;max-width:26rem;pointer-events:none;
  opacity:0;transition:opacity .4s ease;
}
.lasare.syns{opacity:1}
.lasare__avd{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grå);
  margin-bottom:.5rem;
}
.lasare__namn{
  font-weight:600;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.04;letter-spacing:-.026em;
}
.lasare__brod{margin-top:.7rem;color:var(--grå);font-size:.96rem;max-width:34ch}
@media (max-width:820px){
  .lasare{left:1.1rem;right:1.1rem;bottom:6rem;max-width:none}
}

/* ══════════ FOTEN — tre spalter liten metadata, Satos grepp ══════════ */
.fot{
  position:fixed;bottom:0;left:0;right:0;z-index:25;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  padding:.9rem clamp(1.1rem,3vw,2.4rem) 1.1rem;
  border-top:1px solid var(--linje);background:var(--duk);
}
.fot span{
  display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--grå);
  margin-bottom:.16rem;
}
.fot p{font-size:12px;font-weight:500}
.fot b{font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .fot{grid-template-columns:repeat(2,1fr);gap:.6rem 1rem}
  .fot div:nth-child(2){display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .lasare{opacity:1}
}