/**
 * @file
 * Quiz page styles — pixel-perfect from Figma (765:2817).
 */

/* ===== FLOATING ANIMATION FOR GLOBULES ===== */
@keyframes quiz-globule-float {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(10px, -15px) rotate(5deg) scale(1.03);
  }
  66% {
    transform: translate(-8px, 8px) rotate(-3deg) scale(0.97);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes quiz-globule-float-reverse {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(-12px, 10px) rotate(-4deg) scale(0.97);
  }
  66% {
    transform: translate(8px, -12px) rotate(6deg) scale(1.04);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* ===== HERO ===== */
.quiz-hero {
  background: var(--color-blue-light);
  padding: 0 80px 80px;
  overflow: hidden;
}

.quiz-hero__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding-top: 16px;
}

/* Quiz hero title — H1 50px per Figma quiz page (not 75px like article) */
.quiz-hero__title {
  font-family: var(--font-heading);
  font-size: 50px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  color: var(--color-blue);
  line-height: 1;
  margin: 16px 0 24px;
  max-width: 700px;
}

.quiz-hero__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
  max-width: 700px;
}

/* ===== QUIZ CONTENT ===== */
.quiz-content {
  background: var(--color-white);
  border-radius: 40px 40px 0 0;
  margin-top: -40px;
  padding: 80px;
  overflow: hidden;
  position: relative;
}

/* Decorative 3D glass-effect globule shapes — Figma iridescent blobs */
.quiz-content::before,
.quiz-content::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50% 40% 60% 45% / 55% 50% 45% 50%;
  filter: blur(8px);
  mix-blend-mode: multiply;
}

/* Top-left large globule — pink/peach/light-blue gradient */
.quiz-content::before {
  width: 300px;
  height: 280px;
  top: 40px;
  left: -80px;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255, 182, 150, 0.8) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(236, 157, 200, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 70%, rgba(173, 216, 255, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 220, 200, 0.7) 0%, rgba(255, 200, 180, 0.3) 40%, transparent 70%);
  animation: quiz-globule-float 12s ease-in-out infinite;
}

/* Bottom-right large globule — peach/pink iridescent */
.quiz-content::after {
  width: 260px;
  height: 250px;
  bottom: 60px;
  right: -60px;
  border-radius: 45% 55% 50% 40% / 50% 45% 55% 50%;
  background:
    radial-gradient(ellipse at 60% 40%, rgba(255, 170, 140, 0.8) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 60%, rgba(220, 150, 200, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 70%, rgba(160, 200, 255, 0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(255, 210, 190, 0.7) 0%, rgba(255, 190, 170, 0.3) 45%, transparent 70%);
  animation: quiz-globule-float-reverse 14s ease-in-out infinite;
}

.quiz-content__inner {
  max-width: 884px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .quiz-hero {
    padding: 0 20px 60px;
  }

  .quiz-hero__title {
    font-size: 32px;
  }

  .quiz-content {
    padding: 40px 16px;
    border-radius: 24px 24px 0 0;
  }

  .quiz-content__inner {
    max-width: 100%;
  }

  /* Smaller globules on mobile */
  .quiz-content::before {
    width: 180px;
    height: 170px;
    top: 20px;
    left: -60px;
  }

  .quiz-content::after {
    width: 160px;
    height: 150px;
    bottom: 40px;
    right: -50px;
  }
}