/* =========================================================
   サイト全体の動き
   ========================================================= */

/* ---------- 1. 文字送り ---------- */
[data-chars] .ch {
    color: #cbd5e1;                 /* まだ読まれていない文字 */
    transition: color .35s ease, opacity .35s ease, transform .35s ease;
    display: inline-block;
    opacity: .55;
    transform: translateY(2px);
}
[data-chars] .ch.is-space { width: .32em; }
[data-chars] .ch.is-lit {
    color: var(--text);
    opacity: 1;
    transform: translateY(0);
}
/* グラデ見出しに使うときは、点灯した文字だけ色が乗る */
[data-chars].is-gradient .ch.is-lit {
    background: linear-gradient(120deg, var(--purple), var(--pink) 55%, var(--cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- 2. セクションのフェードイン ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1),
                transform .7s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

/* ---------- 3. パララックス ---------- */
[data-parallax] { will-change: transform; }

/* 本編の背景で漂う図形 */
.bg-decor {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .30;
}
.bg-blob--1 { width: 42vw; aspect-ratio: 1; left: -10vw;  top: 6vh;   background: var(--purple); }
.bg-blob--2 { width: 34vw; aspect-ratio: 1; right: -8vw;  top: 45vh;  background: var(--cyan); }
.bg-blob--3 { width: 38vw; aspect-ratio: 1; left: 12vw;   top: 110vh; background: var(--pink); }

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    [data-chars] .ch { opacity: 1; color: var(--text); transform: none; }
    [data-parallax] { transform: none !important; }
}