/* TV display styles.
   Deliberately old-browser friendly: no CSS custom properties, no grid,
   no calc() dependencies, no viewport units for anything critical.
   All theming is applied from display.js as inline styles. */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

#bg, #bgVideo, #dim, #vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

#bg {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}

#bgVideo {
  background: #000;
  display: none;
}

#dim {
  background: #000;
  opacity: 0;
  filter: alpha(opacity=0);
}

#vignette {
  display: none;
}

#accentTop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  z-index: 5;
  display: none;
}

#safe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

/* Table layout is used on purpose: vertical centering that works on
   every webOS browser generation, including the pre-flexbox ones. */
#stage {
  display: table;
  width: 100%;
  height: 100%;
}

#cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

#logoWrap {
  display: none;
}

#logo {
  display: inline-block;
  vertical-align: middle;
}

#fade {
  -webkit-transition: opacity 400ms linear, -webkit-transform 400ms ease-out;
  transition: opacity 400ms linear, transform 400ms ease-out;
}

#headline {
  line-height: 1.05;
  margin: 0 0 0.35em 0;
  word-wrap: break-word;
}

#bodyText {
  line-height: 1.3;
  margin: 0;
  word-wrap: break-word;
}

#note {
  line-height: 1.3;
  margin: 0.7em 0 0 0;
  word-wrap: break-word;
}

/* Data-driven slide blocks (QR / weather / feed). Hidden until their slide
   type asks for them; they inherit alignment and animation from #fade. */
#qrWrap, #weatherWrap, #feedWrap { display: none; }

#qrCanvas {
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
  background: #fff;
}

#qrCaption { margin-top: 0.4em; }

#wxNow { line-height: 1.15; }
#wxDays { margin-top: 0.5em; }
#wxDays span { display: inline-block; }

#feedWrap ul { list-style: none; margin: 0; padding: 0; }
#feedWrap li { margin: 0 0 0.45em 0; line-height: 1.25; }

/* Text entrance animations. Both prefixed and unprefixed @keyframes/animation
   are used together (older webOS engines only understood the -webkit- form;
   an engine that only understands one of the two simply ignores the other). */
@-webkit-keyframes txFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes txFadeIn { from { opacity: 0; } to { opacity: 1; } }

@-webkit-keyframes txSlideUp { from { opacity: 0; -webkit-transform: translateY(40px); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes txSlideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

@-webkit-keyframes txSlideDown { from { opacity: 0; -webkit-transform: translateY(-40px); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes txSlideDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }

@-webkit-keyframes txSlideLeft { from { opacity: 0; -webkit-transform: translateX(70px); } to { opacity: 1; -webkit-transform: translateX(0); } }
@keyframes txSlideLeft { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: translateX(0); } }

@-webkit-keyframes txSlideRight { from { opacity: 0; -webkit-transform: translateX(-70px); } to { opacity: 1; -webkit-transform: translateX(0); } }
@keyframes txSlideRight { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: translateX(0); } }

@-webkit-keyframes txZoomIn { from { opacity: 0; -webkit-transform: scale(0.5); } to { opacity: 1; -webkit-transform: scale(1); } }
@keyframes txZoomIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }

@-webkit-keyframes txBounceIn {
  0% { opacity: 0; -webkit-transform: scale(0.3); }
  50% { opacity: 1; -webkit-transform: scale(1.08); }
  70% { -webkit-transform: scale(0.94); }
  100% { -webkit-transform: scale(1); }
}
@keyframes txBounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.08); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

#clockBox {
  position: absolute;
  z-index: 6;
  text-align: right;
  line-height: 1.1;
  display: none;
}

#dateLine {
  opacity: 0.75;
  filter: alpha(opacity=75);
}

#wxInline {
  opacity: 0.9;
  filter: alpha(opacity=90);
  display: none;
}

/* A QR code shown in a screen corner, on top of whatever slide is playing
   (photo, video, or text) rather than replacing it. Position/caption side
   are set inline by JS; the dark backing keeps the caption legible over any
   background, and the canvas itself gets a plain white plate since a QR
   code with no quiet zone or with a transparent/dark background won't scan. */
#qrOverlayBox {
  position: absolute;
  z-index: 9;
  display: none;
  align-items: center;
  background: rgba(0,0,0,0.55);
  border-radius: 10px;
  padding: 10px;
}

#qrOverlayCanvas {
  display: block;
  background: #fff;
  border-radius: 4px;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

#qrOverlayCaption {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  text-align: center;
}

#tickerBar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  z-index: 7;
  display: none;
}

#tickerText {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}

/* Sits above everything -- an overlay effect (snow, confetti, fireworks...)
   is meant to play across the whole screen, text and ticker included. */
#fxCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  display: none;
  pointer-events: none;
}

#slideVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: #000;
  display: none;
}

/* Photo slides use a background-image div rather than an <img> with object-fit,
   because background-size: cover is supported further back than object-fit is. */
#slideImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  display: none;
}

/* Full-screen tint sitting above the photo/video but below the text, used to
   force contrast when text has to sit on top of a busy image. */
#scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  display: none;
}