/*
 * Slide styling shared by the hall display and the admin preview.
 * Sizes use vh/vw of the containing "stage" so they scale with the TV.
 * No CSS variables / flex gap - older Smart TV browsers don't support them.
 *
 * Palette: purple #22093D-#3A1764, gold #D9B45A, text #FBF8FF / #E4D9F2.
 */
@import url("../assets/fonts/fonts.css");

.stage {
  position: relative;
  overflow: hidden;
  background-color: #22093d;
  background-image: radial-gradient(ellipse at 50% 45%, #3c1868 0%, #2a0c4a 45%, #17052a 100%);
  color: #fbf8ff;
  font-family: "Noto Serif", "Noto Serif Gujarati", Georgia, serif;
}

/* Gold mandala watermark */
.stage .mandala {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 135vh;
  height: 135vh;
  margin: -67.5vh 0 0 -67.5vh;
  opacity: 0.075;
  pointer-events: none;
}

/* Double gold frame, inset to stay clear of TV overscan */
.stage .frame {
  position: absolute;
  top: 3.5vh;
  bottom: 3.5vh;
  left: 2.5vw;
  right: 2.5vw;
  border: 1px solid rgba(217, 180, 90, 0.55);
  pointer-events: none;
}
.stage .frame:after {
  content: "";
  position: absolute;
  top: 0.9vh;
  bottom: 0.9vh;
  left: 0.9vh;
  right: 0.9vh;
  border: 1px solid rgba(217, 180, 90, 0.22);
}

.stage .corner-logo {
  position: absolute;
  top: 6vh;
  left: 4.5vw;
  height: 11vh;
  opacity: 0.95;
}
.stage.is-welcome .corner-logo,
.stage.is-blank .corner-logo { display: none; }

/* Progress dots for the current prayer */
.stage .progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6.5vh;
  text-align: center;
  font-size: 0;
}
.stage .progress span {
  display: inline-block;
  width: 1.1vh;
  height: 1.1vh;
  margin: 0 0.7vh;
  border-radius: 50%;
  border: 1px solid rgba(217, 180, 90, 0.7);
}
.stage .progress span.on { background: #d9b45a; border-color: #d9b45a; }

/* ---------- Slides ---------- */

.slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: opacity 0.45s ease;
  transition: opacity 0.45s ease;
}
.slide.shown { opacity: 1; }

.slide .slide-header {
  position: absolute;
  top: 7.5vh;
  left: 18vw;
  right: 18vw;
  text-align: center;
}
.slide .head-title {
  display: inline-block;
  color: #d9b45a;
  font-size: 3vh;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  padding: 0 1.4em;
  position: relative;
}
.slide .head-title:before,
.slide .head-title:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6vw;
  border-top: 1px solid rgba(217, 180, 90, 0.6);
}
.slide .head-title:before { right: 100%; }
.slide .head-title:after { left: 100%; }

.slide .head-count {
  position: absolute;
  right: -13vw;
  top: 0;
  color: #d9b45a;
  font-size: 3vh;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* The area the lyrics are auto-fitted into */
.slide .fit {
  position: absolute;
  top: 15vh;
  bottom: 11vh;
  left: 6vw;
  right: 6vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.slide .content {
  width: 100%;
  max-height: 100%;
  text-align: center;
  font-size: 9vh;
}
.slide .line {
  white-space: nowrap;
  overflow: hidden;
}

.slide .block.gu {
  font-family: "Noto Serif Gujarati", "Noto Serif", serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.45;
  color: #fbf8ff;
}
.slide .block.tr {
  font-size: 0.6em;
  line-height: 1.4;
  color: #e4d9f2;
}
.slide .block.tr.primary {
  font-size: 0.85em;
  line-height: 1.45;
  font-weight: 600;
  color: #fbf8ff;
}
.slide .block.en {
  margin-top: 0.7em;
  font-size: 0.4em;
  line-height: 1.45;
  font-style: italic;
  color: #cbb9e3;
}

.slide .divider {
  position: relative;
  width: 3.4em;
  height: 0.6em;
  margin: 0.15em auto 0.3em;
}
.slide .divider:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid rgba(217, 180, 90, 0.75);
}
.slide .divider .diamond {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.18em;
  height: 0.18em;
  margin: -0.09em 0 0 -0.09em;
  background: #d9b45a;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Closing "Jay" screen */
.slide-closing .block.gu,
.slide-closing .block.tr {
  color: #d9b45a;
}
.slide-closing .block.tr { font-weight: 600; }

/* Welcome / holding screen */
.slide-welcome .welcome-logo {
  position: absolute;
  top: 10vh;
  left: 50%;
  height: 46vh;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.slide-welcome .fit {
  top: 60vh;
  bottom: 9vh;
  left: 20vw;
  right: 20vw;
}
.slide-welcome .welcome-title {
  color: #d9b45a;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.slide-welcome .divider { margin: 0.1em auto 0.15em; }
.slide-welcome .welcome-sub {
  font-weight: 500;
  font-size: 0.6em;
  color: #fbf8ff;
}
.slide .gu { font-family: "Noto Serif Gujarati", "Noto Serif", serif; }