/* =========================================================
   5959 PLAY — あそびの要素（play.js とセット）
   ルール：グレー地・4色＋黄・黒い罫線なし・文字を図形に重ねない
   ========================================================= */

/* ---------- ① ページ遷移（View Transitions） ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation: .32s cubic-bezier(.4,0,.2,1) both playFadeOut; }
::view-transition-new(root){ animation: .42s cubic-bezier(.16,.84,.32,1) both playFadeIn; }
::view-transition-group(work-hero){ animation-duration: .6s; animation-timing-function: cubic-bezier(.16,.84,.32,1); }
::view-transition-old(work-hero),::view-transition-new(work-hero){ height:100%; object-fit:cover; animation-duration:.6s; }
@keyframes playFadeOut{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes playFadeIn{ from{ opacity:0; transform:translateY(10px); } }
.work-hero img{ view-transition-name: work-hero; }

/* ---------- ② 絞り込みの色の差し込み ---------- */
.play-wipe{ position:fixed; inset:0; z-index:80; pointer-events:none; opacity:.92; }

/* 消えるカード（コピー）は、並び替わるカードの下に */
.works-grid .card{ z-index:6; }

/* ---------- ③ カードのホバーで別カット ---------- */
.card .thumb img.play-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.25,.46,.45,.94); pointer-events:none; }
.card .thumb img.play-layer.on{ opacity:1; }
.card:hover .thumb img.play-layer{ transform:scale(1.04); }
.play-ticks{ position:absolute; left:20px; right:20px; bottom:10px; display:flex; gap:4px; z-index:3; opacity:0; transition:opacity .25s ease; pointer-events:none; }
.play-ticks i{ flex:1; height:3px; background:rgba(255,255,255,.38); border-radius:2px; transition:background .2s; }
.play-ticks i.on{ background:#f5ff00; }
.card:hover .play-ticks{ opacity:1; }
.card.has-ticks .card-overlay{ padding-bottom:28px; }
@media (pointer:coarse){ .play-ticks{ display:none; } }

/* ---------- ④ 隠しコマンド「5959」 ---------- */
.play-gulp{ position:fixed; left:50%; bottom:22px; z-index:49; pointer-events:none; transform:translate(-50%,160%);
  background:#000; border-radius:999px; padding:10px 28px 12px; font-family:'Zen Kaku Gothic New','ZenKaku',sans-serif!important; font-weight:900; font-size:clamp(28px,4vw,44px); letter-spacing:.08em; line-height:1.1; white-space:nowrap; }
.play-gulp span{ display:inline-block; }

/* 立体カードの反射（ポケポケ風）：光の照り返し＋うっすら虹色の箔 */
.play-foil{ position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; border-radius:inherit; }
.play-foil i{ position:absolute; inset:0; display:block; }
.play-foil .pf-glare{ background:radial-gradient(farthest-corner circle at var(--px,50%) var(--py,50%), rgba(255,255,255,.55) 0%, rgba(255,255,255,.22) 30%, rgba(255,255,255,0) 60%, rgba(0,0,0,.18) 100%);
  mix-blend-mode:soft-light; opacity:calc(var(--m,0) * 1); filter:blur(6px); inset:-12px; }
/* 蛍光灯のようなバーライトの映り込み（傾きに合わせて横切る） */
.play-foil .pf-bar{ background:linear-gradient(104deg, rgba(255,255,255,0) calc(var(--b,50%) - 22%), rgba(255,255,255,.10) calc(var(--b,50%) - 11%), rgba(255,255,255,.38) calc(var(--b,50%) - 3%), rgba(255,255,255,.5) var(--b,50%), rgba(255,255,255,.38) calc(var(--b,50%) + 3%), rgba(255,255,255,.10) calc(var(--b,50%) + 11%), rgba(255,255,255,0) calc(var(--b,50%) + 22%));
  mix-blend-mode:screen; opacity:calc(var(--m,0) * .4); filter:blur(5px); inset:-10px; }
.play-foil .pf-shine{ background:repeating-linear-gradient(115deg, #ff6b6b 0%, #ffd36b 6%, #7bff9e 12%, #6bd6ff 18%, #c58bff 24%, #ff6b6b 30%);
  background-size:300% 300%; background-position:var(--px,50%) var(--py,50%); mix-blend-mode:color-dodge; opacity:calc(var(--m,0) * .06); filter:saturate(1.2); }

/* カードの縁のハイライト：ふちに細い光＋傾いて手前に来た縁に強い光 */
.play-foil .pf-edge{ border-radius:inherit; box-shadow: inset 0 0 0 .5px rgba(255,255,255,calc(var(--m,0) * .12)), inset var(--ex,0px) var(--ey,0px) 0 0 rgba(255,255,255,calc(var(--m,0) * .3)); }

/* ---------- ⑤ 初回だけのロゴ演出 ---------- */
/* 読み込み直後にサイトが一瞬見えないよう、ローディングと同じグレーの幕を先にかける（4秒で自動的に外れる保険つき） */
html.play-pre::before{ content:''; position:fixed; inset:0; z-index:10001; background:#dcdcdc; animation:playPreOff 0s 4s forwards; }
@keyframes playPreOff{ to{ visibility:hidden; } }
.play-loader{ position:fixed; inset:0; z-index:10000; background:#dcdcdc; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.play-loader .pl-logo{ width:min(62vw,560px); position:relative; }
.play-loader svg{ display:block; width:100%; height:auto; }
.play-loader .pl-base, .play-loader .pl-base *{ fill:#b4b4b5; }
.play-loader .pl-cap{ position:absolute; left:0; right:0; bottom:-38px; text-align:center; font-family:'M PLUS 1p',sans-serif; font-size:11px; letter-spacing:.2em; color:#0a0a0a; opacity:.5; }
html.play-loading body{ overflow:hidden; }

/* ---------- ⑥ 端材で遊ぶエリア ---------- */
.play-ground-wrap{ max-width:1400px; margin:0 auto; padding:56px 32px 72px; box-sizing:border-box; }
.play-ground-head{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:14px; }   /* タイトルの下に一文を左揃え */
.play-ground-head .pg-title{ font-family:'5959','M PLUS 1p',sans-serif; font-size:clamp(22px,2.4vw,32px); letter-spacing:.02em; }
.play-ground-head .pg-note{ font-family:inherit; font-size:11px; letter-spacing:.18em; opacity:.55; }
.play-ground{ position:relative; height:clamp(320px,46vh,460px); background:#cfcfcf; overflow:hidden; touch-action:none; overscroll-behavior:contain; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.play-free{ position:fixed; left:0; top:0; width:100vw; height:100vh; pointer-events:none; z-index:90; }   /* 枠から飛び出した端材（ヘッダーの下） */
.pg-gl{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }   /* 3Dで描いた端材（2Dのキャンバスの下） */
.pg-gl-free{ position:fixed; left:0; top:0; width:100vw; height:100vh; pointer-events:none; z-index:89; }
.play-ground canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.play-ground-head .pg-title{ -webkit-tap-highlight-color:transparent; }
.play-ground .pg-part{ position:absolute; left:0; top:0; will-change:transform; pointer-events:none; }
.play-ground .pg-part svg{ display:block; width:100%; height:100%; overflow:visible; }
.play-ground .pg-part path{ fill:#0a0a0a; }
.play-ground .pg-part.c-p path{ fill:#ff6600; } .play-ground .pg-part.c-g path{ fill:#00cc66; }
.play-ground .pg-part.c-s path{ fill:#00aaff; } .play-ground .pg-part.c-d path{ fill:#cc66ff; }
@media(max-width:900px){ .play-ground-wrap{ padding:40px 24px 56px; } }
@media(max-width:600px){ .play-ground-wrap{ padding:32px 16px 48px; } }

/* ---------- ⑦ 作品ページの3D ---------- */
.play3d{ margin:0 0 24px; }
.play3d-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.play3d-head .p3-label{ font-family:'M PLUS 1p',sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.play3d-head .p3-note{ font-family:'M PLUS 1p',sans-serif; font-size:11px; letter-spacing:.1em; opacity:.55; }
.play3d-stage{ position:relative; aspect-ratio:16/10; background:#cfcfcf; overflow:hidden; touch-action:none; }
.play3d-stage canvas{ display:block; width:100%!important; height:100%!important; }
.play3d-stage .play3d-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'M PLUS 1p',sans-serif; font-size:11px; letter-spacing:.2em; opacity:.5; pointer-events:none; }

/* ---------- ⑧ PGSDの流れる帯／見出しの伸び縮み ---------- */
.play-marquee{ overflow:hidden; padding:14px 0 18px; background:transparent; }
.play-marquee .pm-track{ display:flex; width:max-content; will-change:transform; }
.play-marquee .pm-item{ display:flex; align-items:baseline; gap:clamp(14px,2vw,28px); padding-right:clamp(14px,2vw,28px);
  font-family:'5959','M PLUS 1p',sans-serif; font-size:clamp(48px,10.5vw,150px); line-height:1; letter-spacing:.01em; color:#0a0a0a; white-space:nowrap; }
.play-marquee .pm-num{ font-family:'M PLUS 1p',sans-serif; font-weight:700; letter-spacing:.02em; }
.play-marquee .pm-ja{ font-family:'Zen Kaku Gothic New','ZenKaku',sans-serif; font-weight:900; letter-spacing:.02em; }
/* 日本語（かな）は95%、漢字は85%の大きさ */
.play-marquee .pm-kana{ font-size:.95em; }
.play-marquee .pm-kanji{ font-size:.85em; }
.play-marquee .pm-dot{ display:inline-block; width:.32em; height:.32em; border-radius:50%; flex-shrink:0; align-self:baseline; }
.play-marquee .pm-dot.p{ background:#ff6600; } .play-marquee .pm-dot.g{ background:#00cc66; }
.play-marquee .pm-dot.s{ background:#00aaff; } .play-marquee .pm-dot.d{ background:#cc66ff; }
.play-marquee .pm-item span{ display:inline-block; line-height:1; }
.play-split{ display:inline-block; transform-origin:50% 100%; }

/* ---------- ⑨ スマホ：長押しで傾ける（長押しメニュー・文字選択を出さない） ---------- */
@media (pointer:coarse){
  .card, .cat-tile, .intro-block, .all-projects, .vimg, .work-hero{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
  .card img, .vimg img, .work-hero img, .vimg, .work-hero{ -webkit-user-drag:none; }
}

/* スマホ：黒い膜とタイトルは指を置いている間だけ（タップ後に残らない） */
@media (hover:none), (pointer:coarse){
  .card:hover .card-overlay, .card.touch-active .card-overlay{ opacity:0; }
  .card.play-press .card-overlay{ opacity:1; transition-duration:.15s; }
}

/* ---------- ⑩ コンタクト：5959スタンプ ---------- */
.play-stamps{ position:absolute; left:0; top:0; width:0; height:0; z-index:40; pointer-events:none; }
.play-stamp{ position:absolute; pointer-events:none; mix-blend-mode:multiply; opacity:var(--o,.96); transform:rotate(var(--r)); animation:playStamp .22s cubic-bezier(.2,.9,.3,1.2) both; }
.play-stamp svg{ display:block; }
.play-stamp.on-dark{ mix-blend-mode:normal; }
.play-stamp.out{ transition:opacity .4s; opacity:0; }
@keyframes playStamp{ 0%{ transform:rotate(var(--r)) scale(1.35); opacity:0; } 55%{ opacity:.95; } 100%{ transform:rotate(var(--r)) scale(1); opacity:var(--o,.96); } }

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
}