/* ==========================================================================
   Procevo — motion/site-motion.css

   motion-plan.md 差し込み表 §5 に対応。main.css は触らず、ここで上書きする。
   読み込みは functions.php（is_front_page のときだけ、procevo-style のあと）。

   目次
   - 021 タイプライター（ヒーローの例文・レイアウトとカーソル）
   - 017 ラインマスク（見出しの行せり上がり・SplitText の覗き窓）
   - 027 マスク付き写真リビール（学べることの3枚）
   - 113 脈動を弱める（ヒーローのボード／カルーセルの開催状況）
   ========================================================================== */

/* --------------------------------------------------------------------------
   021 タイプライター（ヒーロー）
   -------------------------------------------------------------------------- */
.hero__typed {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 6px;
    margin-top: 18px;
}

/* 直後の CTA の余白を詰めて、ヒーローの縦の増分を抑える */
.hero__typed + .hero__actions {
    margin-top: 24px;
}

.hero__typed-label {
    flex: none;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--blue);
}

.hero__typed-line {
    display: inline-grid;
    align-items: baseline;
    min-width: 0;
}

.hero__typed-sizer,
.hero__typed-out {
    grid-area: 1 / 1;
    font-weight: 700;
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.5;
    color: var(--navy);
}

.hero__typed-sizer {
    visibility: hidden;
    padding-right: 6px; /* カーソル（幅2px+左マージン2px）ぶんの余白を先に確保 */
}

.hero__typed-out {
    white-space: normal;
}

/* Typed.js のカーソル（cursorChar は空にしているので、見た目はここで描く） */
.hero__typed .typed-cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -.16em;
    background: var(--sky);
    animation: procevo-typed-blink 1s step-end infinite;
    transition: opacity .4s;
}

.hero__typed.is-done .typed-cursor {
    animation: none;
    opacity: 0;
}

@keyframes procevo-typed-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 停止ボタン（JS が生成） */
.hero__typed-toggle {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    transition: border-color .2s, background .2s;
}

.hero__typed-toggle span {
    width: 2px;
    height: 10px;
    border-radius: 1px;
    background: var(--muted);
}

.hero__typed-toggle:hover,
.hero__typed-toggle:focus-visible {
    border-color: var(--blue);
}

/* 止めている間は再生の三角にする */
.hero__typed-toggle[aria-pressed="true"] span {
    display: none;
}

.hero__typed-toggle[aria-pressed="true"]::before {
    content: "";
    margin-left: 2px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--blue);
}

/* 打ち終わったら見えなくするが、場所は残す（ボタンの行が縮んでCTAが動かないように） */
.hero__typed-toggle:disabled {
    visibility: hidden;
}

/* タップ判定だけ40pxへ広げる（見た目は28pxのまま） */
@media (max-width: 767px) {
    .hero__typed-toggle::after {
        content: "";
        position: absolute;
        inset: -6px;
    }
}

/* 1181px未満とSPは、ラベル＋停止ボタンが上、例文が下 */
@media (max-width: 1180px) {
    .hero__typed-line {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__typed .typed-cursor,
    .hero__typed-toggle {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   017 ラインマスク・リビール（SplitText／見出し10本）
   -------------------------------------------------------------------------- */

/* 分割前の一瞬を隠す。GSAPが読めない・分割が失敗しても、3秒後には必ず見せる
   （フェイルセーフはCSSだけで完結させ、JSの成否に依存させない） */
@media (prefers-reduced-motion: no-preference) {
    .js [data-split]:not(.is-split) {
        visibility: hidden;
        animation: procevo-split-failsafe 0s 3s forwards;
    }
}

@keyframes procevo-split-failsafe {
    to { visibility: visible; }
}

/* SplitText（mask:"lines" / linesClass:"wm-line"）が作る覗き窓。
   tag:"span" で作られるのでインラインのままだと transform も overflow も効かない。
   ブロックにして、行ごとの覗き窓と改行位置を分割前と同じにする */
.wm-line-mask,
.wm-line {
    display: block;
}

.wm-line-mask {
    overflow: hidden;
    padding-bottom: .06em;
    margin-bottom: -.06em;
}

/* --------------------------------------------------------------------------
   027 マスク付き写真リビール（学べること・下から拭き上げ）
   -------------------------------------------------------------------------- */
.has-photo-reveal .wm-clip.wm-clip--rise {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1) var(--wm-clip-delay, 0s);
}

.has-photo-reveal .wm-clip.wm-clip--rise.is-in {
    clip-path: inset(0 0 0 0);
}

.has-photo-reveal .wm-clip.wm-clip--rise img {
    scale: 1.12;
    transition: transform 1.4s var(--ease-out), scale 1.4s cubic-bezier(.22, 1, .36, 1) var(--wm-clip-delay, 0s);
}

.has-photo-reveal .wm-clip.wm-clip--rise.is-in img {
    scale: 1;
}

/* SPでは時間差なし。各カードが視界に入った瞬間に開く */
@media (max-width: 900px) {
    .wm-clip.wm-clip--rise {
        --wm-clip-delay: 0s !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .has-photo-reveal .wm-clip.wm-clip--rise {
        clip-path: none !important;
        transition: none;
    }

    .has-photo-reveal .wm-clip.wm-clip--rise img {
        scale: 1 !important;
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   113 脈動を弱める（ヒーローのボード／カルーセルの開催状況）
   -------------------------------------------------------------------------- */

/* ヒーロー: 無限ではなく3回（約5.4秒）で止める */
.board__status[data-state]::before {
    animation-iteration-count: 3;
}

/* カルーセル: 脈動なし。色（ピンクの点）はそのまま残す */
.ws-card__status[data-state]::before {
    animation: none;
}