/* Copyright Ayers Electronics Inc. All rights reserved. */
/* channel bug and watermark. */

/* ---- channel bug / watermark (the one cross-client spec) ----
   Text only: the wordmark art is transparent and nothing is drawn behind it. Small and tight into
   the corner so it reads as a network bug rather than a badge. */
#watermark {
  /* The pre-script default is the shared box (parity.watermark): the logo canvas's height, on the
     one physical action-safe inset from the side and the foot; js/tuner-watermark.js
     placeWatermark then sets the box inline from the real picture frame and the logo's ink. No width
     clamp: a stylesheet clamp shrank the mark and dragged it in from its corner on any picture wider
     than 960px. */
  position: absolute;
  right: 3.5vh;
  bottom: 3.5vh;
  z-index: 5;
  height: 7.41vh;
  object-fit: contain;
  opacity: 0.75;
  /* A frame that changes under the mark moves it smoothly to its new place. */
  transition:
    left 600ms ease,
    top 600ms ease,
    width 600ms ease,
    height 600ms ease;
}
/* The first seconds after a tune seat the mark at once (js/tuner-watermark-place.js watermarkSettling). */
#watermark[data-settling] {
  transition: none;
}
/* width: 100% (not just max-width) so the img's own box IS the anchored box - a replaced element with
   only height set sizes itself from its own aspect ratio, and anything narrower than the 4:1 canvas
   (the square Magpie mark included) then sits at the box's near corner by plain block flow, with
   object-position (below) having no room left to move it. */
#watermark img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  /* A channel logo's art moves to the anchored edge of its canvas (js/logo-ink.js paintLogoInkShift). */
  transform: translateX(calc(var(--ink-shift, 0) * 100%));
}
/* The art hugs the anchor's side inside its box (js/tuner-watermark.js writes data-align). */
#watermark[data-align="left-top"] img {
  object-position: left top;
}
#watermark[data-align="center-top"] img {
  object-position: center top;
}
#watermark[data-align="right-top"] img {
  object-position: right top;
}
#watermark[data-align="left-middle"] img {
  object-position: left center;
}
#watermark[data-align="center-middle"] img {
  object-position: center center;
}
#watermark[data-align="right-middle"] img {
  object-position: right center;
}
#watermark[data-align="left-bottom"] img {
  object-position: left bottom;
}
#watermark[data-align="center-bottom"] img {
  object-position: center bottom;
}
#watermark[data-align="right-bottom"] img {
  object-position: right bottom;
}
/* The fallback mark only (no watermark of its own): the same
   monochrome/translucent look as the Download Magpie button (#demoMark.outline). A channel's
   own logo or a custom upload keeps full colour; scoped by data-mark, which js/tuner-watermark.js
   sets on the fallback and nothing else. The player row's Magpie face is the same grey bird at the
   row's brightness (css/player/transport-controls.css). */
#watermark img[data-mark] {
  opacity: var(--mark-opacity);
  filter: var(--mark-filter);
}
/* The policy's timing (js/tuner-watermark.js placeWatermark): data-show="0" is the intermittent gap.
   The Ticker overlay's own yield uses the hidden class, so the two never fight over one attribute. */
#watermark[data-show="0"] {
  display: none;
}
/* At home on the full picture, the mark is put away while a page covers it; a page with a preview
   frame carries it in the frame's corner (css/components/preview.css). */
body.page-up #player > #watermark {
  display: none;
}
/* A title playing is not the channel: the channel's mark is not drawn over it. */
body.playing-item #watermark {
  display: none;
}