/**
 * Overwrite Tailwind CSS styles
 * This file is used to override the default Tailwind CSS styles.
 * It should be imported in the main CSS file.
**/
:root {
    --primary-color: #853734;
    --secondary-color: #f1f1f1;
    --base-color: #1e2227;

    --primary-color-hover: #a74b4b;
}

.text-primary {
    color: var(--primary-color);
}
.text-primary:hover {
    color: var(--primary-color-hover);
}
.bg-base {
    background-color: var(--base-color);
}

/**
 * Global styles for Club TRIAX website
 */

*:hover {
    transition: color 0.3s ease-in-out;
}

body {
    font-family: 'Noto Sans JP', 'Inter', sans-serif;
    background-color: var(--base-color);
}

html {
    scroll-behavior: smooth;
}
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
/* 横スクロールバーを非表示にする */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

/* 画像読み込み中のスタイル */
.member-image {
    background-color: #f3f4f6;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" stroke="%23e5e7eb" stroke-width="3" fill="none"/><circle cx="20" cy="20" r="18" stroke="%239ca3af" stroke-width="3" fill="none" stroke-dasharray="28 85" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.2s" repeatCount="indefinite"/></circle></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40px 40px;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* 画像読み込み完了時のフェードイン */
.member-image.loaded {
    opacity: 1;
}

/* カードflipアニメーション（写真部分のみ） */
.flip-container {
    perspective: 1000px;
}

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

.flip-container.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* タッチデバイス対応 */
@media (hover: hover) {
    .flip-card.hover-flip:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
}

/* アニメーション中のパフォーマンス最適化 */
.flip-card-inner {
    will-change: transform;
}

/* flip時の画像スタイル */
.flip-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}