/*
================================================
アイリスオーヤマ風プレミアムアニメーション
参考: https://www.irisohyama.co.jp/kyujin1/high-graduates/
2025年7月16日実装
================================================
*/

/* ===== インタラクションとアニメーション設定 ===== */
:root {
    --animation-speed-fast: 0.3s;
    --animation-speed-normal: 0.6s;
    --animation-speed-slow: 1s;
    --animation-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --animation-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== スクロールアニメーションの基本設定 ===== */
.animate-on-scroll {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: all var(--animation-speed-normal) var(--animation-ease) !important;
}

.animate-on-scroll.animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ===== フェードインアニメーション（段階的表示） ===== */
.fade-in-up {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: all var(--animation-speed-normal) var(--animation-ease) !important;
}

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

.fade-in-left {
    opacity: 0 !important;
    transform: translateX(-40px) !important;
    transition: all var(--animation-speed-normal) var(--animation-ease) !important;
}

.fade-in-left.animate {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.fade-in-right {
    opacity: 0 !important;
    transform: translateX(40px) !important;
    transition: all var(--animation-speed-normal) var(--animation-ease) !important;
}

.fade-in-right.animate {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.fade-in-down {
    opacity: 0 !important;
    transform: translateY(-40px) !important;
    transition: all var(--animation-speed-normal) var(--animation-ease) !important;
}

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

/* ===== スケールアニメーション ===== */
.scale-in {
    opacity: 0 !important;
    transform: scale(0.8) !important;
    transition: all var(--animation-speed-normal) var(--animation-ease-back) !important;
}

.scale-in.animate {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.scale-in-bounce {
    opacity: 0 !important;
    transform: scale(0.3) !important;
    transition: all var(--animation-speed-slow) var(--animation-ease-bounce) !important;
}

.scale-in-bounce.animate {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ===== 回転アニメーション ===== */
.rotate-in {
    opacity: 0 !important;
    transform: rotate(-10deg) scale(0.8) !important;
    transition: all var(--animation-speed-normal) var(--animation-ease) !important;
}

.rotate-in.animate {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
}

/* ===== 段階的表示アニメーション（アイリス風） ===== */
.stagger-animation > * {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: all var(--animation-speed-normal) var(--animation-ease) !important;
}

.stagger-animation.animate > *:nth-child(1) { transition-delay: 0.1s !important; opacity: 1 !important; transform: translateY(0) !important; }
.stagger-animation.animate > *:nth-child(2) { transition-delay: 0.2s !important; opacity: 1 !important; transform: translateY(0) !important; }
.stagger-animation.animate > *:nth-child(3) { transition-delay: 0.3s !important; opacity: 1 !important; transform: translateY(0) !important; }
.stagger-animation.animate > *:nth-child(4) { transition-delay: 0.4s !important; opacity: 1 !important; transform: translateY(0) !important; }
.stagger-animation.animate > *:nth-child(5) { transition-delay: 0.5s !important; opacity: 1 !important; transform: translateY(0) !important; }
.stagger-animation.animate > *:nth-child(6) { transition-delay: 0.6s !important; opacity: 1 !important; transform: translateY(0) !important; }
.stagger-animation.animate > *:nth-child(7) { transition-delay: 0.7s !important; opacity: 1 !important; transform: translateY(0) !important; }
.stagger-animation.animate > *:nth-child(8) { transition-delay: 0.8s !important; opacity: 1 !important; transform: translateY(0) !important; }

/* ===== カードホバーエフェクト（アイリス風） ===== */
.card-hover-premium {
    transition: all var(--animation-speed-fast) var(--animation-ease) !important;
    position: relative !important;
    overflow: hidden !important;
}

.card-hover-premium::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(78, 205, 196, 0.1)) !important;
    opacity: 0 !important;
    transition: opacity var(--animation-speed-fast) var(--animation-ease) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.card-hover-premium:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.card-hover-premium:hover::before {
    opacity: 1 !important;
}

.card-hover-premium > * {
    position: relative !important;
    z-index: 2 !important;
}

/* ===== マイクロインタラクション ===== */

/* ボタンプルス効果 */
.micro-pulse {
    animation: micro-pulse 2s ease-in-out infinite !important;
}

@keyframes micro-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
}

/* ハートビート */
.heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite !important;
}

@keyframes heartbeat {
    0%, 14%, 28%, 42%, 70%, 100% { transform: scale(1); }
    7%, 21%, 35% { transform: scale(1.1); }
}

/* フローティング効果 */
.floating {
    animation: floating 3s ease-in-out infinite !important;
}

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

/* ===== テキストアニメーション ===== */

/* タイプライター効果 */
.typewriter {
    overflow: hidden !important;
    border-right: 2px solid #FF6B35 !important;
    white-space: nowrap !important;
    animation: typewriter 3s steps(40) 1s 1 normal both,
               blink-caret 1s step-end infinite !important;
}

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

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

/* グラデーションテキスト移動 */
.gradient-text-animated {
    background: linear-gradient(90deg, #FF6B35, #FFE66D, #4ECDC4, #FF6B9D, #FF6B35) !important;
    background-size: 200% auto !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: gradient-move 3s linear infinite !important;
}

@keyframes gradient-move {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ===== ローディングアニメーション ===== */

/* スピナー */
.loading-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 4px solid rgba(255, 107, 53, 0.2) !important;
    border-top: 4px solid #FF6B35 !important;
    border-radius: 50% !important;
    animation: spinner 1s linear infinite !important;
    margin: 20px auto !important;
}

@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ドット */
.loading-dots {
    display: inline-flex !important;
    gap: 4px !important;
}

.loading-dots > span {
    width: 8px !important;
    height: 8px !important;
    background: #FF6B35 !important;
    border-radius: 50% !important;
    animation: loading-dot 1.4s ease-in-out infinite both !important;
}

.loading-dots > span:nth-child(1) { animation-delay: 0s; }
.loading-dots > span:nth-child(2) { animation-delay: 0.16s; }
.loading-dots > span:nth-child(3) { animation-delay: 0.32s; }

@keyframes loading-dot {
    0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
    40% { transform: scale(1.2); opacity: 1; }
}

/* ===== パララックス効果 ===== */
.parallax-element {
    transition: transform 0.1s ease-out !important;
}

/* ===== 数値カウンターアニメーション ===== */
.counter-animation {
    display: inline-block !important;
    transition: all var(--animation-speed-normal) var(--animation-ease) !important;
}

.counter-animation.counting {
    transform: scale(1.1) !important;
    color: #FF6B35 !important;
}

/* ===== プログレスバーアニメーション ===== */
.progress-bar-animated {
    position: relative !important;
    background: rgba(255, 107, 53, 0.2) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    height: 8px !important;
}

.progress-bar-animated::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    background: linear-gradient(90deg, #FF6B35, #FFE66D) !important;
    border-radius: 10px !important;
    transition: width 2s var(--animation-ease) !important;
    width: 0% !important;
}

.progress-bar-animated.animate::before {
    width: var(--progress-width, 100%) !important;
}

/* ===== アイコンアニメーション ===== */
.icon-bounce {
    animation: icon-bounce 2s ease-in-out infinite !important;
}

@keyframes icon-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.icon-rotate {
    animation: icon-rotate 2s linear infinite !important;
}

@keyframes icon-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon-wiggle {
    animation: icon-wiggle 1s ease-in-out infinite !important;
}

@keyframes icon-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* ===== インタラクティブホバー効果 ===== */

/* 傾き効果 */
.hover-tilt {
    transition: transform var(--animation-speed-fast) var(--animation-ease) !important;
}

.hover-tilt:hover {
    transform: perspective(1000px) rotateX(10deg) rotateY(10deg) !important;
}

/* 影の拡大 */
.hover-shadow-expand {
    transition: box-shadow var(--animation-speed-fast) var(--animation-ease) !important;
}

.hover-shadow-expand:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}

/* ===== 背景パターンアニメーション ===== */
.animated-gradient-bg {
    background: linear-gradient(45deg, #FF6B35, #FFE66D, #4ECDC4, #FF6B9D) !important;
    background-size: 400% 400% !important;
    animation: gradient-shift 8s ease infinite !important;
}

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

/* ===== モバイル専用アニメーション ===== */
@media (max-width: 768px) {
    .mobile-slide-up {
        transform: translateY(20px) !important;
        opacity: 0 !important;
        transition: all var(--animation-speed-normal) var(--animation-ease) !important;
    }
    
    .mobile-slide-up.animate {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
}

/* ===== 3D変換アニメーション ===== */
.flip-card {
    perspective: 1000px !important;
    width: 100% !important;
    height: 200px !important;
}

.flip-card-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    transition: transform 0.8s !important;
    transform-style: preserve-3d !important;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg) !important;
}

.flip-card-front,
.flip-card-back {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flip-card-front {
    background: linear-gradient(135deg, #FF6B35, #FFE66D) !important;
    color: white !important;
}

.flip-card-back {
    background: linear-gradient(135deg, #4ECDC4, #FF6B9D) !important;
    color: white !important;
    transform: rotateY(180deg) !important;
}

/* ===== 視差効果（パララックス） ===== */
.parallax-container {
    perspective: 1px !important;
    height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.parallax-element {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

.parallax-back {
    transform: translateZ(-1px) scale(2) !important;
}

.parallax-base {
    transform: translateZ(0) !important;
}

/* ===== アクセシビリティ配慮 ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .parallax-element {
        transform: none !important;
    }
}

/* ===== 高パフォーマンス設定 ===== */
.gpu-accelerated {
    will-change: transform !important;
    transform: translateZ(0) !important;
}

/* ===== デバッグ用設定 ===== */
.animation-debug {
    border: 2px dashed #FF6B35 !important;
    position: relative !important;
}

.animation-debug::after {
    content: 'ANIMATION' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    background: #FF6B35 !important;
    color: white !important;
    font-size: 10px !important;
    padding: 2px 4px !important;
    z-index: 9999 !important;
}

/* ===== 印刷時は全アニメーション無効 ===== */
@media print {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}