/* NOUIKU GIFT ACADEMY — 全ページ共通の署名層
   役目：ページごとに違う絵を、ひとつの手癖で貫く。
   1) 章番号（Instrument Serif の斜体数字＋一本の線）
   2) 一枚目の見出しが、下から一行ずつ立ち上がる
   3) ページをまたぐとき、ヘッダーだけ残して中身が入れ替わる
   4) 全ページに同じ「紙の粒」
   5) PCだけ、点と輪のカーソル。ボタンは磁石のように寄る
   動きを減らす設定（prefers-reduced-motion）ではすべて止まる */

/* ---- 見出しの組み：プロポーショナル詰め ---- */
h1,h2{font-feature-settings:"palt" 1;letter-spacing:.03em}
h1{letter-spacing:.02em}

/* 章番号は外した */

/* ---- 一枚目の見出し露出 ---- */
.nk-ln{display:block;overflow:hidden;padding:.06em .08em .12em;margin:-.06em -.08em -.12em}
.nk-ln>span{display:block;transform:translateY(112%);animation:nk-up 1.05s cubic-bezier(.2,.75,.1,1) forwards}
.nk-ln:nth-child(2)>span{animation-delay:.09s}.nk-ln:nth-child(3)>span{animation-delay:.18s}.nk-ln:nth-child(4)>span{animation-delay:.27s}
@keyframes nk-up{to{transform:none}}
.nk-lede{animation:nk-fade .9s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes nk-fade{from{opacity:0;transform:translateY(10px)}}

/* ---- 本文リンク：蛍光ペンの下線 ---- */
main p a:not(.btn):not([class]){text-decoration:none;background-image:linear-gradient(transparent 62%,var(--yellow-t,#fff5d1) 62%);background-size:100% 100%;background-repeat:no-repeat;transition:background-image .2s}
main p a:not(.btn):not([class]):hover{background-image:linear-gradient(transparent 55%,var(--yellow,#fdd90d) 55%)}

/* ---- 紙の粒 ---- */
.nk-grain{position:fixed;inset:0;pointer-events:none;z-index:9990;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:180px 180px}

/* ---- ページをまたぐ ---- */
@view-transition{navigation:auto}
.site-head{view-transition-name:site-head}
::view-transition-old(root){animation:nk-vt-out .22s ease-out both}
::view-transition-new(root){animation:nk-vt-in .42s cubic-bezier(.2,.7,.2,1) both}
::view-transition-group(site-head){animation-duration:.01s}
@keyframes nk-vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes nk-vt-in{from{opacity:0;transform:translateY(12px)}}

/* ---- カーソル（PCのみ） ---- */
@media (pointer:fine) and (hover:hover){
  body.nk-cur,body.nk-cur a,body.nk-cur button,body.nk-cur summary,body.nk-cur label,body.nk-cur [role=button]{cursor:none}
  body.nk-cur input,body.nk-cur textarea,body.nk-cur select,body.nk-cur [contenteditable]{cursor:auto}
  .nk-dot,.nk-ring{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);will-change:transform}
  .nk-dot{width:7px;height:7px;background:var(--ink,#332e29);transition:opacity .25s,width .2s,height .2s}
  .nk-ring{width:34px;height:34px;border:1px solid rgba(51,46,41,.5);transition:width .28s,height .28s,background-color .28s,border-color .28s,opacity .3s}
  .nk-ring.on{width:58px;height:58px;background:rgba(233,82,142,.1);border-color:rgba(233,82,142,.35)}
  .nk-dot.on{width:4px;height:4px}
  .nk-dot.off,.nk-ring.off{opacity:0}
  .nk-mag{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
}
@media (max-width:860px){.nk-grain{opacity:.04}}
@media (prefers-reduced-motion:reduce){
  .nk-ln>span,.nk-lede{animation:none;transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .nk-dot,.nk-ring{display:none}body.nk-cur,body.nk-cur a,body.nk-cur button{cursor:auto}
}
@media print{.nk-grain,.nk-dot,.nk-ring{display:none}}

/* ======== 第二層：SOTM向け ========
   6) ヘッダーの「家族の4点」— いま居るページの下に休み、指したページへ移り、押すと集まる
   7) 章見出し（h2）も一行ずつ下から
   8) カードが指先へわずかに傾く（PC）
   9) 最後に、大きな名前 — スクロールで輪郭が満ちる */
.nk-fam{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:2}
.nk-fam i{position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);transition:transform .9s cubic-bezier(.2,.75,.15,1),opacity .4s}
.nk-fam i:nth-child(1){background:var(--lime,#8ec420)}.nk-fam i:nth-child(2){background:var(--pink,#e9528e);transition-delay:.04s}.nk-fam i:nth-child(3){background:var(--cyan,#02afe2);transition-delay:.08s}.nk-fam i:nth-child(4){background:var(--yellow,#fdd90d);transition-delay:.12s}
.nk-fam.go i{transition-duration:.45s}
@media (max-width:860px){.nk-fam{display:none}}

.nk-h2 .nk-ln>span{animation:none;transform:translateY(112%);transition:transform 1s cubic-bezier(.2,.75,.1,1)}
.nk-h2 .nk-ln:nth-child(2)>span{transition-delay:.08s}.nk-h2 .nk-ln:nth-child(3)>span{transition-delay:.16s}
.nk-h2.in .nk-ln>span{transform:none}

@media (pointer:fine) and (hover:hover){.nk-tilt{transform-style:preserve-3d;will-change:transform}.nk-tilt.on{transition:transform .08s linear}.nk-tilt:not(.on){transition:transform .5s cubic-bezier(.2,.7,.2,1)}}

@media (prefers-reduced-motion:reduce){.nk-h2 .nk-ln>span{transform:none;transition:none}.nk-fam i{transition:none}.nk-tilt{transform:none!important}}
.site-head:has(.nk-fam) .nav a[aria-current]{border-bottom-color:transparent}
.site-head:has(.nk-fam) .nav a:not(.cta)::after{display:none}

/* ---- 右側の目次（全ページ共通・PCのみ） ---- */
.nk-dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:60;display:none;flex-direction:column;gap:9px;align-items:flex-end}
@media (min-width:1180px) and (hover:hover){.nk-dots{display:flex}}
.nk-dots a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-2,#5a544d);font-size:12px;transition:color .2s}
.nk-dots a span{background:var(--paper,#f8f4ee);padding:2px 8px;border-radius:999px;white-space:nowrap}
.nk-dots a i{width:8px;height:8px;border-radius:50%;background:var(--paper-3,#d9d3ca);display:block;transition:.25s}
.nk-dots a:hover,.nk-dots a.on{color:var(--ink,#332e29)}
.nk-dots a.on i{background:var(--pink,#e9528e);transform:scale(1.4)}
.nk-dots:focus-within{opacity:1}
@media print{.nk-dots{display:none}}