/* 「AIドルユニット」案の叩き（/unit）専用スタイル。
   本体サイト（style.css）とは独立。このファイルを消せば跡形もなく消える。

   方針: テックブログのLPではなく「アイドルグループのサイト」の作法で組む。
   明朝の大見出し・ポートレート比のメンバー写真・センター表記・
   プロフィール欄（身長のかわりに使用モデル）でギャップを出す。 */

.unit-body{
  --bg:#070409;
  --bg-2:#110a14;
  --panel:#180f1d;
  --ink:#fbf7f8;
  --muted:#a2949f;
  --line:rgba(251,247,248,0.13);
  --pink:#ff3f81;
  --violet:#9d7bff;
  --gold:#e8c88a;
  --radius:4px;
  --container:1240px;
  --serif:"Noto Serif JP",serif;
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:"Noto Sans JP",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
.unit-body *{box-sizing:border-box;}
.unit-body a{color:inherit;text-decoration:none;}
.unit-body img{display:block;max-width:100%;}
.unit-body h1,.unit-body h2,.unit-body h3,.unit-body p,.unit-body ul,.unit-body ol,
.unit-body dl,.unit-body dt,.unit-body dd{margin:0;}
.unit-body ul,.unit-body ol{padding:0;list-style:none;}
.unit-body dd{margin-left:0;}

/* ---- ヘッダー ---- */
.unit-header{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px clamp(18px,5vw,56px);
  background:rgba(7,4,9,0.72);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(20px);
}
.unit-brand{
  font-family:Inter,sans-serif;font-weight:900;font-size:0.95rem;letter-spacing:0.3em;
  background:linear-gradient(90deg,var(--pink),var(--violet) 60%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.unit-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-size:0.74rem;font-weight:700;letter-spacing:0.14em;color:var(--muted);}
.unit-nav a:hover{color:var(--ink);}

/* ---- 共通 ---- */
.unit-main{overflow:hidden;}
.unit-label{
  font-family:Inter,sans-serif;font-size:0.68rem;font-weight:900;letter-spacing:0.4em;
  color:var(--pink);margin-bottom:16px;
}
.unit-h2{
  font-family:var(--serif);
  font-size:clamp(2rem,5vw,3.8rem);font-weight:900;line-height:1.28;letter-spacing:0.01em;
}
.unit-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(30px,4vw,54px);
}
.unit-section-note{color:var(--muted);font-size:0.84rem;max-width:32em;}
.unit-section-note strong{color:var(--pink);font-weight:700;}
.unit-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 30px;border-radius:999px;
  font-size:0.86rem;font-weight:800;letter-spacing:0.1em;
  border:1px solid var(--line);transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease;
}
.unit-btn:hover{transform:translateY(-2px);}
.unit-btn.primary{
  color:#25060f;border-color:transparent;
  background:linear-gradient(100deg,var(--gold),var(--pink) 55%,var(--violet));
  box-shadow:0 10px 36px rgba(255,63,129,0.28);
}
.unit-btn.primary:hover{box-shadow:0 16px 46px rgba(255,63,129,0.42);}
.unit-btn.ghost{color:var(--ink);background:transparent;}
.unit-btn.ghost:hover{border-color:var(--gold);}

/* ---- ヒーロー（雑誌の表紙） ---- */
.unit-hero{
  position:relative;overflow:hidden;
  padding:0;
}
.unit-hero-wash{
  position:absolute;inset:-25% -12% auto -12%;height:130%;pointer-events:none;
  background:
    radial-gradient(42% 44% at 20% 14%,rgba(255,63,129,0.40),transparent 68%),
    radial-gradient(40% 42% at 82% 8%,rgba(157,123,255,0.34),transparent 70%),
    radial-gradient(52% 40% at 52% 88%,rgba(232,200,138,0.14),transparent 72%);
  filter:blur(10px);
}
/* ざらつきを足して「印刷物」に寄せる */
.unit-hero-grain{
  position:absolute;inset:0;pointer-events:none;opacity:0.5;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,0.10) 1px,transparent 1px);
  background-size:3px 3px;
}
.unit-hero-inner{
  position:relative;z-index:1;
  width:min(var(--container),calc(100% - 36px));margin:0 auto;
  padding-bottom:clamp(52px,8vw,96px);
}
.unit-badge{
  display:inline-block;margin-bottom:clamp(26px,4vw,44px);padding:6px 18px;border-radius:999px;
  font-family:Inter,sans-serif;font-size:0.66rem;font-weight:900;letter-spacing:0.22em;
  color:#ffd9e6;background:rgba(255,63,129,0.12);border:1px solid rgba(255,63,129,0.4);
}
/* キービジュアル: 画像にロゴが入っているので文字のロゴ組みの代わりに置く。
   1画面（ヘッダー分を除く）に全体が収まる幅にし、左右は同じ画像のぼかしで埋める */
.unit-hero-kv{
  position:relative;z-index:1;overflow:hidden;
  display:grid;place-items:center;
  padding:clamp(16px,3vw,40px) 16px;
  border-bottom:1px solid var(--line);
}
.unit-hero-kv-bg{
  position:absolute;inset:-60px;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  filter:blur(48px) saturate(1.25);opacity:0.5;
}
.unit-hero-kv::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,var(--bg) 0%,rgba(7,4,9,0.35) 40%,rgba(7,4,9,0.2) 100%);
}
.unit-hero-visual{
  position:relative;z-index:1;
  width:min(100%,1320px,calc((100svh - 140px) * 1.5));
  overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,0.6),0 0 90px rgba(255,63,129,0.2);
}
.unit-hero-visual img{width:100%;height:auto;}

/* 見出し下の文字組み。.unit-body p{margin:0} に負けないよう .unit-hero-inner を付けて指定する */
.unit-hero-inner{padding-top:clamp(36px,5vw,64px);}
.unit-hero-inner .unit-badge{margin-bottom:clamp(20px,3vw,32px);}
.unit-hero-inner .unit-hero-lead{margin-top:0;}
.unit-hero-inner .unit-hero-tagline{margin-top:16px;}
.unit-hero-lead{
  margin-top:clamp(28px,4vw,48px);
  font-family:var(--serif);
  font-size:clamp(1.3rem,3.4vw,2.5rem);font-weight:700;line-height:1.6;letter-spacing:0.01em;
}
.unit-hero-tagline{
  margin-top:20px;color:var(--muted);
  font-size:clamp(0.84rem,1.5vw,0.98rem);font-weight:700;letter-spacing:0.08em;
}
.unit-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4vw,44px);}

/* 流れる名前 */
.unit-marquee{
  position:relative;z-index:1;overflow:hidden;
  padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(7,4,9,0.5);
}
.unit-marquee-track{display:flex;width:max-content;animation:unit-slide 34s linear infinite;}
.unit-marquee-track span{
  display:inline-flex;align-items:baseline;gap:10px;padding:0 clamp(20px,3vw,44px);
  font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.6rem);font-weight:900;color:var(--c);
  white-space:nowrap;
}
.unit-marquee-track i{
  font-family:Inter,sans-serif;font-style:normal;font-size:0.62rem;font-weight:900;
  letter-spacing:0.28em;color:var(--muted);
}
@keyframes unit-slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.unit-marquee-track{animation:none;}}

/* ---- セクション枠 ---- */
.unit-concept,.unit-members,.unit-setlist,.unit-notice{
  width:min(var(--container),calc(100% - 36px));margin:0 auto;
  padding:clamp(62px,9vw,120px) 0;border-top:1px solid var(--line);
}
.unit-concept{border-top:none;}

/* ---- コンセプト ---- */
.unit-concept-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(32px,4vw,52px);}
.unit-concept-grid article{padding:32px 28px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);}
.unit-num{font-family:Inter,sans-serif;font-size:0.74rem;font-weight:900;letter-spacing:0.28em;color:var(--gold);}
.unit-concept-grid h3{margin:16px 0 12px;font-family:var(--serif);font-size:1.28rem;font-weight:900;line-height:1.45;}
.unit-concept-grid p{color:var(--muted);font-size:0.88rem;}

/* ---- メンバーカード（ポートレート比） ---- */
.unit-member-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);}
.unit-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  transition:transform 260ms cubic-bezier(.2,.7,.3,1),border-color 260ms ease,box-shadow 260ms ease;
}
.unit-card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--c) 66%,transparent);
  box-shadow:0 22px 60px color-mix(in srgb,var(--c) 22%,transparent);
}
.unit-card.is-center{border-color:color-mix(in srgb,var(--c) 42%,transparent);}

.unit-card-visual{
  position:relative;display:grid;place-items:end center;
  aspect-ratio:3 / 4;overflow:hidden;
  background:
    radial-gradient(78% 62% at 50% 108%,color-mix(in srgb,var(--c) 52%,transparent),transparent 72%),
    linear-gradient(168deg,color-mix(in srgb,var(--c) 20%,transparent),transparent 54%),
    #0d0711;
  border-bottom:1px solid var(--line);
}
.unit-card-visual img{width:100%;height:100%;object-fit:cover;}
.unit-silhouette{
  position:relative;z-index:2;height:74%;width:auto;display:flex;align-items:flex-end;
  transition:transform 400ms cubic-bezier(.2,.7,.3,1);
}
.unit-card:hover .unit-silhouette{transform:translateY(-5px) scale(1.02);}
.unit-silhouette svg{
  height:100%;width:auto;display:block;
  fill:color-mix(in srgb,var(--c) 50%,#0b0712);
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--c) 34%,transparent));
}
/* 頭の後ろにスポットライトを当てる */
.unit-card-visual::before{
  position:absolute;left:50%;top:52%;z-index:1;content:"";
  width:62%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 34%,transparent),transparent 66%);
  filter:blur(6px);
}
/* 上から下へ暗く落として「見せきらない」画にする */
.unit-card-visual::after{
  position:absolute;inset:0;content:"";pointer-events:none;
  z-index:3;
  background:linear-gradient(0deg,rgba(7,4,9,0.96) 0%,rgba(7,4,9,0.74) 13%,rgba(7,4,9,0.18) 34%,transparent 56%);
}
.unit-center-badge{
  position:absolute;top:14px;left:14px;z-index:4;padding:4px 12px;border-radius:999px;
  font-family:Inter,sans-serif;font-size:0.6rem;font-weight:900;letter-spacing:0.24em;
  color:#25060f;background:linear-gradient(100deg,var(--gold),#fff6e2);
}
.unit-card-slot{
  position:absolute;top:14px;right:14px;z-index:4;padding:3px 10px;border-radius:999px;
  font-size:0.62rem;font-weight:800;letter-spacing:0.08em;
  color:var(--muted);background:rgba(7,4,9,0.7);border:1px dashed var(--line);
}
.unit-card-en{
  position:absolute;left:0;right:0;top:13%;z-index:1;
  text-align:center;line-height:1;
  font-family:Inter,sans-serif;font-size:clamp(2rem,4.6vw,3.3rem);font-weight:900;letter-spacing:0.16em;
  color:color-mix(in srgb,var(--c) 34%,transparent);
}
.unit-card-plate{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 22px 20px;}
.unit-card-position{font-size:0.64rem;font-weight:900;letter-spacing:0.2em;color:var(--c);}
.unit-card-name{
  margin-top:6px;font-family:var(--serif);
  font-size:clamp(2rem,4vw,2.7rem);font-weight:900;line-height:1.08;letter-spacing:0.04em;
}

.unit-card-body{flex:1;padding:24px 22px 26px;}
.unit-card-catch{
  padding-left:14px;border-left:2px solid var(--c);
  font-family:var(--serif);font-size:0.98rem;font-weight:700;line-height:1.7;
}
.unit-card-profile{margin-top:16px;color:var(--muted);font-size:0.84rem;}

/* アイドルサイトのプロフィール欄に技術の話を流し込む＝この案の本体 */
.unit-card-stats{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  display:grid;gap:9px;
}
.unit-card-stats>div{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:10px;align-items:baseline;}
.unit-card-stats dt{font-size:0.68rem;font-weight:800;letter-spacing:0.08em;color:var(--muted);}
.unit-card-stats dd{font-size:0.8rem;font-weight:700;color:var(--ink);}

/* ---- 最新記事 ---- */
.unit-post-list{display:grid;gap:2px;}
.unit-post{
  display:flex;align-items:baseline;gap:clamp(14px,2.4vw,28px);
  padding:22px 18px;border-radius:var(--radius);transition:background 180ms ease;
}
.unit-post:hover{background:var(--panel);}
.unit-post-num{flex:0 0 auto;font-family:Inter,sans-serif;font-size:0.86rem;font-weight:900;letter-spacing:0.06em;color:var(--gold);}
.unit-post-body{min-width:0;}
.unit-post-title{font-family:var(--serif);font-size:clamp(1.02rem,2vw,1.32rem);font-weight:700;line-height:1.55;}
.unit-post-title:hover{color:var(--pink);}
.unit-post-meta{margin-top:6px;font-size:0.74rem;color:var(--muted);}
.unit-dot{margin:0 8px;opacity:0.5;}
.unit-empty{color:var(--muted);}
.unit-more{margin-top:30px;}

/* ---- 注記 ---- */
.unit-notice{border-bottom:1px solid var(--line);}
.unit-notice h2{font-size:1rem;font-weight:900;margin-bottom:12px;}
.unit-notice p{color:var(--muted);font-size:0.84rem;max-width:62em;}
.unit-notice strong{color:var(--ink);}

/* ---- フッター ---- */
.unit-footer{width:min(var(--container),calc(100% - 36px));margin:0 auto;padding:clamp(44px,6vw,78px) 0 clamp(52px,7vw,86px);}
.unit-footer-name{font-family:var(--serif);font-size:1.7rem;font-weight:900;}
.unit-footer-name span{margin-left:14px;font-family:"Noto Sans JP",sans-serif;font-size:0.68rem;font-weight:800;letter-spacing:0.32em;color:var(--muted);}
.unit-footer-note{margin-top:16px;max-width:62em;color:var(--muted);font-size:0.78rem;line-height:1.95;}
.unit-footer-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.unit-footer-note strong{color:var(--pink);}
.unit-footer-links{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px;font-size:0.76rem;font-weight:700;color:var(--muted);}
.unit-footer-links a:hover{color:var(--ink);}

/* ---- レスポンシブ ---- */
@media (max-width:1040px){
  .unit-concept-grid,.unit-member-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .unit-header{padding:12px 16px;}
  .unit-nav{gap:14px;font-size:0.68rem;}
  .unit-concept,.unit-members,.unit-setlist,.unit-notice,.unit-footer,.unit-hero-inner{
    width:min(100% - 32px,var(--container));
  }
  .unit-concept-grid,.unit-member-grid{grid-template-columns:1fr;}
  .unit-hero-lead br{display:none;}
  .unit-card-stats>div{grid-template-columns:6.4em minmax(0,1fr);}
  .unit-post{padding:18px 10px;}
}

/* ==================================================================
   モーション（unit-motion.js とセット）
   - 動きはすべて html.unit-motion の下に書く。このクラスは layouts/idol.php の
     先頭スクリプトが「動きを減らす」設定でないときだけ付ける。
   - スクロールで出す要素の「隠した状態」は .unit-reveal（JSが付ける）に限る。
     JSが読めなかったときに中身が消えたままにならないようにするため。
   - transform はホバー・傾きで使うので、出現の移動は translate プロパティで行う。
   ================================================================== */

/* 読んだ位置のバー */
.unit-progress{
  position:fixed;top:0;left:0;right:0;z-index:60;height:2px;pointer-events:none;
  transform-origin:left;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--gold),var(--pink) 50%,var(--violet));
  box-shadow:0 0 12px rgba(255,63,129,0.6);
}

/* ロゴの色がゆっくり流れる */
.unit-motion .unit-brand{background-size:220% 100%;animation:unit-hue-pan 8s ease-in-out infinite alternate;}
@keyframes unit-hue-pan{from{background-position:0% 50%;}to{background-position:100% 50%;}}

/* ---- ヒーロー: キービジュアルの登場 ---- */
.unit-motion .unit-hero-wash{animation:unit-wash-drift 22s ease-in-out infinite alternate;}
@keyframes unit-wash-drift{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1);}
  50%{transform:translate3d(3%,-2%,0) rotate(4deg) scale(1.06);}
  100%{transform:translate3d(-3%,2%,0) rotate(-3deg) scale(1.02);}
}
.unit-motion .unit-hero-kv-bg{animation:unit-kv-bg-in 1.6s ease-out both,unit-kv-bg-breathe 9s ease-in-out 1.6s infinite alternate;}
@keyframes unit-kv-bg-in{from{opacity:0;}to{opacity:0.5;}}
@keyframes unit-kv-bg-breathe{from{opacity:0.5;}to{opacity:0.72;}}

.unit-motion .unit-hero-visual{animation:unit-kv-in 1.5s cubic-bezier(.16,.84,.24,1) 0.1s both;}
@keyframes unit-kv-in{
  0%{opacity:0;transform:scale(1.07);filter:blur(22px) brightness(1.6);clip-path:inset(12% 18% round 24px);}
  55%{opacity:1;filter:blur(2px) brightness(1.15);}
  100%{opacity:1;transform:scale(1);filter:none;clip-path:inset(0 round var(--radius));}
}
/* 登場後はゆっくり寄る */
.unit-motion .unit-hero-visual img{animation:unit-kenburns 20s ease-in-out 1.6s infinite alternate;transform-origin:50% 40%;}
@keyframes unit-kenburns{from{transform:scale(1);}to{transform:scale(1.07);}}
/* 光がななめに走る */
.unit-motion .unit-hero-visual::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,0.28) 48%,rgba(255,200,225,0.14) 52%,transparent 64%);
  transform:translateX(-120%);mix-blend-mode:screen;
  animation:unit-shine 7s ease-in-out 1.4s infinite;
}
@keyframes unit-shine{0%{transform:translateX(-120%);}26%,100%{transform:translateX(120%);}}

/* キラキラ（canvas は JS が差し込む） */
.unit-sparkle{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;}

/* ---- スクロールで出てくる ---- */
.unit-motion .unit-reveal{
  opacity:0;translate:0 34px;
  transition:opacity 900ms cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate 900ms cubic-bezier(.2,.7,.2,1) var(--d,0ms),filter 900ms ease var(--d,0ms);
}
.unit-motion .unit-reveal.is-in{opacity:1;translate:none;}

/* 大見出しはぼかしから */
.unit-motion .unit-h2.unit-reveal{filter:blur(12px);translate:0 0.5em;}
.unit-motion .unit-h2.unit-reveal.is-in{filter:none;translate:none;}

/* ラベルの横に線が伸びる */
.unit-label{display:flex;align-items:center;gap:14px;}
.unit-label::after{
  content:"";height:1px;width:56px;
  background:linear-gradient(90deg,var(--pink),transparent);
  transform-origin:left;
}
.unit-motion .unit-label.unit-reveal::after{transform:scaleX(0);transition:transform 1100ms cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + 250ms);}
.unit-motion .unit-label.unit-reveal.is-in::after{transform:scaleX(1);}

/* キャッチコピーは1文字ずつ */
.unit-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.unit-motion .unit-char{
  display:inline-block;opacity:0;translate:0 0.7em;filter:blur(8px);
  transition:opacity 700ms ease,translate 700ms cubic-bezier(.2,.8,.2,1),filter 700ms ease;
  transition-delay:calc(var(--i) * 45ms + 150ms);
}
.unit-motion .is-in .unit-char{opacity:1;translate:none;filter:none;}

/* コンセプト: 上辺に金の線が引かれる */
.unit-concept-grid article{position:relative;overflow:hidden;}
.unit-concept-grid article::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--pink),transparent);
  transform-origin:left;
}
.unit-motion .unit-concept-grid article.unit-reveal::before{transform:scaleX(0);transition:transform 1200ms cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + 300ms);}
.unit-motion .unit-concept-grid article.unit-reveal.is-in::before{transform:scaleX(1);}

/* ---- メンバーカード ---- */
.unit-card{position:relative;}
/* 出てくるとき、写真は大きめ・色なしから */
.unit-motion .unit-card.unit-reveal .unit-card-visual img{
  scale:1.18;filter:saturate(0) brightness(0.7);
  transition:scale 1600ms cubic-bezier(.2,.7,.2,1) var(--d,0ms),filter 1400ms ease calc(var(--d,0ms) + 200ms);
}
.unit-motion .unit-card.unit-reveal.is-in .unit-card-visual img{scale:1;filter:none;}
/* 英字の名前は字間がしまりながら出る */
.unit-motion .unit-card.unit-reveal .unit-card-en{
  opacity:0;letter-spacing:0.7em;
  transition:opacity 1200ms ease calc(var(--d,0ms) + 300ms),letter-spacing 1400ms cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + 300ms);
}
.unit-motion .unit-card.unit-reveal.is-in .unit-card-en{opacity:1;letter-spacing:0.16em;}
/* 画像未設定のシルエットはゆっくり呼吸する */
.unit-motion .unit-silhouette{animation:unit-float 5s ease-in-out infinite alternate;}
@keyframes unit-float{from{translate:0 0;}to{translate:0 -8px;}}

/* マウスの向きに合わせて傾く＋光が追いかける（マウス操作のときだけ JS が --rx/--ry/--mx/--my を入れる） */
.unit-motion .unit-card{
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
}
.unit-motion .unit-card:hover{--lift:-6px;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift));}
/* 出現（opacity/translate）とホバー（transform/枠/影）の transition を1本にまとめる */
.unit-motion .unit-card.unit-reveal{
  transition:opacity 900ms cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate 900ms cubic-bezier(.2,.7,.2,1) var(--d,0ms),
    transform var(--tt,260ms) cubic-bezier(.2,.7,.3,1),border-color 260ms ease,box-shadow 260ms ease;
}
.unit-card.is-tilting{--tt:120ms;}
.unit-card-glare{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--c) 30%,transparent),transparent 60%);
  mix-blend-mode:screen;transition:opacity 300ms ease;
}
.unit-card:hover .unit-card-glare{opacity:1;}
.unit-card-visual img{transition:transform 600ms cubic-bezier(.2,.7,.3,1);}
.unit-card:hover .unit-card-visual img{transform:scale(1.04);}

/* ---- 流れる名前: スクロールの勢いで傾く ---- */
.unit-motion .unit-marquee-track span{transform:skewX(var(--skew,0deg));transition:transform 300ms ease-out;}
.unit-marquee:hover .unit-marquee-track{animation-play-state:paused;}

/* ---- ボタン: 光がときどき走る ---- */
.unit-btn.primary{position:relative;overflow:hidden;}
.unit-motion .unit-btn.primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.55) 50%,transparent 70%);
  transform:translateX(-130%);animation:unit-btn-shine 4.5s ease-in-out 2s infinite;
}
@keyframes unit-btn-shine{0%{transform:translateX(-130%);}30%,100%{transform:translateX(130%);}}

/* ---- 記事リスト: 下線が伸びる ---- */
.unit-post-title{
  background-image:linear-gradient(90deg,var(--pink),var(--violet));
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size 400ms cubic-bezier(.2,.7,.2,1),color 180ms ease;
}
.unit-post-title:hover{background-size:100% 1px;}
.unit-motion .unit-post.unit-reveal{
  translate:-34px 0;
  transition:opacity 900ms cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate 900ms cubic-bezier(.2,.7,.2,1) var(--d,0ms),background 180ms ease;
}
.unit-motion .unit-post.unit-reveal.is-in{translate:none;}

/* 念のため: OS側で「動きを減らす」になったら全部止める */
@media (prefers-reduced-motion:reduce){
  .unit-motion *,.unit-motion *::before,.unit-motion *::after{animation:none !important;transition:none !important;}
  .unit-motion .unit-reveal,.unit-motion .unit-char{opacity:1 !important;translate:none !important;filter:none !important;}
  .unit-sparkle,.unit-progress{display:none;}
}

/* ==== 詳細プロフィール（カードを押すと開くモーダル）。開閉は assets/unit-profile.js ==== */
.unit-card.is-clickable{cursor:pointer;}
.unit-card-more{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:8px 16px;
  font:inherit;font-family:Inter,sans-serif;font-size:0.68rem;font-weight:900;letter-spacing:0.24em;line-height:1.4;
  color:var(--c);background:transparent;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:999px;
  transition:background 200ms ease,color 200ms ease;
}
.unit-card-more[hidden]{display:none;}
.unit-card:hover .unit-card-more,.unit-card-more:focus-visible{color:#140812;background:var(--c);}
.unit-card-more:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

/* 開いている間は後ろのページをスクロールさせない */
html:has(.unit-modal[open]){overflow:hidden;}
.unit-modal{
  width:min(1080px,calc(100% - 48px));max-width:none;max-height:calc(100dvh - 48px);
  margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;
  color:var(--ink);background:var(--bg-2);
  border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:8px;
  box-shadow:0 30px 120px color-mix(in srgb,var(--c) 22%,transparent);
}
.unit-modal::backdrop{background:rgba(7,4,9,0.8);backdrop-filter:blur(10px);}
/* 閉じるボタンはスクロールしても右上に残す（高さを打ち消して中身に重ねる） */
.unit-modal-close{
  position:sticky;top:14px;z-index:6;display:grid;place-items:center;
  width:44px;height:44px;margin:14px 14px -58px auto;padding:0;
  color:var(--ink);background:rgba(7,4,9,0.72);cursor:pointer;
  border:1px solid var(--line);border-radius:999px;backdrop-filter:blur(8px);
}
.unit-modal-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.unit-modal-close:hover{color:var(--c);border-color:var(--c);}
.unit-modal-close:focus-visible{outline:2px solid var(--c);outline-offset:2px;}

.unit-modal-grid{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);}
/* 写真は左に貼り付けたまま、右の文章だけスクロールする */
.unit-modal-visual{
  position:sticky;top:0;align-self:start;overflow:hidden;
  display:grid;place-items:end center;height:min(calc(100dvh - 50px),860px);
  background:
    radial-gradient(78% 62% at 50% 108%,color-mix(in srgb,var(--c) 52%,transparent),transparent 72%),
    linear-gradient(168deg,color-mix(in srgb,var(--c) 20%,transparent),transparent 54%),
    #0d0711;
  border-right:1px solid var(--line);
}
.unit-modal-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;}
.unit-modal-visual::after{
  position:absolute;inset:0;content:"";pointer-events:none;
  background:linear-gradient(0deg,rgba(7,4,9,0.9) 0%,rgba(7,4,9,0.35) 22%,transparent 46%);
}
.unit-modal-en{
  position:absolute;left:24px;right:24px;bottom:18px;z-index:2;line-height:1;
  font-family:Inter,sans-serif;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:900;letter-spacing:0.12em;
  color:color-mix(in srgb,var(--c) 72%,transparent);
}

.unit-modal-content{padding:clamp(30px,4.4vw,56px) clamp(22px,4vw,52px) clamp(34px,4.4vw,56px);}
.unit-modal-position{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-right:48px;
  font-size:0.68rem;font-weight:900;letter-spacing:0.2em;color:var(--c);
}
.unit-modal-center{
  padding:3px 11px;border-radius:999px;font-family:Inter,sans-serif;font-size:0.58rem;letter-spacing:0.24em;
  color:#25060f;background:linear-gradient(100deg,var(--gold),#fff6e2);
}
.unit-modal-name{
  margin-top:10px;font-family:var(--serif);
  font-size:clamp(2.2rem,4.6vw,3.4rem);font-weight:900;line-height:1.1;letter-spacing:0.04em;
}
.unit-modal-kana{margin-top:8px;font-size:0.74rem;font-weight:700;letter-spacing:0.14em;color:var(--muted);}
.unit-modal-nick{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:0.84rem;color:var(--muted);}
.unit-modal-nick strong{color:var(--ink);font-weight:800;}
.unit-modal-mark{font-size:1.25rem;line-height:1;}
.unit-modal-tagline{
  margin-top:20px;padding:12px 16px;border-radius:6px;
  font-size:0.92rem;font-weight:700;line-height:1.75;
  background:color-mix(in srgb,var(--c) 11%,transparent);
}
.unit-modal-catch{
  margin-top:18px;padding-left:14px;border-left:2px solid var(--c);
  font-family:var(--serif);font-size:1.05rem;font-weight:700;line-height:1.7;
}

.unit-modal-section{margin-top:clamp(32px,4vw,42px);}
.unit-modal-section h3{
  display:flex;align-items:baseline;gap:12px;margin-bottom:14px;
  font-family:var(--serif);font-size:1.12rem;font-weight:900;line-height:1.4;
}
.unit-modal-section h3 span{font-family:Inter,sans-serif;font-size:0.6rem;font-weight:900;letter-spacing:0.32em;color:var(--c);}
.unit-modal-table{border-top:1px solid var(--line);}
.unit-modal-table>div{
  display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.unit-modal-table dt{font-size:0.72rem;font-weight:800;letter-spacing:0.06em;color:var(--muted);}
.unit-modal-table dd{font-size:0.88rem;font-weight:500;line-height:1.75;}
.unit-modal-story p{font-size:0.92rem;line-height:2.05;}
.unit-modal-story p+p{margin-top:1em;}
.unit-modal-text{font-size:0.88rem;color:var(--muted);}
.unit-modal-traits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.unit-modal-traits li{
  padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--panel);
  font-size:0.8rem;line-height:1.7;color:var(--muted);
}
.unit-modal-traits strong{display:block;margin-bottom:4px;font-size:0.92rem;font-weight:800;color:var(--ink);}
.unit-modal-traits strong::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--c);vertical-align:middle;}
.unit-modal-sub{margin-top:20px;font-size:0.74rem;font-weight:800;letter-spacing:0.06em;color:var(--muted);}
.unit-modal-teach{margin-top:10px;display:grid;gap:8px;counter-reset:teach;}
.unit-modal-teach li{
  position:relative;padding-left:34px;font-size:0.88rem;line-height:1.75;counter-increment:teach;
}
.unit-modal-teach li::before{
  position:absolute;left:0;top:0.12em;content:counter(teach);
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-family:Inter,sans-serif;font-size:0.68rem;font-weight:900;color:#140812;background:var(--c);
}
.unit-modal-lines li{
  padding:12px 0;border-bottom:1px dashed var(--line);
  font-family:var(--serif);font-size:0.96rem;font-weight:700;line-height:1.75;
}
.unit-modal-lines li:first-child{border-top:1px dashed var(--line);}
.unit-modal-message{
  margin-top:16px;padding:16px 18px;border-radius:6px;text-align:center;
  font-family:var(--serif);font-size:0.98rem;font-weight:700;line-height:1.8;
  background:color-mix(in srgb,var(--c) 12%,transparent);
}
.unit-modal-updated{margin-top:8px;text-align:right;font-size:0.7rem;color:var(--muted);}
.unit-modal-posts li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.unit-modal-posts li:first-child{border-top:1px solid var(--line);}
.unit-modal-posts a{font-family:var(--serif);font-size:0.95rem;font-weight:700;line-height:1.6;}
.unit-modal-posts a:hover{color:var(--c);}
.unit-modal-posts time{flex:0 0 auto;font-size:0.72rem;color:var(--muted);}
.unit-modal-note{
  margin-top:30px;padding:12px;text-align:center;font-size:0.76rem;color:var(--muted);
  border:1px dashed var(--line);border-radius:6px;
}

@media (max-width:760px){
  .unit-modal{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;}
  .unit-modal-grid{grid-template-columns:1fr;}
  .unit-modal-visual{position:relative;height:auto;aspect-ratio:4 / 5;max-height:64dvh;border-right:0;border-bottom:1px solid var(--line);}
  .unit-modal-traits{grid-template-columns:1fr;}
  .unit-modal-table>div{grid-template-columns:6.8em minmax(0,1fr);gap:10px;}
  .unit-modal-posts li{flex-direction:column;gap:2px;}
}

@media (prefers-reduced-motion:no-preference){
  .unit-modal[open]{animation:unit-modal-in 420ms cubic-bezier(.2,.7,.2,1);}
  .unit-modal[open]::backdrop{animation:unit-fade-in 300ms ease;}
}
@keyframes unit-modal-in{from{opacity:0;transform:translateY(24px) scale(0.98);}to{opacity:1;transform:none;}}
@keyframes unit-fade-in{from{opacity:0;}to{opacity:1;}}