/* Vivid Cinema — clean, cinematic public landing page. */
:root{--landing-max:1200px;--landing-pad:clamp(18px,4vw,56px)}
body.vivid-landing{margin:0;background:#050505;color:#fff;overflow-x:hidden}
.vivid-landing-shell{min-height:100svh;background:#050505}
.landing-hero{position:relative;min-height:92svh;display:flex;align-items:center;overflow:hidden;background:#080808;isolation:isolate}
.landing-backdrops{position:absolute;inset:0;z-index:-3}
.landing-backdrop{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.03);transition:opacity 1s ease,transform 9s ease}
.landing-backdrop.is-visible{opacity:1;transform:scale(1.07)}
.landing-hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.32) 68%,rgba(0,0,0,.55) 100%),linear-gradient(0deg,#050505 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.62) 100%)}
.landing-header{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:20px var(--landing-pad);background:linear-gradient(180deg,rgba(0,0,0,.68),transparent)}
.landing-brand{color:#fff;text-decoration:none;font-size:clamp(1.15rem,2vw,1.5rem);font-weight:850;letter-spacing:-.055em}
.landing-brand span{font-weight:500;opacity:.58}
.landing-site-brand{display:inline-flex;align-items:center;gap:9px}
.landing-site-brand img{width:34px;height:34px;display:block;object-fit:contain}
.landing-signin{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 17px;border-radius:7px;background:#fff;color:#070707;text-decoration:none;font-size:.78rem;font-weight:800;transition:transform .2s ease,background .2s ease}
.landing-signin:hover{transform:translateY(-1px);background:#e9e9e9}
.landing-hero-inner{position:relative;z-index:4;width:min(var(--landing-max),calc(100% - var(--landing-pad)*2));margin:auto;display:flex;justify-content:center;text-align:center}
.landing-hero-copy{width:min(820px,100%)}
.landing-kicker,.landing-eyebrow{font-size:.64rem;font-weight:800;letter-spacing:.2em;color:rgba(255,255,255,.62)}
.landing-hero h1{margin:15px 0 18px;font-size:clamp(3.2rem,7vw,6.4rem);line-height:.9;letter-spacing:-.075em;text-wrap:balance}
.landing-hero h1 em{font-style:normal;color:rgba(255,255,255,.55)}
.landing-copy{max-width:660px;margin:0 auto 26px;color:rgba(255,255,255,.78);font-size:clamp(.95rem,1.5vw,1.12rem);line-height:1.55}
.landing-form{display:flex;gap:8px;width:min(620px,100%);margin:0 auto}
.landing-email{flex:1;min-width:0;height:56px;padding:0 17px;border:1px solid rgba(255,255,255,.28);border-radius:6px;background:rgba(20,20,20,.82);color:#fff;font:500 16px/1 inherit;outline:none}
.landing-email::placeholder{color:rgba(255,255,255,.58)}
.landing-email:focus{border-color:#fff}
.landing-submit{height:56px;padding:0 22px;border:0;border-radius:6px;background:#fff;color:#070707;font:800 .84rem/1 inherit;cursor:pointer;white-space:nowrap}
.landing-submit:hover{background:#e9e9e9}
.landing-message{min-height:18px;margin-top:8px;font-size:.74rem}
.landing-browse{display:inline-flex;margin-top:15px;color:rgba(255,255,255,.76);font-size:.76rem;font-weight:700;text-decoration:none}
.landing-browse:hover{color:#fff}
.landing-scroll-cue{position:absolute;z-index:6;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(255,255,255,.45);text-decoration:none;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase}
.landing-scroll-cue i{width:1px;height:28px;background:linear-gradient(rgba(255,255,255,.6),transparent)}
.landing-content{width:min(var(--landing-max),calc(100% - var(--landing-pad)*2));margin:0 auto}
.landing-section{padding:clamp(64px,8vw,108px) 0}
.landing-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:25px}
.landing-eyebrow{display:block}
.landing-section h2{margin:8px 0 0;font-size:clamp(1.8rem,3.5vw,3rem);line-height:1;letter-spacing:-.055em}
.landing-section-link{color:#aaa;text-decoration:none;font-size:.76rem;font-weight:700}
.landing-section-link:hover{color:#fff}
.landing-trending-section{padding-top:70px}
.landing-trending{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.landing-poster{position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:4px;background:#161616;border:1px solid rgba(255,255,255,.07);text-decoration:none;transition:transform .25s ease,border-color .2s ease}
.landing-poster:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.25)}
.landing-poster img{width:100%;height:100%;display:block;object-fit:cover}
.landing-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 45%)}
.landing-rank{position:absolute;z-index:2;left:9px;bottom:8px;font-size:1.7rem;font-weight:900;font-style:italic}
.landing-poster-title{position:absolute;z-index:2;left:36px;right:7px;bottom:10px;color:#fff;font-size:.65rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.landing-skeleton{background:linear-gradient(110deg,#111 8%,#1b1b1b 18%,#111 33%);background-size:200% 100%;animation:landingShimmer 1.8s linear infinite}
@keyframes landingShimmer{to{background-position-x:-200%}}
.landing-reasons-section{border-top:1px solid rgba(255,255,255,.09)}
.landing-reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.landing-reason{min-height:190px;padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:#111;transition:transform .25s ease,border-color .25s ease}
.landing-reason:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.25)}
.landing-reason-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:6px;background:#1e1e1e;color:#fff;margin-bottom:34px}
.landing-reason h3{margin:0 0 8px;font-size:1rem}
.landing-reason p{margin:0;color:#929292;font-size:.78rem;line-height:1.6}
.landing-faq-section{max-width:920px;margin:auto}
.landing-faq{border-top:1px solid rgba(255,255,255,.16)}
.landing-faq-item{border-bottom:1px solid rgba(255,255,255,.16)}
.landing-faq-q{width:100%;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0;border:0;background:none;color:#fff;text-align:left;font:600 1rem/1.4 inherit;cursor:pointer}
.landing-faq-q span:last-child{font-size:1.4rem;font-weight:300;color:#aaa;transition:transform .2s ease}
.landing-faq-item.is-open .landing-faq-q span:last-child{transform:rotate(45deg)}
.landing-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.landing-faq-a>div{overflow:hidden}
.landing-faq-a p{max-width:760px;margin:0;padding:0 40px 22px 0;color:#929292;font-size:.84rem;line-height:1.7}
.landing-faq-item.is-open .landing-faq-a{grid-template-rows:1fr}
.landing-cta-section{padding-top:25px}
.landing-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:45px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.landing-cta h2{margin:8px 0 0;font-size:clamp(2rem,4vw,3.5rem);line-height:.98;letter-spacing:-.055em}
.landing-cta h2 em{font-style:normal;color:#666}
.landing-cta-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:190px;box-sizing:border-box}
.landing-footer{padding:38px var(--landing-pad) calc(42px + env(safe-area-inset-bottom));color:#707070;font-size:.72rem}
.landing-footer-inner{width:min(var(--landing-max),100%);margin:auto;display:flex;justify-content:space-between;gap:35px}
.landing-footer p{margin:9px 0 14px;color:#777}
.landing-footer small{font-size:.67rem}
.landing-footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;gap:12px 20px;max-width:600px}
.landing-footer a:not(.landing-brand){color:#888;text-decoration:none}
.landing-footer a:hover{color:#fff}
@media(max-width:900px){.landing-trending{grid-template-columns:repeat(3,minmax(0,1fr))}.landing-reasons{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  :root{--landing-pad:16px}
  .landing-hero{min-height:82svh}
  .landing-backdrop{background-position:center}
  .landing-hero-shade{background:linear-gradient(0deg,#050505 2%,rgba(0,0,0,.7) 35%,rgba(0,0,0,.28) 70%,rgba(0,0,0,.65) 100%)}
  .landing-header{padding:14px 16px}
  .landing-site-brand img{width:30px;height:30px}
  .landing-signin{height:36px;padding:0 14px}
  .landing-hero-inner{width:calc(100% - 32px)}
  .landing-hero h1{font-size:clamp(2.9rem,14vw,4.3rem)}
  .landing-copy{font-size:.9rem;margin-bottom:20px}
  .landing-form{display:block}
  .landing-email,.landing-submit{width:100%;box-sizing:border-box;height:54px}
  .landing-submit{margin-top:8px}
  .landing-browse{margin-top:14px}
  .landing-scroll-cue{display:none}
  .landing-section{padding:58px 0}
  .landing-trending-section{padding-top:54px}
  .landing-section-head{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:18px}
  .landing-section h2{font-size:1.8rem}
  .landing-trending{display:flex;overflow-x:auto;gap:10px;padding:3px 1px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .landing-trending::-webkit-scrollbar{display:none}
  .landing-poster{flex:0 0 42vw;max-width:160px;scroll-snap-align:start}
  .landing-reasons{grid-template-columns:1fr;gap:9px}
  .landing-reason{min-height:0;padding:20px}
  .landing-reason-icon{margin-bottom:24px}
  .landing-faq-q{min-height:66px;font-size:.9rem}
  .landing-faq-a p{padding-right:10px;font-size:.8rem}
  .landing-cta{display:block;padding:35px 0}
  .landing-cta-button{margin-top:22px;width:100%}
  .landing-footer-inner{display:block}
  .landing-footer-links{justify-content:flex-start;margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.landing-backdrop,.landing-poster,.landing-reason,.landing-submit{transition:none}.landing-faq-a{transition:none}.landing-skeleton{animation:none}}


/* Intentional start-page states: visible keyboard focus and clear data fallbacks. */
body.vivid-landing :is(a,button,input):focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
}
.landing-submit:disabled{
  cursor:wait;
  opacity:.72;
}
.landing-trending-status{
  grid-column:1/-1;
  margin:0;
  padding:24px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  color:rgba(255,255,255,.68);
  font-size:.9rem;
  line-height:1.6;
  background:rgba(255,255,255,.025);
}
@media(prefers-reduced-motion:reduce){
  .landing-backdrop,
  .landing-poster,
  .landing-reason,
  .landing-submit,
  .landing-faq-a,
  .landing-faq-q span:last-child{transition:none!important}
  .landing-skeleton{animation:none!important}
  html:focus-within{scroll-behavior:auto}
}