/* =========================================================
   RÖKAFET — landningssida
   Färgdisciplin: 3 färger. Inget mer.
   ========================================================= */

:root{
  --bg:        #0b0907;          /* nästan svart, med varm undertone */
  --bg-soft:   #14100c;
  --ink:       #f4ece0;          /* benvit */
  --ink-soft:  #c9beae;
  --brass:     #c5a572;          /* signaturfärg */
  --brass-hot: #e0bf85;
  --line:      rgba(244,236,224,0.08);
  --serif:     'Cormorant Garamond', 'Cambria', Georgia, serif;
  --sans:      'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ scroll-behavior:smooth; cursor:none }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:none }
img{ display:block; max-width:100% }

/* Mobil: tillåt riktig cursor + scroll */
@media (max-width: 880px){
  html, button{ cursor:auto }
  .cursor-ring,.cursor-dot{ display:none }
}

/* =========================================================
   WebGL-bakgrund: ligger längst bak
   ========================================================= */
#bgCanvas{
  position:fixed; inset:0; z-index:-1;
  width:100vw; height:100vh;
  pointer-events:none;
}

/* =========================================================
   Custom cursor
   ========================================================= */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0;
  pointer-events:none;
  z-index:9999;
  transform:translate3d(-50%,-50%,0);
  will-change:transform;
}
.cursor-dot{
  width:6px; height:6px;
  background:var(--brass);
  border-radius:50%;
  mix-blend-mode:exclusion;
}
.cursor-ring{
  width:36px; height:36px;
  border:1px solid var(--brass);
  border-radius:50%;
  opacity:0.6;
  transition:width .22s ease, height .22s ease, opacity .22s ease;
}
.cursor-ring.active{
  width:56px; height:56px;
  opacity:1;
  background:rgba(197,165,114,0.10);
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 44px;
  z-index:100;
  font-family:var(--sans);
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .6s ease, transform .6s ease;
}
.nav.ready{ opacity:1; transform:none }
.nav .brand{
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  letter-spacing:0.4em;
  color:var(--brass);
}
.nav .links{ display:flex; gap:28px; align-items:center }
.nav .links a{
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  transition:color .25s;
  position:relative;
}
.nav .links a:hover{ color:var(--brass) }
.nav .btn-mini{
  border:1px solid var(--brass);
  padding:10px 18px;
  border-radius:999px;
  color:var(--brass);
}
.nav .btn-mini:hover{ background:var(--brass); color:var(--bg) }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:0 44px;
  position:relative;
}
.hero-inner{
  max-width:1100px;
  text-align:center;
}
.kicker{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.42em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:24px;
}
.title{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(72px, 14vw, 200px);
  line-height:0.96;
  letter-spacing:-0.02em;
  margin:0 0 28px;
  color:var(--ink);
}
.lead{
  font-family:var(--serif);
  font-size:clamp(18px, 2vw, 22px);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:620px;
  margin:0 auto 36px;
}
.lead em{ color:var(--brass); font-style:italic }

.cta-row{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
}

.btn-primary,.btn-ghost{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 30px;
  border-radius:999px;
  font-family:var(--sans);
  font-weight:600; font-size:14px;
  letter-spacing:0.05em;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s;
  will-change:transform;
}
.btn-primary{
  background:var(--brass);
  color:var(--bg);
}
.btn-primary:hover{ background:var(--brass-hot) }
.btn-primary.big{ padding:24px 44px; font-size:16px }
.btn-primary .arrow{ transition:transform .35s }
.btn-primary:hover .arrow{ transform:translateX(6px) }

.btn-ghost{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-soft);
}
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass) }

.scroll-hint{
  margin-top:80px;
  display:flex; justify-content:center;
}
.scroll-hint span{
  display:block;
  width:1px; height:60px;
  background:linear-gradient(to bottom, transparent, var(--brass), transparent);
  animation:scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint{
  0%,100%{ opacity:.3; transform:translateY(0) }
  50%   { opacity:1;  transform:translateY(10px) }
}

/* =========================================================
   MANIFEST (sticky tagline-sektion)
   ========================================================= */
.manifest{
  min-height:140vh;
  padding:160px 44px;
  position:relative;
}
.manifest-inner{
  max-width:900px;
  margin:0 auto;
  position:sticky; top:24vh;
}
.big{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(40px, 6vw, 84px);
  line-height:1.05;
  letter-spacing:-0.01em;
  margin:24px 0 36px;
  color:var(--ink);
}
.big .word{ display:inline-block }
.manifest-body p{
  font-family:var(--serif);
  font-size:clamp(17px, 1.6vw, 21px);
  color:var(--ink-soft);
  margin:0 0 18px;
  max-width:680px;
}
.manifest-body strong{ color:var(--ink); font-weight:500 }

/* =========================================================
   ROOMS — grid med atmosfäriska bilder
   ========================================================= */
.rooms{
  padding:160px 44px 120px;
  position:relative;
}
.rooms-head{
  max-width:1100px;
  margin:0 auto 80px;
  text-align:center;
}
.room-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:18px;
}
.room{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:var(--bg-soft);
  border:1px solid var(--line);
  aspect-ratio:4/3;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), border-color .4s;
}
.room:hover{ transform:translateY(-6px); border-color:rgba(197,165,114,0.45) }
.room-img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transition:transform 1.6s cubic-bezier(.2,.7,.2,1), filter .6s;
  filter:saturate(0.85) brightness(0.8);
}
.room:hover .room-img{ transform:scale(1.06); filter:saturate(1.0) brightness(0.9) }
.room::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,9,7,0.0) 0%, rgba(11,9,7,0.5) 60%, rgba(11,9,7,0.92) 100%);
}
.room-meta{
  position:absolute; left:0; right:0; bottom:0;
  padding:28px 28px 26px;
  z-index:2;
}
.room-name{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:30px;
  line-height:1;
  color:var(--ink);
  margin-bottom:8px;
}
.room-desc{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.5;
  margin:0;
  max-width:340px;
}

/* Discord-likt: tvådelad grid med Rökafet stor */
.room--rokafet { grid-column:span 8; grid-row:span 2; aspect-ratio:auto; min-height:380px }
.room--baren   { grid-column:span 4 }
.room--jam     { grid-column:span 4 }
.room--film    { grid-column:span 7 }
.room--tradgard{ grid-column:span 5 }
@media (max-width: 900px){
  .room-grid{ grid-template-columns:repeat(2, 1fr) }
  .room--rokafet,.room--baren,.room--jam,.room--film,.room--tradgard{ grid-column:span 2; grid-row:span 1; aspect-ratio:4/3; min-height:0 }
}

/* =========================================================
   OBI STUDIO
   ========================================================= */
.obi{
  padding:160px 44px;
}
.obi-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
@media (max-width: 980px){
  .obi-grid{ grid-template-columns:1fr; gap:50px }
}
.obi .lead{ text-align:left; margin:0 0 36px }
.features{
  list-style:none;
  padding:0; margin:0;
}
.features li{
  font-size:15px;
  line-height:1.6;
  color:var(--ink-soft);
  padding:18px 0;
  border-top:1px solid var(--line);
}
.features li:last-child{ border-bottom:1px solid var(--line) }
.features strong{ color:var(--brass); font-weight:600; display:block; margin-bottom:4px; font-family:var(--sans); font-size:13px; letter-spacing:0.08em; text-transform:uppercase }

.obi-visual{
  position:relative;
  aspect-ratio:16/10;
  border-radius:18px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,0.6);
}
.obi-screenshot{
  position:absolute; inset:0;
  background-image:url(assets/bg/Hero.png);
  background-size:cover;
  background-position:center;
  filter:saturate(0.9) brightness(0.65);
}
.obi-visual::after{
  content:'OBI STUDIO';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:54px;
  color:var(--brass);
  text-shadow:0 4px 30px rgba(0,0,0,0.8);
  letter-spacing:0.04em;
}

/* =========================================================
   DOWNLOAD
   ========================================================= */
.download{
  padding:200px 44px;
  text-align:center;
}
.download-inner{
  max-width:900px;
  margin:0 auto;
}
.download .lead{ margin-bottom:48px }
.tiny{
  margin-top:24px;
  font-size:12px;
  color:var(--ink-soft);
  opacity:.6;
  letter-spacing:0.04em;
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  padding:44px;
  border-top:1px solid var(--line);
}
.foot-row{
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:18px;
}
.foot-mark{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:0.4em;
  color:var(--brass);
  font-size:14px;
}
.foot-meta{
  font-size:12px; color:var(--ink-soft); opacity:.6;
}
.foot-meta a{ color:var(--brass) }

/* =========================================================
   REVEAL — initialt dolt, animeras in vid scroll
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform:none }

.word{
  display:inline-block;
  opacity:0; transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.word.in{ opacity:1; transform:none }