@import 'variables.css';

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.top-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像が親要素内に収まるように調整 */
    object-position: center; /* 画像を中央に配置 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央に配置 */
    background-color: #f0f0f0;
    opacity: 0; /* Initially invisible */
    animation: fadeIn 0s ease-in-out forwards;
}

.top-background-image {
    width: 100%;
    height: 100%;
    object-position: center; /* 画像を中央に配置 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央に配置 */
    filter: blur(30px);
}

.top-image-spinner {
    border: 4px solid #ccc;
    border-top: 4px solid #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

.top-image-container .top-image-spinner {
    visibility: visible; /* Show when image is loaded */
}

.top-image-container.show {
    visibility: visible; /* Show when image is loaded */
}

.detailsection-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.secondary-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}