/* 📄 Who-are-you.css - Stylesheet for the "Who Are You?" page. */

/*
  📱 Container for "Who Are You?" content
  Mobile-first with centered content and scalable spacing.
*/
.who-are-you-container {
  /* --- Size It --- */

  /* Full viewport width for mobile responsiveness */
  max-width: 100vw;

  /* --- Space It --- */

  /* Centers container horizontally */
  margin: 0 auto;

  /* Scalable inner spacing (32px ÷ 16px = 2rem) */
  padding: 2rem;
}

/* Global cursor styling - Applies emoji cursor to body and inherits it for nav and toggle. */
body {
  /* --- Chaos It --- */
  cursor: pointer;
}

nav a,
#angel-devil-toggle {
  /* --- Chaos It --- */
  cursor: inherit;
}

/* Page subheading */
.who-are-you-container h2 {
  /* --- Style It --- */
  text-decoration: underline;
}

/* Unordered list */
.who-are-you-container ul {
  /* --- Style It --- */
  list-style-type: none;
}

/* Location details styling - only the dynamic part in italics */
#location-details {
  /* --- Style It --- */
  font-style: italic;
}

/*
  🎮 Meme quiz wrapper
  Controls question visibility and styling.
*/
.who-are-you-container .quiz-wrapper .question {
  /* --- Space It --- */
  display: none;
}

.who-are-you-container .quiz-wrapper .question.active {
  /* --- Space It --- */
  display: block;
}

/* Mobile emoji pop-up - Animated emoji flash on dropdown selection. */
#mobile-emoji-pop {
  /* --- Size It --- */

  /* 12.9375rem = 207px (16px root × 12.9375) */
  font-size: 12.9375rem;

  /* --- Space It --- */
  display: none;

  /* Puts the emoji pop-up on top of other page content (e.g. move to front) */
  z-index: 20;

  /* Centers the emoji pop-up on the screen for a quick flash */
  position: fixed;

  /* Positions the emoji halfway across the screen from the left */
  left: 50%;

  /* Positions the emoji halfway across the screen from the top */
  top: 50%;

  /* --- Chaos It --- */

  /* Prevents pop-up emoji from being tapped/interacted with */
  pointer-events: none;

  /*
    Moves emoji to the center of the screen.
    It's a trick that says, "Shift me left by half my own width and up by half my own height."
  */
  transform: translate(-50%, -50%);
}

/* Hide page elements except quiz result when quiz-result-only is active */
body.quiz-result-only .who-are-you-container h1,
body.quiz-result-only .who-are-you-container h2,
body.quiz-result-only .who-are-you-container ul,
body.quiz-result-only .who-are-you-container p,
body.quiz-result-only .quiz-wrapper .question,
body.quiz-result-only #mobile-emoji-pop {
  display: none;
}

/* Ensure quiz result is centered and visible */
body.quiz-result-only .quiz-wrapper .quiz-result {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Quiz question text */
.who-are-you-container .quiz-wrapper .question p {
  /* --- Size It --- */

  /* 1.25rem = 20px (16px root × 1.25) */
  font-size: 1.25rem;

  /* --- Style It --- */
  color: var(--header-color);
}

/* Quiz dropdown */
.who-are-you-container .quiz-wrapper .question select {
  /* --- Size It --- */
  width: 90%;

  /* 0.875rem = 14px (16px root × 0.875) */
  font-size: 0.875rem;

  /* --- Space It --- */
  display: block;
  margin: 1rem auto;
  padding: 1rem;

  /* Prevents horizontal overflow shift from long response options */
  overflow-x: hidden;

  /* --- Style It --- */
  font-family: "Space Grotesk", sans-serif;
  border: 2px solid #8B00FF;
  border-radius: 5px;
  text-overflow: ellipsis;

  /* --- Chaos It --- */
  cursor: inherit;
}

/* Custom cursor emojis - SVG-based cursors for quiz personality types. */
body.cursor-mystical {
  cursor: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><text x="0" y="48" font-size="48">🧙‍♂️</text></svg>') 32 32, default;
}

body.cursor-cute {
  cursor: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><text x="0" y="48" font-size="48">🐾</text></svg>') 32 32, default;
}

body.cursor-savage {
  cursor: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><text x="0" y="48" font-size="48">💀</text></svg>') 32 32, default;
}

body.cursor-tech {
  cursor: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><text x="0" y="48" font-size="48">🤖</text></svg>') 32 32, default;
}

body.cursor-renegade {
  cursor: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><text x="0" y="48" font-size="48">🪩</text></svg>') 32 32, default;
}

/* Quiz buttons - Shared styles for next, back, submit, share, and download buttons. */
.who-are-you-container .quiz-wrapper .next-btn,
.who-are-you-container .quiz-wrapper .back-btn,
.who-are-you-container .quiz-wrapper .submit-btn,
.who-are-you-container .quiz-wrapper .quiz-result .share-quiz-btn,
.who-are-you-container .quiz-wrapper .quiz-result .download-scores-btn {
  /* --- Size It --- */

  /* 1.125rem = 18px (16px root × 1.125) */
  font-size: 1.125rem;

  /* --- Space It --- */
  display: block;
  margin: 1rem auto 0;

  /* 0.625rem = 10px, 1.25rem = 20px (16px root) */
  padding: 0.625rem 1.25rem;

  /* --- Style It --- */
  font-family: Righteous, system-ui, sans-serif;
  color: white;
  background-color: #8B00FF;
  border: none;
  border-radius: 5px;

  /* --- Chaos It --- */
  cursor: inherit;
}

.who-are-you-container .quiz-wrapper .next-btn:hover,
.who-are-you-container .quiz-wrapper .back-btn:hover,
.who-are-you-container .quiz-wrapper .submit-btn:hover,
.who-are-you-container .quiz-wrapper .quiz-result .share-quiz-btn:hover,
.who-are-you-container .quiz-wrapper .quiz-result .download-scores-btn:hover {
  /* --- Style It --- */
  background-color: var(--secondary-color);
}

/* Meme quiz result - center on page */
.who-are-you-container .quiz-wrapper .quiz-result img {
  /* --- Space It --- */
  display: block;
  margin: 0 auto;
}

/* Angel/Devil Toggle 😇😈 */
#angel-devil-toggle {
  /* --- Size It --- */

  /* 3em = 3 × 48px = 144px */
  font-size: 3em;

  /* --- Space It --- */
  padding: 0.5rem 1.5rem;

  /* --- Style It --- */

  /* Wipes out any background, so the toggle's emoji blends in with the nav bar */
  background: none;

  /* Removes the border; uncomment to see the toggle's padding and margin during design */
  border: none;

  /* --- Chaos It --- */
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* Grows the emoji to 1.2x size scaled evenly from the center */
#angel-devil-toggle:hover {
  /* --- Chaos It --- */
  transform: scale(1.2);
}


/* Makes the emoji pop-up bounce in with size and fade */
@keyframes pop-up {
  /* Starts the emoji tiny and invisible */
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  /* The emoji gets bigger and fully visible - peak size */
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }

  /* Settles the emoji at normal size, still fully visible */
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Triggers the emoji pop-up animation on mobile screens */
@media (width <= 768px) {
  #mobile-emoji-pop.active {
    /* --- Space It --- */
    display: block;

    /* --- Chaos It --- */
    animation: pop-up 1s ease-out forwards;
  }
}

/*
  💻 Tablet/Desktop Styles
  Applies above 768px (tablet portrait width, e.g., iPad).
*/
@media (width >= 769px) {
  .who-are-you-container {
    /* --- Size It --- */

    /* Limits width for readability on larger screens */
    max-width: 80vw;
  }

  #angel-devil-toggle {
    /* --- Size It --- */

    /* 2em = 2 × 32px = 64px */
    font-size: 2em;
  }
}

#time-details {
  font-style: italic;
}