/*
Theme Name: Kaori Vision Portfolio
Author: Your Name
Description: ビジュアル書体アーティスト「香織」のポートフォリオテーマ。Tailwind CSSと連携。
Version: 1.0
*/

:root {
    --bg-paper: #fdfcfb;
    --ink-black: #1a1a1a;
}

body {
    font-family: 'Inter', 'Noto Serif JP', sans-serif;
    scroll-behavior: smooth;
    background-color: var(--bg-paper);
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('image/back.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
}

#navbar {
    background-color: var(--bg-paper);
}

h1, h2, h3, .serif {
    font-family: 'Playfair Display', 'Noto Serif JP', serif;
}

.kanji {
    font-family: 'Noto Serif JP', serif;
    font-weight: 900;
}

/* 言語切り替え制御 */
[data-lang="en"] .lang-jp { display: none; }
[data-lang="jp"] .lang-en { display: none; }

.nav-link {
    position: relative;
    transition: color 0.3s;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s;
}

.nav-link:hover::after {
    width: 100%;
}

/* 漢字アニメーション */
.reveal-text-colorful {
    display: inline-block;
    background: linear-gradient(
        to right, 
        #4f46e5 0%, #9333ea 15%, #db2777 30%, #ea580c 45%, 
        #eab308 60%, #0d9488 75%, #2563eb 90%, #4f46e5 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 
        reveal 2.2s cubic-bezier(0.19, 1, 0.22, 1) forwards,
        colorFlow 8s linear infinite;
    opacity: 0;
    filter: blur(10px);
    letter-spacing: 0.15em;
    padding-bottom: 0.2em;
}

@keyframes reveal {
    0% { opacity: 0; filter: blur(15px); letter-spacing: 0.4em; transform: translateY(40px); }
    100% { opacity: 1; filter: blur(0); letter-spacing: 0.12em; transform: translateY(0); }
}

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

/* スクロール連動エフェクト */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.gallery-item img {
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
    filter: contrast(1.05) brightness(1.05);
}

.lang-switch button {
    transition: all 0.4s ease;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
}

.lang-switch button.active {
    font-weight: 700;
    color: var(--ink-black);
    text-decoration: underline;
    text-underline-offset: 6px;
}

.lang-switch button:not(.active) {
    color: #d1d1d1;
}

.bg-grain {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 100;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}