/* ============================================================
   Ultra Stream — streaming-platform polish (Netflix-style feel)
   Loaded only on ultra-stream.php, layered over style.css.
   ============================================================ */

/* ---------- HERO ---------- */
.ultra-stream .hero-ultra {
  position: relative;
}
/* Cinematic bottom fade so rows blend out of the hero */
.ultra-stream .hero-ultra::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(to top, #111111 0%, rgba(17,17,17,.55) 45%, rgba(17,17,17,0) 100%);
  z-index: 1;
  pointer-events: none;
}
.ultra-stream .hero-content { text-align: center; }
.ultra-stream .hero-ultra h1 { letter-spacing: -1px; }
.ultra-stream .hero-ultra .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px -8px rgba(193,145,20,.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ultra-stream .hero-ultra .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -8px rgba(193,145,20,.8);
}

/* ---------- ROWS ---------- */
.ultra-stream .content { padding-top: 40px; }
.ultra-stream .row-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  letter-spacing: .2px;
}
.ultra-stream .row-title::before {
  content: "";
  width: 5px;
  height: 22px;
  background: #c19114;
  border-radius: 3px;
}

/* ---------- CARDS (cinematic) ---------- */
.ultra-stream .slider { padding-top: 22px; padding-bottom: 22px; }

.ultra-stream .card {
  position: relative;
  border-radius: 8px;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), z-index 0s;
}
.ultra-stream .card img {
  border-radius: 8px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.8);
  transition: filter .28s ease, box-shadow .28s ease;
  border: 1px solid rgba(255,255,255,.04);
}

/* Lift + zoom + glow on hover */
.ultra-stream .card:hover {
  transform: translateY(-6px) scale(1.045);
  z-index: 6;
}
.ultra-stream .card:hover img {
  filter: brightness(1.06);
  box-shadow: 0 22px 44px -14px rgba(0,0,0,.9);
  border-color: rgba(193,145,20,.55);
}

/* Play button that fades in over the poster on hover */
.ultra-stream .card::after {
  content: "";
  position: absolute;
  top: 90px;            /* vertical centre of the 180px poster */
  left: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%) scale(.6);
  border-radius: 50%;
  background: rgba(193,145,20,.92) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='black'><path d='M8 5v14l11-7z'/></svg>") no-repeat center center;
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  z-index: 3;
}
.ultra-stream .card:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ultra-stream .card .title {
  margin-top: 10px;
  font-weight: 600;
  font-size: .98em;
  color: #e8e8e8;
  transition: color .2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ultra-stream .card:hover .title { color: #c19114; }

/* ---------- ARROWS ---------- */
.ultra-stream .slider-btn {
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(3px);
  opacity: 1;            /* always visible so scrolling never breaks */
  z-index: 30;           /* stays clickable above hovered cards (z-index 6) */
  transition: background .2s ease, transform .2s ease;
  height: 64px;
  border-radius: 8px;
  width: 46px;
}
.ultra-stream .slider-btn:hover {
  background: #c19114;
  color: #111;
  transform: translateY(-50%) scale(1.08);
}
.ultra-stream .slider-btn.prev { left: 12px; }
.ultra-stream .slider-btn.next { right: 12px; }

/* ---------- REGISTER BANNER ---------- */
#ultra-stream-register-banner .register-banner-btn {
  transition: transform .2s ease, box-shadow .2s ease;
}
#ultra-stream-register-banner .register-banner-btn:hover {
  transform: translateY(-2px);
}

/* ---------- MOBILE ---------- */
@media screen and (max-width: 768px) {
  .ultra-stream .hero-ultra h1 { font-size: 40px; }
  .ultra-stream .row-title { font-size: 18px; margin-left: 18px; margin-right: 18px; }
  .ultra-stream .slider { padding-left: 18px; padding-right: 18px; gap: 12px; }
  .ultra-stream .card { width: 200px; }
  .ultra-stream .card img { height: 120px; }
  .ultra-stream .card::after { top: 60px; width: 44px; height: 44px; }
  /* Touch devices: arrows always hidden, swipe instead */
  .ultra-stream .slider-btn { display: none; }
}