/* The TV page: a black full-screen channel, its own layout (layouts/tv). */

.tv-html,
.tv-body {
  background: #000;
  color: #fff;
  min-height: 100%;
}

.tv {
  --tv-red: #ff2800;
  --tv-yellow: #ffe600;
  --tv-pink: #ff2bd6;
  --tv-cyan: #00e5ff;
  --tv-blue: #0047ff;
  --tv-violet: #7a5cff;

  position: fixed;
  inset: 0;
  background: #000;
  font-family: var(--font-family);
  overflow: hidden;
}

.tv--idle {
  cursor: none;
}

.tv__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.tv[data-state="live"] .tv__video {
  opacity: 1;
}

/* Ident: the off-air / tuning screen */

.tv-ident {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2rem;
  padding: 1.5rem;
  text-align: center;
  transition: opacity 0.6s ease;
}

.tv[data-state="live"] .tv-ident {
  opacity: 0;
  pointer-events: none;
}

.tv-ident__static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  opacity: 0.09;
  pointer-events: none;
}

.tv-ident__logo {
  position: relative;
  display: grid;
  justify-items: center;
  line-height: 0.8;
  animation: tv-slam 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

/* The big "TV" block: hard cuts between patterns and angles, MTV style. */
.tv-ident__tv {
  font-size: clamp(9rem, 38vw, 24rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  padding-inline: 0.06em 0.12em;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0.025em #fff;
  animation: tv-cut 4.8s infinite;
  animation-timing-function: steps(1, end);
}

@keyframes tv-cut {
  0% {
    background-color: var(--tv-red);
    background-image: none;
    transform: rotate(-6deg) scale(1);
  }
  16% {
    background-image: repeating-linear-gradient(45deg, var(--tv-red) 0 0.08em, var(--tv-yellow) 0.08em 0.16em);
    background-size: auto;
    transform: rotate(4deg) scale(1.04);
  }
  33% {
    background-color: var(--tv-pink);
    background-image: radial-gradient(var(--tv-cyan) 32%, transparent 34%);
    background-size: 0.14em 0.14em;
    transform: rotate(-2deg) scale(0.97) skewX(-6deg);
  }
  50% {
    background-image: repeating-radial-gradient(circle at 0 100%, var(--tv-cyan) 0 0.06em, var(--tv-blue) 0.06em 0.12em);
    background-size: auto;
    transform: rotate(7deg) scale(1.02);
  }
  66% {
    background-image: conic-gradient(#fff 25%, #000 0 50%, #fff 0 75%, #000 0);
    background-size: 0.16em 0.16em;
    transform: rotate(-8deg) scale(1.05);
  }
  83% {
    background-image: linear-gradient(135deg, var(--tv-red), var(--tv-pink), var(--tv-violet), var(--tv-cyan));
    background-size: auto;
    transform: rotate(3deg) scale(0.98) skewX(5deg);
  }
}

@keyframes tv-slam {
  from {
    transform: scale(2.4) rotate(12deg);
    opacity: 0;
  }
}

.tv-ident__tagline {
  position: relative;
  margin: 0;
  max-width: 32rem;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-wrap: balance;
}

.tv-ident__tagline--cut {
  animation: tv-glitch 0.35s steps(3, end);
}

@keyframes tv-glitch {
  0% {
    transform: translateX(-0.4rem) skewX(12deg);
    text-shadow: 0.2rem 0 var(--tv-red), -0.2rem 0 var(--tv-cyan);
  }
  50% {
    transform: translateX(0.3rem);
    text-shadow: -0.15rem 0 var(--tv-pink), 0.15rem 0 var(--tv-yellow);
  }
}

/* Chrome: back link, channel bug, now playing, status bar. Hidden when live and idle. */

.tv-chrome {
  position: absolute;
  z-index: 2;
  transition: opacity 0.4s ease;
}

.tv--idle[data-state="live"] .tv-chrome:not(.tv__bug, .tv__now) {
  opacity: 0;
  pointer-events: none;
}

.tv__back {
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
  color: rgb(255 255 255 / 0.75);
  font-weight: 600;
  text-decoration: none;
}

.tv__back:hover {
  color: #fff;
}

.tv__bug {
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  font-weight: 700;
  font-size: 1.1rem;
  opacity: 0;
  transform: rotate(-4deg);
}

.tv[data-state="live"] .tv__bug {
  opacity: 0.6;
}

.tv__now {
  left: max(1.5rem, env(safe-area-inset-left));
  bottom: 5rem;
  margin: 0;
  display: grid;
  gap: 0.25rem;
  opacity: 0;
}

.tv[data-state="live"]:not(.tv--idle) .tv__now,
.tv--announce[data-state="live"] .tv__now {
  opacity: 1;
}

.tv__now-label {
  justify-self: start;
  padding: 0.15rem 0.5rem;
  background: var(--tv-red);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transform: rotate(-2deg);
}

.tv__now-title {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.8);
}

.tv__bar {
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: linear-gradient(transparent, rgb(0 0 0 / 0.6));
}

.tv__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tv__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #666;
}

.tv[data-state="live"] .tv__dot {
  background: var(--tv-red);
  animation: tv-blink 1.2s steps(1, end) infinite;
}

@keyframes tv-blink {
  50% {
    opacity: 0.2;
  }
}

.tv__status-live,
.tv[data-state="live"] .tv__status-off {
  display: none;
}

.tv[data-state="live"] .tv__status-live {
  display: inline;
}

.tv__clock {
  color: rgb(255 255 255 / 0.6);
  font-variant-numeric: tabular-nums;
}

.tv__buttons {
  display: flex;
  gap: 0.5rem;
}

.tv__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1rem;
  box-sizing: border-box;
  line-height: 1;
  text-decoration: none;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 999px;
  background: rgb(0 0 0 / 0.4);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.tv__button--round {
  width: 2.5rem;
  padding: 0;
  border-radius: 50%;
  font-size: 1.1rem;
}

.tv__button--send {
  border-color: var(--tv-red);
  background: var(--tv-red);
}

.tv__button--send:hover {
  background: #ff4d2e;
}

.tv__button--sound {
  gap: 0.4rem;
}

.tv__button:hover {
  background: rgb(255 255 255 / 0.15);
}

.tv:not([data-state="live"]) .tv__button[data-tv-player-target="sound"] {
  display: none;
}

/* Phones: no clock, sound as a round icon button, so the bar fits on one line. */
@media (max-width: 32rem) {
  .tv__clock,
  .tv__button-label {
    display: none;
  }

  .tv__button--sound {
    width: 2.5rem;
    padding: 0;
    border-radius: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tv-ident__logo,
  .tv-ident__tv,
  .tv-ident__tagline--cut,
  .tv[data-state="live"] .tv__dot {
    animation: none;
  }

  .tv-ident__tv {
    background-color: var(--tv-red);
    transform: rotate(-6deg);
  }
}

/* "Send your ride": the rider upload form, on the same black as the TV. */

.tv-send {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 30rem);
  justify-content: center;
  align-content: center;
  padding: 4.5rem 1rem 2rem;
  box-sizing: border-box;
  font-family: var(--font-family);
  color: #fff;
}

.tv-send__back {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: rgb(255 255 255 / 0.75);
  font-weight: 600;
  text-decoration: none;
}

.tv-send__title {
  margin: 0 0 0.5rem;
  font-size: clamp(2.5rem, 10vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  transform: rotate(-3deg);
  color: transparent;
  background: repeating-linear-gradient(45deg, #ff2800 0 0.08em, #ffe600 0.08em 0.16em);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0.02em #fff;
}

.tv-send__intro {
  margin: 1rem 0 1.5rem;
  color: rgb(255 255 255 / 0.75);
}

.tv-send__notice {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #00e5ff;
  color: #000;
  font-weight: 700;
}

.tv-send__errors {
  margin: 0;
  padding: 0.75rem 1rem 0.75rem 2rem;
  border-radius: 0.75rem;
  background: rgb(255 40 0 / 0.2);
  border: 1px solid #ff2800;
}

.tv-send__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.tv-send__drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 2rem 1rem;
  border: 2px dashed rgb(255 255 255 / 0.4);
  border-radius: 1rem;
  text-align: center;
  cursor: pointer;
}

.tv-send__drop:hover,
.tv-send__drop:focus-within {
  border-color: #ff2800;
  background: rgb(255 40 0 / 0.08);
}

.tv-send__file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.tv-send__drop-icon {
  font-size: 2.5rem;
}

.tv-send__drop-text {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tv-send__hint {
  color: rgb(255 255 255 / 0.55);
  font-size: 0.85rem;
}

.tv-send__field {
  display: grid;
  gap: 0.4rem;
}

.tv-send__label {
  font-weight: 600;
}

.tv-send__input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 0.06);
  color: #fff;
  font: inherit;
}

.tv-send__input:focus {
  outline: 2px solid #ff2800;
  border-color: transparent;
}

.tv-send__rights {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  color: rgb(255 255 255 / 0.8);
  font-size: 0.9rem;
}

.tv-send__rights input {
  margin-top: 0.2rem;
  accent-color: #ff2800;
}

.tv-send__submit {
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: #ff2800;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
}

.tv-send__submit:disabled {
  opacity: 0.6;
  cursor: progress;
}