/* =========================================================
   Hero — 社名キネティック → 背景動画（2026-10-21）
   流れ: Lirem → Li + rem → Live a life you will remember.
         → キャッチ → 説明文 → 背景に竹林動画がフェードイン
   JSが動かない環境では、最初から完成形（動画あり）を表示する。
   段階クラス: .kn-armed（演出待機）→ s1〜s6（文字）→ s7（動画）
   ========================================================= */
.hero-kn{background:#fff;isolation:isolate}
.hero-kn::before{content:"";position:absolute;inset:0;z-index:0;background:var(--grad-hero)}

/* 動画レイヤー（既存の hero-v2 を背景専用として使う） */
.hero-fv.hero-kn .hero-v2{z-index:1;opacity:1;pointer-events:auto;transition:opacity 1.8s ease}
.hero-kn.kn-armed:not(.s7) .hero-v2{opacity:0;pointer-events:none}
.hero-kn .hero-v2 .v2-wash{background:
  radial-gradient(62% 56% at 50% 48%,rgba(244,248,252,.84),rgba(244,248,252,.6) 58%,rgba(244,248,252,.3) 100%),
  linear-gradient(180deg,rgba(244,248,252,.35),rgba(244,248,252,0) 26%,rgba(244,248,252,0) 74%,rgba(244,248,252,.35))}

/* 文字レイヤー */
.kn-stage{position:relative;z-index:3;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:100px 24px 96px;text-align:center;pointer-events:none}
.kn-inner{width:100%;max-width:1320px}
.hero-kn .w{display:inline-block;white-space:nowrap}
.hero-kn .c{display:inline-block}
.hero-kn .gch{background-image:var(--grad-brand);background-repeat:no-repeat;background-size:var(--gw,1em) 100%;background-position:var(--gx,0) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.kn-eb{display:inline-flex;gap:.9em;justify-content:center;flex-wrap:wrap;margin:0 0 clamp(18px,2.4vw,30px);font-family:var(--font-en);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-primary-dark)}
.kn-eb span{display:inline-block;transition:opacity .6s var(--ease),transform .7s var(--ease)}
.kn-eb span:nth-child(2){transition-delay:.08s}.kn-eb span:nth-child(3){transition-delay:.16s}.kn-eb span:nth-child(4){transition-delay:.24s}.kn-eb span:nth-child(5){transition-delay:.32s}
.kn-eb .x{color:var(--c-muted)}
.hero-kn.kn-armed:not(.s5) .kn-eb span{opacity:0;transform:translateY(8px)}

.kn-sentence{position:relative;margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(40px,5.5vw,82px);line-height:1.04;letter-spacing:-.035em;color:var(--c-ink)}
.kn-sentence .ch{display:inline-block;transition:opacity .7s var(--ease),transform .95s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--d,0)*1ms)}
.hero-kn.kn-armed .kn-sentence .ch{opacity:0;transform:translateY(.42em) rotate(9deg);filter:blur(8px)}
.hero-kn.kn-armed .kn-sentence .ch.key{transform:none;filter:none;transition:opacity .4s linear;transition-delay:0s}
.hero-kn.kn-armed.s3 .kn-sentence .ch:not(.key){opacity:1;transform:none;filter:none}
.hero-kn.kn-armed.s4 .kn-sentence .ch.key{opacity:1}

.kn-big{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);z-index:4;font-family:var(--font-display);font-weight:800;font-size:clamp(112px,23vw,330px);line-height:1;letter-spacing:-.045em;white-space:nowrap;pointer-events:none;transition:opacity .4s linear}
.kn-big .b{display:inline-block;transform-origin:0 0;transition:transform .95s var(--ease),opacity .7s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--i)*70ms)}
.hero-kn.kn-armed:not(.s1) .kn-big .b{opacity:0;transform:translateY(.32em);filter:blur(12px)}
.hero-kn.s2 .kn-big .b.l{transform:translateX(-.13em);transition-delay:0s;transition-duration:.8s}
.hero-kn.s2 .kn-big .b.r{transform:translateX(.13em);transition-delay:0s;transition-duration:.8s}
.kn-plus{position:absolute;top:50%;left:var(--px,50%);font-family:var(--font-en);font-weight:600;font-size:.2em;color:var(--c-muted);transform:translate(-50%,-30%) scale(.4);opacity:0;transition:opacity .5s var(--ease),transform .7s var(--ease)}
.hero-kn.s2 .kn-plus{opacity:1;transform:translate(-50%,-30%) scale(1)}
.hero-kn.s3 .kn-plus{opacity:0;transform:translate(-50%,-30%) scale(.4);transition-duration:.25s}
.hero-kn.s4 .kn-big{opacity:0}
.hero-kn:not(.kn-armed) .kn-big,.hero-kn.gone .kn-big{visibility:hidden}

.kn-ann{position:absolute;left:0;top:0;height:3px;border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.kn-ann.a1{background:linear-gradient(90deg,var(--c-violet),var(--c-primary))}
.kn-ann.a2{background:linear-gradient(90deg,var(--c-primary),var(--c-teal));transition-delay:.12s}
.hero-kn.s5 .kn-ann{transform:none}

.kn-catch{margin:clamp(30px,3.8vw,54px) 0 0;font-family:var(--font-jp);font-weight:900;font-size:clamp(28px,4.3vw,62px);line-height:1.38;letter-spacing:-.01em;color:var(--c-ink)}
.kn-catch .ln{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em}
.kn-catch .c{transition:transform .95s var(--ease);transition-delay:calc(var(--i)*42ms)}
.hero-kn.kn-armed:not(.s5) .kn-catch .c{transform:translateY(112%)}
.kn-sub{max-width:700px;margin:clamp(18px,2.2vw,26px) auto 0;font-size:clamp(14px,1.25vw,16.5px);font-weight:600;line-height:2;color:var(--c-ink);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.hero-kn.kn-armed:not(.s6) .kn-sub{opacity:0;transform:translateY(14px)}

.hero-kn .hero-fv-scroll{z-index:5}
.hero-kn.kn-instant,.hero-kn.kn-instant *{transition:none!important}

@media(max-width:640px){
  .kn-stage{padding:92px 20px 104px}
  .kn-sentence{font-size:11.2vw;line-height:1.06}
  .kn-big{top:44%}
  .kn-ann{display:none}
  .kn-sub br{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-kn *,.hero-kn .hero-v2{transition:none!important}
}