/* ══════════════════════════════════════════════════════════
   動きの層：キービジュアル「Be AMBITIOUS LIVE」と、動くクララ
   （stage / theater / luxe の上に重ねる。既存の部品はそのまま）
   ══════════════════════════════════════════════════════════ */

/* ── ページ上部の金の進行線 ── */
.scrollline{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--sp,0));
  background:linear-gradient(90deg,#8d6a2b,#ecd08c 40%,#fff4d0 50%,#ecd08c 60%,#d11f3c);box-shadow:0 0 12px rgba(255,200,110,.7)}

/* ── 額縁のクララが動く ── */
.key__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;z-index:1;
  opacity:0;transition:opacity .45s ease}
.key__video.is-on{opacity:1}
.key__video.is-fading{opacity:0}
.key__glare{z-index:2}

/* ── チケットへの誘い ── */
.livecta{position:relative;z-index:3;overflow:hidden;isolation:isolate;--band:min(40vw,640px);
  padding:calc(var(--band) * .72) var(--gut) clamp(80px,10vw,130px)}
/* キービジュアルの上半分（クララ・月の舞踏会・ネズミの大将）を、横長の映画のバナーとして見せる */
.livecta__bg{position:absolute;top:0;left:0;right:0;height:var(--band);z-index:-2;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.15) 12%,rgba(0,0,0,.55) 28%,#000 48%,#000 56%,transparent 92%),linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.15) 12%,rgba(0,0,0,.55) 28%,#000 48%,#000 56%,transparent 92%),linear-gradient(90deg,transparent 0%,#000 16%,#000 84%,transparent 100%);mask-composite:intersect}
.livecta__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;transform:translateY(var(--py,0px)) scale(1.03);transform-origin:50% 0;
  animation:ctaDrift 20s ease-in-out infinite alternate;filter:brightness(.8) saturate(.95);opacity:.9}
@keyframes ctaDrift{to{scale:1.06;translate:-1.5% 0}}
/* バナーの上下に金の細い線（映画のスクリーンの縁） */
.livecta__bg::before,.livecta__bg::after{content:"";position:absolute;left:12%;right:12%;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(236,208,140,.85),transparent)}
.livecta__bg::before{display:none}
.livecta__bg::after{display:none}
.livecta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent calc(var(--band) * .5),rgba(7,7,10,.55) calc(var(--band) * .85),transparent calc(var(--band) * 1.2))}
.livecta__in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,90px);align-items:center}
.livecta__film{position:relative;justify-self:center;width:min(100%,380px);aspect-ratio:464/688;transform:rotate(-4deg);
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.livecta__film.in{transform:rotate(-4deg)}
.livecta__film:hover{transform:rotate(0deg) scale(1.03)}
.livecta__film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:6px;transition:opacity .45s ease;
  background:#1a0b0e url(../video/clara-chase.webp) center/cover}
.livecta__film video.is-fading{opacity:.15}
.livecta__film::before{content:"";position:absolute;inset:-10px;border-radius:12px;z-index:-1;
  background:linear-gradient(145deg,#fff1c4,#b8862f 30%,#6a4a18 55%,#ecd08c 80%,#8d6a2b);
  box-shadow:0 0 0 1px rgba(255,241,196,.6),0 0 60px rgba(255,170,70,.35),0 40px 90px rgba(0,0,0,.8)}
.livecta__film figcaption{position:absolute;left:0;right:0;bottom:-44px;text-align:center;font-family:"Cinzel Decorative",serif;font-size:.74rem;letter-spacing:.35em;color:var(--gold-lit)}
.livecta__en{font-family:"Cinzel Decorative",serif;font-weight:700;letter-spacing:.34em;font-size:.86rem;color:var(--gold-lit)}
.livecta__ja{margin-top:.4em;font-family:var(--title);font-weight:900;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.35;letter-spacing:.08em;
  background:linear-gradient(180deg,#fff8e2 0%,#f3d58f 45%,#c29a4f 70%,#fff1c4 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.8))}
.livecta__date{margin-top:1em;font-family:var(--latin);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:600;color:#fff6e4;letter-spacing:.06em}
.livecta__date small{font-size:.5em;letter-spacing:.2em;color:var(--gold-lit)}
.livecta__date span{display:block;font-family:var(--title);font-size:.46em;letter-spacing:.2em;color:rgba(255,246,228,.85);margin-top:.2em}
.livecta__btns{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6em;max-width:560px}
.livecta__more{display:inline-block;margin-top:1.3em;font-size:.86rem;letter-spacing:.14em;color:var(--gold-lit);border-bottom:1px solid rgba(236,208,140,.5);padding-bottom:.2em}
.livecta__more:hover{color:#fff}
@media(max-width:860px){
  .livecta__in{grid-template-columns:1fr;text-align:center}
  .livecta__film{width:min(72vw,320px);margin-bottom:40px}
  .livecta__btns{margin-left:auto;margin-right:auto}
  /* 縦長の画面：ロゴは外し、クララの顔とネズミの大将のあたりだけを横長に切り取る */
  .livecta{--band:50vw;padding-top:calc(var(--band) * .8)}
  .livecta__bg img{width:143%;height:auto;max-width:none;object-fit:initial;margin-left:-21%}
}
@media(max-width:560px){.livecta__btns{grid-template-columns:1fr}}

/* ── 出演者の写真：カーソルの方へ少し傾く ── */
.tier li figure{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;transform:perspective(700px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.tier li:hover figure{box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 30px rgba(255,190,90,.25)}

/* ── 舞い散るバラの花びら（キービジュアルと同じ） ── */
.petals{position:fixed;inset:0;width:100%;height:100%;z-index:41;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .livecta__bg img{animation:none}
  .key__video{display:none}
}