@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Poppins:wght@400;600;700;800&display=swap');

:root {
  --perspective: 1200px;
  --unfold-duration: 0.45s;
  --page-turn-duration: 0.65s;
  --ease-unfold: cubic-bezier(0.4, 0, 0.2, 1);
  --color-1: #ff6b9d;
  --color-2: #ffd93d;
  --color-3: #6bcb77;
  --color-4: #4d96ff;
  --color-5: #c77dff;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Nunito', sans-serif;
}

body {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #533483 100%);
  background-attachment: fixed;
}

#tsparticles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.content-layer {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flash-overlay {
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.3s ease;
}

.flash-overlay.active { opacity: 1; }
.flash-overlay.fade-out { opacity: 0; }