/* =====================================================================
   MVUKE TV, Home (viewport streaming layout)
   Full-bleed featured stage + a shelf of upcoming programme tiles.
   Tokens (--mv-*) come from common/css/navigation.css.
===================================================================== */

html,body{height:100%;}
body.home-page{overflow:hidden;background:#05040a;}

.btn-glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.btn-glass:hover{background:rgba(255,255,255,.24);transform:translateY(-2px);}

/* ------------------------------ Frame ------------------------------ */
.hero{
  position:relative;height:100svh;min-height:520px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--mv-nav-h) 0 44px;
  background:#05040a;
  --pad:clamp(20px,5vw,72px);
}

/* ------------------------------ Stage ------------------------------ */
.stage{position:absolute;inset:0;z-index:0;}
.stage-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;}
.stage-layer.is-active{opacity:1;}
.stage-layer img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,62% 28%);transform:scale(1.09);transition:transform 10s linear;}
.stage-layer.is-active img{transform:scale(1);}
.stage-base img{filter:saturate(.9);}

.stage-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,3,10,.94) 0%,rgba(5,3,10,.72) 30%,rgba(5,3,10,.12) 64%,rgba(5,3,10,.4) 100%),
    linear-gradient(0deg,#05040a 0%,rgba(5,4,10,.88) 24%,rgba(5,4,10,0) 56%),
    linear-gradient(180deg,rgba(5,4,10,.72) 0%,rgba(5,4,10,0) 18%);
}

/* ----------------------------- Feature ----------------------------- */
.feature{position:relative;z-index:2;padding:0 var(--pad);margin-bottom:clamp(18px,3.6vh,38px);max-width:calc(680px + var(--pad));}

.feature-title{
  font-family:'Montserrat',sans-serif;font-weight:900;color:#fff;
  font-size:clamp(2.3rem,6vw,6rem);line-height:.96;letter-spacing:-.05em;
  text-wrap:balance;text-shadow:0 6px 40px rgba(0,0,0,.5);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  padding-bottom:.06em;
}

.feature-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:clamp(12px,2vh,20px);font-size:.95rem;font-weight:700;color:#fff;}
.feature-status{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 12px;border-radius:999px;background:var(--mv-ember-500);color:var(--mv-ink-950);font-size:.8rem;font-weight:900;}
.feature-status .live-dot{background:var(--mv-ink-950);width:7px;height:7px;}
.feature-status .live-dot::after{inset:-4px;}
.feature-time{color:rgba(248,245,252,.9);}
.feature-progress{width:120px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden;}
.feature-progress i{display:block;height:100%;background:var(--mv-ember-400);border-radius:2px;transition:width 1s linear;}
.is-hidden{display:none!important;}

.feature-desc{margin-top:clamp(10px,1.8vh,18px);max-width:46ch;font-size:1rem;line-height:1.55;color:rgba(248,245,252,.78);}

.feature-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,2.6vh,26px);}
.feature-actions .btn{padding:14px 28px;font-size:.9rem;}

/* Orchestrated moment: the title block re-enters whenever the featured programme changes. */
.feature.is-switching .feature-title,
.feature.is-switching .feature-meta{animation:mvFeatureIn .7s var(--mv-ease) both;}
.feature.is-switching .feature-meta{animation-delay:.08s;}
@keyframes mvFeatureIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* ------------------------------ Shelf ------------------------------ */
.shelf{position:relative;z-index:2;}
.shelf-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);margin-bottom:12px;}
.shelf-head h2{font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:-.01em;}
.shelf-controls{display:flex;gap:8px;}
.shelf-controls button{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.35);color:#fff;transition:background .25s var(--mv-ease),border-color .25s var(--mv-ease),color .25s var(--mv-ease);}
.shelf-controls button svg{width:17px;height:17px;}
.shelf-controls button:hover{background:var(--mv-ember-500);border-color:var(--mv-ember-500);color:var(--mv-ink-950);}

.rail{display:flex;gap:14px;padding:6px var(--pad) 8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.rail::-webkit-scrollbar{display:none;}

.tile{flex:0 0 clamp(190px,17vw,272px);display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;scroll-snap-align:start;opacity:.62;transition:opacity .35s var(--mv-ease),transform .35s var(--mv-ease);}
.tile:hover{opacity:1;}
.tile.is-active{opacity:1;}

.tile-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#151120;box-shadow:0 14px 30px -14px rgba(0,0,0,.8);outline:2px solid transparent;outline-offset:2px;transition:outline-color .3s var(--mv-ease),transform .35s var(--mv-ease);}
.tile-thumb img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,center 30%);transition:transform .6s ease;}
.tile:hover .tile-thumb img{transform:scale(1.06);}
.tile.is-active .tile-thumb{outline-color:var(--mv-ember-400);transform:translateY(-4px);}

.tile-live{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:999px;background:var(--mv-ember-500);color:var(--mv-ink-950);font-size:.68rem;font-weight:900;}
.tile-live .live-dot{width:6px;height:6px;background:var(--mv-ink-950);}
.tile-live .live-dot::after{inset:-3px;}

/* Autoplay timer: fills along the active tile, and advancing is driven by its animationend. */
.tile-timer{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--mv-ember-400);}
.tile.is-active .tile-timer{animation:mvTileTimer 7s linear forwards;}
.hero.is-paused .tile.is-active .tile-timer{animation-play-state:paused;}
@keyframes mvTileTimer{from{width:0;}to{width:100%;}}

.tile-title{margin-top:8px;font-size:.92rem;font-weight:800;line-height:1.2;color:#fff;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;max-width:100%;}
.tile-time{font-size:.78rem;font-weight:600;color:rgba(248,245,252,.62);}

/* ------------------------------ Responsive ------------------------------ */
@media(max-height:760px) and (min-width:761px){
  .feature-desc{display:none;}
  .feature-title{font-size:clamp(2.2rem,5.2vw,4.6rem);}
  .tile{flex-basis:clamp(180px,15vw,230px);}
}

@media(max-width:760px){
  /* Phone: the picture is a banner across the top (not a full-screen crop of a wide image)
     that fades into the page, so the subject stays in frame and the text sits on dark. */
  .stage{
    bottom:auto;height:clamp(320px,62svh,600px);
    -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
  }
  .stage-layer img{object-position:var(--fpt,70% 30%);}
  .stage-shade{
    background:
      linear-gradient(180deg,rgba(5,4,10,.65) 0%,rgba(5,4,10,0) 22%),
      linear-gradient(0deg,rgba(5,4,10,.55) 0%,rgba(5,4,10,0) 40%);
  }
  .feature{max-width:none;}
  .feature-title{font-size:clamp(2rem,10vw,3rem);-webkit-line-clamp:2;}
  .feature-meta{font-size:.85rem;}
  .feature-desc{font-size:.9rem;max-width:40ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .feature-actions .btn{padding:12px 22px;font-size:.84rem;}
  .shelf-head h2{font-size:1rem;}
  .shelf-controls{display:none;}
  .tile{flex-basis:148px;}
  .tile-title{font-size:.82rem;}
  .tile-time{font-size:.72rem;}
}

@media(max-width:760px) and (max-height:700px){
  .feature-desc{display:none;}
}

@media(max-width:560px){
  .hero{padding-bottom:34px;}
}

@media(prefers-reduced-motion:reduce){
  .stage-layer,.stage-layer img,.tile,.tile-thumb,.tile-thumb img{transition:none!important;}
  .stage-layer img{transform:none!important;}
  .feature.is-switching .feature-title,.feature.is-switching .feature-meta{animation:none!important;}
  .tile.is-active .tile-timer{animation:none!important;width:100%;}
  .live-dot::after{animation:none!important;}
}