{{template "header" .}}
<style>
html[data-home="tv"], html[data-home="tv"] body, html[data-home="tv"] .main, html[data-home="tv"] .layout {
  padding: 0 !important; margin: 0 !important; overflow: hidden !important;
  height: 100% !important; max-width: none !important;
  scrollbar-width: none !important;
}
html[data-home="tv"]::-webkit-scrollbar, html[data-home="tv"] body::-webkit-scrollbar { display: none !important; width: 0; height: 0; }
html[data-home="tv"] .header, html[data-home="tv"] .led, html[data-home="tv"] .site-foot { display: none !important; }
html[data-home="tv"] body { overflow: hidden !important; height: 100dvh !important; padding-top: 0 !important; }
.tv-home {
  --db: var(--green);
  --db-hi: var(--green-hover);
  --db-deep: #157aa0;
  --d65: #dce8f5;
  --d65-hi: #f4f7fb;
  --d65-dim: #9aadc0;
  /* Grow with the panel: vw on wide TVs, vh on taller 4:3 sets. */
  --orb: clamp(96px, min(8.6vw, 16vh), 168px);
  --gap: clamp(14px, min(1.7vw, 2.4vh), 34px);
  --rad: calc(var(--orb) * 0.236);
  --ico: calc(var(--orb) * 0.382);
  position: fixed !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  overflow: hidden !important; background: #050308;
}
.tv-home .tv-still {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0; transition: opacity 2.4s ease;
  pointer-events: none;
}
html[data-ratio="16/9"] .tv-home .tv-still { background-size: 100% 100%; }
.tv-home .tv-still.on { opacity: 1; }
.tv-home .tv-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 28%, #0003 72%, #0008 100%);
}
.tv-home .tv-stage {
  position: relative; z-index: 4;
  height: 100%; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 13px 13px 21px;
  overflow: hidden;
}
.tv-home .tv-mark {
  width: var(--orb) !important; height: var(--orb) !important; border-radius: 50% !important;
  object-fit: cover !important; position: static !important;
  inset: auto !important; max-width: var(--orb) !important; max-height: var(--orb) !important;
  box-shadow: 0 0 21px var(--db), 0 8px 21px #000a; margin: 0 0 8px;
}
.tv-home .tv-kicker {
  margin: 0 0 8px; font-size: clamp(13px, 1.6vmin, 18px); letter-spacing: .21em; text-transform: uppercase;
  color: var(--db-hi); text-shadow: 0 0 13px var(--db); font-weight: 700;
}
.tv-home .tv-stage h1 {
  margin: 0 0 8px; font-size: clamp(34px, 4.8vmin, 55px) !important; font-weight: 700;
  color: #f4fbff; text-shadow: 0 2px 21px #000c; letter-spacing: .08em;
}
.tv-home .tv-level {
  margin: 0 0 10px; font-size: clamp(13px, 1.8vmin, 18px);
  color: #ffd36a; text-shadow: 0 2px 8px #000; font-weight: 650;
}
.tv-home .tv-seo {
  margin: 0 0 16px; max-width: 36rem;
  font-size: clamp(12px, 1.5vmin, 16px); line-height: 1.4;
  color: #c5ced6; text-shadow: 0 2px 8px #000;
}
.tv-home .tv-seo a { color: #ffd36a; text-decoration: none; }
.tv-home .tv-row {
  display: flex; flex-flow: row nowrap; gap: var(--gap);
  justify-content: center; align-items: flex-start;
  overflow: visible !important; width: auto; max-width: 88vw;
  padding: 8px 0 21px; scrollbar-width: none;
}
.tv-home .tv-row::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tv-home .tv-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 8px; width: var(--orb) !important; min-width: var(--orb) !important; max-width: var(--orb);
  min-height: 0 !important; height: auto !important; padding: 0 !important;
  border-radius: 0; background: none; border: none; color: #eef7ff;
  text-decoration: none; font-weight: 650; flex: 0 0 var(--orb);
  box-shadow: none; backdrop-filter: none;
  transition: transform .15s ease;
}
.tv-home .tv-btn .icon {
  position: relative;
  width: var(--orb); height: var(--orb); border-radius: var(--rad); flex: none;
  display: grid; place-items: center;
  overflow: visible;
  background-color: rgba(255,255,255,.10);
  background-image:
    radial-gradient(ellipse 70% 55% at 28% 16%, rgba(255,255,255,.88) 0 10%, transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 42%, rgba(0,0,0,.08) 100%);
  backdrop-filter: blur(13px) saturate(1.8) brightness(1.08);
  -webkit-backdrop-filter: blur(13px) saturate(1.8) brightness(1.08);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow:
    0 8px 21px -8px #000c,
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.14),
    0 0 13px var(--db);
}
.tv-home .tv-btn .icon::before {
  content: "";
  position: absolute; inset: -2px; border-radius: var(--rad); z-index: -1;
  background: conic-gradient(from 200deg,
    rgba(255,255,255,.0), var(--db), rgba(255,255,255,.0),
    rgba(255,80,110,.4), rgba(255,255,255,.0), var(--db-hi));
  filter: blur(2px); opacity: .55;
  pointer-events: none;
  animation: orb-spin 9s linear infinite;
}
.tv-home .tv-btn .icon::after {
  content: "";
  position: absolute; left: 13%; right: 13%; bottom: -8px; height: 8px;
  border-radius: 13px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, #000a 0 40%, transparent 72%);
  filter: blur(2px);
}
.tv-home .tv-btn .icon svg {
  width: var(--ico); height: var(--ico); display: block; position: relative; z-index: 1;
  fill: rgba(255,255,255,.92);
  filter: drop-shadow(0 1px 1px #0008) drop-shadow(0 0 6px rgba(180,240,255,.7));
}
.tv-home .tv-btn.videos .icon,
.tv-home .tv-btn.iptv .icon,
.tv-home .tv-btn.party .icon,
.tv-home .tv-btn.photos .icon {
  background-color: rgba(80,200,230,.16);
  box-shadow:
    0 12px 18px -6px #000c,
    inset 0 1px 1px rgba(255,255,255,.8),
    inset 0 -8px 14px rgba(30,120,160,.16),
    0 0 20px var(--db);
}
.tv-home .tv-btn.videos .icon svg,
.tv-home .tv-btn.iptv .icon svg,
.tv-home .tv-btn.party .icon svg,
.tv-home .tv-btn.photos .icon svg {
  fill: #e8fbff;
  filter: drop-shadow(0 0 6px var(--db));
}
.tv-home .tv-btn.gallery .icon,
.tv-home .tv-btn.games .icon,
.tv-home .tv-btn.license .icon,
.tv-home .tv-btn.guide .icon,
.tv-home .tv-btn.live .icon {
  background-color: rgba(255,60,90,.12);
  box-shadow:
    0 12px 18px -6px #000c,
    inset 0 1px 1px rgba(255,255,255,.8),
    inset 0 -8px 14px rgba(160,30,50,.14),
    0 0 20px rgba(255,80,110,.35);
}
.tv-home .tv-btn.license .icon {
  width: var(--orb); height: var(--orb);
  background-color: rgba(255, 180, 40, .18);
  box-shadow:
    0 8px 21px -8px #000c,
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -8px 13px rgba(180,90,20,.18),
    0 0 21px rgba(255,196,70,.55);
}
.tv-home .tv-btn.license .icon svg {
  width: var(--ico); height: var(--ico);
  fill: #ffe27a;
  filter: drop-shadow(0 0 8px #ffc446);
}
.tv-home .tv-btn.live .icon {
  animation: live-breathe 2.8s ease-in-out infinite;
}
.tv-home .tv-btn .label { text-align: center; line-height: 1.13; font-size: 13px; text-shadow: 0 2px 8px #000; }
.tv-home .tv-btn .sub { display: none; }
.tv-home .tv-btn:hover, .tv-home .tv-btn:focus-visible {
  transform: translateY(-8px) scale(1.05);
  outline: none;
}
.tv-home .tv-btn:hover .icon,
.tv-home .tv-btn:focus-visible .icon {
  background-color: rgba(255,255,255,.18);
  box-shadow:
    0 16px 22px -6px #000c,
    inset 0 1px 2px rgba(255,255,255,.95),
    0 0 24px var(--db),
    0 0 28px rgba(255,80,110,.28);
  border-color: rgba(255,255,255,.8);
}
.tv-home .tv-btn:focus-visible .icon {
  box-shadow:
    0 0 0 3px #050308,
    0 0 0 8px var(--db-hi),
    0 0 21px var(--db);
  border-color: var(--db-hi);
}
.tv-home .tv-btn:hover .icon::after,
.tv-home .tv-btn:focus-visible .icon::after { transform: scaleX(1.12); opacity: .7; }
.tv-home .tv-account {
  position: absolute; right: 21px; top: 13px; z-index: 5;
  color: #9aa3ad; font-size: 13px; text-decoration: none; letter-spacing: .08em;
}
.tv-home .tv-led {
  width: min(88vw, calc(8 * var(--orb) + 7 * var(--gap))); height: 5px; margin: 13px auto 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--d65-dim), var(--d65-hi), var(--d65), var(--d65-hi));
  background-size: 200% 100%;
  animation: led-run 8s linear infinite, led-breathe 5.2s cubic-bezier(.4,0,.2,1) infinite;
  box-shadow: 0 0 16px #dce8f5aa, 0 0 28px #b8c8d866;
  position: relative; overflow: hidden;
  transition: filter 2.4s cubic-bezier(.4,0,.2,1);
}
.tv-home .tv-led::after { display: none; }
.tv-home .tv-rail {
  position: absolute; top: 8%; bottom: 8%; width: 4px; border-radius: 4px; z-index: 2;
  background: linear-gradient(var(--d65-dim), var(--d65-hi), var(--d65-dim));
  box-shadow: 0 0 14px #dce8f588, 0 0 28px #b8c8d844;
  animation: led-breathe 5.2s cubic-bezier(.4,0,.2,1) infinite;
  pointer-events: none; overflow: hidden;
  transition: filter 2.4s cubic-bezier(.4,0,.2,1);
}
.tv-home .tv-rail::after {
  content: ""; position: absolute; left: -6px; right: -6px; height: 18%;
  background: var(--d65-hi); filter: blur(3px); opacity: .4;
  animation: rail-scan 8s cubic-bezier(.4,0,.2,1) infinite;
}
.tv-home .tv-rail.l { left: 21px; }
.tv-home .tv-rail.r { right: 21px; animation-delay: .7s; }
.tv-home .tv-rail.r::after { animation-delay: 2.4s; }
.tv-home .tv-wash {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 1; pointer-events: none;
  background: linear-gradient(transparent, #0000 0%, #0006 100%);
  animation: wash 8s cubic-bezier(.4,0,.2,1) infinite;
}
.tv-home .tv-hair {
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--d65), var(--d65-hi), var(--d65), transparent);
  background-size: 200% 100%;
  animation: led-run 10s linear infinite, led-breathe 5.2s cubic-bezier(.4,0,.2,1) infinite;
  box-shadow: 0 0 10px #dce8f566;
  transition: filter 2.4s cubic-bezier(.4,0,.2,1);
}
.tv-home.dim-led .tv-led,
.tv-home.dim-led .tv-rail,
.tv-home.dim-led .tv-hair { filter: brightness(.82); }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes led-run { to { background-position: 200% 0; } }
@keyframes led-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@keyframes rail-scan { 0%,100% { top: 8%; } 50% { top: 74%; } }
@keyframes live-breathe { 50% { box-shadow: 0 14px 18px -6px #000e, 0 0 28px #ff2a4acc, 0 0 22px var(--db); } }
@keyframes wash { 50% { opacity: .55; } }
@media (max-width: 900px) {
  .tv-home { --orb: 55px; --gap: 13px; --rad: 13px; --ico: 21px; }
  .tv-home .tv-stage h1 { font-size: 21px !important; }
  .tv-home .tv-row {
    width: 259px; max-width: 89%;
    flex-wrap: wrap;
  }
  .tv-home .tv-btn { -webkit-tap-highlight-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-home .tv-led, .tv-home .tv-led::after, .tv-home .tv-rail, .tv-home .tv-rail::after,
  .tv-home .tv-btn.live, .tv-home .tv-btn .icon::before, .tv-home .tv-wash, .tv-home .tv-hair { animation: none; }
}
</style>
  <link rel="preload" as="image" href="/static/cinema/bg-27.jpg?v=15" fetchpriority="high">
<div class="tv-home">
  <div class="tv-still on" style="background-image:url(/static/cinema/bg-27.jpg?v=15)" data-bg="/static/cinema/bg-27.jpg?v=15"></div>
  <div class="tv-still" data-bg="/static/cinema/bg-28.jpg?v=15"></div>
  <div class="tv-still" data-bg="/static/cinema/bg-31.jpg?v=15"></div>
  <div class="tv-still" data-bg="/static/cinema/bg-29.jpg?v=15"></div>
  <div class="tv-still" data-bg="/static/cinema/bg-33.jpg?v=15"></div>
  <div class="tv-still" data-bg="/static/cinema/bg-32.jpg?v=15"></div>
  <div class="tv-veil"></div>
  <div class="tv-hair"></div>
  <div class="tv-wash"></div>
  <div class="tv-rail l"></div>
  <div class="tv-rail r"></div>
  {{if .User}}<a class="tv-account" href="/logout">Sign out</a>{{else}}<a class="tv-account" href="/login">Sign in</a>{{end}}
  <div class="tv-stage">
    <img class="tv-mark" src="/static/img/logo.png" alt="Deimos">
    <p class="tv-kicker">Deimos.TV</p>
    <h1>Deimos Cinema</h1>
    <p class="tv-level">{{.MemberLevel}}</p>
    <p class="tv-seo">Your library, legal live TV, IPTV, games, and watch-together. Uploads encode to 720p H.264; NVIDIA NVENC when the GPU is there. <a href="/pro">Go Pro</a> · <a href="/guide">Guide</a></p>
    <div class="tv-row">
      <a class="tv-btn videos" href="/?sort=recent" aria-label="Videos"><span class="icon"><svg viewBox="0 0 24 24"><path d="M8 5.5v13l12-6.5z"/></svg></span><span class="label">Videos</span></a>
      <a class="tv-btn party" href="/party" aria-label="Together"><span class="icon"><svg viewBox="0 0 24 24"><path d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM8 13c-3 0-5 1.8-5 4v2h10v-2c0-2.2-2-4-5-4zm8 0c-.7 0-1.3.1-1.9.3 1.5.8 2.5 2.1 2.5 3.7V19h5v-2c0-2.2-2-4-5.6-4z"/></svg></span><span class="label">Together</span></a>
      <a class="tv-btn gallery" href="/slideshows/new" aria-label="Gallery"><span class="icon"><svg viewBox="0 0 24 24"><path d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm3.2 9.2 3.1-3.6 2.4 2.8 2.2-2.6L20 16H4z"/><circle cx="8" cy="9" r="1.3"/></svg></span><span class="label">Gallery</span></a>
      <a class="tv-btn live" href="/live" aria-label="Live"><span class="icon"><svg viewBox="0 0 24 24"><path d="M12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm0-3.6a7.6 7.6 0 0 0-5.4 13l1.5-1.5A5.5 5.5 0 1 1 17.9 16l1.5 1.5A7.6 7.6 0 0 0 12 4.4zM12 2a10 10 0 0 0-7.1 17.1l1.5-1.5A8 8 0 1 1 19.6 17.6l1.5 1.5A10 10 0 0 0 12 2z"/></svg></span><span class="label">Live</span></a>
      <a class="tv-btn iptv" href="/iptv" aria-label="IPTV"><span class="icon"><svg viewBox="0 0 24 24"><path d="M3 5h18v12H3V5zm8 14h2v2h4v2H7v-2h4v-2z"/></svg></span><span class="label">IPTV</span></a>
      <a class="tv-btn games" href="/games" aria-label="Games"><span class="icon"><svg viewBox="0 0 24 24"><path d="M7 8h10a5 5 0 0 1 0 10H7A5 5 0 0 1 7 8zm2.2 3.2H7.8v1.6H6.2v1.4h1.6v1.6h1.4v-1.6h1.6v-1.4H9.2V11.2zM16 11.4a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2zm2.2 2.2a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2z"/></svg></span><span class="label">Games</span></a>
      <a class="tv-btn license" href="/pro" aria-label="Go Pro"><span class="icon"><svg viewBox="0 0 24 24"><path d="M3.2 16.8 4.8 7.4 8.6 11.2 12 4.6l3.4 6.6 3.8-3.8 1.6 9.4H3.2zm1 1.8h15.6V21H4.2v-2.4z"/></svg></span><span class="label">Go Pro</span></a>
      <a class="tv-btn guide" href="/guide" aria-label="Guide"><span class="icon"><svg viewBox="0 0 24 24"><path d="M6 4h6.2A3.8 3.8 0 0 1 16 7.8V20H8.2A2.2 2.2 0 0 0 6 22.2V4zm8 0h4v16h-4V4z"/></svg></span><span class="label">Guide</span></a>
    </div>
    <div class="tv-led" aria-hidden="true"></div>
    <p class="tv-remote-hint">Arrows move · OK opens · Back is Home</p>
  </div>
</div>
<script>
(function () {
  var home = document.querySelector('.tv-home');
  var stills = [].slice.call(document.querySelectorAll('.tv-still'));
  stills.forEach(function (el) { el.style.backgroundImage = 'url(' + el.getAttribute('data-bg') + ')'; });
  var i = 1, keep = stills[0];
  function tick() {
    stills.forEach(function (el) { el.style.zIndex = '1'; });
    var next = stills[i];
    next.style.zIndex = '2';
    next.classList.add('on');
    var prev = keep;
    keep = next;
    if (prev && prev !== next) {
      setTimeout(function () { if (prev !== keep) prev.classList.remove('on'); }, 2400);
    }
    i = (i + 1) % stills.length;
    home.classList.add('dim-led');
    setTimeout(function () { home.classList.remove('dim-led'); }, 2400);
  }
  setInterval(tick, 120000);
})();
</script>
{{template "footer" .}}