.video-top {
  height: 100svh !important;
  min-height: 100svh !important;
  background: #000 url("assets/tsubasa-top-poster-pc.webp") center / cover no-repeat;
}

.video-top .film-background { opacity:0; filter: brightness(.68) contrast(1.12) saturate(1.08); transition:opacity .18s ease-out; }
.video-top.video-ready .film-background { opacity:1; }
.video-top .film-shade { z-index: 2; }

.video-top .top-logo-plaque {
  position: absolute;
  z-index: 7;
  top: 76px;
  right: clamp(20px, 4vw, 64px);
  width: clamp(170px, 16vw, 260px);
}
.video-top .top-logo {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 1px 5px rgba(255,255,255,.25)) drop-shadow(0 3px 10px rgba(0,0,0,.75));
}

.video-top .hero-copy {
  z-index: 8;
  left: clamp(26px, 6vw, 96px);
  bottom: clamp(72px, 11vh, 130px);
}

.video-top .hero-copy h1 {
  margin: 0;
  font-size: clamp(58px, 8vw, 126px);
  line-height: .92;
  letter-spacing: .045em;
  text-shadow: 0 5px 28px rgba(0,0,0,.72);
}

.video-top .hero-copy h1 span,.video-top .hero-copy h1 em { display:block; font-style:normal; }
.video-top .top-cm { position:absolute; z-index:8; left:clamp(26px,6vw,96px); bottom:clamp(28px,5vh,58px); }

.film-transition {
  position:relative;
  z-index:3;
  height:clamp(46px,7vh,88px);
  margin-top:calc(-1 * clamp(46px,7vh,88px));
  background:linear-gradient(to bottom,transparent 0%,#050303 86%);
  pointer-events:none;
}

@media (max-width:700px) {
  .video-top { background-image:url("assets/tsubasa-top-poster-mobile.webp"); }
  /* Copy, CTA and mark each have their own area in the first mobile view. */
  .video-top .top-logo-plaque { top:64px; right:18px; width:104px; }
  .video-top .hero-copy { left:24px; bottom:max(208px, calc(174px + env(safe-area-inset-bottom)))!important; }
  .video-top .hero-copy h1 { font-size:clamp(48px,15vw,72px); }
  .video-top .top-cm { left:24px; right:auto; bottom:max(22px, calc(14px + env(safe-area-inset-bottom))); }
  .video-top .top-cm .cm-open { width:auto; min-height:58px; padding:9px 12px; gap:10px; }
  .video-top .top-cm .cm-open-mark { width:34px; height:34px; flex-basis:34px; font-size:13px; box-shadow:0 0 0 4px rgba(181,34,30,.18); }
  .video-top .top-cm .cm-open span:nth-child(2) { font-size:11px; line-height:1.18; }
  .video-top .top-cm .cm-open b { font-size:16px; }
  .video-top .top-cm .cm-open small { display:none; }
  .video-top .top-scroll { position:absolute; z-index:8; right:20px; bottom:max(28px, calc(18px + env(safe-area-inset-bottom))); display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.82); font-size:8px; letter-spacing:.19em; writing-mode:vertical-rl; text-shadow:0 2px 12px #000; pointer-events:none; }
  .video-top .top-scroll::after { content:"↓"; color:#d3a652; font-size:15px; line-height:1; }
  .site-header.video-hero-active nav { display:none; }
}