/*
Theme Name: Rumjakt
Theme URI: https://rumjakt.se
Author: Marten
Description: Futuristisk domänförsäljningssida
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500&display=swap');

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

:root {
  --bg: hsl(220 25% 6%);
  --fg: hsl(200 20% 90%);
  --primary: hsl(185 80% 55%);
  --muted: hsl(215 15% 55%);
  --secondary-bg: hsl(220 20% 14% / 0.3);
  --glow: 185 80% 55%;
  --glow2: 260 70% 60%;
  --border-glow-color: hsl(185 80% 55% / 0.3);
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  overflow-x: hidden;
}

.bg-nebula {
  background:
    radial-gradient(ellipse at 20% 50%, hsl(var(--glow) / 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, hsl(var(--glow2) / 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, hsl(var(--glow) / 0.04) 0%, transparent 50%),
    var(--bg);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.font-display { font-family: 'Orbitron', sans-serif; }

.text-glow {
  text-shadow: 0 0 20px hsl(var(--glow) / 0.6),
               0 0 40px hsl(var(--glow) / 0.3),
               0 0 80px hsl(var(--glow) / 0.15);
}
.text-glow-strong {
  text-shadow: 0 0 10px hsl(var(--glow) / 0.8),
               0 0 30px hsl(var(--glow) / 0.5),
               0 0 60px hsl(var(--glow) / 0.3),
               0 0 100px hsl(var(--glow) / 0.2);
}
.border-glow {
  box-shadow: 0 0 15px hsl(var(--glow) / 0.15),
              inset 0 0 15px hsl(var(--glow) / 0.05);
  border-color: var(--border-glow-color);
}

/* Floating panels */
.floating-panels { position: absolute; inset: 0; pointer-events: none; }
.float-panel {
  position: absolute;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border-glow-color);
  opacity: 0.15;
  transition: opacity 0.7s;
}
.float-panel:hover { opacity: 0.25; }
.float-panel img { width: 100%; height: auto; display: block; object-fit: cover; }

.fp1 { top:5%; left:3%; width:280px; animation: float1 12s ease-in-out infinite; }
.fp2 { top:8%; right:5%; width:320px; animation: float2 15s ease-in-out infinite; }
.fp3 { bottom:12%; left:8%; width:260px; animation: float3 10s ease-in-out infinite; }
.fp4 { bottom:8%; right:3%; width:300px; animation: float4 14s ease-in-out infinite; }

@keyframes float1 {
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(10px,-15px) rotate(1deg)}
  50%{transform:translate(-5px,-25px) rotate(-0.5deg)}
  75%{transform:translate(-15px,-10px) rotate(0.5deg)}
}
@keyframes float2 {
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-12px,-20px) rotate(-1deg)}
  50%{transform:translate(8px,-10px) rotate(0.5deg)}
  75%{transform:translate(15px,-18px) rotate(-0.5deg)}
}
@keyframes float3 {
  0%,100%{transform:translate(0,0) rotate(0)}
  33%{transform:translate(15px,-12px) rotate(1.5deg)}
  66%{transform:translate(-10px,-22px) rotate(-1deg)}
}
@keyframes float4 {
  0%,100%{transform:translate(0,0) rotate(0)}
  30%{transform:translate(-8px,-18px) rotate(-1deg)}
  70%{transform:translate(12px,-8px) rotate(1deg)}
}

/* Stagger fade-in */
@keyframes pageFadeIn {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}
.stagger-1 { animation: pageFadeIn .8s ease-out .2s forwards; opacity:0; }
.stagger-2 { animation: pageFadeIn .8s ease-out .5s forwards; opacity:0; }
.stagger-3 { animation: pageFadeIn .8s ease-out .8s forwards; opacity:0; }

/* Content */
.content {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1.5rem; text-align: center;
}
.content h1 {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.subtitle {
  color: var(--muted);
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-bottom: 2rem;
}
.domain {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.05em;
}
.contact-box {
  display: inline-block;
  border-radius: 1rem;
  border: 1px solid var(--border-glow-color);
  padding: 1.5rem 2rem;
  background: var(--secondary-bg);
  backdrop-filter: blur(8px);
}
.contact-box .label {
  color: var(--muted);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}
.email-display { color: var(--primary); font-weight: 500; }

/* Mobile bg */
.mobile-bg {
  display: none; position: absolute; inset:0; pointer-events: none;
}
.mobile-bg img { width:100%; height:100%; object-fit:cover; opacity:0.08; }

@media (max-width: 767px) {
  .float-panel { display: none; }
  .mobile-bg { display: block; }
}