/* =====================================================================
 * 動き（2026-11 に追加。stylus を通さず直接書いている。functions.php で common.css・polish.css のあとに読み込む）
 * 建設会社らしく、すっと・きちっと。派手にしない
 * - header.php の先頭のスクリプトが html に oc-js を付け、幕（#oc-veil）を出す。js/common/motion.js が準備できたら oc-ready を付けて幕を上げる
 * - 幕はヘッダーの下（ヘッダーは z-index 999）。サイトの中でページを移るときは、画面に見えているヘッダーは消えずに残る（sessionStorage の oc-nav → oc-keep）
 * ===================================================================== */

/* スマホでタップしたときの四角い枠を消す */
html { -webkit-tap-highlight-color: transparent; }

/* ------------------------------------------------------------ 幕：白い短いフェード。遅いときだけ、中央の細い線を青い光が走る */
#oc-veil { display: none; }
html.oc-js #oc-veil {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 998;
	background: #fff;
	pointer-events: none;
	opacity: 1;
	visibility: visible;
}
html.oc-js.oc-ready #oc-veil {
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s cubic-bezier(.33, 0, .2, 1), visibility 0s .5s;
}
html.oc-js.oc-leave #oc-veil {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .3s ease;
}
#oc-veil span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 88px;
	height: 2px;
	margin-left: -44px;
	background: rgba(0, 130, 179, .15);
	overflow: hidden;
	opacity: 0;
}
#oc-veil span::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 100%;
	background: #0082B3;
	animation: oc-scan 1.1s cubic-bezier(.65, 0, .35, 1) infinite;
}
html.oc-js:not(.oc-ready) #oc-veil span,
html.oc-js.oc-leave #oc-veil span { animation: oc-fade-in .3s ease .6s forwards; }
html.oc-ready:not(.oc-leave) #oc-veil span::after { animation-play-state: paused; }
@keyframes oc-fade-in { to { opacity: 1; } }
@keyframes oc-scan {
	from { translate: -28px 0; }
	to { translate: 88px 0; }
}

/* ------------------------------------------------------------ ヘッダー：幕の上に置く。最初のページだけふっと出る */
html.oc-js body > header {
	position: relative;
	z-index: 999;
}
html.oc-js:not(.oc-keep):not(.oc-ready) body > header { opacity: 0; }
html.oc-js.oc-ready:not(.oc-keep) body > header { animation: oc-fade-down .8s cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes oc-fade-down { from { opacity: 0; translate: 0 -8px; } }

/* ------------------------------------------------------------ トップの写真・下層ページの大きな写真：少し寄った状態から落ち着く */
html.oc-js #home-slider { overflow: hidden; }
html.oc-js.oc-ready #home-slider .swiper-wrapper { animation: oc-settle 2.4s cubic-bezier(.22, 1, .36, 1) backwards; }
html.oc-js.oc-ready #home-slider .desc { animation: oc-rise 1.2s cubic-bezier(.22, 1, .36, 1) .5s backwards; }
html.oc-js:not(.oc-ready) #frontFirstview .tel,
html.oc-js:not(.oc-ready) #frontFirstview .scroll { opacity: 0; }
html.oc-js.oc-ready #frontFirstview .tel { animation: oc-fade 1s ease .9s backwards; }
html.oc-js.oc-ready #frontFirstview .scroll { animation: oc-fade 1s ease 1.2s backwards; }
html.oc-js.oc-ready div#aboutFirstview { animation: oc-fade 1s ease backwards; }
html.oc-js.oc-ready div#aboutFirstview h2 { animation: oc-rise 1s cubic-bezier(.22, 1, .36, 1) .35s backwards; }
@keyframes oc-settle { from { scale: 1.05; } }
@keyframes oc-rise { from { opacity: 0; translate: 0 14px; } }
@keyframes oc-fade { from { opacity: 0; } }

/* ------------------------------------------------------------ もともと UIkit の scrollspy で動いているもの（左から・下から 100% 滑り込む）を、短い距離で静かに */
html.oc-js .uk-animation-slide-left {
	animation-name: oc-in-left !important;
	animation-duration: 1s !important;
	animation-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
}
html.oc-js .uk-animation-slide-bottom {
	animation-name: oc-in-up !important;
	animation-duration: .9s !important;
	animation-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
}
@keyframes oc-in-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes oc-in-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ スクロールで出す（js/common/motion.js が oc-up を付け、見えたら oc-in。出終わったらクラスを外す） */
html.oc-js .oc-up {
	opacity: 0;
	translate: 0 16px;
}
html.oc-js .oc-up.oc-flat { translate: none; }
html.oc-js .oc-up.oc-in {
	opacity: 1;
	translate: 0 0;
	transition: opacity .8s cubic-bezier(.33, 0, .2, 1), translate .9s cubic-bezier(.22, 1, .36, 1);
	transition-delay: var(--oc-d, 0s);
}

/* ------------------------------------------------------------ 「動きを減らす」設定（header.php で oc-js を付けないので、ここは念のため） */
@media (prefers-reduced-motion: reduce) {
	html.oc-js #oc-veil { display: none; }
	html.oc-js * { animation-duration: .01s !important; }
	html.oc-js .oc-up { opacity: 1; translate: none; }
}

/* ------------------------------------------------------------ グレーの地の六角形のロゴ：スクロールに合わせて、地より少しゆっくり動く（パララックス）
 * 位置は js/common/motion.js が --oc-py に入れる（ロゴのあたりと画面の中央との距離に比例） */
html.oc-js div.pageWrapper::after {
	background-position: 90% calc(100% + var(--oc-py, 0px));
}
html.oc-js div#frontAbout::after {
	background-position: right calc(100% + var(--oc-py, 0px));
}

/* ------------------------------------------------------------ トップの ABOUT US（岡本組について・私たちの仕事）：見えたら（js/common/motion.js が oc-about-in）、
 * 写真が左から開いて少し引き、紺の板が右から、見出し・文章・ボタンが順に（2026-11-15。以前は UIkit の scrollspy で左から滑り込むだけ） */
html.oc-js ul.oc-about li.thumb {
	clip-path: inset(0 100% 0 0);
}
html.oc-js ul.oc-about li.thumb > div {
	scale: 1.12;
	transform-origin: left center;
}
html.oc-js ul.oc-about li.text section {
	opacity: 0;
	translate: 40px 0;
}
html.oc-js ul.oc-about li.text section h2 span {
	display: inline-block;
	opacity: 0;
	translate: 0 -18px;
}
html.oc-js ul.oc-about li.text section .text,
html.oc-js ul.oc-about li.text section a.link-pc,
html.oc-js ul.oc-about li.text section a.link-mobile {
	opacity: 0;
	translate: 0 12px;
}
html.oc-js ul.oc-about.oc-about-in li.thumb {
	clip-path: inset(-80px -80px -80px -80px);
	transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1);
}
html.oc-js ul.oc-about.oc-about-in li.thumb > div {
	scale: 1;
	transition: scale 2.2s cubic-bezier(.22, 1, .36, 1) .1s;
}
html.oc-js ul.oc-about.oc-about-in li.text section {
	opacity: 1;
	translate: 0 0;
	transition: opacity .9s ease .45s, translate 1.2s cubic-bezier(.22, 1, .36, 1) .45s;
}
html.oc-js ul.oc-about.oc-about-in li.text section h2 span {
	opacity: 1;
	translate: 0 0;
	transition: opacity .7s ease .85s, translate .9s cubic-bezier(.22, 1, .36, 1) .85s;
}
html.oc-js ul.oc-about.oc-about-in li.text section .text {
	opacity: 1;
	translate: 0 0;
	transition: opacity .9s ease 1.05s, translate 1s cubic-bezier(.22, 1, .36, 1) 1.05s;
}
html.oc-js ul.oc-about.oc-about-in li.text section a.link-pc,
html.oc-js ul.oc-about.oc-about-in li.text section a.link-mobile {
	opacity: 1;
	translate: 0 0;
	transition: opacity .8s ease 1.3s, translate .9s cubic-bezier(.22, 1, .36, 1) 1.3s;
}
/* 出終わったら（oc-about-done）、ボタンのホバーの動きを元に戻す（css/polish.css） */
html.oc-js ul.oc-about.oc-about-done li.text section a.link-pc,
html.oc-js ul.oc-about.oc-about-done li.text section a.link-mobile { transition: opacity .25s, transform .35s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) {
	html.oc-js ul.oc-about li.thumb { clip-path: none; }
	html.oc-js ul.oc-about li.thumb > div,
	html.oc-js ul.oc-about li.text section,
	html.oc-js ul.oc-about li.text section * { opacity: 1 !important; translate: none !important; scale: none !important; }
}