.hero--cinematic{
  min-height:700px;
  height:calc(100svh - 84px);
  max-height:820px;
  padding:0;
  isolation:isolate;
  background:#080809;
}
.hero--cinematic .hero__glow{
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(circle at 76% 29%,rgba(225,68,54,.16),transparent 28%);
  pointer-events:none;
}
.hero__backdrop{
  position:absolute;
  z-index:-2;
  inset:0;
  overflow:hidden;
}
.hero__backdrop:before,
.hero__backdrop:after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
}
.hero__backdrop:before{
  background:
    linear-gradient(90deg,#080809 0%,rgba(8,8,9,.97) 23%,rgba(8,8,9,.58) 48%,rgba(8,8,9,.02) 76%),
    linear-gradient(0deg,rgba(8,8,9,.82),transparent 28%);
}
.hero__backdrop:after{
  background:linear-gradient(180deg,rgba(8,8,9,.34),transparent 22%,transparent 78%,#080809);
}
.hero__backdrop img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.94) contrast(1.08);
  transform:scale(1.015);
  animation:heroBreath 14s ease-in-out infinite alternate;
}
.hero--cinematic .hero__grid{
  position:relative;
  display:block;
  height:100%;
}
.hero--cinematic .hero__copy{
  width:min(600px,49%);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:34px 0 28px;
}
.hero--cinematic .hero__copy:before{
  left:-38px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(237,228,212,.28);
}
.hero--cinematic .eyebrow{
  align-self:flex-start;
  border-radius:2px;
  background:rgba(8,8,9,.46);
  backdrop-filter:blur(10px);
}
.hero--cinematic h1{
  margin:22px 0 18px;
  max-width:580px;
  font-size:clamp(48px,4.55vw,70px);
  line-height:1.02;
  text-wrap:balance;
}
.hero--cinematic h1 em{
  color:var(--paper);
}
.hero--cinematic h1 em:after{
  right:42%;
  bottom:-12px;
}
.hero--cinematic .hero__copy>p{
  max-width:510px;
  margin:8px 0 0;
  color:#b9b5b1;
  font-size:14px;
  line-height:1.7;
}
.hero--cinematic .hero__buttons{
  margin:27px 0 30px;
}
.hero--cinematic .hero__facts{
  width:min(560px,100%);
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.11);
}
.hero--cinematic .hero__facts>div{
  padding-inline:18px;
}
.hero--cinematic .hero__visual{
  position:absolute;
  z-index:3;
  inset:0;
  min-height:0;
  display:block;
  transform:none!important;
  pointer-events:none;
}
.hero--cinematic .japan-seal{
  right:1.5%;
  top:9%;
  width:72px;
  height:108px;
  background:rgba(22,12,11,.52);
  border-color:rgba(237,228,212,.5);
}
.hero--cinematic .hero__motion-card{
  position:absolute;
  right:1.5%;
  bottom:8%;
  width:300px;
  padding:7px;
  background:rgba(8,8,9,.78);
  border:1px solid rgba(237,228,212,.24);
  box-shadow:0 26px 70px rgba(0,0,0,.52);
  backdrop-filter:blur(18px);
  pointer-events:auto;
}
.hero--cinematic .hero__motion-card:before{
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid rgba(225,68,54,.22);
  pointer-events:none;
}
.hero--cinematic .hero__visual .hero__video{
  display:block;
  width:100%;
  max-width:none;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  transform:none;
  filter:saturate(.84) contrast(1.12);
  box-shadow:none;
}
.hero__motion-caption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 7px 4px;
}
.hero__motion-caption span{
  color:#e88e87;
  font-size:7px;
  font-weight:800;
  letter-spacing:.14em;
}
.hero__motion-caption span i{
  display:inline-block;
  width:5px;
  height:5px;
  margin-right:6px;
  border-radius:50%;
  background:var(--verm);
  box-shadow:0 0 9px var(--verm);
  animation:livePulse 1.6s ease-in-out infinite;
}
.hero__motion-caption b{
  color:#ddd8d0;
  font-size:8px;
}
.hero--cinematic .float-note{
  right:28%;
  bottom:9%;
  padding:11px 15px;
  border-radius:2px;
  border-color:rgba(237,228,212,.22);
  background:rgba(8,8,9,.63);
}
.hero--cinematic .float-note span{
  font-size:7px;
}
.hero--cinematic .float-note b{
  font-size:10px;
}
@keyframes heroBreath{
  from{transform:scale(1.015)}
  to{transform:scale(1.045)}
}
@keyframes livePulse{
  50%{opacity:.35;transform:scale(.75)}
}
@media(max-width:1100px){
  .hero--cinematic{height:auto;min-height:680px}
  .hero--cinematic .hero__copy{width:55%;min-height:680px}
  .hero--cinematic h1{font-size:clamp(46px,5.3vw,62px)}
  .hero--cinematic .hero__motion-card{width:250px;right:0}
  .hero--cinematic .float-note{display:none}
}
@media(max-width:720px){
  .hero--cinematic{
    min-height:890px;
    height:auto;
    padding:0;
    overflow:hidden;
  }
  .hero__backdrop{
    inset:0 0 auto;
    height:390px;
  }
  .hero__backdrop:before{
    background:
      linear-gradient(0deg,#080809 0%,rgba(8,8,9,.8) 25%,transparent 67%),
      linear-gradient(90deg,rgba(8,8,9,.2),transparent);
  }
  .hero__backdrop:after{
    background:linear-gradient(180deg,rgba(8,8,9,.12),transparent 56%,#080809);
  }
  .hero__backdrop img{
    object-position:68% center;
    transform:scale(1.01);
  }
  .hero--cinematic .hero__grid{
    padding-top:335px;
    min-width:0;
  }
  .hero--cinematic .hero__copy{
    width:100%;
    height:auto;
    min-height:0;
    padding:20px 0 38px;
  }
  .hero--cinematic .eyebrow{
    font-size:7px;
    padding:7px 9px;
  }
  .hero--cinematic h1{
    max-width:100%;
    margin:17px 0 14px;
    font-size:clamp(36px,10.4vw,46px);
    line-height:1.03;
    overflow-wrap:anywhere;
  }
  .hero--cinematic .hero__copy>p{
    font-size:12px;
    line-height:1.6;
  }
  .hero--cinematic .hero__buttons{
    margin:21px 0 22px;
    width:100%;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .hero--cinematic .hero__buttons .btn{
    min-width:0;
    padding-inline:8px;
    font-size:9px;
    white-space:nowrap;
  }
  .hero--cinematic .hero__facts{
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    padding-top:16px;
  }
  .hero--cinematic .hero__facts>div{
    display:block;
    padding:4px 8px;
    border-left:1px solid var(--line);
  }
  .hero--cinematic .hero__facts>div:first-child{
    padding-left:0;
  }
  .hero--cinematic .hero__facts svg{
    width:18px;
    height:18px;
    margin-bottom:5px;
  }
  .hero--cinematic .hero__facts b{
    font-size:8px;
    line-height:1.35;
  }
  .hero--cinematic .hero__facts small{
    font-size:7px;
  }
  .hero--cinematic .japan-seal{
    top:24px;
    right:0;
    width:54px;
    height:80px;
  }
  .hero--cinematic .hero__motion-card{
    top:214px;
    right:auto;
    bottom:auto;
    left:0;
    width:176px;
    padding:4px;
  }
  .hero__motion-caption{
    padding:6px 3px 2px;
  }
  .hero__motion-caption b{
    display:none;
  }
}
@media(max-width:390px){
  .hero--cinematic{min-height:890px}
  .hero--cinematic .hero__buttons{grid-template-columns:1fr}
  .hero--cinematic .hero__facts{grid-template-columns:repeat(3,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .hero__backdrop img{animation:none}
  .hero__motion-caption span i{animation:none}
  .hero--cinematic .hero__visual{background:none}
  .hero--cinematic .hero__video{display:none}
}
