/* ═══════════ わがこと日本 — 体験レイヤー様式（experience.js が使用） ═══════════ */

/* ── ログイン ── */
.login{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--washi,#f7f3ea) 0%,#efe6d4 60%,#e8dcc4 100%);
  opacity:1;transition:opacity var(--dur-m) var(--ease-brush),transform var(--dur-m) var(--ease-brush)}
[data-theme="dark"] .login{background:linear-gradient(160deg,#171310,#1e1813 60%,#241c14)}
.login.out{opacity:0;transform:scale(1.02);pointer-events:none}
.login-stage{position:relative;width:min(460px,92vw)}
.login-sky{position:absolute;inset:-120px -60px auto;height:220px;pointer-events:none}
.login-sky .sun{position:absolute;left:50%;top:30px;width:130px;height:130px;margin-left:-65px;border-radius:50%;
  background:radial-gradient(circle,#c0392b 0%,#c0392b 55%,transparent 62%);opacity:.14;
  animation:sunrise var(--dur-breath) ease-out both}
@keyframes sunrise{from{transform:translateY(46px);opacity:0}to{transform:none;opacity:.14}}
.login-card{position:relative;background:var(--card,#fffdf8);border:1px solid var(--line,#e2d9c6);border-radius:18px;
  padding:44px 36px 30px;box-shadow:0 24px 70px rgba(60,40,10,.18);text-align:center;
  animation:cardup var(--dur-l) var(--ease-brush) both .15s}
[data-theme="dark"] .login-card{background:#201a14;border-color:#3a3126}
@keyframes cardup{from{transform:translateY(26px);opacity:0}to{transform:none;opacity:1}}
.login-mark{width:58px;height:58px;margin:0 auto 14px;border-radius:14px;background:var(--ink,#2b2620);color:var(--washi,#f7f3ea);
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-family:var(--serif,serif)}
.login-title{font-family:var(--serif,serif);font-size:1.7rem;letter-spacing:.14em;margin:0 0 6px}
.login-tag{color:var(--ink-soft,#6b6353);letter-spacing:.08em;margin:0 0 20px}
.login-sep{height:1px;background:var(--line,#e2d9c6);margin:0 0 22px}
.login-demo{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--ink,#2b2620);color:var(--washi,#f7f3ea);border:none;border-radius:12px;padding:14px 18px;
  transition:transform var(--dur-xs) var(--ease-brush),box-shadow var(--dur-xs) var(--ease-brush)}
.login-demo:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(40,30,10,.25)}
[data-theme="dark"] .login-demo{background:#f2ead9;color:#241c14}
.login-avatar{width:38px;height:38px;border-radius:50%;background:#c0392b;color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif,serif)}
.login-demo-t{flex:1;display:flex;flex-direction:column;gap:2px}
.login-demo-t b{font-size:.95rem}
.login-demo-t i{font-style:normal;font-size:.75rem;opacity:.75}
.login-arrow{opacity:.7}
.login-guest{margin-top:14px;background:none;border:none;cursor:pointer;color:var(--ink-soft,#6b6353);
  text-decoration:underline;text-underline-offset:4px;font-size:.85rem}
.login-note{margin-top:20px;font-size:.72rem;line-height:1.7;color:var(--ink-soft,#6b6353);text-align:left}

/* ── シネマカバー ── */
.cover{position:fixed;inset:0;z-index:190;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:radial-gradient(120% 120% at 50% 20%,#241c14 0%,#171310 70%);color:#f2ead9;
  opacity:1;transition:opacity var(--dur-m) var(--ease-brush)}
.cover.out{opacity:0;pointer-events:none}
.cover-media{position:absolute;inset:0;overflow:hidden}
.cover-media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:sepia(.25) contrast(.95) brightness(.6);
  animation:cvzoom 4s ease-out both}
.cover-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,14,9,.62) 0%,rgba(18,14,9,.38) 40%,rgba(18,14,9,.78) 100%),
  radial-gradient(110% 80% at 50% 46%,transparent 30%,rgba(14,11,7,.55) 100%)}
@keyframes cvzoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.cover-washi{position:absolute;inset:0;opacity:.07;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 2px,#fff 2px 3px,transparent 3px 40px)}
.cover-body{position:relative;text-align:center;padding:0 24px}
.cover-day{font-size:.85rem;letter-spacing:.3em;opacity:0;animation:cvfade var(--dur-l) var(--ease-brush) both .2s;color:#d9c9a8}
.cover-title{font-family:var(--serif,serif);font-size:clamp(1.9rem,6vw,3.4rem);line-height:1.35;letter-spacing:.1em;
  margin:18px auto;max-width:16em;opacity:0;animation:cvup var(--dur-l) var(--ease-brush) both .45s}
.cover-rule{width:0;height:2px;background:#c0392b;margin:0 auto;animation:cvrule var(--dur-l) var(--ease-brush) both .9s}
.cover-sub{margin-top:16px;font-size:.85rem;letter-spacing:.12em;opacity:0;animation:cvfade var(--dur-l) var(--ease-brush) both 1.2s;color:#bdb096}
.cover-skip{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);background:none;border:1px solid #4a4234;
  color:#bdb096;border-radius:99px;padding:8px 22px;font-size:.75rem;letter-spacing:.2em;cursor:pointer;
  opacity:0;animation:cvfade var(--dur-l) var(--ease-brush) both 1.6s}
@keyframes cvfade{to{opacity:1}}
@keyframes cvup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes cvrule{to{width:120px}}

/* ── つながりマップ ── */
.connect{margin:26px 0 34px;border:1px solid var(--line,#e2d9c6);border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,var(--card,#fffdf8),transparent)}
.connect-k{padding:12px 18px;border-bottom:1px solid var(--line,#e2d9c6);font-weight:700;letter-spacing:.08em;
  display:flex;align-items:baseline;gap:12px}
.connect-k span{font-weight:400;font-size:.75rem;color:var(--ink-soft,#6b6353)}
.connect-rail{display:flex;align-items:stretch;gap:0;padding:18px}
.cnode{flex:1;min-width:0;padding:12px 14px;border-radius:12px;background:var(--card,#fffdf8);
  border:1px solid var(--line,#e2d9c6);display:flex;flex-direction:column;gap:5px;
  opacity:0;transform:translateY(10px);animation:cnin var(--dur-m) var(--ease-brush) forwards}
[data-theme="dark"] .cnode{background:#201a14;border-color:#3a3126}
.cnode.c1{animation-delay:.05s}.cnode.c2{animation-delay:.25s}.cnode.c3{animation-delay:.45s}
@keyframes cnin{to{opacity:1;transform:none}}
.cnode i{font-style:normal;font-size:.68rem;letter-spacing:.2em;color:#c0392b}
.cnode b{font-family:var(--serif,serif);font-size:.95rem;line-height:1.4}
.cnode span{font-size:.74rem;line-height:1.65;color:var(--ink-soft,#6b6353);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cnode.c3{border-color:#c0392b}
.clink{width:34px;flex:none;position:relative}
.clink::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;
  background:repeating-linear-gradient(90deg,#c0392b 0 6px,transparent 6px 11px);opacity:.6}
@media(max-width:640px){.connect-rail{flex-direction:column}.clink{width:auto;height:22px}
  .clink::before{left:50%;top:4px;bottom:4px;right:auto;width:2px;height:auto;
  background:repeating-linear-gradient(180deg,#c0392b 0 6px,transparent 6px 11px)}}

/* ── ユーザーチップ ── */
.user-chip{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line,#e2d9c6);
  border-radius:99px;padding:4px 12px 4px 4px;cursor:pointer;color:var(--ink,#2b2620)}
[data-theme="dark"] .user-chip{color:#f2ead9;border-color:#3a3126}
.user-chip:hover{border-color:#c0392b}
.user-avatar{width:26px;height:26px;border-radius:50%;background:#c0392b;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-family:var(--serif,serif)}
.user-name{font-size:.8rem}
.user-menu{position:absolute;top:54px;right:16px;z-index:60;background:var(--card,#fffdf8);
  border:1px solid var(--line,#e2d9c6);border-radius:12px;box-shadow:0 14px 40px rgba(40,30,10,.16);
  min-width:210px;overflow:hidden}
[data-theme="dark"] .user-menu{background:#201a14;border-color:#3a3126}
.um-head{padding:12px 16px;border-bottom:1px solid var(--line,#e2d9c6);display:flex;flex-direction:column;gap:2px}
.um-head span{font-size:.72rem;color:var(--ink-soft,#6b6353)}
.um-item{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:11px 16px;font-size:.85rem;color:var(--ink,#2b2620)}
[data-theme="dark"] .um-item{color:#f2ead9}
.um-item:hover{background:rgba(192,57,43,.08)}

/* ── ビジョンモーダル ── */
.vision-card{max-width:640px}
.vision-body{padding:4px 2px 8px;line-height:1.9;font-size:.9rem}
.v-thesis{font-family:var(--serif,serif);font-size:1.02rem;border-left:3px solid #c0392b;padding-left:14px;margin:8px 0 18px}
.v-sec{margin:0 0 14px}
.v-sec>b{display:block;letter-spacing:.1em;margin-bottom:4px}
.v-sec ul{margin:0;padding-left:1.3em}
.v-sec li{margin:4px 0}
.v-foot{font-size:.78rem;color:var(--ink-soft,#6b6353)}

@media (prefers-reduced-motion: reduce){
  .login-card,.login-sky .sun,.cover-day,.cover-title,.cover-rule,.cover-sub,.cover-skip,.cnode{animation:none;opacity:1;transform:none}
  .cover-rule{width:120px}
}

/* Mobile: keep cover title on one line, matching hero fix */
@media (max-width:480px){
  .cover-title{font-size:clamp(22px,6.9vw,30px);letter-spacing:.06em;text-wrap:balance;padding-inline:12px}
}

/* ═══ 演出 v2：墨入れリーディング ═══ */
#reader .story p.ink{
  background-image:linear-gradient(to right,
    var(--ink-strong,#241c11) 0%,
    var(--ink-strong,#241c11) calc(var(--ink,0)*100%),
    rgba(107,99,83,.32) calc(var(--ink,0)*100% + 6%),
    rgba(107,99,83,.32) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
[data-theme="dark"] #reader .story p.ink{
  background-image:linear-gradient(to right,
    #f2ead9 0%,#f2ead9 calc(var(--ink,0)*100%),
    rgba(242,234,217,.28) calc(var(--ink,0)*100% + 6%),
    rgba(242,234,217,.28) 100%);
}
/* 注・強調は自色を保つ（クリップの内側でも読める） */
#reader .story p.ink a{-webkit-text-fill-color:currentColor}

/* ═══ 演出 v2：出現の振り付け（ぼかし→結像＋子要素の段差） ═══ */
#reader .sr{filter:blur(7px)}
#reader .sr.in{filter:blur(0)}
#reader .sec > *{transition-delay:var(--d,0s)}

/* 章ラベル：線が引かれる */
#reader .sec-label{position:relative;overflow:hidden}
#reader .sec-label::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg,#c0392b,rgba(192,57,43,0) 70%);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-l) var(--ease-brush) .2s}
#reader .sec.in .sec-label::after,#reader .sr.in .sec-label::after{transform:scaleX(1)}

/* ═══ 演出 v2：つながりの線が「流れる」 ═══ */
.clink::before{background:linear-gradient(90deg,#c8bfae,#c0392b,#c8bfae);background-size:200% 100%;
  animation:clink-flow var(--dur-breath) linear infinite}
@keyframes clink-flow{from{background-position:200% 0}to{background-position:-200% 0}}

/* ═══ 演出 v2：触れると応える ═══ */
#reader .place-card,#reader .visit,#reader .src-card{transition:transform var(--dur-m) var(--ease-brush),box-shadow .45s}
#reader .place-card:hover,#reader .visit:hover,#reader .src-card:hover{transform:translateY(-4px);
  box-shadow:0 18px 44px -18px rgba(36,28,17,.35)}
.ep-hero-media img{will-change:transform;transition:none}
.ep-hero-media{overflow:hidden}

@media (prefers-reduced-motion: reduce){
  #reader .story p.ink{background:none;-webkit-text-fill-color:currentColor;color:inherit}
  #reader .sr{filter:none}
  .clink::before{animation:none}
}