/* Tsukiro 2.7.5 — frame-or-cover hero without TMDB. */
.hero-v8{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  width:100%;
  height:clamp(650px,72vh,780px)!important;
  min-height:650px!important;
  max-height:780px!important;
  background:#08080c!important;
}
.hero-v8 .hero-image-stack{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#08080c;
  pointer-events:none;
}
.hero-v8 .hero-image-layer{
  position:absolute;
  inset:-1.25%;
  background-image:var(--hero-image-desktop,none);
  background-position:var(--hero-position-desktop,center 35%);
  background-repeat:no-repeat;
  background-size:cover;
  opacity:0;
  transform:scale(1.016);
  filter:saturate(1.055) contrast(1.025) brightness(.9);
  transition:opacity .34s ease;
  will-change:opacity;
  pointer-events:none;
}
.hero-v8 .hero-image-layer.is-active{opacity:1}
.hero-v8 .hero-overlay{
  position:absolute;
  inset:0;
  z-index:1!important;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(6,6,10,.92) 0%,rgba(6,6,10,.76) 30%,rgba(6,6,10,.40) 55%,rgba(6,6,10,.15) 100%),
    linear-gradient(0deg,rgba(6,6,10,.76) 0%,rgba(6,6,10,.10) 46%,rgba(6,6,10,.16) 100%)!important;
}
.hero-v8 .hero-content-v8{
  position:relative;
  z-index:2!important;
  width:min(1480px,calc(100% - 64px));
  height:100%!important;
  min-height:0!important;
  margin-inline:auto;
  padding:84px 0 76px!important;
  justify-content:center!important;
  align-items:flex-start!important;
}
.hero-v8 .hero-content-v8 h1{
  max-width:min(900px,72vw)!important;
  margin:14px 0 10px!important;
  font-size:clamp(48px,5.25vw,82px)!important;
  line-height:.96!important;
  letter-spacing:-.052em!important;
  text-wrap:balance;
}
.hero-v8.has-long-title .hero-content-v8 h1{font-size:clamp(43px,4.5vw,70px)!important;max-width:min(980px,76vw)!important}
.hero-v8.has-extra-long-title .hero-content-v8 h1{font-size:clamp(36px,3.8vw,58px)!important;max-width:min(1060px,80vw)!important;line-height:1!important}
.hero-v8 .hero-alt-title{max-width:720px;margin:0 0 14px!important;font-size:14px!important;color:#c7c7d0}
.hero-v8 .hero-meta{max-width:900px;gap:8px 10px!important;font-size:13px!important}
.hero-v8 .hero-meta span:last-child{white-space:nowrap}
.hero-v8 .hero-genres{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 14px}
.hero-v8 .hero-genres span{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(20,20,27,.68);font-size:11px;font-weight:800;color:#e7e7ed;backdrop-filter:blur(10px)}
.hero-v8 .hero-genres .genre-dot{display:none}
.hero-v8 .hero-description{max-width:700px;margin:0 0 24px!important;font-size:15px!important;line-height:1.62!important;-webkit-line-clamp:3!important}
.hero-v8 .hero-actions{gap:10px!important}
.hero-v8 .hero-actions .button{min-height:47px}

/* Laptop/tablet landscape */
@media (max-width:1180px) and (min-width:761px){
  .hero-v8{height:clamp(620px,74vh,720px)!important;min-height:620px!important;max-height:720px!important}
  .hero-v8 .hero-content-v8{width:min(1100px,calc(100% - 44px));padding:76px 0 62px!important}
  .hero-v8 .hero-content-v8 h1{max-width:72vw!important;font-size:clamp(44px,5.8vw,68px)!important}
  .hero-v8.has-long-title .hero-content-v8 h1{font-size:clamp(39px,5vw,58px)!important}
  .hero-v8.has-extra-long-title .hero-content-v8 h1{font-size:clamp(34px,4.25vw,50px)!important}
  .hero-v8 .hero-description{max-width:620px}
}

/* Phones: keep the same semantic source; only the crop changes. */
@media (max-width:760px){
  .hero-v8,
  .hero-v8.has-long-title,
  .hero-v8.has-extra-long-title{
    width:100%;
    height:clamp(650px,92svh,820px)!important;
    min-height:650px!important;
    max-height:820px!important;
  }
  .hero-v8 .hero-image-layer{
    inset:0;
    background-image:var(--hero-image-mobile,var(--hero-image-desktop,none));
    background-position:var(--hero-position-mobile,center 24%);
    transform:scale(1.01);
    filter:saturate(1.04) contrast(1.02) brightness(.84);
  }
  .hero-v8 .hero-overlay{
    background:
      linear-gradient(180deg,rgba(7,7,10,.16) 0%,rgba(7,7,10,.18) 28%,rgba(7,7,10,.66) 57%,rgba(7,7,10,.96) 88%,#07070a 100%),
      linear-gradient(90deg,rgba(7,7,10,.70) 0%,rgba(7,7,10,.18) 74%,rgba(7,7,10,.12) 100%)!important;
  }
  .hero-v8 .hero-content-v8,
  .hero-v8.has-long-title .hero-content-v8,
  .hero-v8.has-extra-long-title .hero-content-v8{
    width:calc(100% - 28px)!important;
    height:100%!important;
    min-height:0!important;
    padding:90px 0 calc(104px + env(safe-area-inset-bottom))!important;
    justify-content:flex-end!important;
    align-items:flex-start!important;
  }
  .hero-v8 .hero-content-v8 h1,
  .hero-v8.has-long-title .hero-content-v8 h1,
  .hero-v8.has-extra-long-title .hero-content-v8 h1{
    width:100%;
    max-width:100%!important;
    margin:9px 0 7px!important;
    font-size:clamp(31px,9.2vw,43px)!important;
    line-height:1.01!important;
    letter-spacing:-.045em!important;
    text-wrap:pretty;
    overflow-wrap:anywhere;
  }
  .hero-v8.has-extra-long-title .hero-content-v8 h1{font-size:clamp(27px,8vw,37px)!important}
  .hero-v8 .hero-kicker{font-size:9px!important}
  .hero-v8 .hero-alt-title{max-width:100%;margin:0 0 9px!important;font-size:11px!important}
  .hero-v8 .hero-meta{max-width:100%;gap:4px 7px!important;font-size:10px!important;line-height:1.35}
  .hero-v8 .hero-genres{gap:6px;margin:10px 0 11px}
  .hero-v8 .hero-genres span{min-height:29px;padding:0 9px;font-size:9px}
  .hero-v8 .hero-genres span:nth-of-type(n+4){display:none}
  .hero-v8 .hero-description{max-width:100%;margin:0 0 14px!important;font-size:12px!important;line-height:1.48!important;-webkit-line-clamp:2!important}
  .hero-v8 .hero-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%;gap:8px!important}
  .hero-v8 .hero-actions .button{width:100%;min-width:0;height:44px!important;min-height:44px!important;padding:0 10px!important;font-size:12px!important;white-space:nowrap}
}

@media (max-width:430px){
  .hero-v8{height:clamp(640px,94svh,790px)!important;min-height:640px!important}
  .hero-v8 .hero-content-v8{width:calc(100% - 24px)!important;padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
  .hero-v8 .hero-content-v8 h1,
  .hero-v8.has-long-title .hero-content-v8 h1{font-size:clamp(29px,9.1vw,38px)!important}
  .hero-v8.has-extra-long-title .hero-content-v8 h1{font-size:clamp(25px,7.6vw,33px)!important}
  .hero-v8 .hero-description{font-size:11.5px!important}
}

@media (max-width:350px){
  .hero-v8 .hero-actions{grid-template-columns:1fr}
  .hero-v8 .hero-actions .button{height:42px!important;min-height:42px!important}
  .hero-v8 .hero-content-v8{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
}

@media(prefers-reduced-motion:reduce){
  .hero-v8 .hero-image-layer{transition:opacity .16s linear;transform:none}
}


/* Tsukiro 2.7.5 — strict frame-or-cover rendering. */
.hero-v8 .hero-image-layer.is-frame{
  background-size:cover;
  background-position:var(--hero-position-desktop,center 35%);
}
.hero-v8 .hero-image-layer.is-cover{
  inset:0;
  background-image:none!important;
  filter:none!important;
  transform:none!important;
  overflow:hidden;
}
.hero-v8 .hero-image-layer.is-cover::before,
.hero-v8 .hero-image-layer.is-cover::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.hero-v8 .hero-image-layer.is-cover::before{
  inset:-8%;
  background-image:var(--hero-image-desktop,none);
  background-size:cover;
  background-position:center 34%;
  filter:blur(34px) saturate(1.05) brightness(.54);
  transform:scale(1.12);
  opacity:.92;
}
.hero-v8 .hero-image-layer.is-cover::after{
  top:7%;
  right:clamp(42px,7vw,120px);
  bottom:7%;
  width:min(31vw,430px);
  background-image:var(--hero-image-desktop,none);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.46));
}
@media(max-width:760px){
  .hero-v8 .hero-image-layer.is-frame{
    background-image:var(--hero-image-mobile,var(--hero-image-desktop,none));
    background-position:center center;
  }
  .hero-v8 .hero-image-layer.is-cover::before{
    background-image:var(--hero-image-mobile,var(--hero-image-desktop,none));
    background-position:center 22%;
    filter:blur(30px) saturate(1.03) brightness(.46);
  }
  .hero-v8 .hero-image-layer.is-cover::after{
    top:5.5%;
    right:14%;
    bottom:auto;
    width:72%;
    height:48%;
    background-image:var(--hero-image-mobile,var(--hero-image-desktop,none));
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.5));
  }
}


/* Tsukiro 2.7.5 — paused real-video frame layers. */
.hero-v8 .hero-frame-video-host{
  position:absolute;
  inset:-1.25%;
  z-index:.6;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  transform:scale(1.016);
  transition:opacity .34s ease;
  will-change:opacity;
  background:transparent;
}
.hero-v8 .hero-frame-video-host.is-active{opacity:1}
.hero-v8 .hero-frame-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
  filter:saturate(1.055) contrast(1.025) brightness(.9);
  pointer-events:none;
}
@media(max-width:760px){
  .hero-v8 .hero-frame-video-host{inset:0;transform:scale(1.01)}
  .hero-v8 .hero-frame-video{object-position:center center;filter:saturate(1.04) contrast(1.02) brightness(.84)}
}
@media(prefers-reduced-motion:reduce){
  .hero-v8 .hero-frame-video-host{transition:opacity .16s linear;transform:none}
}