/*
===============================================
Shinka AI - Section Marquee
セクション背景マーキーテキスト（styleport風）
===============================================
*/

/* ========================================
   マーキーラッパー
   ======================================== */

.c-section-marquee {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* ========================================
   マーキーテキスト
   ======================================== */

.c-section-marquee__text {
    display: flex;
    white-space: nowrap;
    animation: marquee-scroll var(--duration-marquee) linear infinite;
    will-change: transform;
}

.c-section-marquee__text span {
    font-family: var(--font-display);
    font-size: var(--font-size-9xl);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.06);
    padding: 0 var(--spacing-xl);
    line-height: 1;
    flex-shrink: 0;
}

/* ========================================
   ダークバリアント
   ======================================== */

.c-section-marquee--dark .c-section-marquee__text span {
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
}

/* ========================================
   アニメーション
   ======================================== */

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* アクセシビリティ：モーション軽減 */
@media (prefers-reduced-motion: reduce) {
    .c-section-marquee__text {
        animation: none;
    }
}

/* ========================================
   レスポンシブ
   ======================================== */

@media (max-width: 767px) {
    .c-section-marquee__text span {
        font-size: var(--font-size-7xl);
    }
}