/* ========================================
   AIXIA株式会社 アニメーションシステム
   Version: 1.0
   Created: 2025-01-27
   Based on: グラビアアイドル株式会社
======================================== */

/* ========================================
   基本アニメーションクラス
   
   注意: アニメーションクラスを追加した場合は、
   animations.js の setupScrollAnimations() と 
   validateAnimationElements() の両方を更新してください。
   
   現在サポートされているクラス:
   - .fade-in-up: 個別要素用（カード等）
   - .fade-in-up-section: セクション要素用
   - .fade-in-hero: ヒーローセクション用
======================================== */

/* 下から上への表示アニメーション */
.fade-in-up {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up.animate {
    opacity: 1;
    transform: translateY(0);
}

/* セクション全体の表示アニメーション */
.fade-in-up-section {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up-section.animate {
    opacity: 1;
    transform: translateY(0);
}

/* ヒーローセクションのアニメーション */
.fade-in-hero {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-hero.animate {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   ホバーアニメーション
======================================== */

/* 光るエフェクト */
.hover-glow {
    position: relative;
    overflow: hidden;
}

.hover-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.2), transparent);
    transition: left 0.6s ease;
}

.hover-glow:hover::before {
    left: 100%;
}

/* スケールエフェクト */
.hover-scale {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* 色変化エフェクト */
.hover-color {
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-color:hover {
    color: var(--aixia-primary);
}

/* ボタンホバーエフェクト */
.btn-hover-effect {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hover-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.3), transparent);
    transition: left 0.6s ease;
}

.btn-hover-effect:hover::before {
    left: 100%;
}

.btn-hover-effect:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ========================================
   順次表示アニメーション
======================================== */

/* 遅延時間の定義 */
.aixia-delay-1 { transition-delay: 0.1s; }
.aixia-delay-2 { transition-delay: 0.2s; }
.aixia-delay-3 { transition-delay: 0.3s; }
.aixia-delay-4 { transition-delay: 0.4s; }
.aixia-delay-5 { transition-delay: 0.5s; }
.aixia-delay-6 { transition-delay: 0.6s; }
.aixia-delay-7 { transition-delay: 0.7s; }
.aixia-delay-8 { transition-delay: 0.8s; }

/* 短い間隔の遅延 */
.aixia-delay-short-1 { transition-delay: 0.05s; }
.aixia-delay-short-2 { transition-delay: 0.1s; }
.aixia-delay-short-3 { transition-delay: 0.15s; }
.aixia-delay-short-4 { transition-delay: 0.2s; }
.aixia-delay-short-5 { transition-delay: 0.25s; }
.aixia-delay-short-6 { transition-delay: 0.3s; }
.aixia-delay-short-7 { transition-delay: 0.35s; }
.aixia-delay-short-8 { transition-delay: 0.4s; }

/* ========================================
   特殊エフェクト
======================================== */

/* テキストタイピングアニメーション */
.typewriter {
    overflow: hidden;
    border-right: 2px solid #111827;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #111827; }
}

/* パルスエフェクト */
.pulse-effect {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* フローティングアニメーション */
.floating {
    animation: floating 3s ease-in-out infinite;
}

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

/* グラデーションアニメーション */
.gradient-animation {
    background: linear-gradient(-45deg, #111827, #374151, #6b7280, #9ca3af);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ヒーローセクション特別エフェクト */
.hero-background {
    position: relative;
    overflow: hidden;
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.08) 0%, transparent 70%);
    animation: heroPulse 8s ease-in-out infinite;
}

@keyframes heroPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

/* テキストグローエフェクト */
.text-glow {
    text-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
    animation: textGlow 3s ease-in-out infinite alternate;
}

@keyframes textGlow {
    from {
        text-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
    }
    to {
        text-shadow: 0 0 30px rgba(79, 70, 229, 0.5);
    }
}

/* ホタル効果 - 青く明滅する点状粒子（背景全体） */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: -1; /* 背景レベルに配置 */
}

.particle {
    position: absolute;
    width: 6px; /* サイズを小さく */
    height: 6px;
    background: rgba(79, 70, 229, 0.4); /* 透明度を上げて淡く */
    border-radius: 50%;
    box-shadow: 
        0 0 8px rgba(79, 70, 229, 0.3),
        0 0 16px rgba(6, 182, 212, 0.2),
        0 0 24px rgba(79, 70, 229, 0.1);
    animation: particleFloat 60s linear infinite, fireflyGlow 2s ease-in-out infinite;
    will-change: transform, opacity, box-shadow;
    opacity: 0.4; /* 透明度を上げて淡く */
}

/* ホタルのサイズバリエーション */
.particle:nth-child(3n) {
    width: 4px;
    height: 4px;
}

.particle:nth-child(5n) {
    width: 7px;
    height: 7px;
}

.particle:nth-child(7n) {
    width: 8px;
    height: 8px;
}

.particle:nth-child(11n) {
    width: 3px;
    height: 3px;
}

/* ホタルのような明滅アニメーション - シンプルで確実 */
@keyframes fireflyGlow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
        box-shadow: 
            0 0 6px rgba(79, 70, 229, 0.3),
            0 0 12px rgba(6, 182, 212, 0.2),
            0 0 18px rgba(79, 70, 229, 0.1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
        box-shadow: 
            0 0 12px rgba(79, 70, 229, 0.5),
            0 0 24px rgba(6, 182, 212, 0.3),
            0 0 36px rgba(79, 70, 229, 0.2);
    }
}

/* パーティクルの遅延バリエーション */
.particle:nth-child(2n) {
    animation-delay: 1s;
}

.particle:nth-child(3n) {
    animation-delay: 2s;
}

.particle:nth-child(4n) {
    animation-delay: 0.5s;
}

.particle:nth-child(5n) {
    animation-delay: 1.5s;
}

/* パーティクルの軌道バリエーション適用 */
.particle:nth-child(3n) {
    animation: particleFloat2 25s linear infinite, particlePulse 3s ease-in-out infinite;
}

.particle:nth-child(5n) {
    animation: particleFloat3 25s linear infinite, particlePulse 3s ease-in-out infinite;
}

.particle:nth-child(7n) {
    animation: particleFloat2 30s linear infinite, particlePulse 3s ease-in-out infinite;
}

.particle:nth-child(11n) {
    animation: particleFloat3 35s linear infinite, particlePulse 3s ease-in-out infinite;
}

/* ホタルの浮遊アニメーション - シンプルで確実 */
@keyframes fireflyFloat {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0.6;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) translateX(50px);
        opacity: 0.6;
    }
}

/* 左から右への浮遊アニメーション */
@keyframes fireflyFloatLeft {
    0% {
        transform: translateX(-100px) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateX(calc(100vw + 100px)) translateY(-50px);
        opacity: 0;
    }
}

/* 右から左への浮遊アニメーション */
@keyframes fireflyFloatRight {
    0% {
        transform: translateX(100px) translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateX(calc(-100vw - 100px)) translateY(50px);
        opacity: 0;
    }
}

/* AIXIA背景文字と同じ浮遊アニメーション */
@keyframes particleFloat {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(50px, -30px) rotate(90deg) scale(1.1);
    }
    50% {
        transform: translate(-30px, -60px) rotate(180deg) scale(0.9);
    }
    75% {
        transform: translate(-50px, -30px) rotate(270deg) scale(1.05);
    }
    100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
    }
}

/* パーティクルの軌道バリエーション */
@keyframes particleFloat2 {
    0% {
        transform: translateY(100vh) translateX(50px) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 0.3;
    }
    15% {
        opacity: 0.8;
    }
    25% {
        transform: translateY(75vh) translateX(-20px) rotate(90deg);
    }
    50% {
        transform: translateY(40vh) translateX(60px) rotate(180deg);
    }
    75% {
        transform: translateY(15vh) translateX(-40px) rotate(270deg);
    }
    85% {
        opacity: 0.8;
    }
    95% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-150px) translateX(-80px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes particleFloat3 {
    0% {
        transform: translateY(100vh) translateX(-30px) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 0.3;
    }
    15% {
        opacity: 0.8;
    }
    25% {
        transform: translateY(85vh) translateX(40px) rotate(90deg);
    }
    50% {
        transform: translateY(60vh) translateX(-50px) rotate(180deg);
    }
    75% {
        transform: translateY(25vh) translateX(30px) rotate(270deg);
    }
    85% {
        opacity: 0.8;
    }
    95% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-120px) translateX(80px) rotate(360deg);
        opacity: 0;
    }
}

/* 左右からの浮遊アニメーション */
@keyframes particleFloatLeft {
    0% {
        transform: translateX(-100px) translateY(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 0.3;
    }
    15% {
        opacity: 0.8;
    }
    25% {
        transform: translateX(20px) translateY(20px) rotate(90deg);
    }
    50% {
        transform: translateX(50px) translateY(-30px) rotate(180deg);
    }
    75% {
        transform: translateX(80px) translateY(40px) rotate(270deg);
    }
    85% {
        opacity: 0.8;
    }
    95% {
        opacity: 0.3;
    }
    100% {
        transform: translateX(calc(100vw + 100px)) translateY(-50px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes particleFloatRight {
    0% {
        transform: translateX(100px) translateY(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 0.3;
    }
    15% {
        opacity: 0.8;
    }
    25% {
        transform: translateX(-20px) translateY(-20px) rotate(90deg);
    }
    50% {
        transform: translateX(-50px) translateY(30px) rotate(180deg);
    }
    75% {
        transform: translateX(-80px) translateY(-40px) rotate(270deg);
    }
    85% {
        opacity: 0.8;
    }
    95% {
        opacity: 0.3;
    }
    100% {
        transform: translateX(calc(-100vw - 100px)) translateY(50px) rotate(360deg);
        opacity: 0;
    }
}

/* AIXIAロゴ背景アニメーション */
.logo-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.logo-background-item {
    position: absolute;
    opacity: 0.03;
    animation: logoFloat 60s linear infinite;
    will-change: transform;
}

.logo-background-item:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 80s;
}

.logo-background-item:nth-child(2) {
    top: 20%;
    right: 15%;
    animation-delay: -20s;
    animation-duration: 70s;
}

.logo-background-item:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: -40s;
    animation-duration: 90s;
}

.logo-background-item:nth-child(4) {
    bottom: 20%;
    right: 25%;
    animation-delay: -60s;
    animation-duration: 75s;
}

.logo-background-item:nth-child(5) {
    top: 50%;
    left: 5%;
    animation-delay: -10s;
    animation-duration: 85s;
}

.logo-background-item:nth-child(6) {
    top: 60%;
    right: 10%;
    animation-delay: -30s;
    animation-duration: 65s;
}

.logo-background-item img {
    width: 200px;
    height: auto;
    filter: grayscale(100%) brightness(0.5);
    transition: opacity 0.3s ease;
}

@keyframes logoFloat {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(50px, -30px) rotate(90deg) scale(1.1);
    }
    50% {
        transform: translate(-30px, -60px) rotate(180deg) scale(0.9);
    }
    75% {
        transform: translate(-50px, -30px) rotate(270deg) scale(1.05);
    }
    100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
    }
}

/* ロゴ背景のホバー効果 */
.logo-background-item:hover {
    opacity: 0.05;
}

/* ロゴ背景のパフォーマンス最適化 */
@media (prefers-reduced-motion: reduce) {
    .logo-background-item {
        animation: none;
        opacity: 0.02;
    }
}

/* モバイル用の調整 */
@media (max-width: 768px) {
    .logo-background-item img {
        width: 120px;
    }
    
    .logo-background-item:nth-child(1),
    .logo-background-item:nth-child(2),
    .logo-background-item:nth-child(3),
    .logo-background-item:nth-child(4),
    .logo-background-item:nth-child(5),
    .logo-background-item:nth-child(6) {
        animation-duration: 100s;
    }
    
    /* モバイルではロゴの数を減らす */
    .logo-background-item:nth-child(5),
    .logo-background-item:nth-child(6) {
        display: none;
    }
}

/* タブレット用の調整 */
@media (max-width: 1024px) and (min-width: 769px) {
    .logo-background-item img {
        width: 160px;
    }
    
    .logo-background-item:nth-child(1),
    .logo-background-item:nth-child(2),
    .logo-background-item:nth-child(3),
    .logo-background-item:nth-child(4),
    .logo-background-item:nth-child(5),
    .logo-background-item:nth-child(6) {
        animation-duration: 90s;
    }
}

/* 小さな画面用の調整 */
@media (max-width: 480px) {
    .logo-background-item img {
        width: 80px;
    }
    
    .logo-background-item:nth-child(1),
    .logo-background-item:nth-child(2),
    .logo-background-item:nth-child(3),
    .logo-background-item:nth-child(4) {
        animation-duration: 120s;
    }
    
    /* 小さな画面ではロゴの数をさらに減らす */
    .logo-background-item:nth-child(3),
    .logo-background-item:nth-child(4) {
        display: none;
    }
}

/* ========================================
   アクセシビリティ対応
======================================== */

/* モーション設定の尊重 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .fade-in-up,
    .fade-in-up-section,
    .fade-in-hero {
        opacity: 1;
        transform: none;
    }
    
    .typewriter {
        animation: none;
        border-right: none;
        width: auto;
    }
    
    .pulse-effect,
    .floating,
    .gradient-animation {
        animation: none;
    }
}

/* ========================================
   レスポンシブ対応
======================================== */

/* タブレット用の調整 */
@media (max-width: 1024px) {
    .fade-in-up {
        transition-duration: 0.5s;
    }
    
    .fade-in-up-section {
        transition-duration: 0.6s;
    }
    
    .fade-in-hero {
        transition-duration: 0.8s;
    }
}

/* モバイル用の調整 */
@media (max-width: 768px) {
    .fade-in-up {
        transition-duration: 0.4s;
    }
    
    .fade-in-up-section {
        transition-duration: 0.5s;
    }
    
    .fade-in-hero {
        transition-duration: 0.6s;
    }
    
    .hover-scale:hover {
        transform: scale(1.02);
    }
    
    .btn-hover-effect:hover {
        transform: translateY(-1px);
    }
}

/* ========================================
   ユーティリティクラス
======================================== */

/* アニメーション無効化 */
.no-animation {
    animation: none !important;
    transition: none !important;
}

/* 即座に表示 */
.show-immediately {
    opacity: 1 !important;
    transform: none !important;
}

/* 非表示 - Tailwind CSSとの競合を避けるため無効化 */
/* 
.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}
*/

/* 表示 */
.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* パフォーマンス最適化 */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}