/*
Theme Name: Yumesaki Atelier Theme
Theme URI: https://yumesaki-atelier.studio/
Description: YUMESAKI ATELIER STUDIO の極上の余白と静寂を再現した、スイス・ミニマリズムデザインの超高機能カスタムテーマ。CPT（カスタム投稿タイプ）スペース、Contact Form 7自動スタイリング、および独自SQLデータベース連動型リアルタイム予約システムを完全内蔵。
Version: 1.0.0
Author: Yumesaki Creative Team
Author URI: https://yumesaki-atelier.studio/
Text Domain: yumesaki-atelier
*/


/* =============================================
   01. デザイントークン（CSS変数）
   ============================================= */
:root {
    --color-studio-bg:        #fdf8f8;
    --color-studio-text:      #1c1b1b;
    --color-studio-primary:   #1c1b1b;
    --color-studio-secondary: #5d5f5f;
    --color-studio-surface:   #ffffff;
    --color-studio-dim:       #ddd9d8;
}


/* =============================================
   02. ベーススタイル
   ============================================= */
html {
    scroll-behavior: smooth;
    background-color: var(--color-studio-bg);
    color: var(--color-studio-text);
}

body {
    font-family: "Inter", "Noto Sans JP", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* カスタムスクロールバー */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: var(--color-studio-bg); }
::-webkit-scrollbar-thumb   { background: var(--color-studio-dim); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--color-studio-primary); }


/* =============================================
   03. ユーティリティクラス（縦書きテキスト）
   ============================================= */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.15em;
    line-height: 2;
}


/* =============================================
   04. スクロールアニメーション
   ============================================= */

/* 初期状態（非表示） */
.yas-fade-in,
.yas-fade-in-up,
.yas-reveal,
.yas-scale-in {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.yas-fade-in-up { transform: translateY(30px); }
.yas-scale-in   { transform: scale(1.05); }
.yas-reveal     { transform: translateY(20px); }

/* 表示状態（JS で .yas-visible を付与） */
.yas-fade-in.yas-visible,
.yas-fade-in-up.yas-visible,
.yas-reveal.yas-visible,
.yas-scale-in.yas-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ボウンスアニメーション（下矢印） */
.yas-bounce {
    animation: yasBounce 2s ease-in-out infinite;
}
@keyframes yasBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(4px); }
}


/* =============================================
   05. ヘッダースクロール状態
   ============================================= */
#site-header {
    color: var(--color-studio-text);
    background-color: transparent;
}

/* スクロール前（ヒーロー上）= 白文字 */
#site-header.header-on-hero {
    color: #ffffff;
}

/* スクロール後 = 白背景・ダークテキスト */
#site-header.header-scrolled {
    background-color: rgba(253, 248, 248, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(221, 217, 216, 0.4);
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: var(--color-studio-text);
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.04);
}


/* =============================================
   06. Contact Form 7 スタイリング
   ============================================= */

/* フォーム全体レイアウト */
.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* テキスト・テキストエリア・セレクトボックス */
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-select {
    width: 100% !important;
    background-color: rgba(221, 217, 216, 0.15) !important;
    border: 1px solid rgba(221, 217, 216, 0.4) !important;
    padding: 0.875rem 1rem !important;
    font-family: "Inter", "Noto Sans JP", sans-serif !important;
    font-size: 0.875rem !important;
    color: var(--color-studio-text) !important;
    border-radius: 0 !important;
    outline: none !important;
    transition: border-color 0.3s ease !important;
}

.wpcf7-text:focus,
.wpcf7-textarea:focus,
.wpcf7-select:focus {
    border-color: var(--color-studio-primary) !important;
}

/* 送信ボタン */
.wpcf7-submit {
    width: 100% !important;
    background-color: var(--color-studio-primary) !important;
    color: #ffffff !important;
    padding: 1rem !important;
    font-family: "Inter", "Noto Sans JP", sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.4s ease !important;
}

.wpcf7-submit:hover {
    background-color: var(--color-studio-secondary) !important;
}

/* バリデーションエラーメッセージ */
.wpcf7-not-valid-tip {
    font-family: "Inter", "Noto Sans JP", sans-serif !important;
    font-size: 0.75rem !important;
    color: #ba1a1a !important;
    margin-top: 0.25rem !important;
}

/* 送信結果メッセージ（共通） */
.wpcf7-response-output {
    margin: 1.5rem 0 0 0 !important;
    padding: 1rem !important;
    font-family: "Inter", "Noto Sans JP", sans-serif !important;
    font-size: 0.75rem !important;
    border-radius: 0 !important;
    border-width: 1px !important;
}

/* 送信成功メッセージ */
div.wpcf7 .wpcf7-mail-sent-ok {
    border-color: #34d399 !important;
    background-color: #f0fdf4 !important;
    color: #065f46 !important;
}

/* バリデーションエラーメッセージ */
div.wpcf7 .wpcf7-validation-errors {
    border-color: #fca5a5 !important;
    background-color: #fef2f2 !important;
    color: #991b1b !important;
}