/**
 * フローティングスクロールボタン専用CSS
 * histyear互換のデザインとアニメーション
 * 
 * @author Riverside Lab
 * @version 1.0.0 (histyear準拠)
 */

/* フローティング下向きスクロールボタン */
.floating-scroll-btn {
    position: fixed;
    bottom: 40px; 
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 85px; /* より横幅を広く */
    height: 50px; /* 高さも少し大きく */
    border-radius: 15px; /* より丸みを持たせる */
    background: linear-gradient(135deg, #2196F3, #0056b3);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
    cursor: pointer;
    font-size: 24px;
    display: none; /* 初期は完全非表示。.show で flex に戻す（histyear 準拠） */
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    animation: pulse 2.5s infinite; /* 点滅をやや早く */
}

.floating-scroll-btn.show {
    display: flex; /* 表示時に flex に戻す（histyear 準拠） */
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    animation: pulse 2.5s infinite; /* show状態でも確実にアニメーション */
}

.floating-scroll-btn:hover {
    background: linear-gradient(135deg, #0056b3, #003d7a);
    transform: translateX(-50%) translateY(-3px); /* より大きく上に */
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.6); /* より強い影 */
    animation: none; /* ホバー時は点滅停止 */
}

.floating-scroll-btn:active {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 2px 10px rgba(0, 123, 255, 0.3);
}

/* 大きくて細めの下向き三角のアイコン */
.floating-scroll-btn::before {
    content: '';
    width: 0;
    height: 0;
    border-left: 18px solid transparent; /* より大きく */
    border-right: 18px solid transparent; /* より大きく */
    border-top: 24px solid white; /* 高さを調整して細めに見せる */
    animation: bounce 2s infinite; /* 三角の動きもやや遅く */
}

/* 点滅アニメーション（より目立つ） */
@keyframes pulse {
    0%, 100% { 
        opacity: 1;
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
        transform: translateX(-50%) translateY(0); /* 安定したベース位置 */
        background: linear-gradient(135deg, #2196F3, #0056b3);
    }
    50% { 
        opacity: 0.4; /* より薄く */
        box-shadow: 0 8px 30px rgba(0, 123, 255, 1.0); /* より強い光 */
        transform: translateX(-50%) translateY(-2px); /* より大きく上下動 */
        background: linear-gradient(135deg, #0056b3, #2196F3); /* 色を微妙に変える */
    }
}

/* 三角の上下動きアニメーション（やや遅め） */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); } /* 少し大きめの動き */
}

/* モバイル対応 */
@media (max-width: 768px) {
    .floating-scroll-btn {
        bottom: 50px; /* モバイルでもやや上の位置 */
        left: 50%; /* 中央寄せを維持 */
        right: auto; /* rightの指定を無効化 */
        width: 70px; /* モバイルでも横幅を保つ */
        height: 45px;
        font-size: 18px;
    }
    
    .floating-scroll-btn::before {
        border-left: 14px solid transparent;
        border-right: 14px solid transparent;
        border-top: 20px solid white;
    }
}

/* アクセシビリティ（reduced-motion でフローティングボタンのアニメーションを抑制）。
   ※旧実装は `*`（全要素・!important）で全アニメーションを止めており、コンポーネント CSS の越権＝
   共通スピナー（styles_common の .simple-spinner・!important なし）が myTango だけ止まる非対称の
   原因だった（histyear/geogdata はアプリ CSS の !important 定義が勝って回る）。本コンポーネントの
   スコープ（.floating-scroll-btn）に限定する（2026-07-11 修正）。 */
@media (prefers-reduced-motion: reduce) {
    .floating-scroll-btn {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .floating-scroll-btn::before {
        animation: none;
    }
}