/* Gift overlay: big gift videos / pictures and the "who sent it" side badge. Used by giftoverlay.js (GiftOverlayManager).
 *
 * The overlay draws INSIDE whatever container it is given. That container must be position: relative (or absolute / fixed).
 *   - On the website the container is the video area of the stream, so a gift can never cover the page around it.
 *   - In an OBS browser source add class "gift-overlay-viewport" to the container: it then fills the window (100vw x 100vh).
 */

/* OBS / full-window mode */
.gift-overlay-viewport { position: fixed; inset: 0; width: 100vw; height: 100vh; overflow: hidden; pointer-events: none; background: transparent; }

/* The stage fills the container and centres the media. Nothing in it can be bigger than the container. */
.gift-overlay-stage {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  /* keep clear of notches and rounded corners on phones */
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  box-sizing: border-box; overflow: hidden; pointer-events: none;
  animation: gift-overlay-in .22s ease-out both;
}

/* The media keeps its own shape: a 9:16 clip is a tall picture in the middle, a 16:9 clip is a wide one. Never stretched, never cropped. */
.gift-overlay-media {
  display: block; max-width: 100%; max-height: 100%;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  will-change: transform, opacity;
}

/* Gifts worth 1,000+ coins: fully solid at the top, getting slightly see-through towards the bottom so the stream shows through. */
.gift-overlay-stage.is-faded {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .5) 100%);
}

/* The side badge: slides in from the left edge, stays for 5 seconds (the script times that), fades out. */
.gift-overlay-badge {
  position: absolute; z-index: 7; left: 0; top: 36%;
  display: flex; align-items: center; gap: 10px;
  max-width: min(82%, 420px); box-sizing: border-box;
  padding: 10px 18px 10px 12px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, rgba(20, 16, 40, .88), rgba(60, 28, 110, .88));
  border: 1px solid rgba(255, 255, 255, .18); border-left: 0;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45), 0 0 18px rgba(168, 85, 247, .35);
  color: #fff; font-weight: 800; font-size: 15px; line-height: 1.25;
  pointer-events: none;
  animation: gift-badge-in .38s cubic-bezier(.17, 1.2, .4, 1) both;
}
.gift-overlay-badge.is-leaving { animation: gift-badge-out .35s ease-in forwards; }
.gift-overlay-badge-icon { font-size: 24px; line-height: 1; flex: none; }
.gift-overlay-badge-text { overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; }

@keyframes gift-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gift-badge-in { from { transform: translateX(-110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes gift-badge-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-30%); opacity: 0; } }

/* Small screens: smaller badge, a little lower so it does not sit on the top bar. */
@media (max-width: 480px) { .gift-overlay-badge { top: 40%; font-size: 14px; padding: 8px 14px 8px 10px; } .gift-overlay-badge-icon { font-size: 20px; } }
/* Landscape phones: keep the badge near the top-left, out of the way of the video's middle. */
@media (orientation: landscape) and (max-height: 500px) { .gift-overlay-badge { top: 22%; } }
@media (prefers-reduced-motion: reduce) { .gift-overlay-stage, .gift-overlay-badge { animation-duration: .01s; } }

/* "Transparent background" gifts: the real video/picture keeps playing out of sight; a canvas beside it shows it without its background. */
.gift-overlay-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gift-overlay-keyed { image-rendering: auto; }