/* --- Hero Section Styles --- */

/* 中抜き（アウトライン）文字 */
.stroke-text {
    -webkit-text-stroke: 2px #334155;
    text-transform: uppercase;
}

/* 巨大マーキーの無限アニメーション */
@keyframes marquee-extreme {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee-extreme {
    display: flex;
    width: max-content;
    animation: marquee-extreme 30s linear infinite;
}

/* キャラクターの浮遊アニメーション */
@keyframes floating-char {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
}

.gsap-char {
    animation: floating-char 4s ease-in-out infinite;
    will-change: transform;
}

/* カードの基本スタイルとホバーエフェクト */
.char-card {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
    user-select: none;
}

.char-card:hover {
    transform: translateY(-20px) scale(1.02);
    z-index: 50;
}

/* 背景文字のフォント調整 */
#hero-parallax-bg {
    font-family: 'Noto Sans JP', sans-serif; /* もしサイト共通ならそのまま */
    font-weight: 900;
}

/* レイヤー管理 */
#hero .z-0 { z-index: 0; }
#hero .z-10 { z-index: 10; }
#hero .z-20 { z-index: 20; }
#hero .z-30 { z-index: 30; }
#hero .z-40 { z-index: 40; }