@import url("/moka/profile-notes.css");
@import url("/moka/section-redesign.css");
@import url("/moka/goal-clipping-fix.css");

/* Mobile hero scene normalization.
   Keep desktop/tablet visuals compatible while giving mobile one shared coordinate system
   for Moka, the speech bubble, and the foreground desk. */

.moka-hero-scene {
  display: contents;
}

/* The desk moved inside .moka-hero-stage. Compensate for the centered container so its
   desktop viewport-relative position stays equivalent to the previous Hero-level absolute. */
.moka-hero-scene .moka-hero-desk {
  right: calc(50% - 53vw);
}

@media (max-width: 980px) {
  .moka-hero-scene .moka-hero-desk {
    right: calc(50% - 68vw);
  }
}

@media (max-width: 700px) {
  .moka-hero-scene {
    position: relative;
    z-index: 2;
    display: block;
    justify-self: center;
    width: 100vw;
    aspect-ratio: 390 / 520;
    margin-top: 10px;
    isolation: isolate;
    pointer-events: none;
  }

  .moka-hero-scene .moka-hero-character {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: -16.5%;
    width: 104%;
    margin: 0;
    transform: translateX(-50%);
  }

  /* Keep the bubble visually anchored while the character is lowered toward the desk. */
  .moka-hero-scene .moka-speech-bubble {
    top: -11.5%;
    right: -2%;
  }

  .moka-hero-scene .moka-hero-desk {
    left: 50%;
    right: auto;
    bottom: -1%;
    width: 170%;
    transform: translateX(-50%);
  }

  /* Keep the two intentional heading lines intact inside the cloud. */
  .moka-closing-copy-wrap h2 {
    font-size: clamp(1.85rem, 7.2vw, 2.6rem);
    white-space: nowrap;
  }

  .moka-closing-copy-wrap h2 br {
    display: block;
  }
}

@media (max-width: 420px) {
  .moka-hero-scene .moka-hero-character {
    right: auto;
    bottom: -16.5%;
    width: 104%;
  }

  .moka-hero-scene .moka-hero-desk {
    right: auto;
    width: 170%;
  }

  .moka-hero-scene .moka-speech-bubble {
    right: -2%;
  }
}