*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#00050d;
  --bg2:#1c1c1e;
  --line:rgba(255,255,255,0.15);
  --text:#fff;
  --text2:rgba(255,255,255,0.78);
  --text3:rgba(255,255,255,0.45);
  --nav-height:68px;
  --sp:0.18s;
}
html,body{
  width:100%;min-height:100%;overflow-x:hidden;
  background:var(--bg);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--text);
}

.movie-backdrop{
  position:relative;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:flex-start;
}

/* image — brighter so it actually shows through */
.movie-backdrop-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center top;
  filter:brightness(0.65);
}

/* left-side gradient — darkens only the left so text is readable, right stays bright */
.backdrop-gradient-left{
  position:absolute;inset:0;
  z-index:1;
  background:linear-gradient(to right,
    rgba(0,2,6,0.92) 0%,
    rgba(0,2,6,0.75) 25%,
    rgba(0,2,6,0.35) 50%,
    rgba(0,2,6,0.05) 75%,
    transparent         100%
  );
}

/* bottom fade — sits above left gradient so it wins everywhere including left edge */
.backdrop-gradient-bottom{
  position:absolute;inset:0;
  z-index:2;
  background:linear-gradient(to top,
    #00050d              0%,
    rgba(0,5,13,0.99)  6%,
    rgba(0,5,13,0.96) 14%,
    rgba(0,5,13,0.88) 22%,
    rgba(0,5,13,0.75) 32%,
    rgba(0,5,13,0.55) 44%,
    rgba(0,5,13,0.32) 57%,
    rgba(0,5,13,0.12) 72%,
    rgba(0,5,13,0.02) 86%,
    transparent         100%
  );
}

/* content — top-left, padded below nav */
.movie-hero-content{
  position:relative;z-index:3;
  width:1000px;max-width:86%;
  overflow:visible;
  padding:calc(var(--nav-height) + 48px) 0 160px 60px;
  display:flex;flex-direction:column;gap:0;
  animation:fadeIn 0.6s ease both;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.slide-eyebrow   { order:1; margin-bottom:14px; }
.slide-logo      { order:2; margin-bottom:12px; }
.slide-info-row  { order:3; margin-bottom:18px; }
.slide-actions   { order:4; margin-bottom:20px; }
.slide-description{ order:5; }

/* BIG title — always exactly one line, font shrinks with viewport to guarantee fit */
.slide-logo-text{
  font-size:clamp(13px, 2.1vw, 32px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-0.5px;
  white-space:nowrap;
  overflow:visible;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  display:block;
  text-shadow:0 2px 20px rgba(0,0,0,0.6);
}

/* eyebrow row — badge + genre text */
.slide-eyebrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.slide-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 9px;
  border:none;
  border-radius:3px;
  font-size:11px;font-weight:800;letter-spacing:0.5px;
  color:#fff;background:transparent;
  min-width:28px;
}
.slide-rating{
  font-size:13px;font-weight:500;color:rgba(255,255,255,0.7);
}
.slide-meta-dots{display:flex;align-items:center}
.meta-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.4)}

/* info row — year • duration • rating */
.slide-info-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.slide-info-row span{
  font-size:14px;font-weight:500;color:rgba(255,255,255,0.65);
}
.info-separator{
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,0.3);flex-shrink:0;
}
.age-rating{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 7px;border-radius:3px;
  border:1.5px solid rgba(255,255,255,0.45);
  font-size:11px;font-weight:700;color:rgba(255,255,255,0.6);
}

/* description */
.slide-description{
  font-size:14px;line-height:1.75;color:rgba(255,255,255,0.72);
  max-width:480px;
}

/* BUTTONS */
.slide-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.btn-play{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-width:200px;padding:12px 28px;
  border-radius:4px;
  background:#fff;color:#00050d;
  font-size:15px;font-weight:800;
  text-decoration:none;letter-spacing:0.2px;
  transition:background var(--sp),transform var(--sp);
}
.btn-play svg{width:15px;height:15px;flex-shrink:0}
.btn-play:hover{background:#dde1e7;transform:translateY(-1px)}

.btn-trailer{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-width:140px;padding:11px 24px;
  border-radius:4px;
  background:rgba(255,255,255,0.08);
  border:1.5px solid rgba(255,255,255,0.28);
  color:#fff;font-size:15px;font-weight:600;
  text-decoration:none;
  transition:background var(--sp),border-color var(--sp);
}
.btn-trailer svg{width:15px;height:15px;flex-shrink:0}
.btn-trailer:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.5)}

.btn-watchlist{
  width:46px;height:46px;flex-shrink:0;
  border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.08);
  border:1.5px solid rgba(255,255,255,0.28);
  color:#fff;text-decoration:none;
  transition:background var(--sp);
}
.btn-watchlist svg{width:17px;height:17px}
.btn-watchlist:hover{background:rgba(255,255,255,0.18)}

/* PAGE BODY */
.movie-page-body{background:var(--bg);padding-bottom:80px}

.section{padding:0 60px;margin-bottom:48px}

.section-title{
  font-size:14px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--text);
  margin-bottom:20px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
}
.section-title::after{display:none}

/* video player */
.video-player-container{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:4px;overflow:hidden;background:#000;
  box-shadow:0 16px 48px rgba(0,0,0,0.7);
}
.video-player-container iframe{position:absolute;inset:0;width:100%;height:100%;border:none}

/* DETAILS SECTION */
.info-grid{
  padding:0 60px;
  margin-bottom:48px;
  display:grid;
  grid-template-columns:1.4fr 0.8fr 0.8fr;
  gap:48px;
  align-items:start;
}

.info-grid > div:first-child .section-title{
  font-size:18px;font-weight:700;
  letter-spacing:0;text-transform:none;
  color:#fff;
  border-bottom:none;
  padding-bottom:8px;
  margin-bottom:12px;
}

.info-description{
  font-size:14px;line-height:1.8;color:var(--text2);
}
.info-description p+p{margin-top:14px}

.info-sidebar{
  display:contents;
}
.info-sidebar .section-title{display:none}

.info-sidebar{
  display:flex;flex-direction:column;gap:0;
  grid-column:2 / 4;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 40px;
  align-items:start;
}

.info-row{
  display:flex;flex-direction:column;gap:3px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.07);
  break-inside:avoid;
}
.info-row:last-child{border-bottom:none}
.info-label{
  font-size:11px;font-weight:600;
  color:var(--text3);
}
.info-value{
  font-size:13px;color:var(--text2);line-height:1.5;font-weight:400;
}

/* CAST */
.cast-grid{
  display:flex;gap:20px;
  overflow-x:auto;scrollbar-width:none;
  padding:0 60px 6px;
  margin-bottom:48px;
}
.cast-grid::-webkit-scrollbar{display:none}
.cast-card{
  flex-shrink:0;width:96px;
  display:flex;flex-direction:column;align-items:center;
  gap:8px;text-align:center;cursor:pointer;
  transition:transform var(--sp);
}
.cast-card:hover{transform:translateY(-3px)}
.cast-avatar{
  width:76px;height:76px;border-radius:50%;
  background:var(--bg2);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:var(--text3);
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.08);
  flex-shrink:0;
  transition:border-color var(--sp);
}
.cast-card:hover .cast-avatar{border-color:rgba(255,255,255,0.28)}
.cast-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cast-name{font-size:11px;font-weight:600;color:var(--text);line-height:1.3}
.cast-role{font-size:10px;color:var(--text3);margin-top:-4px}

/* TAGS */
.tags-row{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0 60px;margin-bottom:64px;
}
.tag-pill{
  padding:7px 16px;border-radius:100px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  font-size:13px;font-weight:400;color:var(--text3);
  cursor:pointer;
  transition:background var(--sp),border-color var(--sp),color var(--sp);
}
.tag-pill:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.2);color:#fff}

/* FOOTER */
.page-footer{
  background:var(--bg2);border-top:1px solid var(--line);
  padding:36px 60px 28px;text-align:center;
}
.footer-logo{font-size:18px;font-weight:800;color:var(--text3);margin-bottom:14px}
.footer-logo span{color:#fff}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;margin-bottom:16px}
.footer-links a{font-size:12px;color:var(--text3);text-decoration:none;transition:color var(--sp)}
.footer-links a:hover{color:#fff}
.footer-copy{font-size:11px;color:rgba(255,255,255,0.18)}

/* RESPONSIVE */
@media(max-width:1000px){
  .info-grid{grid-template-columns:1fr;gap:28px}
  .info-sidebar{grid-column:auto;grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .movie-hero-content{width:100%;max-width:100%;padding:calc(var(--nav-height) + 32px) 36px 64px}
  .slide-logo-text{font-size:46px}
  .section{padding:0 36px}
  .info-grid{padding:0 36px}
  .cast-grid{padding:0 36px 6px}
  .tags-row{padding:0 36px}
  .page-footer{padding:32px 36px 24px}
}
@media(max-width:560px){
  .movie-hero-content{padding:calc(var(--nav-height) + 20px) 20px 52px}
  .slide-logo-text{font-size:32px;letter-spacing:-0.5px}
  .slide-description{font-size:13px}
  .btn-play{min-width:0;flex:1;font-size:14px;padding:12px 16px}
  .btn-trailer{min-width:0;flex:1;font-size:14px;padding:11px 16px}
  .section{padding:0 20px}
  .info-grid{padding:0 20px}
  .info-sidebar{grid-template-columns:1fr}
  .cast-grid{padding:0 20px 6px}
  .tags-row{padding:0 20px}
  .page-footer{padding:24px 20px}
}