/* =========================================================
   鈴木夢 ポートフォリオ
   様式：方眼紙の上に、カードを並べた作品ノート。
   色と書体は :root に集約。ここだけ変えれば全体が変わる。
   ========================================================= */
:root{
  --bg:#FFFDFE;          /* 紙 */
  --grid:#F3E9EE;        /* 方眼の線 */
  --card:#FFFFFF;        /* カード面 */
  --ink:#3A2F36;         /* 文字 */
  --ink-2:#8B7C85;       /* 補助文字 */
  --rule:#F0DDE6;        /* 罫線・影 */
  --pink:#E8548C;        /* 主役の色 */
  --pink-soft:#FDE8F0;
  --purple:#9B8BD6;      /* second */
  --purple-soft:#EFEBFA;

  --f-d:"Kiwi Maru", serif;                       /* 見出し */
  --f-b:"M PLUS Rounded 1c", system-ui, sans-serif; /* 本文 */
  --f-m:"IBM Plex Mono", ui-monospace, monospace;   /* ラベル・数字 */

  --gutter:clamp(18px, 5vw, 56px);
  --measure:34em;
}
/* ダークモード。OS設定に追従し、[data-theme] があればそちらを優先 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1C1620; --grid:#2A2130; --card:#241C2A; --ink:#F3E9EF; --ink-2:#A797A4;
    --rule:#392E42; --pink:#FF87B4; --pink-soft:#33202A; --purple:#B7A8EC; --purple-soft:#261F35;
  }
}
:root[data-theme="dark"]{
  --bg:#1C1620; --grid:#2A2130; --card:#241C2A; --ink:#F3E9EF; --ink-2:#A797A4;
  --rule:#392E42; --pink:#FF87B4; --pink-soft:#33202A; --purple:#B7A8EC; --purple-soft:#261F35;
}
:root[data-theme="light"]{
  --bg:#FFFDFE; --grid:#F3E9EE; --card:#FFFFFF; --ink:#3A2F36; --ink-2:#8B7C85;
  --rule:#F0DDE6; --pink:#E8548C; --pink-soft:#FDE8F0; --purple:#9B8BD6; --purple-soft:#EFEBFA;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; color:var(--ink); font-family:var(--f-b);
  font-size:16px; line-height:1.9;
  /* 方眼紙。64pxマスの薄い罫 */
  background:
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 64px),
    var(--bg);
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

.wrap{ max-width:1120px; margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{ font-family:var(--f-m); font-size:11px; letter-spacing:.14em; color:var(--ink-2); }
.num{ font-family:var(--f-m); font-variant-numeric:tabular-nums; }

/* ── ヘッダー ──
   ロゴの左にドット絵、ナビはホバーで下線が伸びる。
   右端の CONTACT だけピル型にして、行き先をひとつに絞る。 */
.site-head{
  position:sticky; top:0; z-index:10;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:2px dotted var(--rule);
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px 16px; padding-block:11px; flex-wrap:wrap;
}
.site-head .logo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-d); font-size:16px; text-decoration:none; line-height:1;
}
.site-head .logo img{
  width:26px; height:auto; image-rendering:pixelated;
  transition:transform .25s cubic-bezier(.2,1.4,.4,1);
}
.site-head .logo:hover img{ transform:translateY(-3px) rotate(-6deg); }
.site-head .logo small{
  font-family:var(--f-m); font-size:9.5px; letter-spacing:.14em; color:var(--ink-2);
  border:1px solid var(--rule); border-radius:999px; padding:2px 7px;
}
.site-nav{
  position:relative; display:flex; align-items:center;
  gap:clamp(10px,2.4vw,20px);
  padding-bottom:15px;          /* 下に矢印のレールを置くぶん */
}
.site-nav a{
  position:relative; padding-block:4px;
  font-family:var(--f-m); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-2);
  transition:color .25s;
}
/* 下線がホバーで左から伸びる。scaleXではなくbackground-sizeで伸ばす
   （scaleXは折り返しで崩れるため） */
.site-nav a{
  background-image:linear-gradient(var(--pink), var(--pink));
  background-repeat:no-repeat; background-position:left bottom;
  background-size:0% 2px; transition:background-size .25s, color .25s;
}
.site-nav a:hover{ background-size:100% 2px; color:var(--ink); }
/* いま見ている場所。矢印の先が届いた項目が濃くなる */
.site-nav a.here{ color:var(--ink); font-weight:700; }

/* ── ナビの下をのびていく矢印 ──
   いまページのどこにいるかを、矢印の長さで見せる。
   先端の座標は motion.js が --na-tip / --na-len に入れる。 */
.nav-arrow{
  position:absolute; left:0; right:0; bottom:2px; height:12px;
  color:var(--pink); pointer-events:none;
}
/* 進む先を示すレール（点線）。TOPの中心からCONTACTの中心まで */
.nav-arrow::before{
  content:''; position:absolute; top:50%; margin-top:-1px;
  left:var(--na-start,0px); width:var(--na-full,0px); height:2px;
  background-image:radial-gradient(circle,
    color-mix(in srgb, var(--pink) 38%, transparent) 1px, transparent 1.2px);
  background-size:6px 2px; background-repeat:repeat-x;
}
.na-line{
  position:absolute; top:50%; left:var(--na-start,0px);
  width:var(--na-len,0px); height:2px; margin-top:-1px;
  background:var(--pink); border-radius:2px;
}
.na-head{
  position:absolute; top:50%; left:var(--na-tip,0px);
  width:11px; height:13px; margin-top:-6.5px; margin-left:-3px;
}

/* ── 表紙：プロフィールカード＋見出し ── */
.cover{ padding-block:clamp(40px,8vw,88px); }
.cover .cover-grid{ display:grid; gap:clamp(24px,5vw,52px); grid-template-columns:1fr; align-items:center; }
@media (min-width:860px){ .cover .cover-grid{ grid-template-columns:minmax(0,320px) minmax(0,1fr); } }

.pcard{
  background:linear-gradient(150deg, var(--purple-soft), var(--pink-soft));
  border:3px solid var(--card); border-radius:18px; padding:14px;
  box-shadow:0 10px 0 -2px var(--rule), 0 18px 30px -18px rgba(0,0,0,.35);
  transform:rotate(-2.2deg);
}
.pcard-in{ background:var(--card); border-radius:12px; padding:18px 18px 22px; text-align:center; }
.pcard .lv{ font-family:var(--f-m); font-size:10px; letter-spacing:.14em; color:var(--ink-2); margin:0; }
.pcard h2{ font-family:var(--f-d); font-size:1.45rem; margin:.25em 0 .1em; }
.pcard .en{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.2em; color:var(--ink-2); margin:0; }
.pcard ul{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.pcard li{ font-size:11px; font-weight:700; background:var(--pink-soft); color:var(--pink); border-radius:999px; padding:3px 10px; }

.cover h1{
  /* 「紙も、Webも、映像も。」が狭い画面でも1行に収まる大きさ */
  font-family:var(--f-d); font-size:clamp(1.5rem,7.2vw,3.2rem);
  line-height:1.35; margin:0 0 .5em; text-wrap:balance;
}
/* 860〜1120pxは2カラムになって右側が狭いので、その帯だけ見出しを抑える
   （この幅で「紙も、Webも、映像も。」が2行に折り返すのを防ぐ） */
@media (min-width:860px) and (max-width:1200px){
  .cover h1{ font-size:clamp(1.5rem,4vw,3.2rem); }
}
.cover h1 mark{ background:linear-gradient(transparent 62%, var(--pink-soft) 62%); color:inherit; }
.cover h1 .en{
  display:block; font-family:var(--f-m); font-size:clamp(.66rem,1.8vw,.8rem);
  letter-spacing:.26em; color:var(--ink-2); margin-top:1.6em;
}
.cover .lead{ max-width:var(--measure); color:var(--ink-2); font-size:clamp(.95rem,1.7vw,1.05rem); }
.cover .meta{ margin-top:1.8em; display:flex; flex-wrap:wrap; gap:6px 10px; padding:0; list-style:none; }
.cover .meta span{ font-family:var(--f-m); font-size:11px; color:var(--ink-2); background:var(--card);
  border:1px solid var(--rule); border-radius:999px; padding:3px 11px; }

/* ── セクション ── */
.section{ padding-block:clamp(40px,7vw,90px); }
.section + .section{ border-top:2px dotted var(--rule); }
.section-head{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(20px,4vw,38px); flex-wrap:wrap; }
.section-head h2{ font-family:var(--f-d); font-size:clamp(1.3rem,3.2vw,1.85rem); margin:0; }
.section-head .eyebrow{ order:-1; width:100%; }
@media (min-width:600px){ .section-head .eyebrow{ order:0; width:auto; } }
.section-head::after{
  content:""; flex:1; min-width:40px; height:2px;
  background:repeating-linear-gradient(90deg, var(--rule) 0 6px, transparent 6px 12px);
}

/* ── 作品カード ── */
.works{ display:grid; gap:clamp(20px,3.5vw,32px); grid-template-columns:1fr; }
@media (min-width:800px){ .works{ grid-template-columns:1fr 1fr; } }
.work{
  background:var(--card); border:2px solid var(--rule); border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  box-shadow:0 6px 0 -1px var(--rule);
  transition:transform .2s, box-shadow .2s;
}
.work:hover{ transform:translateY(-4px); box-shadow:0 12px 0 -2px var(--pink-soft); }
.work-fig{ aspect-ratio:16/10; overflow:hidden; background:var(--grid); position:relative; }
.work-fig img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.work-body{ padding:18px 20px 22px; position:relative; flex:1; display:flex; flex-direction:column; }
.work-index{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.work-index .num{
  position:absolute; top:-20px; right:16px;
  background:var(--pink); color:#fff; font-size:13px; font-weight:500;
  border-radius:999px; width:38px; height:38px; display:grid; place-content:center;
  border:3px solid var(--card);
}
.work-index .cat{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.1em; color:var(--purple); }
.work-index .year{ font-family:var(--f-m); font-size:10.5px; color:var(--ink-2); }
.work-body h3{ font-family:var(--f-d); font-size:1.12rem; margin:.4em 0 .5em; line-height:1.45; }
.work-body p{ margin:0 0 1em; color:var(--ink-2); font-size:.88rem; }
.tags{ display:flex; flex-wrap:wrap; gap:5px; list-style:none; padding:0; margin:0 0 1em; }
.tags li{ font-family:var(--f-m); font-size:10px; color:var(--ink-2); background:var(--grid);
  border-radius:6px; padding:3px 8px; }
.more{ font-family:var(--f-m); font-size:11px; letter-spacing:.1em; color:var(--pink); margin-top:auto; }
.work:hover .more{ text-decoration:underline; text-underline-offset:4px; }

/* ── 数字 ── */
.figures{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); }
.figures div{
  background:var(--card); border:2px solid var(--rule); border-radius:14px;
  padding:clamp(16px,3vw,24px); box-shadow:0 5px 0 -1px var(--rule);
}
.figures dt{ font-family:var(--f-m); font-size:10.5px; letter-spacing:.1em; color:var(--ink-2); }
.figures dd{
  margin:.3em 0 0; font-family:var(--f-d); font-size:clamp(1.5rem,4vw,2.2rem);
  font-variant-numeric:tabular-nums; line-height:1.2; color:var(--pink);
}
.figures dd small{ font-size:.42em; font-family:var(--f-b); color:var(--ink-2); margin-left:.4em; }

/* ── 略歴 ── */
.cols{ display:grid; gap:clamp(24px,5vw,56px); grid-template-columns:1fr; }
@media (min-width:800px){ .cols{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.prose{ max-width:var(--measure); }
.prose p{ margin:0 0 1.3em; }
.ledger{ width:100%; border-collapse:collapse; font-size:.9rem; table-layout:fixed; }
.ledger th,.ledger td{ text-align:left; padding:11px 0; border-bottom:2px dotted var(--rule); vertical-align:top; }
.ledger th{ font-weight:400; color:var(--purple); font-family:var(--f-m); font-size:11px;
  letter-spacing:.06em; padding-right:16px; width:38%; }
.ledger td{ word-break:break-word; }

/* ── 連絡先 ── */
.contact a{ font-family:var(--f-d); font-size:clamp(1.1rem,3.4vw,1.7rem); text-decoration:none;
  border-bottom:3px solid var(--pink-soft); }
.contact a:hover{ color:var(--pink); border-bottom-color:var(--pink); }

/* ── フッター ── */
.site-foot{ padding-block:34px; border-top:2px dotted var(--rule); }
.site-foot p{ margin:0; font-family:var(--f-m); font-size:11px; color:var(--ink-2); text-align:center; }

/* ── 詳細ページ ── */
.detail-head{ padding-block:clamp(36px,7vw,84px) clamp(22px,4vw,44px); }
.detail-head .work-index{ position:relative; }
.detail-head .work-index .num{
  position:static; width:auto; height:auto; border:0; border-radius:999px;
  padding:3px 13px; font-size:12px; letter-spacing:.06em;
}
.detail-head h1{ font-family:var(--f-d); font-size:clamp(1.6rem,5vw,2.8rem);
  line-height:1.4; margin:.5em 0 .5em; text-wrap:balance; }
.detail-head .lead{ color:var(--ink-2); }
.shot{ border:2px solid var(--rule); border-radius:14px; overflow:hidden; box-shadow:0 6px 0 -1px var(--rule); }
.embed{ border:2px solid var(--rule); border-radius:14px; overflow:hidden; background:var(--card);
  box-shadow:0 6px 0 -1px var(--rule); }
.embed iframe{ display:block; width:100%; max-width:100%; border:0; }
.back{ font-family:var(--f-m); font-size:11px; letter-spacing:.1em; text-decoration:none; color:var(--ink-2); }
.back:hover{ color:var(--pink); }
code{ font-family:var(--f-m); font-size:.85em; background:var(--grid); padding:1px 5px; border-radius:4px; }

/* ── 小さい画面の調整 ── */
@media (max-width:620px){
  .site-head .wrap{ padding-block:10px; }
  .site-nav{ gap:11px; padding-bottom:13px; }
  .site-nav a{ font-size:9.5px; letter-spacing:.06em; }
  .nav-arrow{ height:10px; }
  .na-head{ width:10px; height:12px; margin-top:-6px; }
  .pcard{ transform:rotate(-1.4deg); }
  .ai-tabs{ gap:9px 8px; }
  .ai-tab{ font-size:.82rem; padding:7px 12px; }
  .ai-item{ width:86%; }
  .ledger th{ width:42%; padding-right:12px; }
}

/* =========================================================
   ローディング画面
   既存ポートフォリオ表紙のゲームボーイを起動させる演出。
   ・JSなし。CSSアニメーションだけで消える
   ・アニメーションを切っている人には一瞬で消える（見えない）
   ・素材が白背景なので、画面の地色も白で合わせて境目を消している
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-content:center; justify-items:center; gap:22px;
  background:var(--bg);
  animation:loader-out .5s ease 2.2s forwards;
}
.loader img{
  width:min(44vw, 200px); height:auto;
  animation:loader-pop .6s cubic-bezier(.2,1.3,.4,1) both;
}
/* 画面の光が走る（電源を入れた感じ） */
.loader .scan{
  position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, rgba(232,84,140,.16) 50%, transparent 55%);
  background-size:100% 220px;
  animation:loader-scan 1.1s linear 2;
}
.loader p{
  margin:0; font-family:var(--f-m); font-size:11px; letter-spacing:.24em; color:#B6A5B0;
}
.loader p::after{ content:""; animation:loader-dots 1s steps(4,end) infinite; }

@keyframes loader-pop{ from{ opacity:0; transform:translateY(14px) scale(.94) rotate(-4deg); }
                       to  { opacity:1; transform:none; } }
@keyframes loader-scan{ from{ background-position:0 -220px; } to{ background-position:0 100vh; } }
@keyframes loader-dots{ 0%{content:"";} 25%{content:"・";} 50%{content:"・・";} 75%{content:"・・・";} }
@keyframes loader-out{ to{ opacity:0; visibility:hidden; } }

/* 動きを減らす設定の人には出さない */
@media (prefers-reduced-motion: reduce){
  .loader{ display:none; }
}


/* ── AIの使い方セクション ── */
/* ── AIとの仕事のしかた：1枚ずつめくるカード ──
   5つの言葉をタブにして、いま見ているものの周りだけキラキラさせる。
   カードの入れ替えは Swiper の creative effect と同じ考え方で、
   「出ていく側は左へ倒れながら消える／入ってくる側は右から起き上がる」。
   ライブラリは使わず、transform と transition だけで組んでいる。 */
.ai-deck{ --deck:.55s; }

.ai-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; margin-bottom:20px; }
.ai-tab{
  position:relative; font:inherit; font-family:var(--f-d); font-size:.92rem; line-height:1;
  background:transparent; border:2px solid var(--rule); border-radius:999px;
  padding:8px 16px; color:var(--ink-2); cursor:pointer;
  transition:color .25s, background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.ai-tab:hover{ color:var(--ink); border-color:var(--purple); }
.ai-tab.is-on{
  color:#fff; background:var(--purple); border-color:var(--purple); font-weight:700;
  box-shadow:0 3px 0 -0.5px color-mix(in srgb, var(--purple) 55%, #000);
}
/* キラキラ（3つを時間差で瞬かせる） */
.ai-tab::before, .ai-tab::after, .ai-tab .spk{
  content:''; position:absolute; display:block; opacity:0; pointer-events:none;
  background:var(--pink);
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
}
.ai-tab::before{ width:14px; height:14px; left:-8px;  top:-8px; }
.ai-tab .spk  { width:10px; height:10px; right:-6px; top:-8px; }
.ai-tab::after{ width:8px;  height:8px;  right:-10px; bottom:-5px; }
.ai-tab.is-on::before{ animation:twinkle 1.9s ease-in-out infinite; }
.ai-tab.is-on .spk   { animation:twinkle 1.9s ease-in-out .5s infinite; }
.ai-tab.is-on::after { animation:twinkle 1.9s ease-in-out 1s infinite; }
@keyframes twinkle{
  0%,100%{ opacity:0; transform:scale(.25) rotate(-25deg); }
  45%    { opacity:1; transform:scale(1)   rotate(20deg); }
}

/* カードの舞台。はみ出す分はここで切る（横スクロールを出さないため） */
.ai-stage{
  display:grid; perspective:1100px;
  overflow:hidden; padding:6px 6px 14px; margin:-6px -6px -14px;
  box-sizing:content-box;                   /* 高さ指定を中身の高さと一致させる */
  transition:height .45s cubic-bezier(.25,.8,.3,1);
}
/* カードの見た目は元のまま（バッジ・余白・文字の大きさ） */
.ai-item{
  grid-area:1 / 1; align-self:start;        /* 5枚を同じ場所に重ねる */
  width:76%; justify-self:center;           /* 細くして、左右に前後のカードを覗かせる */
  background:var(--card); border:2px solid var(--rule); border-radius:14px;
  padding:20px 22px 22px; box-shadow:0 5px 0 -1px var(--rule); position:relative;
  backface-visibility:hidden;
  transition:transform var(--deck) cubic-bezier(.25,.8,.3,1), opacity var(--deck) ease;
}
.ai-item h3{ font-family:var(--f-d); font-size:1.02rem; margin:0 0 .5em; line-height:1.5; }
.ai-item p{ margin:0; color:var(--ink-2); font-size:.88rem; }
.ai-item .badge{
  display:inline-block; font-family:var(--f-m); font-size:10px; letter-spacing:.1em;
  color:var(--purple); background:var(--purple-soft); border-radius:6px;
  padding:3px 9px; margin-bottom:.7em;
}
.ai-item.is-on{ transform:none; opacity:1; z-index:2; }
/* 前後の1枚は端から覗かせる。2枚以上離れたものは外へ逃がす */
.ai-item.to-left, .ai-item.to-right, .ai-item.far-left, .ai-item.far-right{
  align-self:stretch; overflow:hidden;      /* 覗いている分がはみ出さないように */
  z-index:1; pointer-events:none;
}
.ai-item.to-left{
  transform-origin:right center; transform:translateX(-62%) rotateY(-38deg) scale(.9);
  opacity:.5;
}
.ai-item.to-right{
  transform-origin:left center; transform:translateX(62%) rotateY(38deg) scale(.9);
  opacity:.5;
}
.ai-item.far-left{
  transform-origin:right center; transform:translateX(-118%) rotateY(-50deg) scale(.78);
  opacity:0;
}
.ai-item.far-right{
  transform-origin:left center; transform:translateX(118%) rotateY(50deg) scale(.78);
  opacity:0;
}

/* めくるボタン。右向き（次へ）を主役にする */
.ai-ctrl{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:20px; }
.ai-nav{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:var(--card); border:2px solid var(--rule); color:var(--ink-2);
  box-shadow:0 3px 0 -0.5px var(--rule);
  transition:transform .18s, box-shadow .18s, background .2s, color .2s, border-color .2s;
}
.ai-nav svg{ width:20px; height:20px; }
.ai-nav:hover{ color:var(--ink); border-color:var(--purple); transform:translateY(-2px); box-shadow:0 5px 0 -0.5px var(--rule); }
.ai-nav.is-main{
  width:56px; height:56px; background:var(--pink); border-color:var(--pink); color:#fff;
  box-shadow:0 4px 0 -0.5px color-mix(in srgb, var(--pink) 60%, #000);
}
.ai-nav.is-main svg{ width:24px; height:24px; }
.ai-nav.is-main:hover{ box-shadow:0 6px 0 -0.5px color-mix(in srgb, var(--pink) 60%, #000); }
.ai-nav:active{ transform:translateY(2px); box-shadow:0 1px 0 -0.5px var(--rule); }
.ai-nav.is-main:active{ box-shadow:0 1px 0 -0.5px color-mix(in srgb, var(--pink) 60%, #000); }
.ai-count{ margin:0; font-family:var(--f-m); font-size:12px; letter-spacing:.12em; color:var(--ink-2); }
.ai-count b{ color:var(--pink); font-size:16px; margin-right:.25em; }

/* =========================================================
   ネームカードのキラキラ
   ①縁を回るグラデーション … conic-gradient の角度を @property でアニメさせる
     （@property を使わないと角度は補間できず、カクつく）
   ②周回するキラッ … offset-path: border-box で、カードの縁を1周させる
   どちらも JavaScript なし。動きを減らす設定の人には止まる。
   ========================================================= */
@property --spark-angle{
  syntax:'<angle>'; initial-value:0deg; inherits:false;
}

.pcard{ position:relative; isolation:isolate; }

/* ① 縁をまわる光。padding＋mask-composite で「縁のリングだけ」を見せる */
.pcard::before{
  content:""; position:absolute; inset:-5px; border-radius:23px;
  padding:5px; pointer-events:none; z-index:-1;
  background:conic-gradient(from var(--spark-angle),
    transparent 0deg 250deg,
    color-mix(in srgb, var(--purple) 70%, transparent) 300deg,
    #ffffff 335deg,
    var(--pink) 350deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spark-spin 3.4s linear infinite;
}

/* ② 縁を周回する小さな光の粒 */
.pcard::after{
  content:""; position:absolute; top:0; left:0;
  width:9px; height:9px; border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle, #fff 0 28%, var(--pink) 45%, transparent 72%);
  box-shadow:0 0 10px 3px color-mix(in srgb, var(--pink) 55%, transparent);
  offset-path:border-box; offset-distance:0%; offset-rotate:0deg;
  animation:spark-travel 3.4s linear infinite;
}

@keyframes spark-spin{ to{ --spark-angle:360deg; } }
@keyframes spark-travel{
  0%   { offset-distance:0%;   opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { offset-distance:100%; opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .pcard::before, .pcard::after{ animation:none; }
  .pcard::after{ opacity:0; }
}

/* =========================================================
   動きのしかけ（A〜F）
   JavaScriptは「数字のカウントアップ」と「カーソル追従」だけ。
   スクロール連動・文字送り・サムネのスクロールは全部CSS。
   ========================================================= */

/* ── A：スクロールで下からふわっと出る ──
   animation-timeline: view() は要素がビューポートに入る量で進行する。
   対応していないブラウザでは「最初から表示された状態」になるだけで、消えない。 */
@supports (animation-timeline: view()){
  .work, .ai-deck, .figures div, .shot, .reveal, .ledger tr, .pcard{
    animation:rise linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 28%;
  }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(26px) scale(.985); }
  to  { opacity:1; transform:none; }
}
/* カードは元々 hover で持ち上がるので、出現後の transform と喧嘩しないよう分ける */
.work{ will-change:transform, opacity; }

/* ── B：数字のカウントアップの見え方 ── */
.figures dd{ font-variant-numeric:tabular-nums; }

/* ── C：見出しが1文字ずつ出る ── */
.cover h1 .ch, .detail-head h1 .ch{
  display:inline-block; opacity:0;
  animation:ch-in .5s cubic-bezier(.2,1.2,.3,1) forwards;
}
@keyframes ch-in{
  from{ opacity:0; transform:translateY(.45em) rotate(-6deg); }
  to  { opacity:1; transform:none; }
}

/* ── D：作品サムネのホバー ──
   6枚とも同じ「ゆっくり寄る」動きにする。
   縦に長い画像（LPの全体像）だけ、そのうえで下端まで流して中身を見せる。 */
.work-fig img{
  transition:transform .6s cubic-bezier(.2,.7,.3,1),
             object-position 2.4s cubic-bezier(.3,0,.3,1);
}
.work:hover .work-fig img{ transform:scale(1.05); }
.work:hover .work-fig.pan img{ object-position:bottom center; }

/* 04のサムネ：印刷物は切り抜くと読めないので、2枚まるごと並べる */
.work-fig.duo{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding:16px 18px; background:var(--grid);
}
.work-fig.duo img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.16));
}

/* グラフィックの2枚並び */
/* minmax(0,1fr) にしないと、グリッドの列が画像の実寸より狭くなれず横スクロールが出る
   （グリッドの子は min-width:auto ＝ 中身の最小幅 が既定のため。max-width:100% だけでは防げない） */
.pair{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:700px){ .pair{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

@media (prefers-reduced-motion: reduce){
  .cover h1 .ch, .detail-head h1 .ch{ opacity:1; animation:none; }
  .work-fig img{ transition:none; }
}


/* ── 「上へ」ボタン ──
   ・少しスクロールすると現れる（表示の切替はJS、見え方はCSS）
   ・押すと矢印がぴょんと跳ねてから、ページが上へ戻る */
.to-top{
  position:fixed; right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px); z-index:60;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  background:var(--card); color:var(--pink);
  border:2px solid var(--rule);
  box-shadow:0 5px 0 -1px var(--rule);
  display:grid; place-content:center;
  transition:opacity .25s, transform .18s, box-shadow .18s, border-color .18s;
  opacity:0; pointer-events:none;      /* 見えない間は押せないようにする */
}
.to-top:hover{ border-color:var(--pink); transform:translateY(-2px); box-shadow:0 7px 0 -1px var(--pink-soft); }
.to-top:active{ transform:translateY(2px); box-shadow:0 2px 0 -1px var(--rule); }

/* 矢印は角を丸めたSVG。線の太さ・色はCSS側で決める */
.to-top .arrow{
  width:22px; height:22px; display:block;
  color:var(--pink);
  transform-origin:50% 100%;        /* 下端を軸に縮む／伸びる */
  overflow:visible;
}
/* ためる → 伸びて上がる → 着地で縮む → 元に戻る */
.to-top .arrow.jump{ animation:arrow-jump 1.05s cubic-bezier(.33,0,.24,1); }
@keyframes arrow-jump{
  0%   { transform:translateY(0)     scale(1,    1);    }
  6%   { transform:translateY(0)     scale(1,    1);    }
  22%  { transform:translateY(4px)   scale(1.14, .76);  }  /* ためる：つぶれる */
  30%  { transform:translateY(2px)   scale(1.06, .88);  }
  46%  { transform:translateY(-20px) scale(.88,  1.22); }  /* 跳ぶ：伸びる */
  58%  { transform:translateY(-26px) scale(.94,  1.10); }  /* いちばん高いところ */
  70%  { transform:translateY(-14px) scale(.96,  1.06); }
  84%  { transform:translateY(3px)   scale(1.16, .80);  }  /* 着地：またつぶれる */
  93%  { transform:translateY(0)     scale(.98,  1.04); }
  100% { transform:translateY(0)     scale(1,    1);    }
}

/* 少しスクロールしたら現れる。表示の切替はJS（確実に動かすため）、見え方はCSS */
.to-top.show{ opacity:1; pointer-events:auto; }

@media (prefers-reduced-motion: reduce){
  .to-top{ transition:none; }
  .to-top .arrow.jump{ animation:none; }
}


/* ── 「作品目録にもどる」ボタン ──
   テキストリンクだと見落とされるので、押せる面として作る。 */
.back-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-b); font-size:.95rem; font-weight:700;
  text-decoration:none; color:var(--ink);
  background:var(--card); border:2px solid var(--rule); border-radius:999px;
  padding:13px 26px 13px 20px;
  box-shadow:0 5px 0 -1px var(--rule);
  transition:transform .18s, box-shadow .18s, border-color .18s, color .18s;
}
.back-btn:hover{ border-color:var(--pink); color:var(--pink); transform:translateY(-2px);
  box-shadow:0 7px 0 -1px var(--pink-soft); }
.back-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 -1px var(--rule); }
.back-btn svg{ width:18px; height:18px; flex:none; color:var(--pink);
  transition:transform .22s cubic-bezier(.3,1.5,.4,1); }
.back-btn:hover svg{ transform:translateX(-4px); }
.back-wrap{ display:flex; justify-content:center; }