/* Late visual overrides for the current premium mobile pass. Keep this file after game.css. */

.camp-screen[data-reference-ui="true"] .camp-portrait,
.camp-screen[data-reference-ui="true"][data-camp-hero="queen"] .camp-portrait,
.camp-screen[data-reference-ui="true"][data-camp-hero="warrior"] .camp-portrait,
.camp-screen[data-reference-ui="true"][data-camp-hero="archer"] .camp-portrait,
.camp-screen[data-reference-ui="true"][data-camp-hero="mage"] .camp-portrait,
.camp-screen[data-reference-ui="true"][data-camp-hero="healer"] .camp-portrait,
.camp-screen[data-reference-ui="true"] .camp-showcase-video,
.camp-screen[data-reference-ui="true"] .camp-showcase-video.seamless-video-peer,
.camp-screen[data-reference-ui="true"][data-camp-hero="queen"] .camp-showcase-video,
.camp-screen[data-reference-ui="true"][data-camp-hero="warrior"] .camp-showcase-video,
.camp-screen[data-reference-ui="true"][data-camp-hero="archer"] .camp-showcase-video,
.camp-screen[data-reference-ui="true"][data-camp-hero="mage"] .camp-showcase-video,
.camp-screen[data-reference-ui="true"][data-camp-hero="healer"] .camp-showcase-video {
  left: -52px !important;
  top: 16px !important;
  width: 628px !important;
  height: 1088px !important;
}

.camp-screen[data-reference-ui="true"] .camp-roster {
  left: 300px !important;
  bottom: 25px !important;
  width: 720px !important;
  grid-template-columns: repeat(5, 136px) !important;
  gap: 10px !important;
  z-index: 144 !important;
}

.camp-screen[data-reference-ui="true"] .camp-roster-button {
  flex-basis: 136px !important;
  width: 136px !important;
  min-width: 136px !important;
  height: 114px !important;
  min-height: 114px !important;
}

.camp-screen[data-reference-ui="true"] .camp-roster-portrait {
  inset: 4px 4px 24px !important;
  overflow: hidden !important;
  background-position: var(--avatar-x, 50%) var(--avatar-y, 8%) !important;
  background-size: cover !important;
}

.camp-screen[data-reference-ui="true"] .camp-roster-portrait img {
  object-fit: cover !important;
  object-position: var(--avatar-x, 50%) var(--avatar-y, 8%) !important;
  transform: scale(var(--avatar-scale, 1.95)) !important;
  transform-origin: var(--avatar-x, 50%) 0% !important;
}

html[data-ui-mode="battle"] .tower-card .portrait,
html[data-game-mode="countdown"] .tower-card .portrait,
html[data-game-mode="playing"] .tower-card .portrait,
html[data-game-mode="paused"] .tower-card .portrait {
  background-size: cover !important;
  background-position: var(--avatar-x, 50%) var(--avatar-y, 8%) !important;
}

html[data-ui-mode="battle"] .tower-card .card-portrait-image,
html[data-game-mode="countdown"] .tower-card .card-portrait-image,
html[data-game-mode="playing"] .tower-card .card-portrait-image,
html[data-game-mode="paused"] .tower-card .card-portrait-image {
  object-fit: cover !important;
  object-position: var(--avatar-x, 50%) var(--avatar-y, 8%) !important;
  transform: scale(var(--avatar-scale, 2.02)) !important;
  transform-origin: var(--avatar-x, 50%) 0% !important;
}

html[data-ui-mode="battle"] .tower-card:hover,
html[data-ui-mode="battle"] .tower-card:focus-visible,
html[data-game-mode="countdown"] .tower-card:hover,
html[data-game-mode="countdown"] .tower-card:focus-visible,
html[data-game-mode="playing"] .tower-card:hover,
html[data-game-mode="playing"] .tower-card:focus-visible,
html[data-game-mode="paused"] .tower-card:hover,
html[data-game-mode="paused"] .tower-card:focus-visible {
  --card-raise: -3px !important;
  filter: saturate(1.04) brightness(1.03) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rarity-glow, #ffd083) 38%, transparent),
    0 10px 18px rgba(0, 0, 0, 0.42) !important;
}

html[data-ui-mode="battle"] .tower-card.selected,
html[data-game-mode="countdown"] .tower-card.selected,
html[data-game-mode="playing"] .tower-card.selected,
html[data-game-mode="paused"] .tower-card.selected {
  --card-raise: -4px !important;
}

html[data-ui-mode="battle"] .card-tooltip,
html[data-game-mode="countdown"] .card-tooltip,
html[data-game-mode="playing"] .card-tooltip,
html[data-game-mode="paused"] .card-tooltip,
html[data-ui-mode="battle"] .tower-card .card-hover-video,
html[data-game-mode="countdown"] .tower-card .card-hover-video,
html[data-game-mode="playing"] .tower-card .card-hover-video,
html[data-game-mode="paused"] .tower-card .card-hover-video,
html[data-ui-mode="battle"] .tower-card .card-hover-motion,
html[data-game-mode="countdown"] .tower-card .card-hover-motion,
html[data-game-mode="playing"] .tower-card .card-hover-motion,
html[data-game-mode="paused"] .tower-card .card-hover-motion {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-ui-mode="battle"] .tower-card .card-hp-veil,
html[data-game-mode="countdown"] .tower-card .card-hp-veil,
html[data-game-mode="playing"] .tower-card .card-hp-veil,
html[data-game-mode="paused"] .tower-card .card-hp-veil {
  opacity: 0.42 !important;
  background:
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--card-hp-veil-color) 24%, transparent) 0 var(--card-hp-percent, 100%),
      rgba(2, 3, 10, 0.32) var(--card-hp-percent, 100%) 100%
    ) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--card-hp-veil-color) 14%, transparent),
    inset 0 -14px 18px color-mix(in srgb, var(--card-hp-veil-color) 10%, transparent) !important;
}

html[data-ui-mode="battle"] .tower-card .card-hp-veil i,
html[data-game-mode="countdown"] .tower-card .card-hp-veil i,
html[data-game-mode="playing"] .tower-card .card-hp-veil i,
html[data-game-mode="paused"] .tower-card .card-hp-veil i {
  display: none !important;
}

html[data-ui-mode="battle"] .card-tooltip:not([hidden]),
html[data-game-mode="countdown"] .card-tooltip:not([hidden]),
html[data-game-mode="playing"] .card-tooltip:not([hidden]),
html[data-game-mode="paused"] .card-tooltip:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  top: clamp(38px, 16vh, 132px) !important;
  z-index: 180 !important;
  width: min(304px, calc(100vw - 24px)) !important;
  max-height: min(178px, var(--card-tooltip-max-height, 178px)) !important;
  padding: 10px 12px 11px !important;
  border: 1px solid rgba(255, 224, 150, 0.72) !important;
  border-left: 3px solid color-mix(in srgb, var(--rarity-color, #ffd083) 74%, #ffffff 8%) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(180deg, rgba(31, 21, 38, 0.92), rgba(8, 10, 20, 0.94)),
    radial-gradient(circle at 24% 12%, rgba(255, 206, 128, 0.18), transparent 34%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 16px 30px rgba(0, 0, 0, 0.42),
    0 0 18px color-mix(in srgb, var(--rarity-glow, #ffd083) 26%, transparent) !important;
  color: #fff1da !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  white-space: pre-wrap !important;
  overflow: hidden auto !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
}

html[data-ui-mode="battle"] .tower-card.is-taking-hit,
html[data-game-mode="countdown"] .tower-card.is-taking-hit,
html[data-game-mode="playing"] .tower-card.is-taking-hit,
html[data-game-mode="paused"] .tower-card.is-taking-hit {
  border-color: rgba(255, 86, 104, 0.96) !important;
  animation: yattaCardDamageShake 420ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
  box-shadow:
    0 0 0 1px rgba(255, 86, 104, 0.78),
    0 0 20px rgba(255, 45, 75, 0.44),
    0 12px 24px rgba(0, 0, 0, 0.52) !important;
}

html[data-ui-mode="battle"] .tower-card.is-taking-hit .card-portrait-image,
html[data-game-mode="countdown"] .tower-card.is-taking-hit .card-portrait-image,
html[data-game-mode="playing"] .tower-card.is-taking-hit .card-portrait-image,
html[data-game-mode="paused"] .tower-card.is-taking-hit .card-portrait-image {
  filter: saturate(1.36) brightness(1.14) contrast(1.08)
    drop-shadow(0 0 12px rgba(255, 39, 70, 0.52)) !important;
}

html[data-ui-mode="battle"] .tower-card.is-taking-hit .card-hp-veil,
html[data-game-mode="countdown"] .tower-card.is-taking-hit .card-hp-veil,
html[data-game-mode="playing"] .tower-card.is-taking-hit .card-hp-veil,
html[data-game-mode="paused"] .tower-card.is-taking-hit .card-hp-veil {
  opacity: calc(0.62 + var(--card-hit-intensity, 0.5) * 0.24) !important;
  background:
    linear-gradient(
      0deg,
      rgba(255, 52, 82, 0.5) 0 var(--card-hp-percent, 100%),
      rgba(50, 2, 12, 0.58) var(--card-hp-percent, 100%) 100%
    ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 118, 128, 0.52),
    inset 0 0 28px rgba(255, 37, 71, 0.38) !important;
}

html[data-ui-mode="battle"] .tower-card.is-taking-hit::after,
html[data-game-mode="countdown"] .tower-card.is-taking-hit::after,
html[data-game-mode="playing"] .tower-card.is-taking-hit::after,
html[data-game-mode="paused"] .tower-card.is-taking-hit::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 0 22px !important;
  z-index: 16 !important;
  pointer-events: none !important;
  border-radius: 6px 6px 0 0 !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 40, 70, 0.54), transparent),
    radial-gradient(circle at 50% 50%, rgba(255, 230, 230, 0.34), transparent 42%) !important;
  mix-blend-mode: screen !important;
  animation: yattaCardDamageFlash 420ms ease-out both !important;
}

html[data-ui-mode="battle"] .tower-card.is-skill-ready,
html[data-game-mode="countdown"] .tower-card.is-skill-ready,
html[data-game-mode="playing"] .tower-card.is-skill-ready,
html[data-game-mode="paused"] .tower-card.is-skill-ready {
  --card-raise: -6px !important;
  border-color: rgba(255, 232, 160, 0.96) !important;
  background:
    radial-gradient(circle at 50% 14%, color-mix(in srgb, var(--rarity-color, #ffcf72) 34%, transparent), transparent 40%),
    rgba(8, 5, 14, 0.48) !important;
  box-shadow:
    0 0 0 1px rgba(255, 246, 194, 0.68),
    0 0 18px color-mix(in srgb, var(--rarity-glow, #ffc76d) 72%, transparent),
    0 14px 28px rgba(0, 0, 0, 0.52) !important;
  animation: yattaSkillCardPulse 1.45s ease-in-out infinite !important;
}

html[data-ui-mode="battle"] .tower-card.is-skill-ready::before,
html[data-game-mode="countdown"] .tower-card.is-skill-ready::before,
html[data-game-mode="playing"] .tower-card.is-skill-ready::before,
html[data-game-mode="paused"] .tower-card.is-skill-ready::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -34% -64% 18px -64% !important;
  z-index: 12 !important;
  pointer-events: none !important;
  background:
    linear-gradient(112deg, transparent 33%, rgba(255, 255, 255, 0.62) 48%, rgba(255, 212, 128, 0.22) 54%, transparent 68%),
    repeating-linear-gradient(112deg, transparent 0 22px, rgba(255, 226, 156, 0.1) 23px 24px);
  mix-blend-mode: screen !important;
  opacity: 0.74 !important;
  transform: translateX(-26%) rotate(0.001deg) !important;
  animation: yattaSkillCardSweep 1.8s cubic-bezier(0.42, 0, 0.2, 1) infinite !important;
}

html[data-ui-mode="battle"] .tower-card.is-skill-ready::after,
html[data-game-mode="countdown"] .tower-card.is-skill-ready::after,
html[data-game-mode="playing"] .tower-card.is-skill-ready::after,
html[data-game-mode="paused"] .tower-card.is-skill-ready::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 2px 2px 22px !important;
  z-index: 13 !important;
  pointer-events: none !important;
  border-radius: 5px 5px 0 0 !important;
  background:
    radial-gradient(circle at 72% 16%, rgba(255, 246, 197, 0.46), transparent 0 14%, transparent 22%),
    radial-gradient(circle at 78% 17%, transparent 0 14%, rgba(255, 211, 116, 0.9) 15% 16%, transparent 17% 28%),
    linear-gradient(180deg, rgba(255, 236, 174, 0.14), transparent 36%, rgba(255, 150, 200, 0.12));
  box-shadow:
    inset 0 0 0 1px rgba(255, 241, 186, 0.72),
    inset 0 0 24px color-mix(in srgb, var(--rarity-glow, #ffd083) 24%, transparent) !important;
  mix-blend-mode: screen !important;
  opacity: 0.86 !important;
  animation: yattaSkillCardRing 1.45s ease-in-out infinite !important;
}

html[data-ui-mode="battle"] .tower-card.is-skill-ready .card-portrait-image,
html[data-game-mode="countdown"] .tower-card.is-skill-ready .card-portrait-image,
html[data-game-mode="playing"] .tower-card.is-skill-ready .card-portrait-image,
html[data-game-mode="paused"] .tower-card.is-skill-ready .card-portrait-image {
  filter: saturate(1.22) brightness(1.12) contrast(1.04)
    drop-shadow(0 0 10px color-mix(in srgb, var(--rarity-glow, #ffd083) 36%, transparent)) !important;
}

html[data-ui-mode="battle"] .tower-card.is-skill-ready .card-skill-ready,
html[data-game-mode="countdown"] .tower-card.is-skill-ready .card-skill-ready,
html[data-game-mode="playing"] .tower-card.is-skill-ready .card-skill-ready,
html[data-game-mode="paused"] .tower-card.is-skill-ready .card-skill-ready {
  position: absolute !important;
  right: 5px !important;
  top: 5px !important;
  z-index: 15 !important;
  min-width: 34px !important;
  height: 17px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 6px !important;
  border: 1px solid rgba(255, 243, 190, 0.92) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 232, 142, 0.92), rgba(173, 84, 34, 0.9)),
    linear-gradient(90deg, #fff2b8, #ff7fb4) !important;
  box-shadow:
    0 0 12px rgba(255, 211, 116, 0.68),
    0 2px 7px rgba(0, 0, 0, 0.46) !important;
  color: #21100a !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36) !important;
  pointer-events: none !important;
  animation: yattaSkillBadgePop 1.05s ease-in-out infinite !important;
}

html[data-ui-mode="battle"] .tower-card.is-skill-ready .cost-row,
html[data-game-mode="countdown"] .tower-card.is-skill-ready .cost-row,
html[data-game-mode="playing"] .tower-card.is-skill-ready .cost-row,
html[data-game-mode="paused"] .tower-card.is-skill-ready .cost-row {
  border-top-color: rgba(255, 236, 170, 0.68) !important;
  background:
    linear-gradient(180deg, rgba(74, 29, 19, 0.94), rgba(12, 7, 10, 0.96)),
    linear-gradient(90deg, color-mix(in srgb, var(--rarity-glow, #ffd083) 30%, transparent), transparent) !important;
  color: #fff5cd !important;
  text-shadow:
    0 0 8px rgba(255, 208, 116, 0.68),
    0 1px 3px rgba(0, 0, 0, 0.82) !important;
}

html[data-ui-mode="battle"] .tower-card.is-taking-hit::after,
html[data-game-mode="countdown"] .tower-card.is-taking-hit::after,
html[data-game-mode="playing"] .tower-card.is-taking-hit::after,
html[data-game-mode="paused"] .tower-card.is-taking-hit::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 0 22px !important;
  z-index: 18 !important;
  pointer-events: none !important;
  border-radius: 6px 6px 0 0 !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 40, 70, 0.58), transparent),
    radial-gradient(circle at 50% 50%, rgba(255, 230, 230, 0.36), transparent 42%) !important;
  mix-blend-mode: screen !important;
  animation: yattaCardDamageFlash 420ms ease-out both !important;
}

@keyframes yattaSkillCardPulse {
  0%, 100% {
    filter: saturate(1.1) brightness(1.05);
    box-shadow:
      0 0 0 1px rgba(255, 246, 194, 0.58),
      0 0 12px color-mix(in srgb, var(--rarity-glow, #ffc76d) 54%, transparent),
      0 12px 24px rgba(0, 0, 0, 0.5);
  }
  50% {
    filter: saturate(1.2) brightness(1.16);
    box-shadow:
      0 0 0 1px rgba(255, 252, 218, 0.92),
      0 0 26px color-mix(in srgb, var(--rarity-glow, #ffc76d) 82%, transparent),
      0 16px 30px rgba(0, 0, 0, 0.54);
  }
}

@keyframes yattaSkillCardSweep {
  0%, 18% { transform: translateX(-34%) rotate(0.001deg); opacity: 0; }
  38% { opacity: 0.86; }
  72%, 100% { transform: translateX(34%) rotate(0.001deg); opacity: 0; }
}

@keyframes yattaSkillCardRing {
  0%, 100% { opacity: 0.68; filter: brightness(0.95); }
  50% { opacity: 1; filter: brightness(1.18); }
}

@keyframes yattaSkillBadgePop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes yattaCardDamageShake {
  0% { transform: translateY(var(--card-raise, 0px)) translateX(0); }
  12% { transform: translateY(var(--card-raise, 0px)) translateX(-4px); }
  24% { transform: translateY(var(--card-raise, 0px)) translateX(4px); }
  36% { transform: translateY(var(--card-raise, 0px)) translateX(-3px); }
  48% { transform: translateY(var(--card-raise, 0px)) translateX(3px); }
  64% { transform: translateY(var(--card-raise, 0px)) translateX(-1px); }
  100% { transform: translateY(var(--card-raise, 0px)) translateX(0); }
}

@keyframes yattaCardDamageFlash {
  0% { opacity: 0; transform: scaleX(0.72); }
  18% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.08); }
}

.skill-cinematic,
.game-stage > .skill-cinematic {
  z-index: 260 !important;
  place-items: stretch !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 70% 28%, color-mix(in srgb, var(--skill-color, #ff7fb4) 48%, transparent), transparent 38%),
    radial-gradient(circle at 22% 62%, rgba(255, 235, 182, 0.22), transparent 32%),
    linear-gradient(120deg, rgba(3, 4, 13, 0.92), rgba(13, 9, 30, 0.64) 45%, rgba(3, 4, 13, 0.92)) !important;
}

.skill-cinematic.is-active {
  animation: yattaUltimateHold var(--skill-duration, 15000ms) linear both !important;
}

.skill-cinematic-video,
.skill-cinematic-poster,
.skill-cinematic-bloom {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

.skill-cinematic-video {
  z-index: 2 !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 0 !important;
  filter: saturate(1.18) contrast(1.05) brightness(1.02) !important;
}

.skill-cinematic-video.is-ready {
  opacity: 0.96 !important;
}

.skill-cinematic-poster {
  z-index: 1 !important;
  background-image: var(--skill-poster) !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: 0.9 !important;
  transform: scale(1.08) !important;
  filter: saturate(1.18) contrast(1.08) brightness(0.9) !important;
  animation: yattaUltimatePosterDrift var(--skill-duration, 15000ms) ease-out both !important;
}

.skill-cinematic-bloom {
  z-index: 3 !important;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--skill-color, #ff7fb4) 34%, transparent), transparent),
    radial-gradient(circle at 52% 48%, transparent 0 24%, rgba(255, 255, 255, 0.32) 25%, transparent 31%),
    repeating-linear-gradient(115deg, transparent 0 42px, rgba(255, 255, 255, 0.08) 43px 44px);
  mix-blend-mode: screen !important;
  opacity: 0.62 !important;
  animation: yattaUltimateBloom var(--skill-duration, 15000ms) ease-in-out both !important;
}

.skill-cinematic-core {
  position: absolute !important;
  left: clamp(28px, 5vw, 62px) !important;
  right: auto !important;
  bottom: clamp(32px, 8vh, 74px) !important;
  z-index: 6 !important;
  min-width: min(560px, 52vw) !important;
  max-width: min(640px, 58vw) !important;
  justify-items: start !important;
  padding: 18px 22px 20px !important;
  border: 0 !important;
  border-left: 3px solid color-mix(in srgb, var(--skill-color, #ff7fb4) 78%, #fff 12%) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(90deg, rgba(2, 3, 12, 0.84), rgba(11, 9, 23, 0.54) 72%, transparent) !important;
  box-shadow:
    0 20px 36px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  text-align: left !important;
  transform: none !important;
}

.skill-cinematic.is-active .skill-cinematic-core {
  animation: yattaUltimateText var(--skill-duration, 15000ms) ease both !important;
}

.skill-cinematic-core strong {
  font-size: clamp(30px, 4.8vw, 64px) !important;
  line-height: 0.92 !important;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.36),
    0 0 26px color-mix(in srgb, var(--skill-color, #ff7fb4) 46%, transparent) !important;
}

.skill-cinematic-core small {
  color: rgba(255, 238, 196, 0.68) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
}

html[data-skill-cinematic="true"] .top-hud,
html[data-skill-cinematic="true"] .build-panel {
  opacity: 0.18 !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
}

@keyframes yattaUltimateHold {
  0% { opacity: 0; filter: brightness(0.9); }
  4%, 92% { opacity: 1; filter: brightness(1); }
  100% { opacity: 0; filter: brightness(1.24); }
}

@keyframes yattaUltimatePosterDrift {
  0% { transform: scale(1.04) translate3d(-1.2%, 1%, 0); }
  50% { transform: scale(1.13) translate3d(1%, -0.8%, 0); }
  100% { transform: scale(1.18) translate3d(0, 0, 0); }
}

@keyframes yattaUltimateBloom {
  0% { opacity: 0; transform: translateX(-12%); }
  8%, 86% { opacity: 0.62; }
  48% { opacity: 0.86; transform: translateX(8%); }
  100% { opacity: 0; transform: translateX(18%); }
}

@keyframes yattaUltimateText {
  0% { opacity: 0; transform: translateY(16px); }
  8%, 88% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}