/**
 * AETHER One — ヒーロー演出エンジン CSS（8演出＋シーンジャーニー）
 * レイヤー規約: 背景(.aeo-hbg)=z0 / 装飾・scrim=z1 / カード・商品=z2 / コピー(.aeo-hero__inner)=z5
 * 色はトークン（--accent/--accent2）にのみ依存。
 */

/* ===== 共通レイヤー ===== */
.aeo-hbg{position:absolute;inset:0;z-index:0;overflow:hidden}
.aeo-hbg video{width:100%;height:100%;object-fit:cover}
.aeo-hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,6,4,.42),rgba(8,6,4,.12) 42%,rgba(8,6,4,.66))}
.aeo-hero__scrim.is-soft{background:linear-gradient(180deg,rgba(8,6,4,.28),transparent 45%,rgba(8,6,4,.55))}

/* コピー配置バリエーション */
.aeo-hero__inner.is-left{text-align:left;margin:0;max-width:600px;padding-left:clamp(24px,6vw,72px)}
.aeo-hero__inner.is-left .aeo-hero__lead{margin-left:0}
.aeo-hero__inner.is-left .aeo-hero__cta{justify-content:flex-start}
.aeo-hero__inner.is-bottom{margin-top:auto;padding-bottom:12vh;text-align:left;max-width:640px;margin-left:0;padding-left:clamp(24px,6vw,72px)}
.aeo-hero__inner.is-bottom .aeo-hero__cta{justify-content:flex-start}
.aeo-hero__inner.is-bottom .aeo-hero__lead{margin-left:0}

/* サイドカード（kinetic/aurora 共通） */
.aeo-hero__card{position:absolute;right:7%;top:50%;translate:0 -50%;z-index:2;
  background-size:cover;background-position:center;background-color:#20160f;
  border-radius:calc(var(--radius) + 6px);box-shadow:0 36px 90px rgba(0,0,0,.55);
  transition:transform .15s ease-out;will-change:transform}
.aeo-hero__card.is-kinetic{width:min(30vw,360px);aspect-ratio:3/4}
.aeo-hero__card.is-aurora{width:min(32vw,380px);aspect-ratio:4/5;border:1px solid rgba(255,255,255,.16)}

/* ===== 1. cinematic ===== */
.aeo-hbg--cin__img{position:absolute;inset:0;background-size:cover;background-position:center;
  animation:aeoKenBurns 16s ease-in-out infinite alternate}
@keyframes aeoKenBurns{from{transform:scale(1.03)}to{transform:scale(1.17)}}
/* 文字1字ずつ立ち上がり（JSが .aeo-ch に分割） */
.aeo-hero--cinematic .aeo-hero__title{animation:none;opacity:1;transform:none}
.aeo-ch{display:inline-block;opacity:0;transform:translateY(.55em);animation:aeoChRise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes aeoChRise{to{opacity:1;transform:none}}

/* ===== 2. scrub ===== */
.aeo-hero--scrub{cursor:ew-resize}

/* ===== 3. spotlight ===== */
.aeo-hbg--spot__base,.aeo-hbg--spot__reveal{position:absolute;inset:0;background-size:cover;background-position:center}
.aeo-hbg--spot__reveal{
  -webkit-mask-image:radial-gradient(circle var(--aeo-r,0px) at var(--aeo-x,50%) var(--aeo-y,50%),#000 0,#000 62%,transparent 100%);
          mask-image:radial-gradient(circle var(--aeo-r,0px) at var(--aeo-x,50%) var(--aeo-y,50%),#000 0,#000 62%,transparent 100%)}

/* ===== 4. split ===== */
.aeo-hbg--split__a,.aeo-hbg--split__b{position:absolute;inset:0;background-size:cover;background-position:center}
.aeo-hbg--split__b{clip-path:inset(0 0 0 var(--aeo-split,50%))}
.aeo-hbg--split__bar{position:absolute;top:0;bottom:0;left:var(--aeo-split,50%);width:2px;background:#fff;z-index:2;
  box-shadow:0 0 18px rgba(0,0,0,.45)}
.aeo-hbg--split__bar::after{content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;border-radius:50%;
  background:#fff;translate:-50% -50%;box-shadow:0 4px 18px rgba(0,0,0,.4)}
.aeo-hbg--split__label{position:absolute;top:88px;z-index:3;font-family:var(--font-en);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:#fff;padding:6px 14px;border-radius:999px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.28)}
.aeo-hbg--split__label.is-a{left:24px}
.aeo-hbg--split__label.is-b{right:24px}

/* ===== 5. product ===== */
.aeo-hbg--product{background:radial-gradient(92% 82% at 50% 40%,color-mix(in srgb,var(--accent) 44%,#140d08),#080503 78%)}
.aeo-hero__word{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;
  font-family:var(--font-en);font-weight:700;line-height:1;white-space:nowrap;
  font-size:clamp(4.6rem,16vw,13rem);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.17)}
.aeo-hero__product{position:absolute;left:50%;top:40%;translate:-50% -50%;width:min(42vw,400px);aspect-ratio:1;z-index:2;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 42px 80px rgba(0,0,0,.6));animation:aeoFloat 6s ease-in-out infinite alternate;
  transition:transform .15s ease-out;will-change:transform}
@keyframes aeoFloat{from{margin-top:-10px}to{margin-top:12px}}
.aeo-hero--product .aeo-hero__inner{margin-top:auto;padding-bottom:8vh}

/* ===== 6. orbit ===== */
.aeo-hbg--orbit{background:radial-gradient(120% 120% at 50% 30%,color-mix(in srgb,var(--accent) 38%,#120b06),#070402 74%)}
.aeo-orbit__ring{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.14);border-radius:50%;
  animation:aeoSpin var(--dur,40s) linear infinite}
.aeo-orbit__ring.is-rev{animation-direction:reverse}
@keyframes aeoSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.aeo-orbit__pos{position:absolute;left:50%;top:50%}
.aeo-orbit__av{display:block;width:56px;height:56px;margin:-28px;border-radius:16px;
  background-size:cover;background-position:center;background-color:#241811;
  box-shadow:0 0 24px color-mix(in srgb,var(--accent) 55%,transparent);
  rotate:var(--a0,0deg);animation:aeoCounterSpin var(--dur,40s) linear infinite}
.aeo-orbit__ring.is-rev .aeo-orbit__av{animation-direction:reverse}
@keyframes aeoCounterSpin{from{rotate:var(--a0,0deg)}to{rotate:calc(var(--a0,0deg) - 360deg)}}
.aeo-orbit__center{position:absolute;left:50%;top:auto;bottom:9vh;transform:translate(-50%,0);text-align:center;color:#fff;z-index:2}
.aeo-orbit__center b{display:block;font-family:var(--font-en);font-weight:700;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1}
.aeo-orbit__center span{display:block;margin-top:6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.aeo-hero--orbit{justify-content:flex-start;padding-top:13vh}
.aeo-hero--orbit .aeo-hero__title{font-size:clamp(38px,7vw,92px)}
.aeo-hero--orbit .aeo-hero__lead{display:none} /* 中央カウントと干渉するため非表示 */
/* SCROLLキューはカウントと重なるため orbit では非表示 */
.aeo-hero--orbit .aeo-hero__scroll{display:none}

/* ===== 7. kinetic ===== */
.aeo-hbg--kinetic{background:#0c0906;display:flex;align-items:center}
.aeo-kinetic__band{display:flex;white-space:nowrap;font-family:var(--font-en);font-weight:700;line-height:1;
  font-size:clamp(5rem,16vw,13rem);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);
  animation:aeoMarquee 22s linear infinite;will-change:transform}
.aeo-kinetic__band span{display:inline-block;padding-right:.4em}
@keyframes aeoMarquee{to{transform:translateX(-50%)}}

/* ===== 8. aurora ===== */
.aeo-hbg--aurora{background:#0b0806}
.aeo-hbg--aurora::before{content:"";position:absolute;inset:-22%;filter:blur(64px);opacity:.9;
  background:
    radial-gradient(42% 42% at 28% 32%,color-mix(in srgb,var(--accent) 86%,transparent),transparent 70%),
    radial-gradient(38% 38% at 72% 40%,color-mix(in srgb,var(--accent2) 62%,transparent),transparent 70%),
    radial-gradient(46% 46% at 54% 78%,color-mix(in srgb,var(--accent) 36%,#8d4de8),transparent 72%);
  animation:aeoDrift 15s ease-in-out infinite alternate}
.aeo-hero--aurora .aeo-hero__inner.is-left{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:24px;padding:clamp(26px,4vw,46px);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  margin-left:clamp(24px,6vw,72px)}
.aeo-hero--aurora .aeo-hero__title{font-size:clamp(38px,6vw,84px)}

/* ===== シーン・ジャーニー ===== */
.aeo-journey{position:fixed;inset:0;z-index:0;pointer-events:none}
.aeo-journey__scene{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease}
.aeo-journey__scene.is-on{opacity:1}
.aeo-journey__scene video{width:100%;height:100%;object-fit:cover}
.aeo-journey__scrim{position:absolute;inset:0;background:rgba(8,6,4,.52)}
body.aeo-journey-on{--bg:transparent;--bg2:rgba(14,10,7,.4);--ink:#fff;--sub:rgba(255,255,255,.78);--line:rgba(255,255,255,.2);background:#080604}
body.aeo-journey-on .aeo-hero,body.aeo-journey-on .aeo-section,body.aeo-journey-on main{position:relative;z-index:1}
body.aeo-journey-on .aeo-hero{background:transparent}
body.aeo-journey-on .aeo-hbg,body.aeo-journey-on .aeo-hero__bg{opacity:.4}

/* ===== モバイル ===== */
@media (max-width:720px){
  .aeo-hero__card{position:relative;right:auto;top:auto;translate:none;width:min(72vw,300px);margin:26px auto 0;z-index:2}
  .aeo-hero__inner.is-left,.aeo-hero__inner.is-bottom{padding-left:clamp(20px,5vw,32px);padding-right:20px}
  .aeo-orbit__av{width:42px;height:42px;margin:-21px;border-radius:12px}
  .aeo-hero--orbit{padding-top:10vh}
  .aeo-hero__product{width:min(64vw,320px)}
}

/* ===== reduced-motion（全演出 静止・設計原則#5） ===== */
@media (prefers-reduced-motion:reduce){
  .aeo-hbg--cin__img,.aeo-kinetic__band,.aeo-orbit__ring,.aeo-orbit__av,
  .aeo-hbg--aurora::before,.aeo-hero__product{animation:none!important}
  .aeo-ch{opacity:1!important;transform:none!important;animation:none!important}
  .aeo-journey__scene{transition:none}
}