/* ============================================================
   TAKT OPENING（R29 部品）— R27 原型（docs/WEB_REBRAND_R27/prototype/index.html）の
   OPENING / BRAND をそのまま移植したもの。値は元と同じ。色だけ変数に出してある。
   元の対応: #open / #open .dark / #open .stroke / #skip / body.opened /
             #hero .brand / .wmbox / .bigwm / .wmsvg / .wm .ta / #hero .def / .ch / .seg
   ============================================================ */
:root{
  --tko-ink:#E8EAEC;            /* 文字（元 --ink） */
  --tko-ink-72:#9AA0A6;         /* 一文（元 --ink-72） */
  --tko-ink-40:#7A8086;         /* スキップ（元 --ink-40） */
  --tko-cover:#000;             /* 覆い（元 #open .dark の background。R27 は #000） */
  --tko-jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --tko-helv:"Helvetica Neue",Helvetica,var(--tko-jp);
  --tko-e-text:cubic-bezier(.16,.72,.19,1);
  --tko-brand-h:100vh;          /* 組の高さ。新しいページで「一文のすぐ下にアプリ画面」にするときはここを縮める（元は 100vh 固定） */
}

/* ---------- OPENING overlay（線が掃く → TAKT だけ → 一文） ---------- */
#open{position:fixed;inset:0;z-index:60;pointer-events:none}
#open .dark{position:absolute;inset:0;background:var(--tko-cover);-webkit-mask-image:linear-gradient(90deg,transparent var(--wx,0%),#000 calc(var(--wx,0%) + 28px));mask-image:linear-gradient(90deg,transparent var(--wx,0%),#000 calc(var(--wx,0%) + 28px))}   /* 線の先端に 28px の柔らかい縁 */
#open svg{position:absolute;inset:0;width:100%;height:100%}
#open .stroke{fill:none;stroke:var(--tko-ink);stroke-width:1.7;stroke-linecap:round}
#open .stroke.main.m2{opacity:.42}   /* 最終調整：白い芯の後ろの半透明の白（JS が複製する） */
#open .stroke.glow{stroke:rgba(96,114,255,.16);stroke-width:13;stroke-linecap:round}#open .stroke.glow.g2{stroke:rgba(110,128,255,.3);stroke-width:6}#open .stroke.glow.g3{stroke:rgba(150,164,255,.72);stroke-width:2}   /* R30 第十一段階：白い芯を包む淡い青。ぼかし（filter）は使わず、太さの違う 3 本を重ねる。最終調整：白い線と同じ先端で動く（JS が位置を動かす） */
#skip{position:fixed;right:22px;bottom:18px;z-index:61;font-size:12px;letter-spacing:.14em;color:var(--tko-ink-40);background:none;border:0;cursor:pointer;font-family:var(--tko-jp)}
#skip{display:none!important}/* 元 07 R3 I: wheel / touch / key が intro を畳むので button は要らない（要素は残す） */
body.opened #open,body.opened #skip{display:none}

/* ---------- BRAND: 大きな TAKT と一文（元 #hero .brand） ---------- */
.takt-brand{height:var(--tko-brand-h);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding-bottom:4vh;color:var(--tko-ink)}
.takt-brand .wm{font-family:var(--tko-helv);font-weight:400;letter-spacing:0;line-height:1}
.takt-brand .wm .ta{letter-spacing:-.12em}
.takt-brand .wmbox{position:relative;display:inline-block;line-height:1;transform-origin:50% 56%}
.takt-brand .bigwm{font-size:clamp(104px,16vw,280px);color:var(--tko-ink);opacity:1;transform:none;display:block;margin:0;position:relative;will-change:auto;visibility:hidden}   /* 箱と baseline の計測用（描画は SVG） */
.takt-brand .wmsvg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;display:block}
.takt-brand .wmsvg text{font-family:var(--tko-helv);font-weight:400;font-size:clamp(104px,16vw,280px)}
/* 一文（元 #hero .def の最終的な値: R02 の行を R27 の行が上書きした結果。≤520px の nowrap は残る、font-size は後の行が勝って 17px） */
.takt-brand .def{margin:clamp(26px,3.6vh,40px) 0 0;font-size:clamp(17px,1.5vw,22px);font-weight:500;line-height:2;letter-spacing:.02em;color:var(--tko-ink-72);opacity:1;transform:none;font-family:var(--tko-jp);font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
@media (max-width:520px){.takt-brand .def{white-space:nowrap}}
body.defon .takt-brand .def{transform:none}

/* 文字単位（charFx / chWrap が作る span）。≤600px は inline = transform が効かず opacity だけ（元 R2 E-B7） */
.takt-brand .ch{display:inline-block;font-style:normal}.takt-brand .seg{display:inline-block;white-space:nowrap}
@media (max-width:600px){.takt-brand .seg{display:inline;white-space:normal}.takt-brand .ch{display:inline}}

/* 「下へ」の細い線（元 #hero .down。新しいページでは一文の下にアプリ画面が来るので任意） */
.takt-brand .down{position:absolute;left:50%;bottom:28px;width:1px;height:40px;margin-left:-.5px;background:var(--tko-ink);opacity:0;transform-origin:50% 0}
body.defon .takt-brand .down{opacity:.5;animation:tko-down 2.4s var(--tko-e-text) infinite}
@keyframes tko-down{0%{transform:scaleY(0);transform-origin:50% 0}45%{transform:scaleY(1);transform-origin:50% 0}55%{transform:scaleY(1);transform-origin:50% 100%}100%{transform:scaleY(0);transform-origin:50% 100%}}

/* 一文のあとに現す要素（reveal）。初期値だけ CSS、進みは JS が inline で書く */
.tko-reveal{opacity:0}
body.opened .tko-reveal.tko-revealed{opacity:1}

@media (prefers-reduced-motion:reduce){#open,#skip,.takt-brand *{transition:none!important;animation:none!important}}