/* Bitterballen.nu — Flashy static site styles */
:root{
  --bg-1:#1e0638;
  --bg-2:#ff6a00;
  --bg-3:#ffb100;
  --text:#fff7e9;
  --accent:#ffd36b;
  --brand:#ffffff;
  --shadow:#3a1a00;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  background:#120322;
  overflow-x:hidden;
}

/* Flashy animated background gradient */
.bg-gradient{
  position:fixed; inset:0; z-index:-2;
  background: radial-gradient(1200px 800px at 20% 10%, #ffcf6b22, transparent 60%),
              radial-gradient(900px 700px at 80% 20%, #ff6a0015, transparent 60%),
              radial-gradient(1000px 900px at 50% 90%, #ffb10018, transparent 60%),
              linear-gradient(135deg, var(--bg-1), #2a0a52 40%, #3b0a46 60%, #1b052f 100%);
  filter: saturate(1.2) contrast(1.1);
}
.bg-gradient::after{
  content:"";
  position:absolute; inset:-10%;
  background: conic-gradient(from 0deg at 50% 50%, #ffffff06, #ffffff00 30%, #ffffff06 60%, #ffffff00 100%);
  animation: spin 28s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg);} }

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  padding:16px 24px; pointer-events:none;
}
.brand{
  font-family:'Bebas Neue', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing:0.06em;
  font-size:28px; color:var(--brand);
  text-shadow:0 2px 12px #ffb10055;
}
.brand .dot{ color:#ffde8a; }

/* Hero */
.hero{
  min-height:100svh;
  display:grid; place-items:center;
  text-align:center; position:relative;
  padding:100px 24px 64px;
}
.tagline{
  margin:0 0 28px;
  font-family:'Bebas Neue', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: clamp(44px, 9vw, 120px);
  line-height:0.9;
  letter-spacing:0.02em;
  filter: drop-shadow(0 6px 24px #00000055);
}
.tagline .highlight{
  color:var(--accent);
  text-shadow:0 0 0 #000, 0 0 40px #ffb10066;
}

/* Floating Bitterbal */
.bitterbal-wrap{
  position:relative;
  width:min(60vw, 360px);
  height:min(60vw, 360px);
  display:grid; place-items:center; margin:8px auto 20px;
}
 .bitterbal{
  position:relative; width:70%; aspect-ratio:1/1; border-radius:50%;
  overflow:hidden;
  animation: float 3.6s ease-in-out infinite, slow-rot 12s linear infinite;
}

/* image inside the bitterbal container */
.bitterbal-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
}



@keyframes float{ 0%,100%{ transform: translateY(0)} 50%{ transform: translateY(-14px)} }
@keyframes slow-rot{ to{ transform: rotate(360deg) }}

/* crispy texture speckles */
.speckle{ position:absolute; background:#2a1408aa; border-radius:50%; filter: blur(0.2px); }
.s1{ width:10%; height:10%; left:22%; top:28%; box-shadow: 2px 3px 0 1px #8d4e00; }
.s2{ width:7%; height:7%;  left:62%; top:36%; box-shadow: 1px 2px 0 1px #8d4e00; }
.s3{ width:6%; height:6%;  left:42%; top:58%; box-shadow: 1px 1px 0 1px #8d4e00; }
.s4{ width:8%; height:8%;  left:30%; top:64%; box-shadow: 2px 2px 0 1px #8d4e00; }
.s5{ width:5%; height:5%;  left:68%; top:22%; box-shadow: 1px 1px 0 1px #8d4e00; }

/* glossy shine */
.shine{
  position:absolute; width:36%; height:36%; left:20%; top:18%; border-radius:50%;
  background: radial-gradient(60% 60% at 40% 40%, #ffffffdd 0%, #ffffff66 25%, #ffffff00 60%);
  transform: rotate(-20deg);
  mix-blend-mode: screen; opacity:0.9;
  filter: blur(1px);
}

/* crunchy breadcrumb ring at the edge (protruding flakes) */
.crumbs-edge{
  position:absolute; inset:-2%; border-radius:50%; pointer-events:none;
  /* layered dot fields; mid/light + darker crumbs */
  background:
    radial-gradient(circle, rgba(255, 201, 124, 0.75) 42%, rgba(255,255,255,0) 44%),
    radial-gradient(circle, rgba(142, 74, 0, 0.6) 38%, rgba(255,255,255,0) 40%),
    radial-gradient(circle, rgba(80, 40, 0, 0.5) 36%, rgba(255,255,255,0) 38%);
  background-size: 14px 14px, 22px 22px, 30px 30px;
  background-position: 0 0, 6px 8px, -8px 4px;
  mix-blend-mode: multiply;
  filter: saturate(1.05) contrast(1.05);
  /* reveal only a ring around the edge, slightly beyond the circle */
  mask: radial-gradient(closest-side, transparent 88%, #000 96%, transparent 105%);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 96%, transparent 105%);
}

/* drop shadow under the floating ball */
.bal-shadow{
  position:absolute; bottom:12%; left:50%; transform: translateX(-50%);
  width:56%; height:10%; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, #00000055 0%, #00000000 70%);
  filter: blur(6px);
  animation: shadow-pulse 3.6s ease-in-out infinite;
}
@keyframes shadow-pulse{ 0%,100%{ transform: translateX(-50%) scale(1)} 50%{ transform: translateX(-50%) scale(0.92)} }

/* Call to action */
.cta{
  margin: 10px 0 0; font-size: clamp(16px, 2.6vw, 22px);
  color:#ffeccb; opacity:0.95;
}

/* Footer */
.site-footer{
  position:relative; z-index:2; text-align:center; padding:24px; opacity:0.9;
  font-size:14px;
}
.site-footer a{ color:var(--accent); text-decoration:none }

/* Floating subtle noise for extra texture without assets */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23n)" opacity="0.035"/></svg>');
  mix-blend-mode: overlay; opacity:0.6;
}

/* Accessibility prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .bg-gradient::after, .bitterbal, .bal-shadow{ animation:none }
}