/* ホーム・ギャラリーだけの部品。背景・ヘッダー・フッター・フォントは site.css(全ページ共通)。docs/requirements/home-and-gallery.md §3・§4 */
.poko-home,.poko-gallery{
  max-width:1200px;margin:0 auto;padding:0 16px 48px;
}

/* ---- 見出し・ボタン ---- */
.poko-heading{
  margin:0 0 20px;text-align:center;color:#fff;font-weight:900;font-size:clamp(28px,4vw,40px);
  letter-spacing:.06em;text-shadow:var(--poko-shadow-text);
}
.poko-heading--page{font-family:"Poko Display","Poko Grotesk",sans-serif;font-size:clamp(40px,8vw,88px);letter-spacing:0;margin:8px 0 0}
.poko-pill{
  display:inline-block;padding:12px 40px;border-radius:999px;
  background:linear-gradient(180deg,#fff 0%,#fde6f3 100%);border:3px solid var(--poko-pink-deep);
  color:var(--poko-pink-deep);font-weight:800;text-decoration:none;letter-spacing:.04em;
  box-shadow:0 3px 0 rgba(120,30,80,.35);transition:transform .15s ease, box-shadow .15s ease;
}
.poko-pill:hover,.poko-pill:focus-visible{transform:translateY(-2px);box-shadow:0 5px 0 rgba(120,30,80,.35);color:var(--poko-pink-deep)}

/* ---- SNS(右寄せ) ---- */
.poko-sns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:4px 0 0}
.poko-sns__item{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;
  color:#fff;transition:transform .15s ease;box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.poko-sns__item:hover,.poko-sns__item:focus-visible{transform:translateY(-2px)}
.poko-sns__item svg{width:26px;height:26px;fill:currentColor}
.poko-sns__item--x{background:#000;border-radius:50%}
.poko-sns__item--twitch{background:#9146ff}
.poko-sns__item--youtube{background:#ff0000}
.poko-sns__item--instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.poko-sns__item--booth{background:#fc4d50;overflow:hidden}
.poko-sns__item--booth img{display:block;width:100%;height:100%}
.poko-sns__item--discord{background:#5865f2;border-radius:50%}

/* ---- ヒーロー ---- */
.poko-hero{text-align:center;padding:8px 0 24px}
.poko-hero__name{
  margin:12px 0 0;font-family:"Poko Display","Poko Grotesk",sans-serif;font-weight:900;
  font-size:clamp(26px,8.4vw,112px);line-height:1;letter-spacing:-.01em;color:#fff;white-space:nowrap;
  text-shadow:0 3px 0 rgba(58,22,64,.35);
}
.poko-hero__catch{
  margin:22px 0 0;font-family:"Poko Grotesk",sans-serif;font-weight:800;
  font-size:clamp(26px,5.2vw,60px);line-height:1.05;letter-spacing:-.035em;text-shadow:var(--poko-shadow-text);
}
.poko-hero__sub{margin:14px 0 0;font-family:"Poko Grotesk",sans-serif;font-weight:500;font-size:clamp(14px,1.8vw,19px);letter-spacing:.01em;text-shadow:var(--poko-shadow-text)}
.poko-hero__kv{display:block;width:auto;height:min(78vh,820px);max-width:86vw;margin:28px auto 0;object-fit:contain;filter:drop-shadow(0 12px 30px rgba(30,8,36,.45))}
@media (max-width:767px){ .poko-hero__kv{height:auto;width:min(80vw,420px)} }

/* ---- サムネイル ---- */
.poko-art{position:relative;display:block;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.08);
  box-shadow:0 6px 18px rgba(20,4,26,.35);transition:transform .2s ease, box-shadow .2s ease}
.poko-art img{display:block;width:100%;height:100%;object-fit:cover}
.poko-art:hover,.poko-art:focus-visible{transform:translateY(-3px) scale(1.01);box-shadow:0 10px 26px rgba(20,4,26,.5)}
.poko-art:focus-visible{outline:3px solid var(--poko-pink);outline-offset:3px}
.poko-art__play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(42,21,51,.75);color:#fff;font-size:14px}
/* 枠の中の動き: 動画(<video>)と差分の切り替え(img)は img の上に重ね、用意できたら opacity で出す */
.poko-art__motion,.poko-art__fade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .6s ease;pointer-events:none;background:transparent}
.poko-art__motion.is-playing,.poko-art__fade.is-in{opacity:1}
.poko-art__multi{position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;
  background:rgba(42,21,51,.75);color:#fff;font-size:12px;font-weight:700;line-height:1}
.poko-art__multi svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}

/* ---- ホームのピックアップ ---- */
.poko-pickup{padding:40px 0 8px}
.poko-pickup__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.poko-pickup__grid .poko-art{aspect-ratio:16/9}
.poko-pickup__more{margin:32px 0 0;text-align:center}
@media (max-width:767px){ .poko-pickup__grid{grid-template-columns:repeat(2,1fr);gap:12px} }

/* ---- ギャラリー ---- */
.poko-gallery__head{text-align:center;padding:8px 0 24px}
.poko-gallery__lead{margin:6px 0 0;text-align:center;font-weight:700;color:#fbe8fb;text-shadow:var(--poko-shadow-text)}
.poko-gallery__jump{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:40px 0 8px}
.poko-gallery__jump .poko-pill{padding:8px 26px;font-size:15px}
.poko-gallery__group{padding:40px 0 0;scroll-margin-top:24px}
.poko-gallery__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
.poko-gallery__grid .poko-art{aspect-ratio:1/1}
@media (max-width:767px){ .poko-gallery__grid{grid-template-columns:repeat(2,1fr);gap:10px} }
.poko-gallery__note{margin:56px auto 0;max-width:720px;padding:20px 24px;border-radius:18px;
  background:rgba(42,21,51,.55);border:1px solid rgba(255,180,253,.45);text-align:center;font-size:14px;line-height:1.8}
.poko-gallery__note p{margin:4px 0}
.poko-gallery__note a{color:var(--poko-pink)}

/* ---- ギャラリー上部のカルーセル ---- */
.poko-carousel{position:relative;margin:8px -16px 0}
.poko-carousel__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:12px max(16px,calc(50% - 380px)) 8px}
.poko-carousel__track::-webkit-scrollbar{display:none}
.poko-carousel__track:focus-visible{outline:3px solid var(--poko-pink);outline-offset:-3px}
.poko-carousel__slide{flex:0 0 min(760px,84vw);scroll-snap-align:center;margin:0}
.poko-carousel__slide .poko-art{aspect-ratio:16/9}
.poko-carousel__credit{margin:10px 0 0;text-align:center;font-size:14px;font-weight:700;text-shadow:var(--poko-shadow-text)}
.poko-carousel__nav{position:absolute;top:calc(50% - 30px);width:48px;height:48px;border-radius:50%;
  border:2px solid var(--poko-pink-line);background:rgba(255,255,255,.9);color:var(--poko-purple);font-size:30px;line-height:1;cursor:pointer}
.poko-carousel__nav--prev{left:max(8px,calc(50% - 470px))}
.poko-carousel__nav--next{right:max(8px,calc(50% - 470px))}
.poko-carousel__dots{display:flex;justify-content:center;gap:10px;margin-top:14px}
.poko-carousel__dots button{width:12px;height:12px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer}
.poko-carousel__dots button[aria-current="true"]{background:var(--poko-pink-deep);transform:scale(1.2)}
@media (max-width:767px){ .poko-carousel__nav{display:none} }

/* ---- 拡大表示 ---- */
.poko-lightbox{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center}
.poko-lightbox[hidden]{display:none}
.poko-lightbox__backdrop{position:absolute;inset:0;background:rgba(20,6,26,.88)}
.poko-lightbox__body{position:relative;margin:0;max-width:min(92vw,1600px);display:flex;flex-direction:column;align-items:center}
.poko-lightbox__media img,.poko-lightbox__media video{display:block;max-width:92vw;max-height:80vh;width:auto;height:auto;border-radius:10px}
.poko-lightbox--multi .poko-lightbox__media img,.poko-lightbox--multi .poko-lightbox__media video{max-height:66vh}
.poko-lightbox__strip{display:flex;gap:8px;margin-top:10px;max-width:92vw;overflow-x:auto;padding:4px;scrollbar-width:thin;scroll-behavior:smooth}
.poko-lightbox__strip[hidden]{display:none}
.poko-lightbox__strip-item{flex:0 0 auto;width:56px;height:56px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;
  background:rgba(255,255,255,.1);cursor:pointer;opacity:.6;transition:opacity .15s ease}
.poko-lightbox__strip-item img{display:block;width:100%;height:100%;object-fit:cover}
.poko-lightbox__strip-item[aria-current="true"]{border-color:var(--poko-pink);opacity:1}
.poko-lightbox__strip-item:hover{opacity:.9}
.poko-lightbox__strip-item:focus-visible{outline:3px solid var(--poko-pink);outline-offset:2px}
.poko-lightbox__count{font-size:13px;opacity:.85}
.poko-lightbox__count[hidden]{display:none}
.poko-lightbox__caption{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:center;color:#fff;font-weight:700}
.poko-lightbox__title:empty{display:none}
.poko-lightbox__artist::before{content:"🎨 "}
.poko-lightbox__artist a,
.poko-carousel__credit a{color:inherit;text-decoration:underline;text-decoration-color:var(--poko-pink);text-decoration-thickness:2px;text-underline-offset:4px}
.poko-lightbox__artist a:hover,.poko-lightbox__artist a:focus-visible,
.poko-carousel__credit a:hover,.poko-carousel__credit a:focus-visible{color:var(--poko-pink)}
.poko-lightbox__btn{position:absolute;width:48px;height:48px;border-radius:50%;border:2px solid var(--poko-pink-line);
  background:rgba(255,255,255,.92);color:var(--poko-purple);font-size:28px;line-height:1;cursor:pointer}
.poko-lightbox__btn[hidden]{display:none}
.poko-lightbox__close{top:16px;right:16px}
.poko-lightbox__prev{left:16px;top:calc(50% - 24px)}
.poko-lightbox__next{right:16px;top:calc(50% - 24px)}

@media (prefers-reduced-motion: reduce){
  .poko-art,.poko-pill,.poko-sns__item,.poko-lightbox__strip-item,.poko-art__motion,.poko-art__fade{transition:none}
  .poko-carousel__track,.poko-lightbox__strip{scroll-behavior:auto}
}

/* ---- ホームのプロフィール(docs/requirements/profile-and-cursor.md §3・§4) ---- */
@font-face{font-family:"Poko Maru";src:url(../fonts/zen-maru-profile.woff2) format("woff2");font-weight:700;font-display:swap}
.poko-profile{padding:40px 0 8px;scroll-margin-top:24px}
.poko-profile__top{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,560px);justify-content:center;align-items:center;gap:clamp(24px,5vw,72px)}

/* ソフトクリーム: 画像の上に文字を重ねる。文字の大きさは画像の幅に比例(cqi) */
.poko-profile__ice{position:relative;container-type:inline-size;filter:drop-shadow(0 10px 24px rgba(20,4,26,.45))}
.poko-profile__ice-img{display:block;width:100%;height:auto}
.poko-profile__cream,.poko-profile__cone{position:absolute;left:0;right:0;transform:translateY(-50%);text-align:center;
  font-family:"Poko Maru","Hiragino Maru Gothic ProN",sans-serif;font-weight:700;color:#2b1631;line-height:1.35;letter-spacing:.02em}
.poko-profile__cream p,.poko-profile__cone p{margin:0}
.poko-profile__cream{top:42%;font-size:7.4cqi}
.poko-profile__cream p+p{margin-top:.25em}
.poko-profile__cone{top:71%;font-size:6.6cqi;padding:0 16%}
.poko-profile__cone p+p{margin-top:.2em}

/* 星と立ち絵 */
.poko-profile__stage{position:relative;display:flex;flex-direction:column;align-items:center}
.poko-profile__star{position:absolute;left:50%;top:44%;width:112%;max-width:none;height:auto;transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 28px rgba(239,238,3,.35))}
.poko-profile__frame{position:relative;width:min(440px,100%);aspect-ratio:479/700}
.poko-profile__stand{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(20,4,26,.4));transition:opacity .3s ease}
.poko-profile__stand.is-leaving{opacity:0}
.poko-profile__stand.is-current{animation:poko-profile-in .3s ease}
@keyframes poko-profile-in{from{opacity:0}to{opacity:1}}
.poko-profile__credit{position:relative;margin:10px 0 0;font-size:13px;color:#fbe8fb;text-shadow:var(--poko-shadow-text)}
.poko-profile__credit a{color:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--poko-pink);text-decoration-thickness:2px;text-underline-offset:4px}
.poko-profile__credit a:hover,.poko-profile__credit a:focus-visible{color:var(--poko-pink)}
.poko-profile__credit a:focus-visible{outline:3px solid var(--poko-pink);outline-offset:3px;border-radius:4px}
.poko-profile__nav{position:relative;display:flex;align-items:center;gap:10px;margin-top:12px}
.poko-profile__thumbs{display:flex;gap:10px}
.poko-profile__thumb{width:56px;height:56px;padding:0;border-radius:50%;overflow:hidden;border:3px solid #fff;background:#fff;cursor:pointer;
  box-shadow:0 3px 10px rgba(20,4,26,.4);transition:transform .15s ease,border-color .15s ease}
.poko-profile__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.poko-profile__thumb[aria-current="true"]{border-color:var(--poko-pink-deep);transform:scale(1.08)}
.poko-profile__thumb:hover{transform:scale(1.08)}
.poko-profile__arrow{width:44px;height:44px;padding:0;border-radius:50%;border:3px solid var(--poko-pink-deep);background:#fff;
  color:var(--poko-pink-deep);font-size:28px;line-height:1;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 rgba(120,30,80,.35)}
.poko-profile__arrow:hover{background:#fde6f3}
.poko-profile__thumb:focus-visible,.poko-profile__arrow:focus-visible{outline:3px solid var(--poko-pink);outline-offset:3px}

/* いまのぽこ */
.poko-profile__now{max-width:720px;margin:40px auto 0;padding:20px 28px;border-radius:18px;
  background:rgba(42,21,51,.55);border:1px solid rgba(255,180,253,.45)}
.poko-profile__now-title{margin:0 0 10px;text-align:center;font-size:20px;font-weight:800;color:#fff}
.poko-profile__now dl{margin:0}
.poko-profile__now dl>div{display:grid;grid-template-columns:12em 1fr;gap:12px;padding:10px 0;border-top:1px solid rgba(255,180,253,.3)}
.poko-profile__now dl>div:first-child{border-top:0}
.poko-profile__now dt{font-weight:700;color:#ffd6fb}
.poko-profile__now dd{margin:0}
.poko-profile__now dd a{color:#ffb4fd;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.poko-profile__now dd a:hover{color:#fff}
.poko-profile__message{margin:14px 0 0;text-align:center;font-weight:700;color:#ffd6fb}

@media (max-width:767px){
  .poko-profile__top{grid-template-columns:1fr;gap:32px}
  .poko-profile__stage{order:-1;width:min(84vw,420px);margin:0 auto}
  .poko-profile__ice{width:min(64vw,300px);margin:0 auto}
  .poko-profile__thumb{width:48px;height:48px}
  .poko-profile__now{padding:16px 18px}
  .poko-profile__now dl>div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion: reduce){
  .poko-profile__stand{transition:none}
  .poko-profile__stand.is-current{animation:none}
}