/* =========================================================
   トップページの動き（オープニング／リングの写真切り替え／文字の登場）
   動きを減らす設定の人には、最初から完成した状態で表示する
   ========================================================= */

/* ---------- オープニング ---------- */
.opening{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#fff;pointer-events:none}
.opening::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--red),var(--red-d));transform:translateY(100%)}
.opening__in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.opening__mark{width:110px;height:auto;opacity:0;transform:scale(.6) rotate(-120deg)}
.opening__name{margin-top:18px;font-family:var(--en);font-weight:700;font-size:30px;letter-spacing:.6em;padding-left:.6em;opacity:0}
.opening__en{margin-top:6px;font-family:var(--en);font-size:11px;letter-spacing:.5em;padding-left:.5em;color:var(--red);opacity:0}
.is-opening .opening__mark{animation:opMark 1s cubic-bezier(.2,.8,.2,1) .1s forwards}
.is-opening .opening__name{animation:opText .9s ease .6s forwards}
.is-opening .opening__en{animation:opText .9s ease .8s forwards}
.is-opening .opening::after{animation:opWipe 1.4s cubic-bezier(.45,0,.2,1) 2.8s forwards}
.is-opening .opening__in{animation:opOut .8s ease 3.2s forwards}
.opening.is-done{animation:opLeave 1.2s cubic-bezier(.45,0,.2,1) forwards}
@keyframes opMark{to{opacity:1;transform:none}}
@keyframes opText{from{opacity:0;letter-spacing:1.1em}to{opacity:1}}
@keyframes opWipe{to{transform:none}}
@keyframes opOut{to{opacity:0}}
@keyframes opLeave{to{transform:translateY(-100%)}}
.opening.is-gone{display:none}

/* ---------- 背景の輪がゆっくり回る ---------- */
.mv-orbit{position:absolute;border-radius:50%;pointer-events:none}
.mv-orbit--1{width:980px;height:980px;right:-330px;top:-260px;border:1.5px dashed rgba(255,255,255,.28);animation:spin 90s linear infinite}
.mv-orbit--2{width:640px;height:640px;left:-260px;bottom:-380px;border:1.5px dashed rgba(255,255,255,.18);animation:spin 70s linear infinite reverse}
.hero--motion .hero__bg::before{animation:breathe 9s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.04)}}
/* 赤い面に、ときどき光が流れる */
.hero--motion .hero__bg::after{display:block;content:"";position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%);transform:translateX(-100%);animation:sheen 9s ease-in-out 3s infinite}
@keyframes sheen{0%{transform:translateX(-100%)}35%,100%{transform:translateX(100%)}}

/* ---------- リング：写真の切り替え ---------- */
.hero--motion .ring__img{position:relative}
.ring__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.14);transition:opacity 1.2s ease}
.ring__slide.is-on{opacity:1;animation:zoom 6.5s linear forwards}
@keyframes zoom{from{transform:scale(1.14)}to{transform:scale(1)}}
.ring figcaption .cap{display:none}
.ring figcaption .cap.is-on{display:block;animation:capIn .6s ease both}
@keyframes capIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* リングを囲む細い線（描かれてから、ゆっくり回る） */
.ring__line{position:absolute;inset:-7%;width:114%;height:114%;pointer-events:none;overflow:visible}
.ring__line circle{fill:none;stroke:rgba(255,255,255,.7);stroke-width:.5;stroke-dasharray:4 2.2;vector-effect:non-scaling-stroke}
.ring--b .ring__line circle{stroke-dasharray:2 2.6}
.ring__line{animation:spin 40s linear infinite}
.ring--b .ring__line{animation-direction:reverse;animation-duration:30s}

/* ---------- 登場の動き（オープニングのあと） ---------- */
.hero--motion .hero__en,.hero--motion .hero__sub,.hero--motion .hero__btns,.hero--motion .mv-pager,.hero--motion .hero__scroll{opacity:0}
.mv-line{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.mv-line>span{display:inline-block;transform:translateY(110%)}
.hero--motion .ring{opacity:0}
.hero--motion .ring__img{clip-path:circle(0% at 50% 50%)}
.hero--motion .hero__catch em{background-size:0 100%;background-repeat:no-repeat;background-image:linear-gradient(transparent 68%,rgba(255,255,255,.35) 68%);background-color:transparent}

.is-ready .hero--motion .hero__en{animation:fadeUp .8s ease .05s forwards}
.is-ready .hero--motion .mv-line>span{animation:lineUp .9s cubic-bezier(.2,.8,.2,1) forwards}
.is-ready .hero--motion .mv-line:nth-of-type(1)>span{animation-delay:.15s}
.is-ready .hero--motion .mv-line:nth-of-type(2)>span{animation-delay:.32s}
.is-ready .hero--motion .hero__catch em{animation:marker .8s ease 1.1s forwards}
.is-ready .hero--motion .hero__sub{animation:fadeUp .8s ease .75s forwards}
.is-ready .hero--motion .hero__btns{animation:fadeUp .8s ease .95s forwards}
.is-ready .hero--motion .ring--a{animation:ringIn .1s linear .3s forwards}
.is-ready .hero--motion .ring--b{animation:ringIn .1s linear .6s forwards}
.is-ready .hero--motion .ring--a .ring__img{animation:open 1.1s cubic-bezier(.7,0,.2,1) .3s forwards}
.is-ready .hero--motion .ring--b .ring__img{animation:open 1.1s cubic-bezier(.7,0,.2,1) .6s forwards}
.is-ready .hero--motion .mv-pager,.is-ready .hero--motion .hero__scroll{animation:fadeIn 1s ease 1.4s forwards}
.ring__line circle{stroke-dashoffset:0}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}
@keyframes lineUp{to{transform:none}}
@keyframes marker{to{background-size:100% 100%}}
@keyframes ringIn{to{opacity:1}}
@keyframes open{to{clip-path:circle(50% at 50% 50%)}}

/* ---------- いま見ている技（番号と進み具合） ---------- */
.mv-pager{position:absolute;z-index:3;left:max(16px,calc((100vw - 1120px) / 2));bottom:28px;display:flex;align-items:center;gap:14px;color:#fff;font-family:var(--en);font-size:12px;letter-spacing:.2em}
.mv-pager b{font-size:18px;letter-spacing:.05em}
.mv-pager__bar{width:120px;height:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.mv-pager__bar i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.mv-pager__bar i.is-run{animation:bar 6s linear forwards}
.mv-pager button{all:unset;cursor:pointer;width:26px;height:26px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.5);border-radius:50%;font-size:10px;letter-spacing:0;transition:background .2s}
.mv-pager button:hover,.mv-pager button:focus-visible{background:rgba(255,255,255,.18)}
@keyframes bar{to{transform:scaleX(1)}}

/* リングは、マウスやスクロールに合わせて少しだけ動く */
.hero--motion .hero__rings{transition:transform .6s cubic-bezier(.2,.8,.2,1)}

@media (max-width:900px){
  .mv-orbit--1{width:560px;height:560px;right:-260px;top:-180px}
  .mv-orbit--2{display:none}
  .mv-pager{position:relative;left:auto;bottom:auto;justify-content:center;margin:-70px auto 40px;width:max-content}
  .opening__mark{width:84px;height:auto}
  .opening__name{font-size:24px}
}

/* 動きを減らす設定のとき：すべて完成した状態で、切り替えもしない */
@media (prefers-reduced-motion:reduce){
  .opening{display:none}
  .mv-orbit,.ring__line,.hero--motion .hero__bg::before,.hero--motion .hero__bg::after{animation:none!important}
  .hero--motion .hero__bg::after{display:none}
  .hero--motion .hero__en,.hero--motion .hero__sub,.hero--motion .hero__btns,.hero--motion .mv-pager,.hero--motion .hero__scroll,.hero--motion .ring{opacity:1!important;animation:none!important}
  .mv-line>span{transform:none!important;animation:none!important}
  .hero--motion .ring__img{clip-path:none!important;animation:none!important}
  .hero--motion .hero__catch em{background-size:100% 100%!important;animation:none!important}
  .ring__slide{transition:none}
  .ring__slide.is-on{animation:none;transform:none}
}

/* 正式ロゴでのオープニング */
.opening__logo{width:min(380px,72vw);height:auto;opacity:0;transform:translateY(10px) scale(.96)}
.opening__read{margin-top:14px;font-size:13px;letter-spacing:.6em;padding-left:.6em;color:var(--mute);opacity:0}
.is-opening .opening__logo{animation:opLogo 1.3s cubic-bezier(.2,.8,.2,1) .2s forwards}
.is-opening .opening__read{animation:opText 1s ease 1s forwards}
@keyframes opLogo{to{opacity:1;transform:none}}