/* ============================================================
   RYEQO Screensaver – Complete Styles (single file)
   Reference canvas: 2160px wide × 4640px tall (portrait 4K)
   Variants scoped by body#purple and body#green
   ============================================================ */

@font-face {
  font-family: 'Muli';
  src: url('../assets/fonts/Muli.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Muli';
  src: url('../assets/fonts/Muli-SemiBold.woff2') format('woff2');
  font-weight: 600;
}

@font-face {
  font-family: 'Muli-Bold';
  src: url('../assets/fonts/Muli-Bold.woff2') format('woff2');
  font-weight: 700;
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Muli', sans-serif;
  background: #000;
}

/* Purple: shadow-purple.png blob + text-shadow glow on select */
body#purple .answer-item {
  --shadow-img: url('../assets/images/shadow-purple.png');
}

/* Green: shadow-green.png blob + text-shadow glow on select */
body#green .answer-item {
  --shadow-img: url('../assets/images/shadow-green.png');
}


/* ── Screen wrapper ── */
#screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: default;
  user-select: none;
}

/* ── Background image layer ── */
#bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transition: filter 2s ease-in-out;
  z-index: 0;
}

#bg.blurring {
  filter: blur(1.5vw) brightness(0.6);
}

/* ── Content overlay (question + answers) ── */
#content {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 1.2s ease-in-out;
}

#content.fading {
  opacity: 0;
}

/* ── Question text ── */
#question {
  position: absolute;
  left: 0;
  top: 9.8vh;
  width: 100%;
  font-family: 'Muli', sans-serif;
  font-weight: 800;
  font-size: 124px;
  line-height: 1.3;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* ── Answer items: absolutely positioned blurred text ── */
.answer-item {
  position: absolute;
  font-family: 'Muli-Bold', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
  transition:
    opacity 0.6s ease,
    filter 0.6s ease,
    transform 0.3s ease;
}

/* ── Shadow image blob behind each word ── */
.answer-item {
  isolation: isolate;
}

.answer-item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  aspect-ratio: 1 / 1;
  background-image: var(--shadow-img);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Hover: slightly de-blur */
.answer-item:hover {
  opacity: 0.8 !important;
  transition: opacity 0.6s ease, transform 0.6s ease;
}



/* Unselected: nearly invisible */
.answer-item.unselected {
  opacity: 0.06 !important;
  pointer-events: none;
}

/* Selected: slightly larger blob */
.answer-item.selected::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.2);
}

/* Unselected: hide blob */
.answer-item.unselected::after {
  opacity: 0;
}

/* ── Logo ── */
#logo {
  position: absolute;
  bottom: 4vh;
  left: 6.6vw;
  z-index: 2;
  width: 894px;
  transition: opacity 1.2s ease-in-out;
}

#logo img {
  width: 100%;
  height: auto;
  display: block;
}

#logo.fading {
  opacity: 0;
}

/* ── Video overlay ── */
#video-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s ease-in-out;
}

#video-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

#video-overlay video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── Video placeholder ── */
#video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5vw;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

#video-placeholder svg {
  width: 8vw;
  opacity: 0.5;
}

#video-placeholder p {
  font-size: 2vw;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ── Restart hint ── */
#restart-hint {
  position: absolute;
  bottom: 3vh;
  width: 100%;
  text-align: center;
  font-size: 1.5vw;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease 1s;
  cursor: pointer;
}

#restart-hint.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   PURPLE VARIANT – body#purple
   Positions from Figma export (2160 × 4640 reference)
   Horizontal: X / 2160 * 100 = vw  |  Vertical: Y / 4640 * 100 = vh
   ============================================================ */

body#purple #bg {
  background-image: url('../assets/images/background-purple.jpg');
}

/* BLOATING: left 259/2160, top 1727/4640, font 190/2160, blur 20px */
body#purple #answer-bloating {
  left: 6.99vw;
  top: 34.22vh;
  filter: blur(5px);
  opacity: 0.61;
  font-size: 153px;
}

body#purple #answer-bloating::after {
  left: 69%;
  width: 300px;
}

/* HEAVY MENSTRUAL BLEEDING: left 419/2160, top 2086/4640, w 1781/2160, font 280/2160 */
body#purple #answer-hmb {
  left: 4.4vw;
  top: 40.96vh;
  width: 82.45vw;
  text-align: center;
  filter: blur(5px);
  font-size: 220px;
  opacity: 0.60;
}

body#purple #answer-hmb::after {
  top: 88%;
  left: 27%;
  width: 500px;
}

/* FATIGUE: left 1310/2160, top 3060/4640, font 270/2160 */
body#purple #answer-fatigue {
  left: 46.65vw;
  top: 60.5vh;
  filter: blur(5px);
  opacity: 0.60;
  font-size: 213px;
}

body#purple #answer-fatigue::after {
  content: none;
}

/* ANAEMIA: left 533/2160, top 3550/4640, font 220/2160 */
body#purple #answer-anaemia {
  left: 21.68vw;
  top: 70.51vh;
  filter: blur(5px);
  opacity: 0.61;
  font-size: 153px;
}

body#purple #answer-anaemia::after {
  left: 31%;

  width: 400px;
}



/* ============================================================
   GREEN VARIANT – body#green
   Positions estimated from design reference image
   ============================================================ */

body#green #bg {
  background-image: url('../assets/images/background-green.jpg');
}

/* FATIGUE: small, upper-left */
body#green #answer-fatigue {
  left: 17vw;
  top: 35vh;
  filter: blur(5px);
  opacity: 0.61;
  font-size: 153px;
}

body#green #answer-fatigue::after {
  top: 50%;
  left: 12%;
  width: 350px;
}

/* DYSPAREUNIA: medium, center */
body#green #answer-dyspareunia {
  left: 25vw;
  top: 44.5vh;
  font-size: 191px;
  filter: blur(5px);
  opacity: 0.61;
}

body#green #answer-dyspareunia::after {
  content: none;
}

/* PELVIC PAIN: largest */
body#green #answer-pelvic-pain {
  left: 11vw;
  top: 52vh;
  font-size: 218px;
  filter: blur(5px);
  opacity: 0.61;
}

body#green #answer-pelvic-pain::after {
  left: 48%;
  width: 500px;
}

/* DYSMENORRHOEA: medium, lower */
body#green #answer-dysmenorrhoea {
  left: 24vw;
  top: 64vh;
  font-size: 159px;
  filter: blur(5px);
  opacity: 0.61;
}

body#green #answer-dysmenorrhoea::after {
  top: 42%;
  left: 31%;
  width: 400px;
  opacity: 0.8;
}

/* ============================================================
   HAND HINT / AUTO-HINT SEQUENCE
   The hand image is now hidden. Instead, answers take turns
   playing a slow nudge + ripple animation (triggered by JS).
   ============================================================ */

#hand-hint {
  display: none;
}

/* ── New Sequence Nudge & Touch Ripple ── */

.answer-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.answer-item.animating-nudge {
  animation: answer-nudge 3.5s ease-in-out;
}

.answer-item.animating-nudge::before {
  animation: single-ripple 3.5s ease-in-out;
}

@keyframes answer-nudge {
  0% {
    transform: translateX(0) scale(1);
    opacity: 0.61;
  }

  50% {
    transform: translateX(-30px) scale(1.06);
    opacity: 0.9;
  }

  100% {
    transform: translateX(0) scale(1);
    opacity: 0.61;
  }
}

@keyframes single-ripple {
  0% {
    transform: scale(0.1);
    opacity: 1;
  }

  60% {
    transform: scale(2.6);
    opacity: 0;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}