/* 冒頭の演出「街の灯りがともっていく」（案3・2026-10-29）。暗い街と灯りは3D（opening-lights.js）。
   ここは、画面の縁の暗がりと、ボタン2つだけ。ボタンは街の看板と同じ組み（深緑の板・真鍮の縁・明朝）。 */
#opening-film{position:fixed;inset:0;z-index:50;pointer-events:none;color:var(--sg-cream,#fcf4df)}
#opening-film[hidden]{display:none}
#opening-film .dusk{position:absolute;inset:0;background:radial-gradient(ellipse 75% 70% at 50% 55%,transparent 45%,#070b14b8 100%);will-change:opacity}
#opening-film .film-actions{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));display:flex;gap:10px;pointer-events:none}
#opening-film button{pointer-events:auto;min-height:44px;padding:0 18px;border-radius:2px;border:1px solid #b39a6b99;background:#1e2a24cc;color:#f3e8cc;font:500 12.5px/1 var(--sg-serif,"Hiragino Mincho ProN","Yu Mincho",serif);letter-spacing:.12em;cursor:pointer;box-shadow:inset 0 0 0 3px #1e2a24cc,inset 0 0 0 4px #b39a6b55;transition:opacity .5s,background .2s}
#opening-film button:hover{background:#2f4038ee;filter:none}
#opening-film button[hidden]{display:none}
#opening-film button[data-leaving="true"]{opacity:0;pointer-events:none}
#opening-film button:focus-visible{outline:3px solid #f2cc81;outline-offset:4px}
:root[data-opening="running"] body>header,:root[data-opening="running"] body>footer,
:root[data-opening="running"] .intro,:root[data-opening="running"] .mobile-pad{visibility:hidden}
/* 下の帯が隠れている間、その場所も夜の色にする（街の色が透けて見えないように）。 */
:root[data-opening="running"] body{background:#151c29}
/* 夕暮れから（標準・2026-10-29 本人決定。夜からは ?opening-style=night）：左上のロゴと吊り看板は最初から出して揺らし、名札・下の帯・操作ボタンは演出の後に出す。 */
:root[data-opening="lighting"] body>footer,:root[data-opening="lighting"] #labels,:root[data-opening="lighting"] .view-controls,:root[data-opening="lighting"] .mobile-pad{visibility:hidden}
:root[data-opening="lighting"] body{background:#271c3b}
:root.opening-sign-first .intro .town-catch .sg-char{animation-delay:calc(var(--i) * 45ms + var(--op-catch-at,1.15s))!important}
/* 夕暮れからでは、演出の間はロゴの光・線・「作品をまとめて見る」を止めておき、演出の後に順に出す
   （終わってから：「作品をまとめて見る」0.2秒→ロゴの光0.9秒→案内の札2.8秒（opening.js）→ロゴの下の線3.6秒→看板の下の線4.8秒→呼びかけ6.0秒）。 */
:root.opening-sign-first[data-boot][data-opening="lighting"] .town-mark span,
:root.opening-sign-first[data-boot][data-opening="lighting"] .town-mark small::before,
:root.opening-sign-first[data-boot][data-opening="lighting"] .town-mark small::after,
:root.opening-sign-first[data-boot][data-opening="lighting"] .town-plate-desc::before{animation:none}
:root.opening-sign-first[data-boot][data-opening="lighting"] :is(.header-actions,.intro) .portfolio-link{visibility:hidden;animation:none}
:root.opening-sign-first[data-boot][data-opening="lighting"] :is(.header-actions,.intro) .portfolio-link::after{animation:none}
:root.opening-sign-first[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .header-actions .portfolio-link{animation-delay:.2s}
:root.opening-sign-first[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .intro .portfolio-link{animation:sg-swing 2.4s cubic-bezier(.3,.6,.3,1) .2s backwards}
:root.opening-sign-first[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .town-mark span{animation-delay:.9s}
:root.opening-sign-first[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .town-mark small::before,
:root.opening-sign-first[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .town-mark small::after{animation-delay:3.6s}
:root.opening-sign-first[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .town-plate-desc::before{animation-delay:4.8s}
:root.opening-sign-first[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .header-actions .portfolio-link::after,
:root.opening-sign-first[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .intro .portfolio-link::after{animation-delay:6s}
:root[data-opening="lighting"] .intro #instruction{visibility:hidden}:root[data-opening="lighting"] #labels{opacity:0}:root[data-opening="lighting"] #labels button{pointer-events:none}
/* 演出が終わったら、看板が揺れて掛かるのと一緒に、名札・下の帯・操作ボタンが静かに現れる。 */
@keyframes op-arrive{from{opacity:0}to{opacity:1}}
:root[data-boot="ready"][data-opening="idle"] :is(#labels,body>footer,.view-controls,.mobile-pad){animation:op-arrive .8s ease-out both}
#opening-replay{width:auto;min-width:44px;font:11px sans-serif;padding:0 12px}
@media(max-width:600px){
 #opening-film .film-actions{left:16px;right:16px;bottom:max(18px,env(safe-area-inset-bottom));justify-content:space-between}
 #opening-film button{padding:0 14px;font-size:12px;letter-spacing:.08em}
 #opening-replay{font-size:10px;padding:0 7px;min-width:50px;width:auto}
}
/* 演出を流さない時（同じ訪問の2回目など）も、看板 → キャッチコピー →「作品をまとめて見る」→ ロゴの光 → ロゴの線 → 看板の線 → 呼びかけ の順に、ひとつずつ見せる（2.2／3／4.8／6.0／7.2秒。opening.js が sign-calm の印を付ける）。 */
:root.sign-calm .intro .town-catch .sg-char{animation-delay:calc(var(--i) * 45ms + var(--op-catch-at,1.15s))!important}
:root.sign-calm[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .header-actions .portfolio-link{animation-delay:2.2s}
:root.sign-calm[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .intro .portfolio-link{animation:sg-swing 2.4s cubic-bezier(.3,.6,.3,1) 2.2s backwards}
:root.sign-calm[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .town-mark span{animation-delay:3s}
:root.sign-calm[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .town-mark small::before,
:root.sign-calm[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .town-mark small::after{animation-delay:4.8s}
:root.sign-calm[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .town-plate-desc::before{animation-delay:6s}
:root.sign-calm[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .header-actions .portfolio-link::after,
:root.sign-calm[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .intro .portfolio-link::after{animation-delay:7.2s}
/* 案内の札が看板に重なる画面（下の .intro を隠す指定と同じ条件）では、看板の下の線は札に隠れて見えないので、流さない。
   スマホは2026-10-29から看板を上に置き、札と重ならないので外した（town-signage.css の10節） */
@media(min-width:701px) and (max-width:1000px){
 :root.opening-sign-first[data-boot="ready"]:not([data-opening="running"]):not([data-opening="lighting"]) .town-plate-desc::before{animation:none}
}
@media(prefers-reduced-motion:reduce){:root[data-boot="ready"][data-opening="idle"] :is(#labels,body>footer,.view-controls,.mobile-pad){animation:none}}

:root[data-opening="running"] header::before{display:none}
/* Approved guidance 12: all three notes persist together until interaction. */
#walkHint{position:fixed;inset:0;z-index:12;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
#walkHint[data-visible="true"]{opacity:1;visibility:visible}
#walkHint .town-invitation{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:23vw;padding:.55vw .8vw;box-sizing:border-box;text-align:center;isolation:isolate}
#walkHint .town-invitation strong{font:500 1.2vw/1.6 'Hiragino Mincho ProN','Yu Mincho',serif;letter-spacing:.035em;color:#3e4135;text-shadow:0 1px #fff6;white-space:nowrap}
#walkHint .town-invitation:before{content:'';position:absolute;z-index:-1;inset:-.65vw -1.2vw;border-radius:50%;background:radial-gradient(ellipse,#fff1d9ed 0%,#fff1d9db 38%,#fff1d999 57%,#fff1d940 74%,transparent 95%);filter:blur(.24vw)}
#walkHint .town-walking-note{position:absolute;left:50%;top:79%;transform:translate(-50%,-50%);width:max-content;padding:.55vw 1vw;text-align:center;isolation:isolate}
#walkHint .town-walking-note,#walkHint .town-portfolio-note{border-radius:2.2vw;background:#faf7eded;box-shadow:0 .14vw .45vw #243e3210;color:#34493f}
#walkHint .town-walking-note p,#walkHint .town-portfolio-note p{margin:0;font:400 .81vw/1.6 'Hiragino Sans','Yu Gothic',sans-serif;letter-spacing:0;white-space:nowrap;text-align:center}
#walkHint .town-walking-note:before,#walkHint .town-portfolio-note:before{content:'';position:absolute;top:-.24vw;width:.52vw;height:.52vw;transform:rotate(45deg);border-radius:.12vw 0 0 0;background:#faf7ed}
#walkHint .town-walking-note:before{left:calc(50% - .26vw)}
#walkHint .town-portfolio-note{position:absolute;transform:translateX(-50%);width:13.5vw;height:3.7vw;display:grid;place-items:center;padding:.4vw .55vw}
#walkHint .town-portfolio-note:before{left:55%}
/* Keep the approved artwork, with readable text limits on desktop. */
@media(min-width:701px){
 #walkHint .town-invitation{width:max-content;min-width:23vw;max-width:calc(100vw - 40px);padding:clamp(7px,.55vw,11px) clamp(10px,.8vw,16px)}
 #walkHint .town-invitation strong{font-size:clamp(15px,1.2vw,20px)}
 #walkHint .town-walking-note{padding:clamp(8px,.55vw,11px) clamp(16px,1vw,20px)}
 #walkHint .town-walking-note,#walkHint .town-portfolio-note{border-radius:max(28px,2.2vw)}
 #walkHint .town-walking-note p,#walkHint .town-portfolio-note p{font-size:clamp(12px,.81vw,14px)}
 #walkHint .town-portfolio-note{width:max-content;min-width:13.5vw;max-width:calc(100vw - 40px);height:auto;min-height:3.7vw;padding:clamp(7px,.4vw,10px) clamp(12px,.55vw,16px)}
 #walkHint .town-portfolio-note[data-anchor="end"]:before{left:12px}
}
@media(max-width:700px){
 #walkHint .town-invitation{top:49%;width:max-content;padding:7px 10px}
 #walkHint .town-invitation strong{font-size:15px}
 #walkHint .town-invitation:before{inset:-7px -12px;filter:blur(3px)}
 #walkHint .town-walking-note{top:67%;padding:8px 16px}
 #walkHint .town-walking-note,#walkHint .town-portfolio-note{border-radius:28px;box-shadow:0 2px 6px #243e3210}
 #walkHint .town-walking-note p,#walkHint .town-portfolio-note p{font-size:11px}
 #walkHint .town-portfolio-note{width:190px;height:48px;padding:6px 10px}
 #walkHint .town-portfolio-note[data-anchor="side"]{transform:none;height:auto;min-height:48px}
 #walkHint .town-portfolio-note[data-anchor="side"] p{white-space:normal}
 #walkHint .town-walking-note:before,#walkHint .town-portfolio-note:before{top:-3px;width:7px;height:7px;border-radius:2px 0 0 0}
 #walkHint .town-walking-note:before{left:calc(50% - 3.5px)}
 #walkHint .town-portfolio-note[data-anchor="side"]:before{left:-3px;top:calc(var(--hint-tail-y,24px) - 3.5px)}
}
@media(max-width:360px){
 .view-controls{gap:2px}
 .view-controls #opening-replay{min-width:50px;padding:0;width:auto}
}
@media(max-width:700px) and (max-height:720px){
 .portfolio-link-copy{display:grid;gap:3px}
 .view-controls{gap:2px}
 .view-controls #opening-replay{min-width:50px;padding:0;width:auto}
}
@media(min-width:701px) and (max-width:1000px){
 body:has(#walkHint[data-visible="true"]) .intro{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){#walkHint{transition:none}}
/* 幅340px以下（例：320px）では、歩く矢印と操作ボタンが横に並びきらず、「音付き再生」が右の矢印の下に潜っていた（10/28以前から）。
   操作ボタンの列を、矢印の上の段の高さまで上げる（上の段は「↑」だけなので、右側が空いている）。 */
/* 2026-10-29 からスマホに矢印は無い（town-signage.css の10節）。この指定は視点のボタンを戻した時だけ効く（「作品をまとめて見る」は2026-10-30から下の帯にあり、重ならない）。
   視点のボタンをしまっている時（index.html の data-view-tools="hidden"）は、右下が音のボタン1つだけで矢印と並べられるので、上げない。 */
@media(max-width:340px){.view-controls:not([data-view-tools="hidden"]){translate:0 -37px}}
/* 読み込み中の画面（2026-10-29 本人の指摘「開いた時に0.1秒ほど以前のタイトル画面が見えて、バグに見える」）。
   JSが動く時は、以前のタイトル画面の言葉（キャッチコピーと説明）を出さない。準備中は言葉の無い地の色だけにし、
   準備に2.5秒以上かかった時だけ、小さな「街に灯りをともしています…」と「作品一覧から見る」をゆっくり出す（回線が遅い人の逃げ道）。
   準備ができたら、読み込み中の画面はふっと消す（main.js が data-leaving を付ける）。
   地の色は、演出が流れる時は演出の最初の一枚の色（画面で測った上・中・下の平均）、流れない時は街の色（index.html の先頭で付ける）。 */
:root[data-js] .loading-guide :is(.loading-concept,.loading-service){display:none}
:root[data-js] .loading-guide{animation:op-guide-in .6s ease-out 2.5s both}
@keyframes op-guide-in{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
:root[data-boot="failed"] .loading-guide{animation:none}
:root[data-first-look="dusk"]:not([data-boot="ready"]) body{background:linear-gradient(#2c2436,#342a3a 50%,#271e38)}
/* 読み込み中の画面は、消えていく間（準備ができた後）も夕暮れの色のまま。文字は暗い地に合わせて明るくする。 */
:root[data-first-look="dusk"] #loading{background:linear-gradient(#2c2436,#342a3a 50%,#271e38);color:#f4eee8}
:root[data-js][data-boot="loading"] .header-actions .portfolio-link{visibility:hidden}
#loading[data-leaving]{opacity:0;transition:opacity .35s ease-out;pointer-events:none}
/* 消えていく間は、案内の出方を止める（まだ出ていなければ、出ないまま消える） */
#loading[data-leaving] .loading-guide{animation-play-state:paused}
:root[data-boot="failed"] #loading{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.loading-guide{animation-duration:.01s!important}#loading[data-leaving]{transition:none}}