/* ==========================================================
   K. Design Works — FV（ファーストビュー）
   すべてのクラスは .kfv で始まる（WordPress／Hello Elementor の
   既存のCSSと、ぶつからないようにするため）。
   文字・余白の大きさは、--u（基準の長さ）から計算する。
   4Kなど、画面が大きいときは、--u を大きくして、全体を拡大する。
   ========================================================== */

html.kfv-lock,
html.kfv-lock body { overflow: hidden; overscroll-behavior: none; }

.kfv,
.kfv *,
.kfv *::before,
.kfv *::after { box-sizing: border-box; }

.kfv {
  --u: 16px;
  --D: min(72vh, 72svh, 84vw);   /* 円の直径 */
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #fff;
  color: #3a3a3a;
  font-family: 'Bellefair', 'Noto Serif JP', serif;
  font-size: var(--u);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
@media (min-width: 1920px) { .kfv { --u: 20px; } }
@media (min-width: 2560px) { .kfv { --u: 26px; } }
@media (min-width: 3200px) { .kfv { --u: 32px; } }

/* WordPress／Elementor側の、img や 見出し のCSSに負けないよう、
   このFV内のルールは、すべて「.kfv」の中に限定して、優先度を上げている */
.kfv .kfv-layer img { max-width: none; border: 0; box-shadow: none; border-radius: 0; }
.kfv h1,
.kfv p { text-transform: none; letter-spacing: normal; }

/* WordPressにログイン中は、上に管理バー(32px／スマホ46px)が出るので、その分、高さを引く */
body.admin-bar .kfv { height: calc(100vh - 32px); height: calc(100svh - 32px); }
@media (max-width: 782px) { body.admin-bar .kfv { height: calc(100vh - 46px); height: calc(100svh - 46px); } }

/* ---------- 画面（レイヤー） ---------- */
.kfv .kfv-layer {
  --g: 0; --S: 3;
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s ease;
}
.kfv .kfv-layer.is-active { opacity: 1; pointer-events: auto; }

.kfv .kfv-bg { position: absolute; inset: 0; background: center / cover no-repeat; }

/* ---------- 1画面目：文字が上から落ちる ---------- */
.kfv .kfv-s1 .kfv-bg { background-image: url('../images/backwhite04.png'); }
.kfv .kfv-s1-in { position: relative; z-index: 2; }
.kfv .kfv-lead {
  display: block;
  font-size: clamp(calc(var(--u) * 1.1), 1.65vw, calc(var(--u) * 1.9));
  letter-spacing: 0.06em;
  margin-bottom: 0.5em;
}
.kfv .kfv-name {
  display: block;
  font-size: clamp(calc(var(--u) * 2.3 + 10px), calc(3.7vw + 10px), calc(var(--u) * 5.2 + 10px));
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin: 0; padding: 0;
  font-family: inherit; color: inherit;
  font-weight: 400;           /* h1 の初期値(太字)を打ち消す。Bellefairは400だけ */
  font-synthesis: none;       /* 無い太さを、ブラウザが偽造して太らせない */
}

.kfv .kfv-drop { opacity: 0; }
.kfv .kfv-layer.is-active.is-play .kfv-drop { animation: kfvDrop 1.15s both; animation-delay: var(--d, 0s); }
@keyframes kfvDrop {
  0%   { transform: translateY(-85vh); opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
  6%   { opacity: 1; }
  58%  { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  75%  { transform: translateY(calc(var(--u) * -0.9)); animation-timing-function: cubic-bezier(.6, 0, .9, .6); }
  100% { transform: translateY(0); opacity: 1; }
}

/* SCROLL（Scortaと同じ書体）。全画面の下部に表示する */
.kfv .kfv-hint {
  position: absolute; left: 50%; bottom: calc(var(--u) * 1.4); z-index: 3;
  transform: translateX(-50%);
  font-family: 'Figtree', sans-serif; font-weight: 700;
  font-size: calc(var(--u) * 0.8); letter-spacing: 0.2em;
  color: #3a3a3a; opacity: 0; transition: opacity 0.6s;
  pointer-events: none;
}
.kfv .kfv-layer.is-active .kfv-hint { opacity: 0.85; transition-delay: 0.9s; }
.kfv .kfv-s1.is-active .kfv-hint { transition-delay: 2.3s; }   /* 1画面目は、文字が落ちたあと */
.kfv .kfv-hint::after {
  content: ''; display: block; width: 1px; height: calc(var(--u) * 2); margin: calc(var(--u) * 0.4) auto 0;
  background: currentColor; transform-origin: top; animation: kfvLine 1.6s ease-in-out infinite;
}
/* 写真の上では、白＋うすい影 */
.kfv .kfv-photo .kfv-hint { color: #fff; filter: drop-shadow(0 0 0.3em rgba(0,0,0,.6)) drop-shadow(0 0 0.7em rgba(0,0,0,.35)); }
/* Skills：円が広がって、白く覆うにつれて、濃い灰色へ */
.kfv .kfv-scrub .kfv-hint {
  color: color-mix(in srgb, #3a3a3a calc(var(--g) * 100%), #fff);
  filter: drop-shadow(0 0 0.3em rgba(0,0,0,calc(0.6 * (1 - var(--g))))) drop-shadow(0 0 0.7em rgba(0,0,0,calc(0.35 * (1 - var(--g)))));
}
@keyframes kfvLine { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 2〜4画面目：写真＋円 ---------- */
.kfv .kfv-photo { background: #dfe3e8; overflow: hidden; }
.kfv .kfv-photo-bob { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; animation: kfvBob 7s ease-in-out infinite alternate; }
.kfv .kfv-photo-pan { position: absolute; top: 0; left: 0; height: 100%; width: 122%; max-width: none; object-fit: cover; animation: kfvPan 22s ease-in-out infinite alternate; }
.kfv .kfv-photo.is-rev .kfv-photo-pan { animation-direction: alternate-reverse; }
@keyframes kfvPan { from { transform: translateX(0); } to { transform: translateX(-18%); } }
@keyframes kfvBob { from { transform: translateY(-2.2%); } to { transform: translateY(2.2%); } }

.kfv .kfv-circle {
  position: relative; z-index: 2;
  width: var(--D); height: var(--D);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--D) * 0.15);
}
.kfv .kfv-circle::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: #fff;
  opacity: calc(0.8 + 0.2 * var(--g));
  transform: scale(calc(1 + (var(--S) - 1) * var(--g)));
  will-change: transform;
  box-shadow: 0 0.5em 1.6em rgba(0,0,0,.3), 0 0.1em 0.35em rgba(0,0,0,.18),
              inset 0 -0.35em 0.8em rgba(0,0,0,.07), inset 0 0.2em 0.5em rgba(255,255,255,.7);
  font-size: var(--u);
}
.kfv .kfv-tag {
  flex: none;
  background: #000; color: #fff;
  font-family: 'Source Code Pro', ui-monospace, monospace; font-weight: 400;
  font-size: calc(var(--u) * 0.85); letter-spacing: 0.14em; line-height: 1.4;
  padding: 0.4em 1.4em; border-radius: 0.45em;
}
.kfv .kfv-circle p {
  margin: 0;
  font-family: 'Noto Serif JP', 'Bellefair', serif; font-weight: 400; color: #333;
  font-size: clamp(calc(var(--u) * 0.78), calc(var(--D) * 0.034), calc(var(--u) * 1.35));
  line-height: 2.05; text-align: center;
  word-break: auto-phrase; line-break: strict; text-wrap: pretty;
}

/* ---------- 5画面目：挨拶文のタイピング ---------- */
.kfv .kfv-s5 .kfv-bg { background-image: url('../images/backwhite04.png'); }   /* ← あとで、別の画像に差し替え */
.kfv .kfv-person {
  position: absolute; z-index: 1;
  left: 8%; bottom: 0;
  height: min(80%, 40vw); width: auto; max-width: none;
  pointer-events: none; user-select: none;
}
.kfv .kfv-greet {
  position: absolute; z-index: 2;
  left: 44%; right: 6%; top: 50%; transform: translateY(-50%);
  text-align: left;
  font-family: 'Noto Serif JP', 'Bellefair', serif; font-weight: 400; color: #3a3a3a;
  font-size: clamp(calc(var(--u) * 0.92), 1.35vw, calc(var(--u) * 1.3));
  line-height: 2.15;
}
/* スマホ・縦長：文章を上、写真を下 */
@media (max-width: 800px), (max-aspect-ratio: 1/1) {
  .kfv .kfv-person { left: 50%; transform: translateX(-50%); height: min(34%, 80vw); }
  .kfv .kfv-greet { left: 7%; right: 7%; top: 7%; transform: none; font-size: clamp(calc(var(--u) * 0.8), 3.5vw, calc(var(--u) * 1.1)); line-height: 2; }
}
.kfv .kfv-greet p { margin: 0 0 1.1em; padding: 0; word-break: auto-phrase; line-break: strict;
  font: inherit; color: inherit; letter-spacing: normal; }
.kfv .kfv-greet p:last-child { margin-bottom: 0; }
.kfv .kfv-ch { opacity: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.kfv .kfv-ch.is-on { opacity: 1; }

/* ---------- サイトのヘッダー：FVの間は隠し、FVのあとで、上から現れる ---------- */
html body .kfv-header-fixed {
  position: fixed !important; top: 0; left: 0; right: 0; width: 100%;
  z-index: 9990; margin: 0;
  background: #fff !important;                 /* 透明度なしの白 */
  background-image: none !important;
  opacity: 0 !important; pointer-events: none; visibility: hidden !important;
  /* Elementorは、セクションごとに、transition を指定しているので、!important で、フェードを優先する */
  transition: opacity .9s ease, visibility 0s linear .9s !important;   /* ふわっと、消える */
}
html body .kfv-header-fixed.kfv-header-show {
  opacity: 1 !important; pointer-events: auto; visibility: visible !important;
  transition: opacity .9s ease, visibility 0s !important;               /* ふわっと、現れる */
}
.kfv-header-fixed > .elementor-background-overlay { display: none !important; }
body.admin-bar .kfv-header-fixed { top: 32px; }
@media (max-width: 782px) { body.admin-bar .kfv-header-fixed { top: 46px; } }
.kfv-spacer { height: 0; }

/* ---------- FVのあとに続く、既存のページ（試作では、ダミー） ---------- */
.kfv-after { background: #fff; color: #333; font-family: 'Noto Sans JP', sans-serif; }

@media (prefers-reduced-motion: reduce) {
  .kfv .kfv-drop { opacity: 1; animation: none !important; }
  .kfv .kfv-photo-bob,
.kfv .kfv-photo-pan,
.kfv .kfv-hint::after { animation: none !important; }
  .kfv .kfv-layer { transition: none; }
}