/* Premium Three.js games use the full modal as their stage. */
:is(
  .caramel-stack-board,
  .dance-steps-board,
  .honeycomb-path-board,
  .leaf-pairs-board,
  .tea-service-board,
  .berry-books-board,
  .color-mixer-board,
  .match-grid-board.gumballBurst
) :is(
  .caramel-stack-shell,
  .dance-steps-shell,
  .honeycomb-path-shell,
  .leaf-pairs-shell,
  .tea-service-shell,
  .berry-books-shell,
  .color-mixer-shell,
  .match-grid-shell
) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

:is(
  .caramel-stack-board,
  .dance-steps-board,
  .honeycomb-path-board,
  .leaf-pairs-board,
  .tea-service-board,
  .berry-books-board,
  .color-mixer-board,
  .match-grid-board.gumballBurst
) :is(
  .caramel-stack-stage,
  .dance-steps-stage,
  .honeycomb-path-stage,
  .leaf-pairs-stage,
  .tea-service-stage,
  .berry-books-stage,
  .color-mixer-stage,
  .match-grid-stage
) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:is(
  .caramel-stack-board,
  .dance-steps-board,
  .honeycomb-path-board,
  .leaf-pairs-board,
  .tea-service-board,
  .berry-books-board,
  .color-mixer-board,
  .match-grid-board.gumballBurst
) :is(
  .caramel-stack-stage,
  .dance-steps-stage,
  .honeycomb-path-stage,
  .leaf-pairs-stage,
  .tea-service-stage,
  .berry-books-stage,
  .color-mixer-stage,
  .match-grid-stage
) canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

:is(
  .caramel-stack-board,
  .dance-steps-board,
  .honeycomb-path-board,
  .leaf-pairs-board,
  .tea-service-board,
  .berry-books-board,
  .color-mixer-board,
  .match-grid-board.gumballBurst
) :is(
  .caramel-stack-side,
  .dance-steps-side,
  .honeycomb-path-side,
  .leaf-pairs-side,
  .tea-service-side,
  .berry-books-side,
  .color-mixer-side,
  .match-grid-side
) {
  position: absolute;
  z-index: 8;
  top: 76px;
  right: 16px;
  display: grid;
  grid-template: none;
  width: min(220px, 24vw);
  max-height: calc(100% - 96px);
  gap: 8px;
  overflow: auto;
  color: #45233f;
  pointer-events: none;
  scrollbar-width: none;
}

:is(
  .caramel-stack-side,
  .dance-steps-side,
  .honeycomb-path-side,
  .leaf-pairs-side,
  .tea-service-side,
  .berry-books-side,
  .color-mixer-side,
  .match-grid-board.gumballBurst .match-grid-side
) > * {
  min-height: 0;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  background: rgba(255, 249, 252, 0.84);
  box-shadow: 0 10px 28px rgba(74, 32, 67, 0.15);
  backdrop-filter: blur(16px) saturate(1.12);
}

:is(
  .caramel-stack-side,
  .dance-steps-side,
  .honeycomb-path-side,
  .leaf-pairs-side,
  .tea-service-side,
  .berry-books-side,
  .color-mixer-side,
  .match-grid-board.gumballBurst .match-grid-side
) strong {
  font-size: 0.8rem;
  line-height: 1.1;
}

:is(
  .caramel-stack-side,
  .dance-steps-side,
  .honeycomb-path-side,
  .leaf-pairs-side,
  .tea-service-side,
  .berry-books-side,
  .color-mixer-side,
  .match-grid-board.gumballBurst .match-grid-side
) span {
  font-size: 0.68rem;
  line-height: 1.12;
}

:is(
  .caramel-stack-side,
  .dance-steps-side,
  .honeycomb-path-side,
  .leaf-pairs-side,
  .tea-service-side,
  .berry-books-side,
  .color-mixer-side,
  .match-grid-board.gumballBurst .match-grid-side
) button {
  min-height: 44px;
  pointer-events: auto;
}

.tea-service-board .tea-service-friends {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.tea-service-board .tea-service-friends span {
  padding: 5px;
}

.berry-books-board .berry-books-shelves {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 6px;
}

.berry-books-board .berry-books-shelf-btn {
  min-height: 44px;
  padding: 5px 6px;
  font-size: 0.64rem;
}

.match-grid-board.gumballBurst .match-grid-actions {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.match-grid-board.gumballBurst .match-grid-actions button {
  width: 100%;
  min-width: 0;
}

.mini-game-card:has(:is(
  .caramel-stack-board,
  .dance-steps-board,
  .honeycomb-path-board,
  .leaf-pairs-board,
  .tea-service-board,
  .berry-books-board,
  .color-mixer-board,
  .match-grid-board.gumballBurst
)) .mini-game-feedback:not(:empty) {
  position: fixed;
  z-index: 10002;
  left: 50%;
  bottom: 14px;
  width: auto;
  max-width: min(320px, calc(100vw - 32px));
  min-height: 0;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  line-height: 1.15;
  transform: translateX(-50%);
}

.mini-game-modal .mini-game-card:has(.caramel-stack-board) .mini-game-feedback:not(:empty) {
  bottom: 88px;
}

@media (max-width: 720px) {
  :is(
    .caramel-stack-board,
    .dance-steps-board,
    .honeycomb-path-board,
    .leaf-pairs-board,
    .tea-service-board,
    .berry-books-board,
    .color-mixer-board,
    .match-grid-board.gumballBurst
  ) :is(
    .caramel-stack-side,
    .dance-steps-side,
    .honeycomb-path-side,
    .leaf-pairs-side,
    .tea-service-side,
    .berry-books-side,
    .color-mixer-side,
    .match-grid-side
  ) {
    top: 68px;
    right: 8px;
    width: 164px;
    max-height: calc(100% - 82px);
    gap: 6px;
  }

  :is(
    .dance-steps-card,
    .honeycomb-path-card,
    .leaf-pairs-card,
    .tea-service-card,
    .berry-books-card,
    .color-mixer-card
  ) {
    display: none;
  }

  .caramel-stack-board .caramel-stack-card > span,
  .tea-service-board .tea-service-friends,
  .match-grid-board.gumballBurst .match-grid-card > span,
  .match-grid-board.gumballBurst .match-grid-plan-steps {
    display: none;
  }

  .caramel-stack-board .caramel-stack-blueprint {
    margin-top: 5px;
    padding: 6px;
    font-size: 0.65rem;
  }

  .berry-books-board .berry-books-clue {
    min-height: 0;
    padding: 8px;
    font-size: 0.68rem;
  }

  .berry-books-board .berry-books-shelf-btn {
    font-size: 0.58rem;
  }

  .mini-game-card:has(:is(
    .caramel-stack-board,
    .dance-steps-board,
    .honeycomb-path-board,
    .leaf-pairs-board,
    .tea-service-board,
    .berry-books-board,
    .color-mixer-board,
    .match-grid-board.gumballBurst
  )) .mini-game-feedback:not(:empty) {
    bottom: 10px;
    max-width: min(240px, calc(100vw - 24px));
    font-size: 0.67rem;
  }

  .mini-game-modal .mini-game-card:has(.caramel-stack-board) .mini-game-feedback:not(:empty) {
    bottom: 88px;
  }

  .mystery-trail .mystery-3d-hud {
    top: 68px;
    left: 10px;
    right: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
    width: auto;
    padding: 7px 8px;
  }

  .mystery-trail .mystery-3d-hud > strong {
    font-size: 0.78rem;
    line-height: 1.05;
  }

  .mystery-trail .mystery-3d-hud > span,
  .mystery-trail .mystery-case-notes {
    display: none;
  }

  .mystery-trail :is(.mystery-journal-open, .mystery-compass-open) {
    min-width: 0;
    min-height: 44px;
    padding: 5px 8px;
    font-size: 0.66rem;
  }

  .mystery-trail .mystery-3d-speech {
    top: 162px;
    right: 10px;
    left: auto;
    width: min(230px, calc(100% - 20px));
    min-height: 0;
    padding: 7px 9px;
    font-size: 0.68rem;
    line-height: 1.12;
  }

  .mystery-trail .mini-world-complete {
    width: min(210px, calc(100% - 24px));
    padding: 8px 10px;
    gap: 2px;
    border-width: 2px;
    border-radius: 12px;
  }

  .mystery-trail .mini-world-complete strong {
    font-size: 0.92rem;
  }

  .mystery-trail .mini-world-complete span {
    font-size: 0.72rem;
  }

  .butterfly-net .butterfly-mission-chip {
    top: 68px;
    left: 50%;
    width: max-content;
    min-width: 0;
    max-width: min(210px, calc(100% - 150px));
    min-height: 44px;
    box-sizing: border-box;
    padding: 7px 10px;
    transform: translateX(-50%);
    font-size: 0.7rem;
    line-height: 1.1;
  }

  .butterfly-net .butterfly-mission-chip strong {
    display: block;
    margin: 0;
    font-size: inherit;
  }

  .butterfly-net .butterfly-space-hint {
    display: none;
  }

  .princess-arrow-tactica-frame {
    padding-top: 64px;
  }
}

/* Gameplay-depth pass: compact mission UI plus distinct play verbs. */
.mini-game-board:is(.memory-play, .telescope-play, .balance-play)
  .mini-world-intro {
  display: none;
}

.treasure-chute-order,
.candy-claw-request {
  position: absolute;
  top: clamp(68px, 9dvh, 86px);
  left: 50%;
  z-index: 90;
  box-sizing: border-box;
  width: min(340px, calc(100% - 150px));
  padding: 8px 10px;
  transform: translateX(-50%);
  border: 2px solid rgba(255, 225, 134, 0.88);
  border-radius: 14px;
  background: rgba(26, 19, 59, 0.82);
  color: #fff8dc;
  box-shadow: 0 8px 22px rgba(13, 10, 39, 0.28);
  font:
    900 12px/1.15 "Arial Rounded MT Bold",
    "Trebuchet MS",
    Arial,
    sans-serif;
  text-align: center;
  backdrop-filter: blur(9px);
}

.treasure-chute-order > strong,
.candy-claw-request > strong {
  display: block;
  margin-bottom: 5px;
  color: #ffe28f;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.treasure-chute-order > div {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.treasure-chute-order span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 3px 5px;
  opacity: 0.58;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
}

.treasure-chute-order span.current {
  opacity: 1;
  background: rgba(255, 222, 114, 0.24);
  box-shadow: inset 0 0 0 2px rgba(255, 226, 143, 0.72);
}

.treasure-chute-order img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.treasure-chute-order b {
  max-width: 74px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.treasure-chute-item.wanted.ready {
  filter: drop-shadow(0 0 12px #fff3a2) saturate(1.25);
}

.treasure-chute-item.later {
  animation: treasure-later-nudge 0.38s ease;
}

@keyframes treasure-later-nudge {
  35% {
    filter: grayscale(0.55) brightness(1.4);
  }
}

.candy-claw-request {
  width: min(280px, calc(100% - 150px));
  color: #fff7de;
  background: rgba(105, 34, 71, 0.9);
}

.candy-claw-request span,
.candy-claw-request small {
  display: block;
}

.candy-claw-request span {
  font-size: 14px;
}

.candy-claw-request small {
  margin-top: 3px;
  opacity: 0.8;
  font-size: 10px;
}

.candy-claw-request.nudge {
  animation: claw-request-nudge 0.4s ease;
}

.candy-claw-prize {
  transition:
    left 0.48s ease,
    top 0.48s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

.candy-claw-stage.shuffling .candy-claw-prize:not(.collected) {
  filter: drop-shadow(0 0 9px rgba(255, 232, 138, 0.88));
}

@keyframes claw-request-nudge {
  35% {
    transform: translateX(-50%) scale(1.05);
  }
}

.lantern-memory-trail {
  position: absolute;
  left: 50%;
  bottom: 12%;
  z-index: 8;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
  pointer-events: none;
}

.lantern-memory-trail i {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(61, 38, 102, 0.55);
  box-shadow: 0 2px 8px rgba(37, 26, 70, 0.28);
}

.lantern-memory-trail i.remembered {
  background: #ffe37e;
  box-shadow: 0 0 12px #fff2a8;
}

.lantern-sky-target.showing,
.lantern-sky-target.player-lit {
  z-index: 12;
  transform: translate(-50%, -50%) scale(1.2);
  border-color: #fff6af;
  background: #fff8c7;
  color: #6b2247;
  box-shadow:
    0 0 0 7px rgba(255, 237, 129, 0.24),
    0 0 30px rgba(255, 234, 112, 0.96);
}

.lantern-sky-target.gentle-retry {
  animation: lantern-gentle-retry 0.4s ease;
}

@keyframes lantern-gentle-retry {
  45% {
    transform: translate(-50%, -50%) scale(0.9);
  }
}

.observatory-reticle {
  position: absolute;
  z-index: 12;
  width: clamp(62px, 8vw, 92px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(211, 228, 255, 0.92);
  border-radius: 50%;
  box-shadow:
    0 0 0 8px rgba(105, 151, 240, 0.18),
    inset 0 0 16px rgba(195, 218, 255, 0.35);
  transition:
    left 0.16s ease,
    top 0.16s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  pointer-events: none;
}

.observatory-reticle::before,
.observatory-reticle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(225, 237, 255, 0.92);
  transform: translate(-50%, -50%);
}

.observatory-reticle::before {
  width: 125%;
  height: 2px;
}

.observatory-reticle::after {
  width: 2px;
  height: 125%;
}

.observatory-reticle i {
  position: absolute;
  inset: 34%;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.observatory-reticle.locked {
  color: #fff0a0;
  border-color: #ffe276;
  box-shadow:
    0 0 0 9px rgba(255, 222, 102, 0.24),
    0 0 26px rgba(255, 226, 118, 0.88);
}

.observatory-reticle.capturing {
  transform: translate(-50%, -50%) scale(1.2);
}

.observatory-reticle.near-miss {
  animation: observatory-reticle-nudge 0.36s ease;
}

.observatory-orbit-target {
  pointer-events: none;
}

.observatory-orbit-target.hinting {
  box-shadow: 0 0 0 8px rgba(255, 232, 139, 0.25), 0 0 24px #ffe992;
}

.observatory-route-line {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.observatory-route-line i {
  position: absolute;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff6c6;
  border-radius: 50%;
  background: #ffe073;
  box-shadow: 0 0 15px #ffe793;
}

.telescope-controls {
  grid-template-columns: repeat(5, minmax(48px, 1fr));
  width: min(100%, 650px);
  margin-inline: auto;
}

.telescope-controls button {
  min-height: 48px;
}

@keyframes observatory-reticle-nudge {
  35% {
    transform: translate(-50%, -50%) scale(0.88);
  }
}

.rainbow-bridge-princess {
  position: absolute;
  z-index: 13;
  display: grid;
  place-items: center;
  width: clamp(44px, 5vw, 64px);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff2b0, #e87aaa);
  color: #6b2247;
  box-shadow: 0 8px 20px rgba(81, 38, 78, 0.28);
  font-size: clamp(24px, 3vw, 38px);
  transition:
    left 0.36s ease,
    top 0.36s ease,
    opacity 0.2s ease;
  pointer-events: none;
}

.rainbow-bridge-princess.visible {
  opacity: 1;
}

.rainbow-bridge-princess.stepping {
  transform: translate(-50%, -62%) scale(1.08);
}

.rainbow-balance {
  position: relative;
  width: min(520px, 60vw);
  height: 24px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(78, 50, 112, 0.72);
  box-shadow: inset 0 2px 10px rgba(31, 21, 56, 0.34);
}

.rainbow-balance-zone {
  position: absolute;
  left: var(--safe-left);
  top: 0;
  width: var(--safe-width);
  height: 100%;
  background: linear-gradient(90deg, #ffdc72, #fff5ae, #ffdc72);
  box-shadow: 0 0 15px rgba(255, 230, 126, 0.88);
}

.rainbow-balance-marker {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f269ac;
  box-shadow: 0 0 12px #fff;
}

.rainbow-bridge-actions:has(.rainbow-balance) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: min(100%, 720px);
  margin-inline: auto;
}

.rainbow-bridge-actions [data-bridge-step] {
  min-width: 150px;
  min-height: 50px;
}

.rainbow-bridge-builder.bridge-wobble .rainbow-bridge-stage {
  animation: rainbow-bridge-wobble 0.36s ease;
}

@keyframes rainbow-bridge-wobble {
  30% {
    transform: translateX(-5px) rotate(-0.2deg);
  }
  65% {
    transform: translateX(5px) rotate(0.2deg);
  }
}

@media (max-width: 620px) {
  .treasure-chute-order,
  .candy-claw-request {
    top: 66px;
    width: min(250px, calc(100% - 132px));
    padding: 6px 7px;
  }

  .treasure-chute-order span {
    grid-template-columns: 25px minmax(0, 1fr);
  }

  .treasure-chute-order img {
    width: 25px;
    height: 25px;
  }

  .treasure-chute-order b {
    max-width: 46px;
    font-size: 9px;
  }

  .candy-claw-request span {
    font-size: 12px;
  }

  .lantern-memory-trail {
    bottom: 18%;
  }

  .observatory-reticle {
    width: 60px;
  }

  .telescope-controls {
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: 5px;
  }

  .telescope-controls button {
    min-width: 0;
    padding-inline: 6px;
    font-size: 12px;
  }

  .rainbow-bridge-actions:has(.rainbow-balance) {
    grid-template-columns: 1fr auto;
    gap: 7px;
  }

  .rainbow-balance {
    width: 100%;
    height: 22px;
  }

  .rainbow-bridge-actions [data-bridge-step] {
    min-width: 110px;
    min-height: 48px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .mini-game-modal:has(
      .mini-game-board:is(
          .lantern-sky-patterns,
          .observatory-orbit-order,
          .rainbow-bridge-builder
        )
    )
    .mini-game-feedback:not(:empty) {
    bottom: max(68px, calc(env(safe-area-inset-bottom) + 68px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .candy-claw-prize,
  .observatory-reticle,
  .rainbow-bridge-princess {
    transition-duration: 0.01ms;
  }
}

/* Action-lane opening clearance, scoped after the shared responsive passes. */
.mini-game-board:is(.bubble-wand-pop, .comet-courtyard-dash)
  .mini-world-intro {
  top: max(68px, calc(env(safe-area-inset-top) + 64px));
  width: min(300px, calc(100% - 24px));
  min-width: 0;
  max-width: calc(100% - 24px);
  padding: 7px 14px;
  gap: 0;
  border-width: 2px;
  border-radius: 999px;
  transform: translate(-50%, 0);
  animation: action-world-intro-ribbon 1.02s ease both;
}

.mini-game-board:is(.bubble-wand-pop, .comet-courtyard-dash)
  .mini-world-intro strong {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.05;
  white-space: nowrap;
}

.mini-game-board:is(.bubble-wand-pop, .comet-courtyard-dash)
  .mini-world-intro span {
  display: none;
}

@media (max-width: 640px) {
  .mini-game-board:is(.bubble-wand-pop, .comet-courtyard-dash)
    .mini-world-intro {
    width: min(270px, calc(100% - 24px));
    padding: 7px 12px;
  }

  .mini-game-board:is(.bubble-wand-pop, .comet-courtyard-dash)
    .mini-world-intro strong {
    font-size: 18px;
  }

  .mini-game-board.bubble-wand-pop .bubble-wand-status {
    top: 54px;
    box-sizing: border-box;
  }

  .mini-game-board.bubble-wand-pop .bubble-wand-bouquet {
    display: none;
  }

  .mini-game-board.bubble-wand-pop .bubble-wand-mission {
    top: 124px;
    box-sizing: border-box;
  }

  .mini-game-board.royal-archery .royal-archery-card {
    left: 8px;
    right: 8px;
    top: 8px;
    box-sizing: border-box;
    width: auto;
    max-width: none;
  }

  .mini-game-board.royal-archery .royal-archery-anticipation {
    left: 8px;
    right: 8px;
    top: 78px;
    box-sizing: border-box;
    width: auto;
    max-width: none;
  }

  .mini-game-modal:has(.mini-game-board.comet-courtyard-dash)
    .mini-game-progress {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    top: max(12px, env(safe-area-inset-top));
    width: max-content;
    max-width: calc(100vw - 132px);
    min-height: 44px;
    padding: 7px 10px;
    transform: none;
    font-size: 12px;
  }

  .comet-courtyard-dash .comet-dash-sash {
    top: 68px;
  }

  .mini-game-board.comet-courtyard-dash .mini-world-intro {
    top: 112px;
  }

  .comet-courtyard-dash .comet-dash-status {
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    max-width: 1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
  }

  .comet-courtyard-dash .comet-dash-next {
    top: 158px;
  }

  .mini-game-board.comet-courtyard-dash::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mini-game-board:is(.bubble-wand-pop, .comet-courtyard-dash)
    .mini-world-intro {
    animation: action-world-intro-reduced 1.02s step-end both;
  }
}

@keyframes action-world-intro-reduced {
  0%,
  99% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
}

@keyframes action-world-intro-ribbon {
  0% {
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.94);
  }
  18%,
  76% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -4px) scale(1.02);
  }
}