/* 名刺のオープニング(intro.js と対)。
   index.html の head にある小さなスクリプトが html に ji-on を付けたときだけ表示する。
   白地に赤い「!」の格子が外側から埋まり、「Jank0vic.com」と読める絵になってから、「i」の点を入口にしてサイトへ入る。
   動きは11種類あり、アクセスのたびにランダムで1つが選ばれる。ここには共通の見た目と、基準の動き(.ji-p00)を置く。
   ほかの10種類の動きは intro/p01.js 〜 p10.js が、自分のCSSを読み込み時に足す(クラス名は .ji-p01 〜 .ji-p10)。 */

/* 円が広がるときの半径。@property で型を与えると、WAAPI で滑らかに動かせる */
@property --ji-r { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* スクロールバーの分の余白を最初から確保して、イントロが終わってバーが現れてもサイトの幅が揺れないようにする */
html.ji-on { overflow: hidden; scrollbar-gutter: stable; }

#jank-intro {
  display: none;
  position: fixed; inset: 0; z-index: 100000;
  overflow: hidden;
  background: #fff; color: #E3001B;
  touch-action: none; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}
html.ji-on #jank-intro { display: block; }

/* 入口(「i」の点)から円が開いて、下のサイトが見える */
#jank-intro.ji-open {
  -webkit-mask-image: radial-gradient(circle at var(--ji-x) var(--ji-y), transparent var(--ji-r), #000 calc(var(--ji-r) + 1px));
  mask-image: radial-gradient(circle at var(--ji-x) var(--ji-y), transparent var(--ji-r), #000 calc(var(--ji-r) + 1px));
}

.ji-stage { position: absolute; inset: 0; }
.ji-c { position: absolute; }

/* 「!」の形。棒は下すぼまりの台形、点は四角 */
.ji-bar {
  position: absolute; left: 0; top: 0; width: 100%; height: 77.1%;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 91% 100%, 9% 100%);
  transform-origin: 50% 0;
}
.ji-dot {
  position: absolute; left: 9%; bottom: 0; width: 82%; height: 16.9%;
  background: currentColor;
}

/* 中央の文字 */
.ji-wordbox { position: absolute; left: 0; top: 0; width: 100%; text-align: center; visibility: hidden; }
.ji-word {
  display: inline-block; white-space: nowrap;
  font-family: Anton, "IBM Plex Sans JP", "Arial Narrow", sans-serif; font-weight: 400;
  line-height: 1.2; letter-spacing: 0;
}
.ji-l { display: inline-block; clip-path: inset(-40% -12% 0 -12%); }
.ji-l > span { display: inline-block; }
.ji-base { display: inline-block; width: 0; height: 0; }

/* 基準の動き(パターン0): 外側から中央へ、棒→点の順に「!」が埋まり、文字は1文字ずつ下からせり上がる */
.ji-p00 .ji-bar { animation-name: ji-draw; animation-timing-function: cubic-bezier(.2, .8, .2, 1); animation-fill-mode: both; }
.ji-p00 .ji-dot { animation-name: ji-pop; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); animation-fill-mode: both; }
.ji-p00.ji-go .ji-l > span { animation-name: ji-rise; animation-timing-function: cubic-bezier(.16, 1, .3, 1); animation-fill-mode: both; }

@keyframes ji-draw { from { transform: scaleY(0); } to { transform: none; } }
@keyframes ji-pop  { from { transform: scale(0); }  to { transform: none; } }
@keyframes ji-rise { from { transform: translateY(105%); } to { transform: none; } }

/* スキップ: 全アニメーションを一気に最終状態へ */
.ji-instant * { animation-delay: 0ms !important; animation-duration: 1ms !important; }

.ji-skip {
  position: absolute; z-index: 2;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 0 16px; border: 0; background: #fff; color: inherit; cursor: pointer;
  font: 500 12px/1 "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em;
}
.ji-skip:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ji-skip[hidden] { display: none; }

@media print { #jank-intro { display: none !important; } }