/* 詳細ページ（ホームページ制作・アプリ開発・Tシャツ）の「開いたときの演出」。2026-10-07 本人「この2個開くとオープニングもでない」→「2（入れる）」。
   中身はトップ（site.css の同じ節）の写し。トップを直したら、ここも同じに直す。終わり方だけ opening-lite.js（見出しへ飛ばさず、その場で幕を割る）。
   アプリ開発のページは data-op-mode="logo"：「制作費0円で。」を出さない（アプリはお見積りのため） */
@font-face { font-family: "Noto Sans JP Heading"; src: url("../fonts/noto-sans-jp-900-heading.woff") format("woff"); font-weight: 900; font-display: block; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-500-latin.woff") format("woff"); font-weight: 500; font-display: swap; }
.opening {
  --black: #111111; --white: #ffffff; --line-strong: #14a0ff; --accent: #ffd400;
  --f-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --f-head: "Noto Sans JP Heading", var(--f-jp);
  --f-latin: "Poppins", var(--f-jp);
  --gutter: clamp(20px, 5vw, 64px);
}
.opening[data-op-mode="logo"] .op-clip--price { display: none; }

/* ---------- 開いたときの演出（そのタブで最初の1回だけ。2026-10-02 本人「オープニングかっこよくして」→ 10-03「もっとオシャレにインパクト」） ----------
   どれも「青い線の向こうから、せり上がる」で揃える（線＝図面の線。HPの区切りと同じ青）。
   （秒は --op-s をかける前の値。いまは 1.3 倍）
   0.00〜0.45秒  青い線が左の端から右の端まで走る
   0.05〜1.42秒  ロゴ（縦組み）の登場：マークを円から V まで一筆でなぞって描き、「OIDEWORKS」が1字ずつせり上がり、タグラインが出る。
                 そのあと、ロゴごと線の向こうへ沈む（2026-10-03 本人「OIDEWORKSの登場をかっこよく」）。
                 ロゴは見せる範囲と位置を動かすだけ（形・色・間隔は変えない。線との間はロゴの余白をあける）。部品は tools/make-opening-logo.py が書く
   1.42〜2.06秒  画面いっぱいの黄色い「0」がせり上がり、「制作費」「円で。」が1字ずつ続く（ここまで CSS。site.js を待たない）
   2.21〜2.95秒  3つがそれぞれ見出しの「制作費0円で。」へ飛んで収まり、黒い幕が線のところで上下に割れる（ここだけ site.js）
   幕の下の本文は最初から描いておく（遅らせない）。動かすのは transform と opacity だけ（画面が忙しくても止まらない） */
.opening { display: none; }
html[data-opening] .opening {
  --op-y: 66vh;                 /* 線の高さ。ロゴと「0」はこの線の上に立つ */
  --op-z: min(56vh, 80vw);      /* 「0」の字の大きさ（字の高さはこの約0.7倍） */
  --op-logo: min(21vh, 34vw);   /* ロゴ（縦組み）の高さ */
  position: fixed;
  inset: 0;
  z-index: 200;
  display: block;
  /* JavaScript が途中で止まっても、4.8秒（× --op-s）で自分から消える（保険） */
  animation: opening-failsafe 0.4s ease calc(4.8s * var(--op-s)) forwards;
}
/* スマホのブラウザは 100vh が見えている高さより大きい。使えるなら見えている高さで測る */
@supports (height: 1svh) {
  html[data-opening] .opening { --op-y: 66svh; --op-z: min(56svh, 80vw); --op-logo: min(21svh, 34vw); }
}
.op-panel { position: absolute; left: 0; right: 0; background: var(--black); will-change: transform; }
.op-panel--top { top: 0; height: calc(var(--op-y) + 1px); }   /* 1px 重ねて、割れ目に隙間を出さない */
.op-panel--bottom { top: var(--op-y); bottom: 0; }
/* 線は上の幕の下の端に付けておく。幕が上がると、線も幕の縁として一緒に上がる */
.op-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* 線の上に立つ物の窓。窓の下の端＝線。中身を窓の下へ隠しておき、せり上げて見せる */
.op-clip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - var(--op-y));
  overflow: hidden;
}
.opening.is-flying .op-clip--price { overflow: visible; }  /* 飛ぶときは窓の外へ出す（沈めたロゴの窓は閉じたまま。開くと線の下に見える） */
.op-clip--logo {
  display: flex;
  justify-content: center;
  padding-bottom: calc(var(--op-logo) * 0.3);   /* ロゴの決まり：周りの余白はロゴの高さの約1/4以上。線に触れさせない */
}
.op-logo { display: block; height: var(--op-logo); width: calc(var(--op-logo) * 1.7455); overflow: visible; }   /* 縦横比は元の viewBox（499 : 285.883）のまま */
/* マークを描く「ペン」（mask の中の見えない線）。pathLength="1" なので 0〜1 で長さを表す。止まっている時は描き終わりの形（0） */
.op-pen { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.op-l { transform-box: fill-box; }
.op-clip--price {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* 「0」をちょうど真ん中に。左右の字は「0」に寄せる */
  align-items: end;
  padding-top: 8vh;
}
/* 見出しの .cm-zero と同じ書体・太さ・行の高さ（0.8）・字間。字の大きさの比で縮めると、着いたときにぴったり重なる */
.op-zero {
  font-family: var(--f-latin);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--op-z);
  line-height: 0.8;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: 0 0.04em -0.05em;   /* 下の -0.05em：字の下の端（行の箱より少し上にある）を線に乗せる */
}
/* 見出しの .cm-title と同じ書体・太さ・字詰め・字間 */
.op-pre, .op-post {
  font-family: var(--f-head);
  font-weight: 900;
  font-feature-settings: "palt";
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  color: var(--white);
  /* 「0」の2割の大きさ。狭い画面では「0」の左右の空きに3字が収まる大きさまで下げる */
  font-size: min(calc(var(--op-z) * 0.2), calc((100vw - var(--op-z) * 0.72) / 7));
  margin-bottom: calc(var(--op-z) * 0.015 - 0.08em);   /* 字の下の端を「0」の下の端（＝線）にそろえる */
  /* 3字はそれぞれ自分の窓からせり上がる（狭い画面の「制作費」は線から離れた所にあり、線の窓では隠れない）。
     上下に同じだけ余白を足して字の下の端を切らない（上下同じなので、飛ぶときに測る中心は字の中心のまま） */
  overflow: hidden;
  padding: 0.08em 0;
}
.op-pre { justify-self: end; }
.op-post { justify-self: start; }
.op-pre > span, .op-post > span { display: inline-block; }
/* 狭い画面（スマホ・タブレット縦）：「0」の左右に3字が入らない（入れると小さく、画面の端に付く）。
   「制作費」を左上、「0」を真ん中、「円で。」を右下（線の上）に置き、左上から右下へ読ませる */
@media (max-width: 899px) {
  html[data-opening] .opening { --op-z: min(50vh, 68vw); }
  @supports (height: 1svh) { html[data-opening] .opening { --op-z: min(50svh, 68vw); } }
  .op-clip--price {
    grid-template-columns: 1fr;
    padding: 6vh var(--gutter) 0;
  }
  .op-pre, .op-post { font-size: calc(var(--op-z) * 0.135); }
  .op-pre { grid-area: 1 / 1; justify-self: start; margin-bottom: calc(var(--op-z) * 0.06 - 0.08em); }
  .op-zero { grid-area: 2 / 1; justify-self: center; }
  .op-post { grid-area: 2 / 1; justify-self: end; }
}

/* 速さは --op-s の1か所で決める（全部の秒にかける。site.js の飛ぶ・幕が割れる秒も、この値を読んでかける）。
   2026-10-03 本人「もう少しゆっくり」で 1 → 1.3（全体 約2.9秒 → 約3.8秒） */
html[data-opening] { --op-s: 1.3; }
html[data-opening] .op-line { animation: op-line calc(0.45s * var(--op-s)) cubic-bezier(0.7, 0, 0.2, 1) 0s both; }
/* ロゴ：マークを一筆で描く → 字が1字ずつ（自分の下の端の窓から）せり上がる → タグライン → 少し見せてから、ロゴごと線の向こうへ沈む。
   沈み終わってから「0」を出す（重なると、「0」の穴の中に沈むロゴが見える） */
html[data-opening] .op-pen { animation: op-pen calc(0.66s * var(--op-s)) cubic-bezier(0.65, 0, 0.35, 1) calc(0.05s * var(--op-s)) both; }
html[data-opening] .op-l { animation: op-rise calc(0.4s * var(--op-s)) cubic-bezier(0.16, 1, 0.3, 1) calc((0.3s + var(--i) * 0.03s) * var(--op-s)) both; }
html[data-opening] .op-tag { animation: op-fade calc(0.4s * var(--op-s)) ease-out calc(0.7s * var(--op-s)) both; }
html[data-opening] .op-logo { animation: op-sink calc(0.2s * var(--op-s)) cubic-bezier(0.6, 0, 0.9, 0.4) calc(1.22s * var(--op-s)) forwards; }
html[data-opening] .op-zero { animation: op-rise calc(0.5s * var(--op-s)) cubic-bezier(0.16, 1, 0.3, 1) calc(1.42s * var(--op-s)) both; }
html[data-opening] .op-pre > span, html[data-opening] .op-post > span { animation: op-rise calc(0.36s * var(--op-s)) cubic-bezier(0.16, 1, 0.3, 1) both; }
html[data-opening] .op-pre > span:nth-child(1) { animation-delay: calc(1.56s * var(--op-s)); }
html[data-opening] .op-pre > span:nth-child(2) { animation-delay: calc(1.59s * var(--op-s)); }
html[data-opening] .op-pre > span:nth-child(3) { animation-delay: calc(1.62s * var(--op-s)); }
html[data-opening] .op-post > span:nth-child(1) { animation-delay: calc(1.64s * var(--op-s)); }
html[data-opening] .op-post > span:nth-child(2) { animation-delay: calc(1.67s * var(--op-s)); }
html[data-opening] .op-post > span:nth-child(3) { animation-delay: calc(1.7s * var(--op-s)); }
/* 下からせり上がる量は、自分の高さ＋線までの余白（ロゴ）より大きく。窓の下へ完全に隠れた所から出す */
@keyframes op-rise { from { transform: translateY(140%); } to { transform: none; } }
@keyframes op-sink { from { transform: none; } to { transform: translateY(140%); } }
/* ペンの始まりは 1 より少し先から（丸い線の端が、描く前の点として見えないように） */
@keyframes op-pen { from { stroke-dashoffset: 1.06; } to { stroke-dashoffset: 0; } }
@keyframes op-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes op-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes opening-failsafe { to { opacity: 0; visibility: hidden; } }