/*
Theme Name:  EYRIE
Theme URI:   https://eyrie.jp/
Description: EYRIE 公式サイト — ピアノ鍵盤アコーディオン + 折り紙シェーダ背景
Author:      aratanagara
Version:     1.0.0
Text Domain: eyrie
*/

/* ── EYRIE — anon press トンマナ ─────────────────────────── */

@font-face {
    font-family: 'Aratana';
    src: url('assets/font/Aratana-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'anon-dash';
    src: url('assets/font/NotoSansJP-ExtraLight-dash.woff2') format('woff2');
    font-weight: 1 1000;
    font-style: normal;
    font-display: swap;
    unicode-range: U+2015;
}

:root {
    --font:   'anon-dash', 'Aratana', "Helvetica Neue", "Arial",
              "dnp-shuei-gothic-gin-std",
              "Yu Gothic", "YuGothic", "游ゴシック",
              "Hiragino Sans", "Hiragino Kaku Gothic ProN",
              "Noto Sans JP",
              "Segoe UI", "Arial Unicode MS", "Noto Sans",
              sans-serif;
    --ink:    #1f1f1f;
    --mute:   #afafaf;
    --bg:     #efefef;
    --rule:   rgba(0, 0, 0, 0.08);
    --pink:   #ef007f;
    --teal:   #44d6cf;
    --tab-w:  clamp(40px, 3.6vw, 60px);
    --sharp-w: calc(var(--tab-w) * 0.583);   /* 実物比: 黒鍵 13.7mm / 白鍵 23.5mm */
    /* 開いた面の幅。鍵盤 (約 300px) を引いた残りの 6 割までに抑え、
       ステージ (ロゴ / タグライン) が潰れないようにする */
    --open-w: min(660px, calc((100vw - 300px) * 0.62));
    --ease:   cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint */
}

/* ── ローディング画面 (フォント + 背景の 1 枚目が揃うまで) ───── */
.loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    opacity: 1;
    transition: opacity 0.8s ease;
}
html:not(.is-loading) .loader { opacity: 0; pointer-events: none; }
.loader__logo {
    width: clamp(64px, 8vw, 104px);
    height: auto;
    /* ① ロゴがフェードイン → そのあと呼吸 */
    animation: eyrie-fade-in 0.7s ease both,
               eyrie-breathe 2.4s ease-in-out 0.9s infinite;
}
.loader__bar {
    display: block;
    width: clamp(120px, 18vw, 220px);
    height: 1px;
    background: var(--rule);
    overflow: hidden;
    /* ② ロゴが出てからバーが現れる */
    animation: eyrie-fade-in 0.45s ease 0.75s both;
}
.loader__bar i {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--ink);
    animation: eyrie-slide 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.75s infinite;
}
@keyframes eyrie-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes eyrie-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes eyrie-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
    .loader__logo, .loader__bar i { animation: none; }
}

/* ── Web フォント待ち: 揃うまで伏せてからフェードイン ─────── */
/* 隠すのは本文と背景キャンバスだけ (ローディング画面は body 内にあるため) */
.wing, #fold { transition: opacity 0.45s ease; }
html.is-loading .wing, html.is-loading #fold { opacity: 0; }

::selection { background: var(--ink); color: var(--bg); }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: var(--font);
    font-size: 16px;                 /* 本文の基準サイズ */
    background: var(--bg);
    color: var(--ink);
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

/* ── ネイティブスクロールバーを非表示 (JS で描画) ─────────── */
::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* ── 疑似スクロールバー (anon-press 準拠: 右端 8px 黒トラック + 白サム) ── */
.c-scrollbar {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 12px;              /* クリック判定幅 (視覚は ::before で 8px)。広げると右端の Contact 鍵に被る */
    z-index: 40;
    pointer-events: none;
}
.c-scrollbar__track {
    position: absolute;
    inset: 0;
    pointer-events: all;
    cursor: pointer;
}
.c-scrollbar__track::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 8px;
    background: var(--ink);
    pointer-events: none;
}
.c-scrollbar__thumb {
    position: absolute;
    right: 0;
    width: 100%;
    min-height: 24px;
    cursor: grab;
    pointer-events: all;
    touch-action: none;
}
.c-scrollbar__thumb::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 8px;
    background: #ffffff;
}

/* ── アー写の折りキャンバス: 全面。鍵盤の背面 ─────────────────
   白鍵は 75% の地で折りを 25% 透かし、黒鍵と文字は不透明 */
#fold {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ── 全体レイアウト: 横一列の羽 ───────────────────────── */
.wing {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100dvh;
}

/* ── Stage (ホーム面) ─────────────────────────────────── */
.stage {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(20px, 3vw, 44px);
}
.stage__logo {
    width: clamp(72px, 9vw, 128px);
    height: auto;
    display: block;
    margin-bottom: clamp(16px, 2vw, 28px);
}
.stage__tagline {
    margin-top: 10px;
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: var(--ink);
}
.stage__foot {
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--ink);
}

/* ── Slat (羽枝 = 各セクション) ──────────────────────── */
.slat {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    border-left: 1px solid var(--ink);   /* 白鍵の境界 */
    background: rgba(239, 239, 239, 0.75);   /* 白鍵: 折りが 25% 透ける */
}

.slat__tab {
    flex: 0 0 var(--tab-w, 48px);
    width: var(--tab-w, 48px);      /* flex が落ちても鍵幅を保つ保険 */
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font);
    color: var(--ink);
    display: flex;
    align-items: flex-end;              /* 黒鍵 (上部) を避けてラベルは白鍵の露出部へ */
    justify-content: center;
    padding-bottom: clamp(24px, 3.4vw, 48px);
}

/* ── 黒鍵: 白鍵の境界にまたがる (D E G A B の左辺。E-F / B-C 間には無い) ── */
.slat--sharp::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(var(--sharp-w, 28px) / -2);
    width: var(--sharp-w, 28px);
    height: 62%;                        /* 実物比: 黒鍵 95mm / 白鍵 150mm */
    background: var(--ink);
    z-index: 1;                         /* 隣の白鍵より上 */
    pointer-events: none;
}
.slat__label {
    writing-mode: vertical-rl;
    font-size: calc(var(--tab-w) * 0.6);   /* 鍵幅ぎりぎり */
    line-height: 1;
    letter-spacing: 0.05em;
    transition: color 0.3s;
}
.slat__tab:hover .slat__label { color: var(--pink); }
.slat.is-open .slat__label { color: var(--ink); }

.slat__body {
    flex: 0 0 auto;
    width: 0;                           /* 幅アニメで開閉 (中身は固定幅なので再流し込みしない) */
    overflow: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transition: width 0.7s var(--ease), opacity 0.3s;
}
.slat.is-open .slat__body {
    width: var(--open-w);
    opacity: 1;
    transition: width 0.7s var(--ease), opacity 0.4s 0.2s;
}

.slat__inner {
    width: var(--open-w);
    padding: clamp(20px, 3vw, 44px) clamp(20px, 2.4vw, 36px) 60px clamp(16px, 2vw, 32px);
}
.slat__inner > * { max-width: 580px; }

/* ── 本文タイポ ──────────────────────────────────────── */
.slat__inner h2 {
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-bottom: 28px;
}
.slat__inner h3 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 36px 0 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}
.slat__inner p {
    font-size: 16px;
    line-height: 2.0;
    margin-bottom: 1.2em;
}
.slat__inner p.en {
    font-size: 16px;
    line-height: 1.85;
    color: color-mix(in srgb, var(--ink) 72%, var(--bg));
}
.slat__inner a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 0.25s;
}
.slat__inner a:hover { color: var(--pink); }
.slat__inner a.arrow::after { content: "\2197"; margin-left: 0.35em; border-bottom: 0; }

.members__photo {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 28px;
}
.members { list-style: none; }
.members li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 16px;
}
.members__name .en { color: var(--mute); font-size: 13px; margin-left: 0.6em; }
.members__links { display: flex; gap: 14px; font-size: 13px; }
.members__note { color: var(--mute); font-size: 13px; margin-top: 10px; }

/* ── プライバシーポリシーへのリンク (ステージ左下 / footer) ── */
.foot__legal { font-size: 13px; line-height: 1.4; margin-bottom: 20px; }   /* © との間を空ける */
.foot__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot .foot__legal a { color: var(--bg); }

/* ── Social (ステージ左下 / モバイル footer) ─────────── */
.social {
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.4;
}
/* 和文 (鳥の巣) と欧文でボックス高さが違うため、border ではなくベースライン基準の下線にする */
.social a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.social a:hover { color: var(--pink); }
.foot .social a { color: var(--bg); }

/* ── Members: 顔写真つき ─────────────────────────────── */
.members li { align-items: center; padding: 14px 0; }
.members__face { width: 64px; height: 64px; object-fit: cover; flex: 0 0 64px; }
.members__body { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

/* ── Spotify 埋め込み ────────────────────────────────── */
.embed { margin-bottom: 28px; }
.embed iframe { display: block; width: 100%; border: 0; }

/* ── Lives: 月カレンダー ─────────────────────────────────── */
.cal { margin-bottom: 28px; }
.cal.is-loading { opacity: 0.45; transition: opacity 0.2s; }
.cal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ink);
}
.cal__title { font-size: 16px; letter-spacing: 0.05em; }
.cal__nav {
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    color: var(--ink);
    padding: 2px 8px;
}
.cal__nav:hover { color: var(--pink); }
.cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-left: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
}
.cal__dow {
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--mute);
    text-align: center;
    padding: 6px 0;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.cal__cell {
    position: relative;
    min-height: 64px;
    padding: 4px 5px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cal__cell b { font-weight: 400; font-size: 13px; line-height: 1.2; }
.cal__cell em {
    font-style: normal;
    font-size: 10px;
    line-height: 1.3;
    padding: 2px 3px;
    background: var(--ink);
    color: var(--bg);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cal__cell--empty { background: transparent; }
.cal__cell.is-past b { color: var(--mute); }
.cal__cell.is-past em { background: var(--mute); }
.cal__cell.is-today b {
    background: var(--pink);
    color: var(--bg);
    border-radius: 999px;
    width: 1.7em;
    height: 1.7em;
    display: grid;
    place-items: center;
}
.cal__cell.is-event em { background: var(--pink); }

@media (max-width: 639px) {
    .cal__cell { min-height: 52px; padding: 3px; }
    .cal__cell em { font-size: 9px; -webkit-line-clamp: 1; }
}

/* ── Shows: 予定リスト ───────────────────────────────── */
.events { list-style: none; margin-bottom: 28px; }
.events li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
}
.events__date { flex: 0 0 56px; display: flex; flex-direction: column; gap: 3px; }
.events__date b { font-size: 32px; font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; }
/* 月と曜日は英字の小文字で 1 行ずつ (和文だと「10月」が 1 文字ずつ折り返す) */
.events__date-sub { display: flex; flex-direction: column; font-size: 11px; line-height: 1.5; letter-spacing: 0.05em; color: var(--mute); }
.events__date-sub i { font-style: normal; white-space: nowrap; }
.events__body { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.7; }
.events__meta { font-size: 13px; color: var(--mute); }

/* ── Tori No Su ─────────────────────────────────────── */
.nest__lead { display: flex; align-items: center; gap: 12px; }
.nest__logo { width: 64px; height: auto; }
.nest__flyer { display: block; width: 100%; height: auto; margin-bottom: 8px; }
.nest__list { list-style: none; margin-bottom: 24px; }
.nest__list li {
    font-size: 16px;
    line-height: 1.8;
    padding: 6px 0;
    border-bottom: 1px solid var(--rule);
}

/* ── Contact form ───────────────────────────────────── */
.form { margin-top: 8px; }
.form__row { display: block; margin-bottom: 18px; }
.form__row span { display: block; font-size: 13px; color: var(--mute); margin-bottom: 6px; }
.form__row input, .form__row textarea {
    width: 100%;
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
    padding: 6px 0;
    outline: none;
}
.form__row textarea { resize: vertical; }
.form__row input:focus, .form__row textarea:focus { border-bottom-color: var(--pink); }
/* ハニーポット (bot 対策)。left:-9999px だと閉じた面のクリップ外に出て .wing のスクロール領域を伸ばすので、サイズ 0 で置く */
.form__hp { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.form__submit {
    font: inherit;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: var(--bg);
    background: var(--ink);
    border: 0;
    padding: 12px 28px;
    cursor: pointer;
}
.form__submit:hover { background: var(--pink); }
.form__submit:disabled { opacity: 0.5; cursor: default; }
.form__status { font-size: 13px; margin-top: 12px; min-height: 1.5em; }
.form__status.is-error { color: var(--pink); }

.history { list-style: none; }
.history li {
    display: flex;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 16px;
    line-height: 1.8;
}
.history li span { color: var(--mute); flex: 0 0 3.2em; }

/* ── Footer (モバイルのみ表示。黒地にクレジット) ─────── */
.foot { display: none; }

/* ── 横向きスマホなど、背の低い画面 (縦 560px 以下 + 鍵盤レイアウト) ──
   ラベルが黒鍵に食い込む / ステージの文字が窮屈になるのを防ぐ */
@media (min-width: 640px) and (max-height: 560px) {
    /* スマホ横向き: 画面が低いので全体を一律 75% に縮める。
       zoom で縮めた分だけ論理サイズを 1/0.75 倍にして画面を埋める。 */
    .wing {
        transform: scale(0.75);
        transform-origin: top left;
        width: calc(100vw / 0.75);
        height: calc(100dvh / 0.75);
    }
    :root { --open-w: min(660px, calc((100vw / 0.75 - 320px) * 0.62)); }
    /* 面を開くとステージが細くなるので、フッターの 3 行は折り返さない */
    .stage__foot p,
    .stage__foot .social,
    .stage__foot .foot__legal { white-space: nowrap; }

    .loader__logo { width: clamp(44px, 12vh, 72px); }
}

/* スクロール誘導はモバイルの縦積みでだけ出す */
.stage__scroll { display: none; }
@keyframes eyrieScrollArrowFlip {
    0%   { transform: rotateY(0deg); }
    45%  { transform: rotateY(180deg); }
    55%  { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

/* ── モバイル: 縦積みアコーディオン ───────────────────── */
@media (max-width: 639px) {
    :root { --open-w: 100%; --tab-h: 56px; }
    .wing { flex-direction: column; overflow-y: auto; height: 100dvh; }
    .stage { padding: 20px; min-height: 100dvh; flex: 0 0 auto; }   /* 鍵盤の上に 1 画面分の余白 */
    /* スクロール誘導 (anon-press の hero-scroll-cue 移植)。鍵盤まで送る */
    .stage__scroll {
        position: absolute;
        right: 20px;
        bottom: 20px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 0;
        border: 0;
        background: none;
        font-family: inherit;
        color: var(--ink);
        opacity: 0.72;
        cursor: pointer;
    }
    .stage__scroll-text {
        font-size: 10px;
        letter-spacing: 0.05em;
        line-height: 1;
    }
    .stage__scroll-arrow {
        position: relative;
        display: block;
        width: clamp(30px, 12vw, 38px);
        height: clamp(40px, 14vw, 52px);
        animation: eyrieScrollArrowFlip 2.2s ease-in-out infinite;
    }
    .stage__scroll-arrow::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 2px;
        width: 2px;
        height: calc(100% - 18px);
        background: currentColor;
        transform: translateX(-50%);
    }
    .stage__scroll-arrow::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 2px;
        width: 20px;
        height: 20px;
        border-right: 2px solid;
        border-bottom: 2px solid;
        transform: translateX(-50%) rotate(45deg);
    }
    .slat__inner h2 { display: none; }
    .slat {
        width: 100%;
        flex: 0 0 auto;
        flex-direction: column;
        border-left: 0;
        border-top: 1px solid var(--ink);
    }
    /* 黒鍵: 右辺から横向きに、白鍵の境界 (上辺) にまたがる */
    .slat--sharp::before {
        top: calc(var(--tab-h) * 0.583 / -2);
        left: auto;
        right: 0;
        width: 42%;
        height: calc(var(--tab-h) * 0.583);
    }
    .slat__tab {
        flex: 0 0 auto;
        width: 100%;
        min-height: var(--tab-h);
        padding: 0 20px;
        justify-content: flex-start;
        align-items: center;
    }
    .slat__label { writing-mode: horizontal-tb; }
    /* 高さは grid の 0fr→1fr で auto 高さまでアニメ (max-height: none は補間できない) */
    /* overflow: clip = スクロールコンテナにしない (hidden + overscroll-behavior: contain だと
       開いた面の上でのタッチスクロールがページへ伝わらなくなる) */
    .slat__body {
        flex: 0 0 auto;
        width: 100%;
        display: grid;
        grid-template-rows: 0fr;
        overflow: clip;
        overscroll-behavior: auto;
        transition: grid-template-rows 0.55s var(--ease), opacity 0.3s;
    }
    .slat.is-open .slat__body {
        width: 100%;
        grid-template-rows: 1fr;
        transition: grid-template-rows 0.55s var(--ease), opacity 0.4s 0.15s;
    }
    /* 閉時に 0fr で高さ 0 にするため padding は使わず (padding は縮まない)、子の margin で上下余白を取る */
    .slat__inner { width: 100%; min-height: 0; overflow: clip; padding: 0 20px; }
    .slat__inner > :first-child { margin-top: 4px; }
    .slat__inner > :last-child { margin-bottom: 32px; }
    .stage__foot { display: none; }          /* クレジット / SNS は footer へ */
    .members__body { flex-direction: column; align-items: flex-start; gap: 4px; }
    .foot {
        display: block;
        flex: 0 0 auto;
        background: var(--ink);
        color: var(--bg);
        padding: 124px 20px 44px;           /* ロゴを外した分 (64 + 20px) を上余白に足し、高さは維持 */
    }
    .foot__credit { font-size: 13px; letter-spacing: 0.05em; color: var(--mute); }
    .slat__inner > * { max-width: none; }
}

/* ── 幅の狭いスマホ (iPhone SE / mini / 標準機): 本文と余白を一段小さく ──
   16px / 左右 20px だと 1 行 20 字しか入らず窮屈なため */
@media (max-width: 413px) {
    .stage { padding: 16px; }
    .stage__scroll { right: 16px; bottom: 16px; }
    .stage__tagline { font-size: 12px; }
    .slat__tab { padding: 0 16px; }
    .slat__label { font-size: 20px; }
    .slat__inner { padding: 0 16px; }
    .slat__inner p,
    .slat__inner p.en,
    .members li,
    .history li,
    .events__body,
    .nest__list li { font-size: 15px; }
    .slat__inner p { line-height: 1.9; }
    .slat__inner h3 { font-size: 15px; margin: 28px 0 12px; }
    .members__name .en,
    .members__links,
    .members__note,
    .events__meta,
    .form__row span,
    .form__status { font-size: 12px; }
    /* input は 16px 未満だと iOS がフォーカス時にページを拡大するので下げない */
    .form__submit { font-size: 15px; }
    .foot { padding: 112px 16px 40px; }
    .foot__credit { font-size: 12px; }
}

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .slat, .slat__body { transition: none; }
    .stage__scroll-arrow { animation: none; }
}