/* home.css – bare for forsiden (body.home) */

/* Bakgrunnslayer som vi flytter sakte med JS (parallax) */
.bgParallax{
  position: fixed;
  inset: -12%;
  z-index: -3;
  background: url("/uploads/bg-retro.jpg") center top / cover no-repeat;
  transform: translateY(0px);
  will-change: transform;

  /* roligere bakgrunn så tekst blir lesbar */
  filter: saturate(1.05) contrast(1.05) brightness(0.55);
}

/* Scanlines + vignette over bakgrunnen (men bak innholdet) */
body.home::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:.12;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.08) 0px,
      rgba(255,255,255,.08) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
}

body.home::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.55;
  background:
    radial-gradient(circle at 50% 30%, rgba(0,0,0,0), rgba(0,0,0,.42) 70%, rgba(0,0,0,.70) 100%);
}

/* Forsiden ligger over overlays */
.home .wrap{
  position:relative;
  z-index:1;
  padding-top:18px;
}

/* ✅ Gjør boksene tydelige (mindre gjennomsiktige) */
body.home .card{
  background: rgba(10, 10, 22, 0.82);
  border-color: rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

/* Input-felter litt mer “glass”, men lesbart */
body.home input,
body.home textarea,
body.home select{
  background: rgba(0,0,0,0.35);
  border-color: rgba(255,255,255,0.14);
}

body.home input::placeholder,
body.home textarea::placeholder{
  opacity:.75;
}

/* ✅ Banner: samme størrelse som før, men uten wrapper-boks */
.bannerImg{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  padding: 10px 10px;

  /* ingen wrapper-boks */
  background: transparent;
  border: 0;
  box-shadow: none;
}

.bannerImg img{
  width: min(1400px, 100%);
  max-width: 100%;
  height: auto;
  display:block;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 2px rgba(255,74,203,.08),
    0 0 22px rgba(46,233,255,.10);
}

.bannerImg.top{
  position: sticky;
  top: 0;
}

.bannerImg.bottom{
  margin-top: 18px;
}

/* Litt ekstra neon på h1 */
body.home h1{
  text-shadow:
    0 0 12px rgba(255,74,203,.30),
    0 0 18px rgba(46,233,255,.22);
}

/* Layout: venstre profil + høyre innhold */
.homeGrid .profile{ grid-column: span 4; }
.homeGrid .maincol{ grid-column: span 8; }
.homeGrid .wide{ grid-column: span 12; }

/* Profilkort */
.profileBox{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.profileTop{
  display:flex;
  gap:12px;
  align-items:center;
}

.profileImg{
  width:76px;
  height:76px;
  border-radius:18px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  box-shadow:
    0 0 0 2px rgba(255,74,203,.10),
    0 0 18px rgba(46,233,255,.10);
}

.profileName{ font-weight:900; font-size:16px; }
.profileTagline{ margin-top:4px; color:var(--muted); font-size:12px; }

.profileQuote{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,.18);
  font-size:13px;
  line-height:1.35;
}

/* Social icons */
.socials{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.soc{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  box-shadow:
    0 0 0 1px rgba(124,92,255,.12),
    0 0 16px rgba(46,233,255,.08);
}

.soc:hover{
  border-color: rgba(255,74,203,.35);
  filter: brightness(1.08);
}

.soc svg{ width:22px; height:22px; }

/* Mobil: alt i en kolonne */
@media (max-width: 900px){
  .homeGrid .profile{ grid-column: span 12; }
  .homeGrid .maincol{ grid-column: span 12; }
}