/* Core Design & Aesthetics for Liquid Glass Landing Page */

:root {
  --bg-color: #0c0a1b;
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-muted: rgba(255, 255, 255, 0.5);
  --accent-color: #c18eff;
  --font-family-title: 'Outfit', sans-serif;
  --font-family-body: 'Inter', sans-serif;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-color);
  font-family: var(--font-family-body);
  color: var(--text-primary);
  user-select: none;
  -webkit-user-select: none;
}

/* Background Canvas */
#gradient-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

/* Vignette overlay to fade edges into a rich dark frame */
.vignette-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle, transparent 30%, rgba(12, 10, 27, 0.55) 100%);
}

/* Fine-grain noise overlay for a premium textured/paper feel */
.noise-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.04; /* Very subtle */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Bouncing elements containers */
.question-container {
  position: absolute;
  width: clamp(230px, 24vw, 320px);
  height: clamp(280px, 29.3vw, 390px);
  left: 0;
  top: 0;
  z-index: 5;
  will-change: transform;
  cursor: default;
  transform-origin: center center;
  transition: transform 0.05s linear;
  overflow: visible; /* Prevent any edge clipping */
}

.question-container:active {
  cursor: default;
}

.question-svg {
  width: 100%;
  height: 100%;
  overflow: visible; /* Prevent any filter bounding box clipping */
}

/* Liquid Glass Question Mark text (if fallback text is rendered or outline elements) */
.question-svg text {
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

/* Center announcement footer */
.footer {
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-family-body);
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  animation: footerBreathe 5s ease-in-out infinite;
}

/* Smooth breathing and neon purple reflection animation */
@keyframes footerBreathe {
  0%, 100% {
    color: rgba(255, 255, 255, 0.35);
    text-shadow: 0 0 10px rgba(193, 142, 255, 0);
  }
  50% {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 
      0 0 15px rgba(193, 142, 255, 0.45),
      0 0 25px rgba(193, 142, 255, 0.25);
  }
}