/* This is the correct CSS content for the css/home.css file. */

/* タイトルアニメーション */
.hero-title .animated-title .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(-50px) rotateX(90deg);
    animation: flipIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes flipIn {
    to { opacity: 1; transform: translateY(0) rotateX(0deg); }
}
@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* === Hero Section Styles START === */
#hero-background {
    background-image: url('../images/top_space.jpg');
    background-size: cover;
    background-position: center;
    animation: zoom-in 40s ease-in-out infinite;
    transform: scale(1);
}

@keyframes zoom-in {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

#hero-cards-container {
    perspective: 1200px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-card {
    position: absolute;
    width: 15%;
    max-width: 180px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    will-change: transform;
    animation-name: float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes float {
    0% { transform: translateY(20px) rotateX(10deg) rotateY(10deg) rotateZ(0deg); }
    50% { transform: translateY(-20px) rotateX(-10deg) rotateY(-10deg) rotateZ(5deg); }
    100% { transform: translateY(20px) rotateX(10deg) rotateY(10deg) rotateZ(0deg); }
}

.card-1 { top: 15%; left: 10%; width: 14%; animation-duration: 12s; transform: rotateZ(-15deg); }
.card-2 { top: 20%; left: 75%; width: 16%; animation-duration: 15s; animation-delay: -3s; transform: rotateZ(20deg); }
.card-3 { top: 60%; left: 80%; width: 13%; animation-duration: 10s; animation-delay: -1s; transform: rotateZ(10deg); }
.card-4 { top: 65%; left: 5%;  width: 15%; animation-duration: 14s; animation-delay: -5s; transform: rotateZ(-8deg); }
.card-5 { top: 5%;  left: 45%; width: 12%; animation-duration: 11s; animation-delay: -7s; transform: rotateZ(5deg); }
.card-6 { top: 40%; left: 40%; width: 18%; animation-duration: 16s; animation-delay: -2s; transform: rotateZ(-5deg); z-index: 5; }
.card-7 { top: 55%; left: 25%; width: 14%; animation-duration: 13s; animation-delay: -4s; transform: rotateZ(12deg); }

/* リッチなテキストスタイル */
@keyframes golden-shimmer {
    0%, 100% {
        text-shadow: 
            0 0 5px rgba(255, 215, 0, 0.6),
            0 0 15px rgba(255, 215, 0, 0.4),
            0 0 30px rgba(255, 165, 0, 0.3),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
    50% {
        text-shadow: 
            0 0 10px rgba(255, 225, 100, 0.8),
            0 0 25px rgba(255, 225, 100, 0.6),
            0 0 50px rgba(255, 165, 0, 0.4),
            2px 2px 4px rgba(0, 0, 0, 0.5);
    }
}

.hero-title {
    animation: golden-shimmer 3.5s ease-in-out infinite;
}

#restart-title {
    color: #f0f0f0;
    animation: golden-shimmer 3.5s ease-in-out infinite;
    animation-delay: 0.5s; /* 少し遅らせて開始 */
}

#restart-title .char {
    display: inline-block;
    color: transparent;
    transform: translateY(30px) scale(0.8);
    will-change: transform, color;
    animation: floatUp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes floatUp {
    to {
        color: inherit;
        transform: translateY(0) scale(1);
    }
}
/* === Hero Section Styles END === */