/*
 * base.css
 * 基本レイアウト・タイポグラフィ・共通ユーティリティ
 * reset.css → variables.css の後に読み込むこと。
 * 色・フォントサイズは variables.css の変数を参照する。
 */

/* ── 基本スタイル ──────────────────────────────────────── */

html {
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.75;
    color: var(--text-main);
    background-color: #FFFDF4; /* 暖かみのあるベースクリーム */
    /* 篝火のゆらめきグラデーション（3つの光源 - 視認できるように強めに調整） */
    background-image: 
        radial-gradient(circle at 20% 90%, rgba(255, 90, 30, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 80% 85%, rgba(255, 180, 20, 0.11) 0%, transparent 50%),
        radial-gradient(circle at 50% 95%, rgba(255, 50, 10, 0.06) 0%, transparent 75%);
    background-repeat: no-repeat;
    background-size: 130% 130%;
    background-attachment: fixed;
    animation: fireGlow 22s ease-in-out infinite alternate;
    overflow-x: hidden; /* 横スクロール防止 */
}

/* スクロールする七宝＆立ち上る火の粉パターン */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1; /* body の背景色の上に重ねて表示するために -1 に修正 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg stroke='%23FFFFFF' stroke-width='1.2' stroke-opacity='0.20' fill='none'%3E%3Ccircle cx='0' cy='0' r='50'/%3E%3Ccircle cx='100' cy='0' r='50'/%3E%3Ccircle cx='0' cy='100' r='50'/%3E%3Ccircle cx='100' cy='100' r='50'/%3E%3Ccircle cx='50' cy='50' r='50'/%3E%3C/g%3E%3Ccircle cx='15' r='5' fill='%23FF6B4A'%3E%3Canimate attributeName='cy' values='100;0' dur='7s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' values='0;0.26;0' dur='7s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='45' r='6.5' fill='%23FFCA36'%3E%3Canimate attributeName='cy' values='100;0' dur='9s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' values='0;0.32;0' dur='9s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='65' r='4' fill='%23FF8A7A'%3E%3Canimate attributeName='cy' values='100;0' dur='8s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' values='0;0.22;0' dur='8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='85' r='5.5' fill='%23FFAE19'%3E%3Canimate attributeName='cy' values='100;0' dur='11s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' values='0;0.28;0' dur='11s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='30' r='4.5' fill='%23FF5E3A'%3E%3Canimate attributeName='cy' values='100;0' dur='7.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' values='0;0.24;0' dur='7.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='75' r='5' fill='%23FFB21E'%3E%3Canimate attributeName='cy' values='100;0' dur='9.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' values='0;0.28;0' dur='9.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='50' r='3' fill='%23FF8D5C' fill-opacity='0.05'%3E%3Canimate attributeName='fill-opacity' values='0.01;0.22;0.01' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='3' fill='%23FFCA36' fill-opacity='0.05'%3E%3Canimate attributeName='fill-opacity' values='0.22;0.01;0.22' dur='5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='100' cy='0' r='3' fill='%23FFCA36' fill-opacity='0.05'%3E%3Canimate attributeName='fill-opacity' values='0.22;0.01;0.22' dur='5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='0' cy='100' r='3' fill='%23FFCA36' fill-opacity='0.05'%3E%3Canimate attributeName='fill-opacity' values='0.22;0.01;0.22' dur='5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='100' cy='100' r='3' fill='%23FFCA36' fill-opacity='0.05'%3E%3Canimate attributeName='fill-opacity' values='0.22;0.01;0.22' dur='5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 100px 100px;
    animation: bgScroll 45s linear infinite;
    pointer-events: none; /* クリック等を透過 */
}

/* 画面両端に固定配置される、リアルにゆらめく篝火（かがり火） */
body::after {
    content: "";
    position: fixed;
    bottom: -15px; /* 少し脚を隠して安定させる */
    left: 0;
    right: 0;
    height: 320px;
    background-image: 
        url("../../images/ui/kagaribi.svg"), 
        url("../../images/ui/kagaribi.svg");
    background-position: left 20px bottom 0, right 20px bottom 0;
    background-repeat: no-repeat, no-repeat;
    background-size: 120px auto, 120px auto;
    opacity: 0.18; /* はっきりと篝火がわかるように高めの不透明度を設定 */
    z-index: -1;
    pointer-events: none;
    filter: drop-shadow(0 0 15px rgba(255, 120, 40, 0.25)); /* 篝火の周囲への光のにじみ */
}

/* スマホ表示では画面幅が狭くコンテンツと重なるため非表示にする */
@media (max-width: 1024px) {
    body::after {
        display: none;
    }
}

/* ── 見出し ────────────────────────────────────────────── */

h1 { font-size: var(--fs-h1); line-height: 1.2; }
h2 { font-size: var(--fs-h2); line-height: 1.3; }
h3 { font-size: var(--fs-h3); line-height: 1.4; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-main);
    font-weight: 700;
}

/* ── リンク ────────────────────────────────────────────── */

a {
    color: var(--action);
    transition: color var(--transition), opacity var(--transition);
}

a:hover {
    color: var(--action-hover);
    text-decoration: underline;
}

/* フォーカス表示（キーボード操作・アクセシビリティ） */
:focus-visible {
    outline: 3px solid var(--festival-yellow);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── アニメーション無効化（OSの設定を尊重） ───────────────
   「動きを減らす」設定を有効にしているユーザーへの配慮。
   animations.css でも同じ記述が必要。
 ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── コンテナ（中央揃え・最大幅） ──────────────────────── */

.container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--space-md);
}

/* ── 2カラムレイアウト（PC専用） ────────────────────────
   スマホ・タブレットは1カラム。1024px以上でサイドバーが出現。
 ─────────────────────────────────────────────────────── */
.layout-main {
    display: block;
}

@media (min-width: 1024px) {
    .layout-main {
        display: grid;
        grid-template-columns: 1fr var(--sidebar-width);
        gap: var(--gap);
        max-width: var(--content-max);
        margin-inline: auto;
    }
}

/* ── セクション共通 ─────────────────────────────────────── */

.section {
    padding-block: var(--space-2xl);
}

/* ── プロモーション表示（ステマ規制対応・必須） ─────────────
   リンクを含む全ページの目立つ位置に表示する。
 ─────────────────────────────────────────────────────── */
.pr-notice {
    display: block;
    padding: var(--space-xs) var(--space-md);
    background-color: var(--pr-notice-bg);
    border: var(--pr-notice-border);
    border-radius: 4px;
    font-size: var(--fs-small);
    color: var(--pr-notice-color);
    text-align: center;
    margin-bottom: var(--space-md);
}

/* フィルタ右下にひっそり出す版（義務表記だが目立たせない）
   枠・背景なし・小さめ・右寄せ・薄色 */
.pr-notice--filter {
    margin: 0;
    padding: 0 0.2em 0.6em;
    background: none;
    border: none;
    text-align: right;
    font-size: 0.75rem;   /* 読める最低限まで少しだけ拡大（景表法の明瞭表示にも配慮） */
    /* 昼テーマ：明るい背景の上に出るので、黒っぽく寄せて読みやすく
       （sub #666 → main #2b2b2b。夜テーマ側は matsuri-page.css で白っぽく上書き） */
    color: var(--color-text);
    opacity: 0.85;
}

/* 控えめ版（枠・背景なし・小さめ・薄色） */
.pr-notice--muted {
    padding: 0 0.2em;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.75rem;   /* 読める最低限まで少しだけ拡大 */
    /* 昼テーマ：sub(#666)→main(#2b2b2b)寄りでもう少し濃く。
       夜テーマ側は matsuri-page.css の body.theme-night .item-pr-note で白っぽく上書き */
    color: var(--color-text);
    opacity: 0.8;
    margin-bottom: var(--space-sm);
}

/* ── ユーティリティ ─────────────────────────────────────── */

/* スクリーンリーダー専用（視覚的に非表示） */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}

/* 篝火のゆらめき（炎の熱気）アニメーション - よりはっきりと揺れるように調整 */
@keyframes fireGlow {
    0% {
        background-position: 15% 95%, 85% 80%, 48% 90%;
        background-size: 130% 130%, 130% 130%, 130% 130%;
    }
    50% {
        background-position: 30% 70%, 70% 95%, 54% 105%;
        background-size: 150% 150%, 120% 120%, 140% 140%;
    }
    100% {
        background-position: 10% 100%, 90% 75%, 45% 85%;
        background-size: 120% 120%, 140% 140%, 120% 120%;
    }
}

/* 背景スクロールアニメーション */
@keyframes bgScroll {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}

/* ── アイコンレベルの微細なお祭りアニメーション ────────────────── */

/* 太鼓を叩く（小刻みに縦・回転に震える） */
@keyframes animIconDrum {
    0%, 100% { transform: scale(1) translateY(0) rotate(0); }
    15% { transform: scale(1.1) translateY(-2px) rotate(-6deg); }
    30% { transform: scale(1) translateY(0) rotate(6deg); }
    45% { transform: scale(1.1) translateY(-1px) rotate(-4deg); }
    60% { transform: scale(1) translateY(0) rotate(4deg); }
}

/* 🎯 的（ゆらゆら揺れて時々小さく震える） */
@keyframes animIconTarget {
    0%, 80%, 100% { transform: rotate(0); }
    85% { transform: rotate(-8deg) scale(1.05); }
    90% { transform: rotate(8deg) scale(1.05); }
    95% { transform: rotate(-5deg); }
}

/* ⭐ お気に入り（時々くるっと1回転） */
@keyframes animIconStar {
    0%, 70%, 100% { transform: rotate(0) scale(1); }
    85% { transform: rotate(180deg) scale(1.2); }
    90% { transform: rotate(360deg) scale(1); }
}

/* 📢 PRメガホン（左右に激しく明滅・震動） */
@keyframes animIconPR {
    0%, 75%, 100% { transform: scale(1) rotate(0); }
    80% { transform: scale(1.1) rotate(-8deg); }
    82% { transform: scale(1.1) rotate(8deg); }
    84% { transform: scale(1.1) rotate(-8deg); }
    86% { transform: scale(1.1) rotate(8deg); }
    88% { transform: scale(1) rotate(0); }
}

/* 𝕏 フォロー（ゆっくりふわふわ上下） */
@keyframes animIconX {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.08); }
}

/* クラスの指定 */
.anim-icon-drum {
    display: inline-block;
    animation: animIconDrum 1.2s ease-in-out infinite;
    transform-origin: center bottom;
}
.anim-icon-target {
    display: inline-block;
    animation: animIconTarget 3s ease-in-out infinite;
    transform-origin: center center;
}
.anim-icon-star {
    display: inline-block;
    animation: animIconStar 4s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
    transform-origin: center center;
}
.anim-icon-pr {
    display: inline-block;
    animation: animIconPR 3.5s ease-in-out infinite;
    transform-origin: left bottom;
}
.anim-icon-x {
    display: inline-block;
    animation: animIconX 2s ease-in-out infinite;
}