/* ==========================================================================
   レイアウト案で共通の動き（motion.js と組み合わせて使う）
   html.fg-js があるときだけ隠す → JSが動かない環境でも中身は必ず見える
   ========================================================================== */
.fg-illust { display: inline-block; line-height: 0; }
/* 左右から出てくる要素が、出る前に横スクロールを作らないように */
.fg-main { overflow-x: clip; }
.fg-illust svg { width: 100%; height: auto; overflow: visible; }

.fg-js [data-reveal] { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 1ms); }
.fg-js [data-reveal="up"] { transform: translateY(32px); }
.fg-js [data-reveal="left"] { transform: translateX(-40px); }
.fg-js [data-reveal="right"] { transform: translateX(40px); }
.fg-js [data-reveal="pop"] { transform: scale(.6); transition-timing-function: ease, cubic-bezier(.34, 1.56, .64, 1); }
.fg-js [data-reveal="tilt"] { transform: translateY(24px) rotate(-6deg); }
.fg-js [data-reveal].is-in { opacity: 1; transform: none; }

/* 子要素を順番に（ポンと弾む） */
.fg-js [data-stagger] > * { opacity: 0; transform: translateY(24px) scale(.92); transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.fg-js [data-stagger].is-in > * { opacity: 1; transform: none; }

/* 1文字ずつ */
.fg-char { display: inline-block; }
.fg-js [data-split] .fg-char { opacity: 0; transform: translateY(.4em) rotate(8deg); transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 45ms + var(--d, 0) * 1ms); }
.fg-js [data-split].is-in .fg-char { opacity: 1; transform: none; }

/* 手描きの線を描く */
.fg-draw { stroke-dasharray: 600; stroke-dashoffset: 0; }
.fg-js [data-reveal] .fg-draw { stroke-dashoffset: 600; transition: stroke-dashoffset 1.4s ease .3s; }
.fg-js [data-reveal].is-in .fg-draw { stroke-dashoffset: 0; }

/* タブで絞り込んだときのポン */
@keyframes fg-pop { from { opacity: 0; transform: scale(.8) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: rotate(var(--rot, 0deg)); } }
.is-pop { animation: fg-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }

/* ふわふわ浮く飾り */
@keyframes fg-float { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-10px) rotate(calc(var(--rot, 0deg) + 4deg)); } }
.fg-float { animation: fg-float 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }

/* タブのボタン */
.fg-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fg-s2); margin: 0 0 var(--fg-s5); }
.fg-tabs button { font: inherit; font-weight: 700; font-size: 15px; padding: 8px 20px; border-radius: var(--fg-r-pill); border: 2px solid var(--fg-pink-deep); background: var(--fg-white); color: var(--fg-pink-deep); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.fg-tabs button:hover { transform: translateY(-2px); }
.fg-tabs button[aria-pressed="true"] { background: var(--fg-pink-deep); color: var(--fg-white); }

/* オープニング */
.fg-opening { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--fg-pink-tint); transition: opacity .8s ease, visibility .8s; }
.fg-opening.is-done { opacity: 0; visibility: hidden; }
html:not(.fg-js) .fg-opening { display: none; }
.is-opening body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fg-js [data-reveal], .fg-js [data-stagger] > *, .fg-js [data-split] .fg-char { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fg-draw { stroke-dashoffset: 0 !important; }
  .fg-float, .is-pop { animation: none !important; }
}

/* 縦書きの「、」「。」：このフォント（Zen Maru Gothic）は縦書き用の句読点を持っていないので、
   文字は見えなくして（読み上げには残す）、1文字分の枠の右上に CSS で句読点を描く */
.fg-vp { display: inline-block; position: relative; width: 1em; height: 1em; -webkit-text-fill-color: transparent; vertical-align: top; }
.fg-vp::after { content: ""; position: absolute; }
.fg-vp--maru::after { top: .1em; right: .1em; width: .34em; height: .34em; border: .075em solid currentColor; border-radius: 50%; box-sizing: border-box; }
.fg-vp--ten::after { top: .1em; right: .2em; width: .12em; height: .32em; border-radius: .08em; background: currentColor; transform: rotate(-45deg); }