@import "tailwindcss";

:root {
  --accent:      #ff8091;
  --accent-dark: #e5607a;
  --text-brand:  #ff8091;
  --c1: #a55279;
  --c2: #ff8091;
  --c3: #fec00c;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* White base with soft bokeh blobs */
body {
  background-color: #f8f8fa;
}

body::before {
  content: '';
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(ellipse 55% 45% at 12% 20%,  rgba(165, 82,121, 0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 88% 72%,  rgba(255, 87, 87, 0.18) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 55% 90%,  rgba(254,192, 12, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 75% 15%,  rgba(229, 86, 84, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 35% at 30% 75%,  rgba(165, 82,121, 0.10) 0%, transparent 60%);
  filter: blur(40px);
  animation: bokehDrift 22s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes bokehDrift {
  0%   { transform: scale(1)    translate(0%,   0%);   }
  25%  { transform: scale(1.04) translate(2%,  -3%);   }
  50%  { transform: scale(0.97) translate(-2%,  2%);   }
  75%  { transform: scale(1.03) translate(1%,   3%);   }
  100% { transform: scale(1.01) translate(-1%, -1%);   }
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); }

/* Ensure app content sits above the bokeh layer */
#__next, [data-nextjs-root] { position: relative; z-index: 1; }