/* まなログ ランディングページ - ストーリーテリング CSS */

body {
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    overflow-x: hidden;
}

/* ストーリーテリング用のアニメーション */
.story-section {
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* 場面1: 朝のスタート */
.scene-morning {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

.scene-morning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.3;
}

/* 場面2: 学校・活動 */
.scene-school {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    position: relative;
}

.scene-school::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M20 20l20-20v40L20 20z'/%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.2;
}

/* 場面3: 振り返りタイム */
.scene-evening {
    background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    position: relative;
}

.scene-evening::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M0 0h80v80H0V0zm20 20v40h40V20H20zm20 35a15 15 0 1 1 0-30 15 15 0 0 1 0 30z'/%3E%3C/g%3E%3C/svg%3E") repeat;
}

/* フローティング要素 */
.floating {
    animation: float 6s ease-in-out infinite;
}

.floating-delayed {
    animation: float 6s ease-in-out infinite;
    animation-delay: -3s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* ストーリー進行のフェードイン */
.story-fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.story-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* キャラクター要素 */
.character {
    transition: all 0.5s ease;
}

.character:hover {
    transform: scale(1.1) rotate(5deg);
}

/* 雲の動き */
.clouds {
    position: absolute;
    top: 10%;
    left: -10%;
    width: 120%;
    height: 80%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0 10c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10S0 15.5 0 10zm20 0c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10-10-4.5-10-10zm20 0c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10-10-4.5-10-10z' fill='%23ffffff' fill-opacity='0.3'/%3E%3C/svg%3E") repeat-x;
    animation: drift 20s linear infinite;
    pointer-events: none;
}

@keyframes drift {
    from { transform: translateX(-100px); }
    to { transform: translateX(100px); }
}

/* ページトランジション */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #667eea, #764ba2);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.page-transition.active {
    opacity: 1;
    pointer-events: all;
}

/* ブラウザの戻るボタン対応 - ページトランジションを強制非表示 */
body:not(.transitioning) .page-transition {
    display: none !important;
}

/* ページが完全に読み込まれた後のフォールバック */
body.loaded .page-transition:not(.active) {
    display: none !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .character {
        transform: scale(0.8);
    }

    .floating, .floating-delayed {
        animation-duration: 4s;
    }

    .clouds {
        animation-duration: 15s;
    }

    .story-fade-in {
        transform: translateY(30px);
    }
}

/* パフォーマンス最適化 */
.parallax-bg,
.floating,
.floating-delayed,
.character {
    will-change: transform;
}

/* アクセシビリティ: アニメーションを無効にするユーザー向け */
@media (prefers-reduced-motion: reduce) {
    .floating,
    .floating-delayed,
    .clouds {
        animation: none;
    }

    .story-fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .parallax-bg {
        transform: none !important;
    }
}