/* Vivid Cinema — Home-only composition layer. */
.vivid-news-home-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:24px;align-items:stretch;margin:18px 0 30px;padding:clamp(22px,3vw,34px);border:1px solid #ffffff12;border-radius:24px;background:radial-gradient(circle at 82% 20%,#ffffff0c,transparent 34%),linear-gradient(135deg,#ffffff08,#ffffff03);overflow:hidden}
.vivid-news-home-copy h2{margin:6px 0 8px;font-size:clamp(28px,4vw,46px);line-height:1;letter-spacing:-.04em}
.vivid-news-home-copy p{max-width:720px;margin:0;font-size:14px;line-height:1.65;opacity:.58}
.vivid-news-home-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.vivid-news-home-actions a{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:12px;color:inherit;text-decoration:none;font-size:12px;font-weight:800;border:1px solid #ffffff15;background:#ffffff06}
.vivid-news-home-actions a:first-child{background:#fff;color:#08090b;border-color:#fff}
.vivid-news-home-pulse{display:grid;grid-template-columns:1fr;gap:8px;align-content:center}
.vivid-news-home-pulse>div{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:13px;border:1px solid #ffffff10;border-radius:15px;background:#08090b66}
.vivid-news-home-pulse i{grid-row:1/3;align-self:center;font-size:18px;opacity:.72}
.vivid-news-home-pulse strong{font-size:10px;letter-spacing:.12em}
.vivid-news-home-pulse span{margin-top:2px;font-size:11px;opacity:.45}
@media(max-width:760px){.vivid-news-home-card{grid-template-columns:1fr;margin-inline:0;padding:20px;border-radius:20px}.vivid-news-home-pulse{grid-template-columns:repeat(3,minmax(0,1fr))}.vivid-news-home-pulse>div{grid-template-columns:1fr;text-align:center;gap:5px;padding:12px 8px}.vivid-news-home-pulse i{grid-row:auto}}
@media(max-width:480px){.vivid-news-home-pulse{grid-template-columns:1fr}.vivid-news-home-pulse>div{grid-template-columns:28px 1fr;text-align:left;gap:8px}.vivid-news-home-pulse i{grid-row:1/3}}


/* Home catalogue rails — the single responsive source of truth. */
.vivid-cinema-home .vivid-section-wrap{overflow:visible}
.vivid-cinema-home .vivid-rails{position:relative;padding:22px 0 26px}
.vivid-cinema-home .vivid-rails + .vivid-rails{border-top:0}
.vivid-cinema-home .vivid-rail-head{margin-bottom:12px;padding:0 2px}
.vivid-cinema-home .vivid-rail-head h2{font-size:clamp(1.15rem,1.65vw,1.55rem);font-weight:700;letter-spacing:-.035em}
.vivid-cinema-home .vivid-rail-head p{font-size:.78rem;color:#858b95}
.vivid-cinema-home .vivid-rail-controls{gap:8px}
.vivid-cinema-home .vivid-rail-controls button{width:38px;height:38px;border:1px solid rgba(255,255,255,.14);background:rgba(10,11,14,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .18s ease,background .18s ease,border-color .18s ease}
.vivid-cinema-home .vivid-rail-controls button:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);transform:scale(1.04)}
.vivid-cinema-home .vivid-rail{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:clamp(10px,1vw,16px);width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;padding:5px 2px 16px;scroll-snap-type:x mandatory;scroll-padding-inline:2px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x}
.vivid-cinema-home .vivid-rail::-webkit-scrollbar{display:none}
.vivid-cinema-home .vivid-card{flex:0 0 clamp(154px,12vw,214px);width:clamp(154px,12vw,214px);min-width:0;border:0;border-radius:10px;background:transparent;box-shadow:none;scroll-snap-align:start;overflow:visible;transform:none}
.vivid-cinema-home .vivid-card:hover{transform:translateY(-4px);border-color:transparent}
.vivid-cinema-home .vivid-card-media{position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:#111319;border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.vivid-cinema-home .vivid-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s cubic-bezier(.2,.7,.2,1),filter .3s ease}
.vivid-cinema-home .vivid-card:hover .vivid-card-media{border-color:rgba(255,255,255,.24);box-shadow:0 14px 34px rgba(0,0,0,.36)}
.vivid-cinema-home .vivid-card:hover .vivid-card-media img{transform:scale(1.045)}
.vivid-cinema-home .vivid-card-info{padding:9px 2px 0}
.vivid-cinema-home .vivid-card-title{font-size:.78rem;font-weight:650;line-height:1.25}
.vivid-cinema-home .vivid-card-sub{margin-top:3px;font-size:.67rem;color:#777e89}
.vivid-cinema-home .vivid-rating{top:7px;right:7px;padding:4px 6px;border:1px solid rgba(255,255,255,.12);background:rgba(5,6,8,.72);font-size:.64rem}
.vivid-cinema-home .vivid-rail::after{content:"";flex:0 0 clamp(8px,2vw,30px)}
.vivid-cinema-home .vivid-rail-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:3px 2px 0}
.vivid-cinema-home .vivid-rail-load,.vivid-cinema-home .vivid-rail-see-all{font-size:.72rem}
.vivid-cinema-home .vivid-rail.is-expanded{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;gap:clamp(10px,1vw,16px)}
@media(max-width:900px){.vivid-cinema-home .vivid-card{flex-basis:clamp(148px,24vw,184px);width:clamp(148px,24vw,184px)}}
@media(max-width:640px){.vivid-cinema-home .vivid-rails{padding:18px 0 22px}.vivid-cinema-home .vivid-rail-head{margin-bottom:10px}.vivid-cinema-home .vivid-rail-head p{display:none}.vivid-cinema-home .vivid-rail-controls button{width:36px;height:36px}.vivid-cinema-home .vivid-rail{gap:10px;padding:4px 0 14px;scroll-snap-type:x mandatory}.vivid-cinema-home .vivid-card{flex-basis:calc((100vw - 46px)/2.35);width:calc((100vw - 46px)/2.35);min-width:132px;max-width:158px}.vivid-cinema-home .vivid-card-info{padding-top:8px}.vivid-cinema-home .vivid-card-title{font-size:.74rem}.vivid-cinema-home .vivid-card-sub{font-size:.64rem}}

/* Extracted from the cross-viewport audit: Home owns these rules. */

/* Featured titles sit immediately after the billboard without overlapping it. */
.vivid-feature-strip{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
  width:min(1440px,100%)!important;
  margin:0 auto!important;
  padding:14px var(--vivid-page-gutter) 16px!important;
  box-sizing:border-box;
  z-index:1!important;
}
.vivid-feature-viewport{width:100%!important;padding:0!important;min-width:0}
@media(max-width:640px){
  .vivid-feature-strip{
    margin:0 auto!important;
    padding:12px 12px 14px!important;
  }
}


/* Home catalogue: Load more expands the rail into visible rows instead of hiding page 2 off-screen. */
body[data-vivid-page="home"] .vivid-rail.is-expanded{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
  overflow:visible;
  scroll-snap-type:none;
}
@media (max-width:1100px){body[data-vivid-page="home"] .vivid-rail.is-expanded{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media (max-width:850px){body[data-vivid-page="home"] .vivid-rail.is-expanded{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:640px){body[data-vivid-page="home"] .vivid-rail.is-expanded{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;padding-right:2px;}}




/* Content deference: the artwork is the surface, not a boxed dashboard. */
.vivid-cinema-home .vivid-card{
  background:transparent;
  border:0;
  box-shadow:none;
  transition:transform .18s ease,opacity .18s ease;
}
.vivid-cinema-home .vivid-card-media{
  border:0;
  box-shadow:none;
  border-radius:12px;
}
.vivid-cinema-home .vivid-card:active{
  transform:scale(.985);
  opacity:.9;
}
@media (hover:none), (pointer:coarse){
  .vivid-cinema-home .vivid-card:active{transform:scale(.985)!important}
}

/* Top 10: ranking is a visual object, not another metadata label. */
.vivid-cinema-home .vivid-top10-card{
  position:relative;
  flex-basis:clamp(168px,11vw,180px);
  width:clamp(168px,11vw,180px);
  padding-left:34px;
}
.vivid-cinema-home .vivid-top10-card .vivid-top10-rank{
  position:absolute;
  left:-1px;
  bottom:28px;
  z-index:4;
  color:#fff;
  font-family:var(--vivid-font-display);
  font-size:clamp(3.2rem,5.4vw,5.8rem);
  line-height:.78;
  font-weight:700;
  letter-spacing:-.09em;
  text-shadow:0 8px 24px rgba(0,0,0,.65);
  pointer-events:none;
}
.vivid-cinema-home .vivid-top10-card .vivid-card-media{
  aspect-ratio:2/3;
}
.vivid-cinema-home .vivid-top10-card .vivid-card-info{padding-left:0;}
.vivid-cinema-home .vivid-top10-card .vivid-card-title{font-weight:600;}
@media(max-width:640px){
  .vivid-cinema-home .vivid-top10-card{
    flex-basis:calc((100vw - 34px)/2.35);
    width:calc((100vw - 34px)/2.35);
    min-width:132px;
    padding-left:30px;
  }
  .vivid-cinema-home .vivid-top10-card .vivid-top10-rank{
    font-size:3.3rem;
    bottom:27px;
  }
}

/* Continue Watching: resolve context at a glance with landscape artwork and time left. */
.vivid-cinema-home .vivid-continue-card{
  flex-basis:clamp(270px,32vw,420px);
  width:clamp(270px,32vw,420px);
}
.vivid-cinema-home .vivid-continue-card .vivid-card-media{
  aspect-ratio:16/9;
  border-radius:12px;
}
.vivid-cinema-home .vivid-continue-card .vivid-card-media img{
  object-fit:cover;
}
.vivid-cinema-home .vivid-continue-card .vivid-card-info{
  padding-top:8px;
}
.vivid-cinema-home .vivid-continue-card .vivid-continue-remaining{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:3;
  color:#fff;
  font-size:11px;
  line-height:1;
  font-weight:600;
  letter-spacing:.02em;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.vivid-cinema-home .vivid-continue-card .vivid-card-progress{
  bottom:0;
  left:0;
  right:0;
  height:3px;
  border-radius:0;
}
@media(max-width:640px){
  .vivid-cinema-home .vivid-continue-card{
    flex-basis:78vw;
    width:78vw;
    min-width:270px;
  }
}

/* Section headings are guidance, not chrome. */
.vivid-cinema-home .vivid-rail-head h2{
  font-size:22px;
  line-height:1.15;
  font-weight:700;
}
.vivid-cinema-home .vivid-rail-head p{
  color:#8e8e93;
}



.vivid-rail::after,
.vivid-cinema-home .vivid-rail::after{
  content:none!important;
  display:none!important;
}

/* Home-only rules extracted from the shared audit layer. */

html[data-vivid-theme="light"] body.vivid-cinema-home .vivid-rails + .vivid-rails{
  border-top:1px solid rgba(17,18,22,.055);
}
html[data-vivid-theme="light"] body.vivid-cinema-home .vivid-card{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
html[data-vivid-theme="light"] body.vivid-cinema-home .vivid-card-media{
  background:#e9ebef!important;
  border-color:rgba(17,18,22,.08)!important;
  box-shadow:0 7px 20px rgba(17,18,22,.08)!important;
}
html[data-vivid-theme="light"] body.vivid-cinema-home .vivid-card:hover .vivid-card-media{
  border-color:rgba(17,18,22,.15)!important;
  box-shadow:0 15px 32px rgba(17,18,22,.13)!important;
}
html[data-vivid-theme="light"] body.vivid-cinema-home .vivid-rating{
  color:#111216!important;
  background:rgba(255,255,255,.90)!important;
  border-color:rgba(17,18,22,.10)!important;
}

.vivid-cinema-home .vivid-rail-head h2,
.vivid-library-section-head h2,
.vivid-library-shelf-head h2{font-size:22px;line-height:1.15;font-weight:700;color:#fff;}
.vivid-cinema-home .vivid-card-title,
.vivid-library-shelf .vivid-library-card-copy strong{font-size:15px;line-height:1.25;font-weight:600;}
.vivid-cinema-home .vivid-card-sub,
.vivid-library-shelf .vivid-library-card-copy small{font-size:13px;line-height:1.3;font-weight:400;color:#8e8e93;}
.vivid-cinema-home .vivid-rail,
.vivid-library-continue-rail,
.vivid-library-shelf{scroll-snap-type:x mandatory;scroll-padding-inline:2px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;}
.vivid-cinema-home .vivid-rail{touch-action:pan-x;}

.vivid-cinema-home .vivid-feature-card:active,
.vivid-library-page .vivid-library-continue-card:active{
  transform:scale(.985);
  opacity:.92;
}

.vivid-cinema-home .vivid-card:focus-visible,
.vivid-cinema-home .vivid-feature-card:focus-visible,
.vivid-library-page .vivid-library-card:focus-visible,
.vivid-library-page .vivid-library-tabs button:focus-visible,
.vivid-title-page .vivid-cast:focus-visible,
.vivid-title-page .vivid-similar-card:focus-visible,
.vivid-title-page .vivid-video-card:focus-visible,
.vivid-title-page .vivid-button:focus-visible,
.vivid-watch-page .vivid-watch-rec-card:focus-visible,
.vivid-watch-page .vivid-player-switch:focus-visible{
  outline:0;
  transform:translateY(-2px) scale(1.045);
  box-shadow:0 16px 42px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.95);
  z-index:5;
  position:relative;
}

.vivid-cinema-home .vivid-card,
.vivid-cinema-home .vivid-feature-card,
.vivid-library-page .vivid-library-card,
.vivid-library-page .vivid-library-tabs button,
.vivid-title-page .vivid-cast,
.vivid-title-page .vivid-similar-card,
.vivid-title-page .vivid-video-card,
.vivid-title-page .vivid-button,
.vivid-watch-page .vivid-watch-rec-card,
.vivid-watch-page .vivid-player-switch{
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1),opacity .18s ease;
}

/* Home breathe composition — page-owned decorative scene. */

/* ==========================================================================
   HOME CINEMA MOMENT — personality + realism pass (final)
   Only this decorative beat. Everything else untouched.
   ========================================================================== */

.vivid-home-breathe{
  min-height: 520px !important;
}
.vivid-home-breathe-scene{
  min-height: 460px !important;
  width: min(900px, 94vw) !important;
}

/* TV — calmer float, richer presence */
.vivid-home-tv{
  z-index: 3 !important;
  top: 22px !important;
  width: min(520px, 70vw) !important;
  filter: drop-shadow(0 28px 50px rgba(0,0,0,.38)) !important;
  animation: vivid-tv-float 6.4s ease-in-out infinite !important;
}
.vivid-home-tv:before{
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 10% !important;
  right: 10% !important;
  bottom: 6px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(140,165,255,.22), transparent 70%) !important;
  filter: blur(20px) !important;
  animation: vivid-tv-aura 5.2s ease-in-out infinite !important;
}
.vivid-home-tv-screen{
  border-width: 8px !important;
  border-color: #14171d !important;
  border-radius: 22px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 20px 50px rgba(0,0,0,.38) !important;
}
.vivid-home-tv-stand{
  width: 120px !important;
  height: 26px !important;
  background: linear-gradient(180deg, #2a2e38, #0e1014) !important;
}

/* Viewer — staged as a person sitting slightly in front / to the side */
.vivid-home-viewer{
  position: absolute !important;
  z-index: 6 !important;
  right: calc(50% - 420px) !important;
  top: 128px !important;
  width: 188px !important;
  height: 220px !important;
  transform: scale(.8) !important;
  transform-origin: 50% 100% !important;
  animation: vivid-viewer-idle 5.2s ease-in-out infinite !important;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.28));
}

/* Head — warmer skin, hair silhouette, cheeks, better eyes */
.vivid-home-viewer-head{
  position: absolute !important;
  top: 2px !important;
  left: 58px !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,220,190,.35), transparent 42%),
    linear-gradient(155deg, #e0b08a, #c07a55 55%, #a85f42) !important;
  border: 2px solid rgba(80,35,25,.28) !important;
  box-shadow:
    inset -10px -9px 0 rgba(120,50,35,.14),
    inset 4px 6px 10px rgba(255,230,200,.18),
    -6px 8px 18px rgba(0,0,0,.22) !important;
  transform: rotate(-9deg) !important;
  transform-origin: 50% 80% !important;
  z-index: 5 !important;
  animation: vivid-viewer-head 7s ease-in-out infinite !important;
}
/* Hair */
.vivid-home-viewer-head:before{
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: -6px !important;
  width: 62px !important;
  height: 28px !important;
  border-radius: 60% 55% 30% 35% !important;
  background: linear-gradient(180deg, #1a1c22, #0e1014) !important;
  transform: rotate(-6deg) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.15) !important;
}
/* Soft cheek / nose hint */
.vivid-home-viewer-head:after{
  content: "" !important;
  position: absolute !important;
  left: 28px !important;
  top: 34px !important;
  width: 14px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(200,90,70,.22), transparent 70%) !important;
  pointer-events: none !important;
}

/* Eyes — white + pupil, blink */
.vivid-home-viewer-eye{
  position: absolute !important;
  top: 30px !important;
  width: 11px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #f5f2eb !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.1) !important;
  overflow: hidden !important;
  animation: vivid-viewer-blink 4.8s ease-in-out infinite !important;
}
.vivid-home-viewer-eye.eye-left{
  left: 14px !important;
  top: 29px !important;
  transform: rotate(-4deg) !important;
  animation-delay: 0s !important;
  background:
    radial-gradient(circle at 55% 48%, #1a1c22 0 3.2px, transparent 3.4px),
    #f5f2eb !important;
}
.vivid-home-viewer-eye.eye-right{
  right: 22px !important;
  left: auto !important;
  top: 30px !important;
  transform: rotate(-4deg) !important;
  animation-delay: .12s !important;
  background:
    radial-gradient(circle at 45% 48%, #1a1c22 0 3.2px, transparent 3.4px),
    #f5f2eb !important;
}

/* Mouth — expressive chew */
.vivid-home-viewer-mouth{
  position: absolute !important;
  left: 30px !important;
  top: 48px !important;
  width: 14px !important;
  height: 8px !important;
  border: none !important;
  border-radius: 0 0 14px 14px !important;
  background: #6a2e28 !important;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.25) !important;
  transform-origin: 50% 0 !important;
  animation: vivid-viewer-chew 1.05s ease-in-out infinite !important;
}

/* Body — soft hoodie feel */
.vivid-home-viewer-body{
  position: absolute !important;
  left: 40px !important;
  top: 62px !important;
  width: 100px !important;
  height: 98px !important;
  border-radius: 46px 46px 26px 26px !important;
  background:
    linear-gradient(160deg, #2c323e 0%, #161a22 60%, #0f1218 100%) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    0 16px 30px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.vivid-home-viewer-body:before{
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 16px !important;
  width: 64px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.12), transparent 4px),
    linear-gradient(150deg, rgba(255,255,255,.08), transparent 55%) !important;
}

/* Arms */
.vivid-home-viewer-arm{
  position: absolute !important;
  z-index: 4 !important;
  width: 17px !important;
  height: 86px !important;
  border-radius: 999px !important;
  transform-origin: 50% 10px !important;
  box-shadow: inset -2px 0 0 rgba(0,0,0,.12) !important;
}
.vivid-home-viewer-arm.viewer-arm-left{
  left: 32px !important;
  top: 80px !important;
  transform: rotate(22deg) !important;
  background: linear-gradient(180deg, #d4a07a, #b87852) !important;
}
.vivid-home-viewer-arm.viewer-arm-right{
  left: 122px !important;
  top: 78px !important;
  transform: rotate(-42deg) !important;
  background: linear-gradient(180deg, #d4a07a, #b87852) !important;
  animation: vivid-viewer-eat 4.2s cubic-bezier(.3,.7,.2,1) infinite !important;
}
.vivid-home-viewer-hand{
  position: absolute !important;
  left: -3px !important;
  bottom: -5px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #e0b08a, #c07a55) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.2) !important;
}

/* Popcorn bucket + kernels */
.vivid-home-viewer-popcorn{
  position: absolute !important;
  z-index: 3 !important;
  right: 2px !important;
  top: 138px !important;
  width: 50px !important;
  height: 48px !important;
  border-radius: 6px 6px 12px 12px !important;
  background: repeating-linear-gradient(90deg, #f4f3f0 0 9px, #1e2128 9px 18px) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  transform: rotate(-6deg) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.28) !important;
  animation: vivid-popcorn-bucket 4.2s ease-in-out infinite !important;
}
.vivid-home-viewer-popcorn:before{
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  right: 3px !important;
  top: -16px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 12% 60%, #f7f2e4 0 7px, transparent 8px),
    radial-gradient(circle at 36% 38%, #f7f2e4 0 8px, transparent 9px),
    radial-gradient(circle at 58% 58%, #f7f2e4 0 8px, transparent 9px),
    radial-gradient(circle at 82% 40%, #f7f2e4 0 7px, transparent 8px),
    radial-gradient(circle at 48% 70%, #efe8d6 0 6px, transparent 7px) !important;
  animation: vivid-popcorn-kernels 4.2s ease-in-out infinite !important;
}
.vivid-home-viewer-popcorn .kernel{
  display: none;
}

/* Legs — seated angle */
.vivid-home-viewer-leg{
  position: absolute !important;
  top: 145px !important;
  width: 36px !important;
  height: 72px !important;
  border-radius: 18px 18px 12px 12px !important;
  background: linear-gradient(180deg, #1c2028, #101318) !important;
  transform-origin: top center !important;
  box-shadow: 0 8px 14px rgba(0,0,0,.2) !important;
}
.vivid-home-viewer-leg.leg-left{
  left: 46px !important;
  transform: rotate(26deg) !important;
}
.vivid-home-viewer-leg.leg-right{
  left: 96px !important;
  transform: rotate(-20deg) !important;
}

/* Copy stays readable above everything */
.vivid-home-breathe-copy{
  top: 360px !important;
  z-index: 8 !important;
}

/* ——— Keyframes ——— */
@keyframes vivid-tv-float{
  0%, 100%{ transform: translateX(-50%) translateY(2px) rotate(-.3deg); }
  50%{ transform: translateX(-50%) translateY(-5px) rotate(.3deg); }
}
@keyframes vivid-tv-aura{
  0%, 100%{ opacity: .4; transform: scaleX(.9); }
  50%{ opacity: .9; transform: scaleX(1.08); }
}
@keyframes vivid-viewer-idle{
  0%, 100%{ transform: scale(.8) translateY(2px) rotate(1.2deg); }
  40%{ transform: scale(.8) translateY(-3px) rotate(-.8deg); }
  70%{ transform: scale(.8) translateY(1px) rotate(.6deg); }
}
@keyframes vivid-viewer-head{
  0%, 100%{ transform: rotate(-9deg) translateY(0); }
  35%{ transform: rotate(-12deg) translateY(1px); }
  65%{ transform: rotate(-6deg) translateY(-1px); }
}
@keyframes vivid-viewer-blink{
  0%, 42%, 48%, 100%{ transform: scaleY(1); }
  45%{ transform: scaleY(.08); }
}
@keyframes vivid-viewer-chew{
  0%, 100%{ transform: scaleY(1) scaleX(1); }
  30%{ transform: scaleY(.35) scaleX(1.15); }
  55%{ transform: scaleY(1.2) scaleX(.9); }
  75%{ transform: scaleY(.55) scaleX(1.05); }
}
@keyframes vivid-viewer-eat{
  0%, 18%, 100%{ transform: rotate(-42deg) translate(0, 0); }
  28%{ transform: rotate(-58deg) translate(-4px, 6px); }
  38%{ transform: rotate(-78deg) translate(-8px, 14px); }
  48%{ transform: rotate(-95deg) translate(-6px, 10px); }
  58%{ transform: rotate(-70deg) translate(-2px, 2px); }
  68%{ transform: rotate(-55deg) translate(0, 0); }
  78%{ transform: rotate(-42deg) translate(0, 0); }
}
@keyframes vivid-popcorn-bucket{
  0%, 25%, 100%{ transform: rotate(-6deg); }
  35%{ transform: rotate(-14deg) translateY(2px); }
  45%{ transform: rotate(-4deg); }
}
@keyframes vivid-popcorn-kernels{
  0%, 30%, 100%{ transform: translateY(0) scale(1); }
  38%{ transform: translateY(-3px) scale(1.04); }
  48%{ transform: translateY(1px) scale(.97); }
}

/* Mobile */
@media (max-width: 760px){
  .vivid-home-breathe{ min-height: 500px !important; }
  .vivid-home-tv{ width: min(400px, 78vw) !important; }
  /* Mobile: seat the viewer at the bottom of the scene, in front of the TV. */
  .vivid-home-viewer{
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 42px !important;
    transform: translateX(-50%) scale(.66) !important;
    animation-name: vivid-viewer-idle-sm !important;
  }
  .vivid-home-breathe-copy{ top: 340px !important; }
  @keyframes vivid-viewer-idle-sm{
    0%, 100%{ transform: translateX(-50%) scale(.66) translateY(2px) rotate(1.2deg); }
    40%{ transform: translateX(-50%) scale(.66) translateY(-3px) rotate(-.8deg); }
    70%{ transform: translateX(-50%) scale(.66) translateY(1px) rotate(.6deg); }
  }
}
@media (max-width: 520px){
  .vivid-home-breathe{ min-height: 490px !important; }
  .vivid-home-tv{ width: min(340px, 84vw) !important; top: 16px !important; }
  /* Keep the character grounded at the bottom instead of inside the TV/trailer area. */
  .vivid-home-viewer{
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 26px !important;
    transform: translateX(-50%) scale(.56) !important;
    animation-name: vivid-viewer-idle-xs !important;
  }
  .vivid-home-breathe-copy{ top: 320px !important; padding-inline: 14px; }
  @keyframes vivid-viewer-idle-xs{
    0%, 100%{ transform: translateX(-50%) scale(.56) translateY(2px) rotate(1deg); }
    40%{ transform: translateX(-50%) scale(.56) translateY(-2px) rotate(-.6deg); }
    70%{ transform: translateX(-50%) scale(.56) translateY(1px) rotate(.4deg); }
  }
}

@media (prefers-reduced-motion: reduce){
  .vivid-home-tv,
  .vivid-home-tv:before,
  .vivid-home-tv-screen:after,
  .vivid-home-viewer,
  .vivid-home-viewer-head,
  .vivid-home-viewer-eye,
  .vivid-home-viewer-mouth,
  .vivid-home-viewer-arm.viewer-arm-right,
  .vivid-home-viewer-popcorn,
  .vivid-home-viewer-popcorn:before{
    animation: none !important;
  }
}
/* DESKTOP VIVID MOMENT — balanced two-subject composition.
   Keep the TV and viewer visually connected instead of pushing both to one side. */
@media (min-width:901px){
  .vivid-cinema-home .vivid-home-breathe{
    min-height:560px!important;
    padding:28px 0 18px!important;
    box-sizing:border-box!important;
  }
  .vivid-cinema-home .vivid-home-breathe-scene{
    position:relative!important;
    width:min(980px,100%)!important;
    min-height:500px!important;
    margin:0 auto!important;
    display:block!important;
    overflow:hidden!important;
  }
  .vivid-cinema-home .vivid-home-tv{
    top:34px!important;
    left:50%!important;
    right:auto!important;
    width:460px!important;
    transform:translateX(-50%)!important;
  }
  .vivid-cinema-home .vivid-home-viewer{
    top:210px!important;
    right:calc(50% - 390px)!important;
    left:auto!important;
    transform:scale(.78)!important;
    transform-origin:50% 100%!important;
  }
  .vivid-cinema-home .vivid-home-breathe-copy{
    position:absolute!important;
    left:50%!important;
    bottom:22px!important;
    top:auto!important;
    width:min(620px,90%)!important;
    transform:translateX(-50%)!important;
    text-align:center!important;
    z-index:8!important;
  }
}
@media (min-width:901px) and (max-width:1180px){
  .vivid-cinema-home .vivid-home-breathe-scene{min-height:460px!important}
  .vivid-cinema-home .vivid-home-tv{width:400px!important}
  .vivid-cinema-home .vivid-home-viewer{right:calc(50% - 320px)!important;top:190px!important}
}


/* FINAL VIVID MOMENT COMPOSITION — centered TV + seated viewer in front.
   Keep the supporting copy in its own clean reading zone on every viewport. */
.vivid-cinema-home .vivid-home-breathe{
  min-height:620px!important;
}
.vivid-cinema-home .vivid-home-breathe-scene{
  width:min(980px,100%)!important;
  min-height:560px!important;
  margin:0 auto!important;
  position:relative!important;
  overflow:hidden!important;
}
.vivid-cinema-home .vivid-home-tv{
  left:50%!important;
  right:auto!important;
  top:30px!important;
  width:min(460px,72vw)!important;
  transform:translateX(-50%)!important;
  z-index:3!important;
}
.vivid-cinema-home .vivid-home-viewer{
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:118px!important;
  transform:translateX(-50%) scale(.78)!important;
  z-index:6!important;
  animation-name:vivid-viewer-idle-centered!important;
}
.vivid-cinema-home .vivid-home-breathe-copy{
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:16px!important;
  width:min(640px,92%)!important;
  transform:translateX(-50%)!important;
  text-align:center!important;
  z-index:8!important;
}
@keyframes vivid-viewer-idle-centered{
  0%,100%{transform:translateX(-50%) scale(.78) translateY(2px) rotate(1deg)}
  40%{transform:translateX(-50%) scale(.78) translateY(-3px) rotate(-.7deg)}
  70%{transform:translateX(-50%) scale(.78) translateY(1px) rotate(.5deg)}
}

@media(max-width:900px){
  .vivid-cinema-home .vivid-home-breathe{
    min-height:570px!important;
  }
  .vivid-cinema-home .vivid-home-breathe-scene{
    min-height:530px!important;
  }
  .vivid-cinema-home .vivid-home-tv{
    top:22px!important;
    width:min(400px,78vw)!important;
  }
  .vivid-cinema-home .vivid-home-viewer{
    bottom:108px!important;
    transform:translateX(-50%) scale(.66)!important;
    animation-name:vivid-viewer-idle-centered-sm!important;
  }
  .vivid-cinema-home .vivid-home-breathe-copy{
    bottom:14px!important;
    width:min(620px,92%)!important;
  }
  @keyframes vivid-viewer-idle-centered-sm{
    0%,100%{transform:translateX(-50%) scale(.66) translateY(2px) rotate(1deg)}
    40%{transform:translateX(-50%) scale(.66) translateY(-3px) rotate(-.7deg)}
    70%{transform:translateX(-50%) scale(.66) translateY(1px) rotate(.5deg)}
  }
}
@media(max-width:520px){
  .vivid-cinema-home .vivid-home-breathe{
    min-height:550px!important;
  }
  .vivid-cinema-home .vivid-home-breathe-scene{
    min-height:510px!important;
  }
  .vivid-cinema-home .vivid-home-tv{
    top:16px!important;
    width:min(340px,84vw)!important;
  }
  .vivid-cinema-home .vivid-home-viewer{
    bottom:102px!important;
    transform:translateX(-50%) scale(.56)!important;
    animation-name:vivid-viewer-idle-centered-xs!important;
  }
  .vivid-cinema-home .vivid-home-breathe-copy{
    bottom:10px!important;
    width:calc(100% - 28px)!important;
  }
  @keyframes vivid-viewer-idle-centered-xs{
    0%,100%{transform:translateX(-50%) scale(.56) translateY(2px) rotate(1deg)}
    40%{transform:translateX(-50%) scale(.56) translateY(-2px) rotate(-.6deg)}
    70%{transform:translateX(-50%) scale(.56) translateY(1px) rotate(.4deg)}
  }
}


/* Share Vivid Cinema — restrained desktop QR and compact mobile share action */
.vivid-qr-share{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 0 10px;color:inherit}
.vivid-qr-share img{display:block;width:84px;height:84px;object-fit:contain;border-radius:8px;background:#fff}
.vivid-qr-share span{display:flex;flex-direction:column;gap:4px}
.vivid-qr-share strong{font-size:.9rem;font-weight:650;letter-spacing:.01em}
.vivid-qr-share small{font-size:.76rem;opacity:.72}
.vivid-footer-bottom{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.vivid-mobile-share{display:none}
@media(max-width:700px){
  .vivid-qr-share{display:none}
  .vivid-footer-bottom{gap:8px}
  .vivid-mobile-share{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:10px auto 0;padding:9px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.05);color:inherit;font:inherit;font-size:.82rem;cursor:pointer}
  .vivid-footer{display:flex;flex-direction:column;align-items:center}
}


/* Intentional Home rhythm: give each catalogue shelf a quiet, consistent boundary. */
.vivid-cinema-home .vivid-rails + .vivid-rails {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.vivid-cinema-home .vivid-rails {
  padding-top: clamp(22px, 2.4vw, 32px);
  padding-bottom: clamp(22px, 2.4vw, 32px);
}
.vivid-cinema-home .vivid-rail-head {
  gap: 16px;
}
.vivid-cinema-home .vivid-rail-head > div:first-child {
  min-width: 0;
}
.vivid-cinema-home .vivid-rail-head h2 {
  text-wrap: balance;
}
.vivid-cinema-home .vivid-rail-head p {
  max-width: 56ch;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .vivid-cinema-home .vivid-rails + .vivid-rails {
    border-top-color: rgba(255, 255, 255, 0.055);
  }
  .vivid-cinema-home .vivid-rails {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vivid-cinema-home .vivid-rail-controls button,
  .vivid-cinema-home .vivid-card,
  .vivid-cinema-home .vivid-card-media img {
    transition: none !important;
  }
}


/* Keep Home shelf actions close to the last visible card row. */
body[data-vivid-page="home"] .vivid-rail-footer {
  margin-top: 0;
  padding-top: 0;
}
body[data-vivid-page="home"] .vivid-rail.is-expanded {
  row-gap: 14px;
}
@media (max-width: 640px) {
  body[data-vivid-page="home"] .vivid-rail.is-expanded {
    row-gap: 10px;
  }
  body[data-vivid-page="home"] .vivid-rail-footer {
    padding-top: 2px;
  }
}


/* Premium Home: fewer words competing with the artwork, tighter shelf rhythm. */
body[data-vivid-page="home"] .vivid-rail-head p { display: none; }
body[data-vivid-page="home"] .vivid-catalogue-explore-head p { display: none; }
body[data-vivid-page="home"] .vivid-catalogue-explore-head { margin-bottom: 12px; }
body[data-vivid-page="home"] .vivid-rails { padding-top: clamp(18px, 2vw, 26px); padding-bottom: clamp(18px, 2vw, 26px); }
body[data-vivid-page="home"] .vivid-rails + .vivid-rails { border-top-color: rgba(255,255,255,.055); }
body[data-vivid-page="home"] .vivid-rail-head { margin-bottom: 12px; }
body[data-vivid-page="home"] .vivid-rail-head h2 { font-size: clamp(1.25rem, 2vw, 1.7rem); letter-spacing: -.035em; }
body[data-vivid-page="home"] .vivid-news-home-copy p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (max-width: 640px) {
  body[data-vivid-page="home"] .vivid-rails { padding-top: 16px; padding-bottom: 16px; }
  body[data-vivid-page="home"] .vivid-rail-head { margin-bottom: 9px; }
}


/* Newsroom-derived accent and heading rhythm — keep poster artwork untouched. */
body[data-vivid-page="home"] .vivid-rail-head h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.025em}
body[data-vivid-page="home"] :where(.vivid-home-section-kicker,.vivid-rail-kicker){color:#c7ff55}
body[data-vivid-page="home"] :where(.vivid-home-quick-action:focus-visible,.vivid-card:focus-visible){outline:2px solid #c7ff55;outline-offset:3px}


/* Coming Soon only: the existing cinema reminder, offered on the card itself. */
body[data-vivid-page="home"] .vivid-card-notify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: inherit;
  font: inherit;
  font-size: .7rem;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
body[data-vivid-page="home"] .vivid-card-notify i { font-size: .85em; }
body[data-vivid-page="home"] .vivid-card-notify:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.34); }
body[data-vivid-page="home"] .vivid-card-notify:focus-visible { outline: 2px solid #c7ff55; outline-offset: 2px; }
body[data-vivid-page="home"] .vivid-card-notify[data-saved="true"] {
  border-color: rgba(199,255,85,.45);
  background: rgba(199,255,85,.16);
  color: #ddffab;
  opacity: 1;
  cursor: default;
}
body[data-vivid-page="home"] .vivid-card-notify:disabled { opacity: .85; }
@media (max-width: 640px) {
  body[data-vivid-page="home"] .vivid-card-notify { margin-top: 7px; padding: 6px 8px; font-size: .66rem; }
}

/* Reminder feedback on Home: sits above the mobile navigation bar. */
body[data-vivid-page="home"] .vivid-home-toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 80;
  max-width: min(92vw, 460px);
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: #15171c;
  color: #fff;
  font-size: .82rem;
  line-height: 1.4;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
body[data-vivid-page="home"] .vivid-home-toast[hidden] { display: none; }
@media (min-width: 900px) {
  body[data-vivid-page="home"] .vivid-home-toast { bottom: 28px; }
}