@charset "utf-8";
/* ================================================================
   Tony's — 動きの層（peaceput.com の実測に合わせる）
     ・オープニング＝生成りの面にロゴ＋パーセント。数えきってから幕が抜ける
     ・イージングは実測どおり cubic-bezier(0,.55,.45,1)／尺 .5〜.8s
     ・@keyframes は数を絞る（peaceput は2つだけ）
   重なりの順番（触るときはここを見る）
     オープニング 200 ＞ 遷移の幕 190 ＞ ヘッダー 130 ＞ ドロワー 120 ＞ 上に戻る 60
   ================================================================ */

/* ---- オープニング（body直下に置くこと → hp-pitfalls 5-28） ---- */
.veil{
  position:fixed;inset:0;z-index:200;background:var(--paper);
  display:grid;place-items:center;pointer-events:none;overflow:hidden;
  will-change:transform;
}
.veil__in{display:grid;place-items:center;gap:1.6rem}
.veil__in img{width:min(34vw,320px);opacity:0;transform:translateY(.9rem);}
.veil__num{font-family:var(--didone);font-size:1.15rem;letter-spacing:.14em;color:var(--red);
  opacity:0;font-variant-numeric:tabular-nums}
.veil__rule{width:min(34vw,320px);height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:left center}

/* 初回訪問：ロゴ→罫→数字が出て、2.7秒で幕が上へ抜ける（目安2.5秒以上） */
.veil        {animation:veilUp   .9s var(--ease) 1.80s forwards}
.veil__in    {animation:veilIn   .9s var(--ease) 1.80s forwards}
.veil__in img{animation:veilLogo .9s cubic-bezier(.25,1,.5,1) .10s forwards}
.veil__rule  {animation:veilRule .8s cubic-bezier(.25,1,.5,1) .55s forwards}
.veil__num   {animation:veilNum  .5s cubic-bezier(.25,1,.5,1) .55s forwards}
@keyframes veilUp  {to{transform:translate3d(0,-100%,0);visibility:hidden}}
@keyframes veilIn  {to{transform:translate3d(0,26%,0);opacity:.15}}
@keyframes veilLogo{to{opacity:1;transform:none}}
@keyframes veilRule{to{transform:scaleX(1)}}
@keyframes veilNum {to{opacity:1}}

/* 離脱：幕を下から上げる（transitionが -100%→+100% を補間しないよう一度確定させる） */
.veil.is-armed{animation:none;visibility:visible;transform:translate3d(0,100%,0);transition:none}
.veil.is-armed .veil__in,
.veil.is-armed .veil__in img,
.veil.is-armed .veil__rule,
.veil.is-armed .veil__num{animation:none;transform:none;opacity:1;transition:none}
.veil.is-armed .veil__rule{transform:scaleX(1)}
.veil.is-armed.is-on{transform:none;transition:transform .55s var(--ease)}

/* 到着：ロゴを出したまま幕だけ抜ける（一度も消さない） */
html[data-nav] .veil        {animation:veilUp .8s var(--ease) .20s forwards}
html[data-nav] .veil__in    {animation:none;transform:none;opacity:1}
html[data-nav] .veil__in img{animation:none;opacity:1;transform:none}
html[data-nav] .veil__rule  {animation:none;transform:scaleX(1)}
html[data-nav] .veil__num   {animation:none;opacity:1}

/* 2回目以降の直接アクセスは短く */
html[data-seen]:not([data-nav]) .veil        {animation-delay:.95s;animation-duration:.7s}
html[data-seen]:not([data-nav]) .veil__in    {animation-delay:.95s;animation-duration:.7s}
html[data-seen]:not([data-nav]) .veil__in img{animation-duration:.5s}
html[data-seen]:not([data-nav]) .veil__rule  {animation-delay:.3s;animation-duration:.5s}
html[data-seen]:not([data-nav]) .veil__num   {animation-delay:.3s}

/* ---- スクロール演出は2種類だけ（フェード上げ／マスク開き） ----- */
/* 本体は site.css の .rv / .rvm に置いてある */
html.js .rv[data-d="1"]{transition-delay:.10s}
html.js .rv[data-d="2"]{transition-delay:.20s}
html.js .rv[data-d="3"]{transition-delay:.34s}

/* ---- 上に戻る ------------------------------------------------ */
.totop{position:fixed;right:var(--gut);bottom:2rem;z-index:60;width:2.6rem;height:2.6rem;
  background:var(--ink);color:var(--paper);display:grid;place-items:center;border:0;cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s,background-color .5s var(--ease)}
.totop.on{opacity:1;visibility:visible}
.totop:hover{background:var(--red)}
.totop svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.6}

/* ---- スマホはパララックス・ヘッダー引っ込みを切る -------------- */
@media (hover:none){ .hdr{transition:none} }

@media (prefers-reduced-motion:reduce){
  .veil{display:none}
  .veil__in,.veil__in img,.veil__rule,.veil__num{animation:none!important;opacity:1!important;transform:none!important}
}