/* トップの演出（1.16.0）：開いた瞬間は映画館のように暗く、ピント送りでロゴが浮かぶ。スクロールで生成り色へ明るくなり、
   タイムコードが進む。見出しとクレジットはピントを合わせながら出て、最後は「CUT」。見本は claude.ai の「FORPIX トップ案」。 */
/* 案C：スクロールがタイムライン（見本 v2） */
:root{--rec:#C9331F}

/* 右上のタイムコード */
.tc-hud{position:fixed;top:22px;right:26px;z-index:50;text-align:right;color:var(--fg);pointer-events:none;
  font-family:var(--en);font-weight:400;letter-spacing:.14em;opacity:0;transition:opacity .8s}
.tc-hud.on{opacity:1}
.tc-hud .sc{font-size:10px;letter-spacing:.32em;color:var(--mute);text-transform:uppercase;display:flex;gap:10px;justify-content:flex-end;align-items:center;min-height:15px}
.tc-hud .sc i{width:6px;height:6px;border-radius:50%;background:var(--rec);display:inline-block;animation:tcblink 1.6s steps(1) infinite}
.tc-hud .tc{font-size:22px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";margin-top:4px;letter-spacing:.08em}
.tc-hud .tc b{font-weight:400;color:var(--mute)}
@keyframes tcblink{50%{opacity:.15}}
/* 冒頭の右上の「Est. 2021」の位置にタイムコードを置く（Est. は Company 欄にもある） */
.open .m2{visibility:hidden}

/* ファインダーの枠（画面の四隅の細いかぎ） */
.tc-frame{position:fixed;inset:12px;z-index:48;pointer-events:none;opacity:0;transition:opacity 1.2s}
.tc-frame.on{opacity:1}
.tc-frame i{position:absolute;width:22px;height:22px;border:0 solid var(--mute);opacity:.55}
.tc-frame i:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px}
.tc-frame i:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px}
.tc-frame i:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.tc-frame i:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}

/* 背景の大きな場面番号（場面が変わるとふわっと入れ替わる） */
.tc-ghost{position:fixed;left:-2vw;bottom:-6vw;z-index:0;pointer-events:none;
  font-family:var(--en);font-weight:200;font-size:44vw;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:transparent;-webkit-text-stroke:1px var(--line);opacity:0}
.tc-ghost.in{animation:ghostin 1.4s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes ghostin{from{opacity:0;transform:translateY(3vw)}to{opacity:.9;transform:none}}
.tc-ghost{-webkit-text-stroke:1px rgba(107,102,92,.32)}
main.credits,footer.end{position:relative;z-index:1}

/* 下のトラック（編集ソフトのタイムライン風） */
.tc-shade{position:fixed;left:0;right:0;bottom:0;height:86px;z-index:49;pointer-events:none;
  background:linear-gradient(rgba(244,240,232,0),var(--bg) 55%);opacity:0;transition:opacity .8s}
.tc-shade.on{opacity:1}
.tc-bar{position:fixed;left:40px;right:40px;bottom:22px;height:40px;z-index:50;opacity:0;transform:translateY(8px);
  transition:opacity .8s,transform .8s;pointer-events:none;cursor:ew-resize;touch-action:none;user-select:none}
.tc-bar.on{opacity:1;transform:none;pointer-events:auto}
.tc-bar .ruler{position:absolute;left:0;right:0;top:0;height:10px}
.tc-bar .ruler span{position:absolute;bottom:0;width:1px;height:4px;background:var(--mute);opacity:.5}
.tc-bar .ruler b{position:absolute;bottom:5px;left:4px;font-family:var(--en);font-weight:400;font-size:8px;letter-spacing:.12em;color:var(--mute)}
.tc-bar .track{position:absolute;left:0;right:0;top:14px;height:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tc-bar .clip{position:absolute;top:2px;bottom:2px;display:flex;align-items:center;gap:6px;overflow:hidden;padding:0 7px;
  background:rgba(42,39,34,.05);border-left:1px solid rgba(42,39,34,.18);text-decoration:none;transition:background .4s}
.tc-bar .clip{box-sizing:border-box}
.tc-bar .clip.tiny{padding:0;width:3px!important;margin-left:-3px}
.tc-bar .clip.tiny .lb{display:none!important}
.tc-bar .clip.alt{background:rgba(42,39,34,.08)}
.tc-bar .clip.now{background:rgba(201,51,31,.10)}
.tc-bar .clip .lb{font-family:var(--en);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.tc-bar .clip.now .lb{color:var(--fg)}
.tc-bar .thumbs{display:flex;gap:3px;margin-left:4px}
.tc-bar .thumbs img{width:12px;height:12px;border-radius:3px;opacity:.85}
.tc-bar .head{position:absolute;top:6px;bottom:0;width:1px;background:var(--rec);left:0;pointer-events:none}
.tc-bar .head::before{content:"";position:absolute;top:-1px;left:-4px;border:4.5px solid transparent;border-top:6px solid var(--rec);border-bottom:0}
.tc-bar .head span{position:absolute;top:-14px;left:8px;font-family:var(--en);font-size:9px;letter-spacing:.1em;color:var(--rec);
  font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;transition:opacity .3s}
.tc-bar:hover .head span,.tc-bar.drag .head span{opacity:1}

/* 見出しの上の場面の時間・最後の Fin. */
.block .scene{display:block;font-family:var(--en);font-size:10px;letter-spacing:.28em;color:var(--mute);margin:-36px 0 18px;
  font-variant-numeric:tabular-nums;text-transform:uppercase}
.end .tc-end{display:block;font-family:var(--en);font-size:11px;letter-spacing:.3em;color:var(--mute);margin-bottom:28px;font-variant-numeric:tabular-nums}

@media (max-width:700px){
  .tc-hud{top:18px;right:20px}
  .tc-hud .sc{font-size:9px;letter-spacing:.24em}
  .tc-hud .tc{font-size:16px}
  .tc-frame{inset:8px}
  .tc-frame i{width:14px;height:14px}
  .tc-ghost{font-size:62vw;bottom:-10vw}
  .tc-bar{left:20px;right:20px;bottom:16px}
  .tc-bar .clip .lb{display:none}
  .tc-bar .clip.now .lb{display:block}
  .tc-bar .thumbs{display:none}
  .tc-bar .ruler b{display:none}
}
@media (prefers-reduced-motion:reduce){.tc-hud .sc i{animation:none}.tc-ghost.in{animation:none;opacity:.9}}

/* ── 開いた瞬間（v3） ───────────────────────────── */
/* ロゴはピント送りで出る：ぼけた状態から一度合い、少し迷って、ぴたりと合う */
.open .logo{animation:rack 1.9s .25s cubic-bezier(.3,.7,.2,1) both!important}
@keyframes rack{
  0%{opacity:0;filter:blur(24px);transform:scale(1.07)}
  14%{opacity:1}
  52%{filter:blur(0);transform:scale(1)}
  64%{filter:blur(3px)}
  78%{filter:blur(0)}
  100%{opacity:1;filter:none;transform:none}}
/* 四隅の札は、ピントが合ったあとに出る */
.open .meta{animation:fade 1.2s 1.7s ease both!important;letter-spacing:.28em}
/* ファインダーの枠は、四隅から線が伸びて描かれる */
.tc-frame{opacity:1;transition:none}
.tc-frame i{width:0;height:0;transition:width .7s cubic-bezier(.22,.61,.36,1),height .7s cubic-bezier(.22,.61,.36,1)}
.tc-frame.on i{width:22px;height:22px}
/* タイムコードは最初から出す。自分で進んでいる間（ROLL）は赤い点が点灯したまま */
.tc-hud{transition:opacity .4s}
.tc-hud:not(.held) .sc i{animation:none;opacity:1}
/* 冒頭では背景の大きな番号を出さない */
.tc-ghost:empty,.tc-ghost.z{display:none}
@media (max-width:700px){.tc-frame.on i{width:14px;height:14px}}
@media (prefers-reduced-motion:reduce){.open .logo{animation:none!important}.tc-frame i{transition:none}}

/* ── 途中の場面（v4）：最初と同じ「ピント」と「クレジット」の言葉でそろえる ── */
/* 見出しは、字間が広がった状態からピントが合いながら締まる（タイトルカード風） */
.block h2{transition:letter-spacing 1.8s cubic-bezier(.22,.61,.36,1),filter 1.4s ease,opacity 1.4s ease}
.block.rv:not(.in) h2,.block h2.rv:not(.in){letter-spacing:.9em;filter:blur(6px)}
.block .scene{transition:opacity 1.2s .4s ease}
.block.rv:not(.in) .scene{opacity:0}
/* クレジットの行は、1行ずつ遅れて流れ込む（エンドロール風） */
.roll dt,.roll dd{transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.22,.61,.36,1),filter 1.2s ease;transition-delay:calc(var(--i,0) * 90ms + .35s)}
.block.rv:not(.in) .roll dt,.block.rv:not(.in) .roll dd{opacity:0;transform:translateY(12px);filter:blur(5px)}
.block.rv:not(.in) .works-link{opacity:0}
.works-link{transition:opacity 1.2s 1.1s ease}
/* Works：カーソルを乗せると矢印が再生マークになる */
.works-link a{position:relative}
.works-link a::after{content:"▶";position:absolute;right:-26px;top:50%;transform:translate(-6px,-50%);font-size:9px;opacity:0;color:var(--rec);transition:opacity .4s,transform .4s}
.works-link a:hover::after{opacity:1;transform:translate(0,-50%)}
/* アプリ：カーソルを乗せると、ファインダーの枠がカードを捉える */
.app{position:relative}
.app::before{content:"";position:absolute;inset:-22px -18px;pointer-events:none;opacity:0;transform:scale(1.04);
  transition:opacity .45s ease,transform .6s cubic-bezier(.22,.61,.36,1);
  background:
    linear-gradient(var(--fg),var(--fg)) left top/14px 1px no-repeat,linear-gradient(var(--fg),var(--fg)) left top/1px 14px no-repeat,
    linear-gradient(var(--fg),var(--fg)) right top/14px 1px no-repeat,linear-gradient(var(--fg),var(--fg)) right top/1px 14px no-repeat,
    linear-gradient(var(--fg),var(--fg)) left bottom/14px 1px no-repeat,linear-gradient(var(--fg),var(--fg)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--fg),var(--fg)) right bottom/14px 1px no-repeat,linear-gradient(var(--fg),var(--fg)) right bottom/1px 14px no-repeat}
.app::after{content:"● REC";position:absolute;top:-16px;right:-6px;font-family:var(--en);font-size:8px;letter-spacing:.24em;color:var(--rec);opacity:0;transition:opacity .45s}
@media (hover:hover){.app:hover::before{opacity:.55;transform:none}.app:hover::after{opacity:1}}

/* ── 最後（v4）：いちばん下まで来たら「カット」。録画が止まる ── */
.tc-hud.cut .sc i{animation:none;border-radius:1px;background:var(--mute);opacity:1}
.tc-hud.cut .tc{color:var(--mute)}
.end .tc-wrap{display:block;font-family:var(--en);font-size:9px;letter-spacing:.34em;color:var(--mute);margin-top:22px;text-transform:uppercase;opacity:0;transition:opacity 1.6s .6s}
.end.in .tc-wrap{opacity:1}
@media (prefers-reduced-motion:reduce){.block h2,.roll dt,.roll dd{transition:none!important;filter:none!important;letter-spacing:.32em!important}}

/* ── 引き算（v5）：シンプルに。足したものを削り、骨格だけ残す ── */
/* 背景の大きな番号はなし */
.tc-ghost{display:none!important}
/* 下のトラックは、細い線と場面の名前だけに（クリップの面・アイコン・目盛りはなし） */
.tc-bar .ruler{display:none}
.tc-bar .track{border:0;top:18px;height:1px;background:var(--line)}
.tc-bar .clip{top:-9px;bottom:auto;height:20px;background:none!important;border-left:0;padding:0;align-items:flex-end}
.tc-bar .clip .lb{font-size:8.5px;transform:translateY(16px)}
.tc-bar .clip::before{content:"";position:absolute;left:0;top:6px;width:1px;height:7px;background:var(--mute);opacity:.6}
.tc-bar .thumbs{display:none}
.tc-bar .head{top:12px;height:13px;bottom:auto}
.tc-bar .head::before{display:none}
.tc-bar .head span{display:none}
.tc-shade{height:70px}
/* アプリのカーソル演出は、枠だけ（REC の文字はなし） */
.app::after{display:none}

/* いいとこ取り案：最初だけ暗く、スクロールで明るくなる */
:root{--dark:1;--ink-dark:#141311}
.house{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--ink-dark);opacity:var(--dark)}
#beam{z-index:0}
header.open{position:relative;z-index:1}
main.credits,footer.end{position:relative;z-index:1}

/* ロゴ：白とカラーを重ね、暗さに合わせて入れ替える */
.open .title.lw{display:grid}
.open .title.lw .logo{grid-area:1/1}
.open .logo-w{opacity:var(--dark)}
.open .title.lw .logo:not(.logo-w){opacity:calc(1 - var(--dark))}
/* ピント送りは両方のロゴに同じようにかける（重ねた白い方にも） */
.open .logo-w{animation:rack 1.9s .25s cubic-bezier(.3,.7,.2,1) both!important}
.open .title.lw .logo{transition:none}
/* rack の最後で opacity:1 に固定されるのを避け、暗さの値で出し入れする */
@keyframes rack{
  0%{filter:blur(24px);transform:scale(1.07)}
  52%{filter:blur(0);transform:scale(1)}
  64%{filter:blur(3px)}
  78%{filter:blur(0)}
  100%{filter:none;transform:none}}

/* 暗いあいだは、四隅の札・タイムコード・枠を明るい色に */
.open .meta,.tc-hud,.tc-hud .tc,.tc-hud .tc b,.tc-hud .sc,.cue{transition:color .5s ease,background .5s ease}
.is-dark .open .meta{color:rgba(244,240,232,.62)}
.is-dark .tc-hud .tc{color:#f4f0e8}
.is-dark .tc-hud .tc b,.is-dark .tc-hud .sc{color:rgba(244,240,232,.55)}
.is-dark .tc-frame i{border-color:rgba(244,240,232,.6)}
.is-dark .cue{background:linear-gradient(rgba(244,240,232,.6),transparent)}
.tc-frame i{transition:width .7s cubic-bezier(.22,.61,.36,1),height .7s cubic-bezier(.22,.61,.36,1),border-color .5s ease}
/* ブラウザの上の帯の色も暗く */
@media (prefers-reduced-motion:reduce){.open .logo-w{animation:none!important}}
/* 暗いあいだの光は控えめに（真っ暗な中に、ロゴがぽっと浮かぶ程度） */
#beam{opacity:calc(1 - var(--dark) * .72)}