body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    background-color: #050505;
    color: #ffffff;
    font-feature-settings: "palt";
    overflow-x: hidden;
    line-height: 1.8;
}

/* 浮遊アニメーション */
.float-slow { animation: float 8s ease-in-out infinite; }
.float-medium { animation: float 6s ease-in-out infinite; animation-delay: 1s; }
.float-fast { animation: float 5s ease-in-out infinite; animation-delay: 2s; }

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

/* スクロール出現アニメーション */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* テキストの光彩 */
.glow-text {
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
}

/* 背景の星屑 */
.stars {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 100px 80px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 150px 200px, #ffffff, rgba(0,0,0,0));
    background-size: 300px 300px;
    opacity: 0.15;
    z-index: -1;
}

/* 画像を背景に溶け込ませるマスク処理 */
.fade-image-mask {
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%),
                linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%),
                        linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-composite: source-in;
    object-fit: cover;
}