/* 特別な日のテーマ（季節の年中行事）
   ------------------------------------------------------------------
   js/season.js がその日に合わせて <html data-season="キー"> を付ける。
   付いていない日はこのファイルの中身は一切効かないので、
   普段の見た目には影響しない。

   テーマごとに使う色は5つ。
     --season-accent    見出しラベルや日付の文字色（濃い色）
     --season-accent-2  アクセントの相方（明るい色）
     --season-veil      写真に重ねる色・暗い側（白文字が読める濃さにする）
     --season-veil-2    写真に重ねる色・明るい側／光らせる色
     --season-line      見出し下線などの淡い線の色
     --season-deep      見出し文字や表ヘッダーに使う不透明の濃色

   日付と文言は js/season.js の SEASONS 側で設定する。
   ------------------------------------------------------------------ */

[data-season] {
    --season-accent: var(--sums-blue);
    --season-accent-2: var(--field-green);
    --season-veil: rgba(0, 40, 76, 0.88);
    --season-deep: var(--sums-blue-dark);
    --season-veil-2: rgba(0, 139, 127, 0.52);
    --season-line: rgba(0, 91, 172, 0.22);
    --season-chip-ink: #fff;
    --season-glyph-size: 20px;
}

/* お正月：紅白と金 */
[data-season="newyear"] {
    --season-accent: #c8102e;
    --season-accent-2: #b08c3c;
    --season-veil: rgba(122, 10, 28, 0.88);
    --season-deep: #7a0a1c;
    --season-veil-2: rgba(176, 140, 60, 0.5);
    --season-line: rgba(200, 16, 46, 0.22);
}

/* 新歓シーズン：桜 */
[data-season="sakura"] {
    --season-accent: #d9527f;
    --season-accent-2: #f3a7c0;
    --season-veil: rgba(126, 38, 70, 0.86);
    --season-deep: #7e2646;
    --season-veil-2: rgba(226, 130, 165, 0.46);
    --season-line: rgba(217, 82, 127, 0.22);
}

/* 七夕：夜空と天の川 */
[data-season="tanabata"] {
    --season-accent: #4256b8;
    --season-accent-2: #58c6d8;
    --season-veil: rgba(22, 32, 92, 0.9);
    --season-deep: #16205c;
    --season-veil-2: rgba(60, 160, 190, 0.5);
    --season-line: rgba(66, 86, 184, 0.22);
}

/* ハロウィン：かぼちゃと紫 */
[data-season="halloween"] {
    --season-accent: #d2691b;
    --season-accent-2: #9a63cf;
    --season-veil: rgba(74, 32, 16, 0.88);
    --season-deep: #4a2010;
    --season-veil-2: rgba(122, 68, 173, 0.52);
    --season-line: rgba(210, 105, 27, 0.24);
}

/* クリスマス：赤と緑 */
[data-season="christmas"] {
    --season-accent: #c62828;
    --season-accent-2: #2e7d4f;
    --season-veil: rgba(96, 20, 22, 0.88);
    --season-deep: #601416;
    --season-veil-2: rgba(26, 92, 58, 0.5);
    --season-line: rgba(198, 40, 40, 0.22);
}

/* 大晦日：深い紺と金 */
[data-season="omisoka"] {
    --season-accent: #27344f;
    --season-accent-2: #b08c3c;
    --season-veil: rgba(16, 24, 44, 0.92);
    --season-deep: #101828;
    --season-veil-2: rgba(176, 140, 60, 0.48);
    --season-line: rgba(39, 52, 79, 0.22);
}

/* ===== 降りもの ===== */

.season-fall {
    position: fixed;
    inset: 0;
    /* ヘッダー(z-index:10)より下、本文より上 */
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

.season-fall__item {
    position: absolute;
    top: -14vh;
    color: var(--season-accent-2);
    font-size: var(--season-glyph-size);
    line-height: 1;
    opacity: 0;
    will-change: transform;
    animation-name: season-fall-move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes season-fall-move {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 0;
    }

    8%,
    92% {
        opacity: var(--season-item-opacity, 0.8);
    }

    100% {
        transform: translate3d(var(--season-item-drift, 24px), 126vh, 0) rotate(var(--season-item-spin, 220deg));
        opacity: 0;
    }
}

/* ===== 特別な日のバッジ ===== */

.season-chip {
    /* 「最終更新」バッジなどと並ばないよう、単独の行に置く */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    padding: 8px 15px;
    color: var(--season-chip-ink);
    background: linear-gradient(120deg, var(--season-accent), var(--season-accent-2));
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 26px rgba(16, 32, 51, 0.26);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.season-chip__glyph {
    font-size: 15px;
    line-height: 1;
}

.season-chip__text {
    line-height: 1.5;
}

/* ===== 配色アクセント ===== */

[data-season] .site-brand__mark {
    background: linear-gradient(180deg, var(--season-accent-2), var(--season-accent));
    box-shadow: 0 0 18px var(--season-veil-2);
}

[data-season] .eyebrow::before {
    background: var(--season-accent-2);
}

[data-season] .section__label,
[data-season] .page-kicker,
[data-season] .news-item time {
    color: var(--season-accent);
}

/* ページ見出しの中は写真の上なので白のまま */
[data-season] .page-hero .page-kicker {
    color: rgba(255, 255, 255, 0.9);
}

[data-season] .link-card__number {
    color: #fff;
}

[data-season] .record-strip__item strong {
    color: var(--season-deep);
}

[data-season] .content-card h2,
[data-season] .section h2,
[data-season] .record-main h2 {
    color: var(--season-deep);
    border-bottom-color: var(--season-line);
}

[data-season] .record-main th {
    background: var(--season-deep);
}

/* ===== 写真に重ねる色 ===== */

[data-season] .hero::after {
    background:
        linear-gradient(90deg, var(--season-veil) 0%, var(--season-veil-2) 52%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(0deg, rgba(4, 17, 31, 0.5) 0%, rgba(4, 17, 31, 0) 42%);
}

/* 下層ページのヘッダー。
   トップページのヘッダーはヒーローに重なる透明仕様なので触らない。 */
[data-season] body:not(.home-page) .site-header {
    background:
        linear-gradient(135deg, var(--season-veil), var(--season-veil-2)),
        var(--season-veil);
}

[data-season] .page-hero {
    background:
        linear-gradient(135deg, var(--season-veil), var(--season-veil-2)),
        linear-gradient(0deg, rgba(0, 24, 48, 0.52), rgba(255, 255, 255, 0.06)),
        var(--page-hero-image);
    background-position: center;
    background-size: cover;
}

[data-season] .link-card::after {
    background:
        linear-gradient(135deg, var(--season-veil), var(--season-veil-2)),
        linear-gradient(0deg, rgba(0, 20, 40, 0.42), rgba(255, 255, 255, 0.04));
}

/* ===== スマホ ===== */

@media screen and (max-width: 820px) {

    /* この幅ではトップページのヘッダーも通常の帯になるので色を合わせる */
    [data-season] .home-page .site-header {
        background:
            linear-gradient(135deg, var(--season-veil), var(--season-veil-2)),
            var(--season-veil);
    }

    /* 見出しが下寄せになるので、重ねる色も縦方向にする */
    [data-season] .hero::after {
        background:
            linear-gradient(180deg,
                var(--season-veil) 0%,
                var(--season-veil-2) 58%,
                rgba(4, 17, 31, 0.56) 100%);
    }
}

/* ===== 動きを減らす設定の尊重 ===== */

@media (prefers-reduced-motion: reduce) {
    .season-fall {
        display: none;
    }
}