/**
 * Hero Background Fix
 * 背景画像が黒塗りになる問題の修正
 */

/* Hero Section Reset */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent !important;
}

/* 背景画像のコンテナ */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1 !important;
    background: transparent !important;
}

/* 背景画像 */
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 軽いオーバーレイ（テキストの視認性向上用） */
.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg, 
        rgba(0, 0, 0, 0.1) 0%, 
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* コンテンツエリア */
.hero-content {
    position: relative;
    z-index: 10 !important;
    text-align: center;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
    background: transparent !important;
}

/* スクロールインジケーター */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* 他のCSSからの干渉を防ぐ */
.hero::before,
.hero::after {
    display: none !important;
}

.hero-background > *:not(.hero-image) {
    display: none !important;
}

/* parallax属性の処理 */
.hero-background[data-parallax] {
    will-change: transform;
}

/* アドバンスドデザインやウルトラモダンの影響を無効化 */
.hero.ultra-hero,
.hero.advanced-hero {
    background: transparent !important;
}

.hero .liquid-cursor,
.hero .cursor-follower,
.hero .floating-element {
    display: none !important;
}

/* Ensure visibility */
.hero,
.hero-background,
.hero-image,
.hero-content {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile height override */
@media (max-width: 768px) {
    .hero {
        min-height: 20vh !important;
        height: 20vh !important;
        max-height: 20vh !important;
    }
}