/* ===== TECHNE トップの演出（style.css は名刺・料金表と共有なので触らず、ここに足す） =====
   翔遥揚重（templates/corp-3d）から持ってきたもの: ローディング、1つの3D（コンパス）がスクロールで物語になり右上の印になる、
   背景の大きな英字、料金で背景を紺に反転、現在地の表示（定規の目盛り）、スマホ下の相談ボタン */

body { transition: background-color .6s ease, color .6s ease; overflow-x: hidden; }
body.dark { background: var(--ink); color: var(--paper); --rule: rgba(251, 250, 247, .26); --rule-soft: rgba(251, 250, 247, .14); }

/* loader: ロゴ文字が1字ずつ置かれ、細い線が引かれる */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--paper); transition: opacity .6s ease, visibility .6s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader .word { font-family: var(--font-logo); font-weight: 500; font-size: clamp(36px, 8vw, 72px); letter-spacing: .3em; margin-right: -.3em; line-height: 1; }
.loader .word span { display: inline-block; opacity: 0; transform: translateY(.25em); animation: stamp .6s cubic-bezier(.2, .8, .2, 1) forwards; }
.loader .word span:nth-child(2) { animation-delay: .07s; } .loader .word span:nth-child(3) { animation-delay: .14s; }
.loader .word span:nth-child(4) { animation-delay: .21s; } .loader .word span:nth-child(5) { animation-delay: .28s; } .loader .word span:nth-child(6) { animation-delay: .35s; }
.loader .bar { height: 1px; background: var(--ink); margin-top: 22px; transform-origin: left; animation: draw 1.1s cubic-bezier(.6, 0, .2, 1) .25s both; }
@keyframes stamp { to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* header: 上に留める */
.header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 92%, transparent); transition: background-color .6s; }
body.dark .header { background: color-mix(in srgb, var(--ink) 92%, transparent); }
body.dark .brand .mark { filter: brightness(0) invert(1); }   /* 紺の上ではロゴを白に */
@media (min-width: 901px) { .header { backdrop-filter: blur(8px); } }
.where { display: none; }

/* 3D コンパス（画面に固定して中身だけ動かす）。紋章になったらヘッダーより手前へ */
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
body.badge-on #scene { z-index: 60; }

/* hero */
.hero { position: relative; z-index: 1; min-height: calc(100svh - 80px); display: flex; align-items: center; padding-block: 40px 96px; }
.hero-in { position: relative; z-index: 2; }
.hero .tagline .line { display: block; opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
body.ready .hero .tagline .line { opacity: 1; transform: none; }
body.ready .hero .tagline .line + .line { transition-delay: .15s; }
.hero .greek { position: absolute; left: 0; bottom: 36px; font-family: var(--font-logo); font-style: italic; font-size: 14px; letter-spacing: .12em; opacity: .5; }
.hero .scroll { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 10px; letter-spacing: .3em; opacity: .5; }
.hero .scroll::after { content: ""; width: 1px; height: 36px; background: currentColor; animation: drop 1.8s ease-in-out infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* 3D が出せないときの静止画（ロゴの印章） */
.hero .still { display: none; position: absolute; right: 0; top: 50%; width: min(34vw, 360px); transform: translateY(-50%); opacity: .9; }
body.still-on .hero .still { display: block; }
body.still-on #scene { display: none; }

/* sections */
.section { position: relative; z-index: 1; }
.eyebrow i { font-style: normal; font-family: var(--font-logo); font-size: 13px; letter-spacing: .1em; margin-right: 14px; opacity: .8; }
/* 見出しの罫線は、墨線を引くように左から伸びる */
.eyebrow.rule { border-bottom: 0; position: relative; }
.eyebrow.rule::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.6, 0, .2, 1); }
.eyebrow.rule.in::after { transform: scaleX(1); }
.eyebrow.rule.rv { opacity: .6; transform: none; }

/* 出現: 下から静かに（同じ並びは少しずつ遅らせる） */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .9s ease calc(var(--i, 0) * 90ms), transform .9s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }

/* 背景の大きな英字（セリフの斜体を薄く）。スクロールで少しだけ横に流れる */
section[data-wm] { overflow-x: clip; }
section[data-wm]::before {
  content: attr(data-wm); position: absolute; z-index: -1; right: 0; top: -.28em;
  font-family: var(--font-logo); font-style: italic; font-weight: 400; font-size: clamp(72px, 16vw, 190px); line-height: 1; letter-spacing: .02em;
  opacity: .05; pointer-events: none; white-space: nowrap; transform: translateX(calc(var(--wm, 0) * 3vw));
}

/* 料金: 紺に反転（body.dark） */
.price b { font-weight: 500; font-variant-numeric: tabular-nums; }
body.dark .row dd a, body.dark .textlink { border-color: var(--paper); }

/* 製図の定規（PC）: 目盛りの上を印が動く */
.ruler { display: none; }
@media (min-width: 1180px) {
  .ruler { position: fixed; z-index: 40; left: max(24px, calc((100vw - 960px) / 2 - 150px)); top: 50%; transform: translateY(-50%); display: grid; gap: 0; padding-left: 16px; }
  .ruler::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
    background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 6px), linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat; opacity: .28; }
  .ruler a { position: relative; display: flex; align-items: baseline; gap: 10px; height: 36px; padding-left: 10px; font-size: 10px; letter-spacing: .24em; opacity: .4; transition: opacity .3s; }
  .ruler a::before { content: ""; position: absolute; left: -16px; top: 7px; width: 16px; height: 1px; background: currentColor; }
  .ruler a i { font-style: normal; font-family: var(--font-logo); font-size: 13px; letter-spacing: .06em; }
  .ruler a span { opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s; }
  .ruler a:hover, .ruler a.on { opacity: 1; }
  .ruler a.on span, .ruler a:hover span { opacity: 1; transform: none; }
  .ruler .pin { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); border: 1.2px solid currentColor; transition: transform .6s cubic-bezier(.5, 0, .3, 1); }
}

/* スマホ下の相談ボタン（PC では出さない） */
.fab { display: none; }
@media (max-width: 900px) {
  .header .nav { display: none; }
  .header { flex-direction: row !important; align-items: center !important; }
  .where { display: flex; align-items: baseline; gap: 8px; margin-left: auto; font-size: 10px; letter-spacing: .24em; }
  .where i { font-style: normal; font-family: var(--font-logo); font-size: 14px; letter-spacing: .04em; }
  .fab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1.3fr 1fr; padding-bottom: env(safe-area-inset-bottom); background: var(--ink); }
  .fab a { display: grid; justify-items: center; gap: 1px; padding: 11px 8px 10px; background: var(--ink); color: var(--paper); line-height: 1.25; }
  .fab a.alt { background: var(--paper); color: var(--ink); border-top: 1px solid var(--ink); }
  .fab b { font-family: var(--font-jp-display); font-weight: 500; font-size: 15px; letter-spacing: .1em; }
  .fab small { font-size: 10px; letter-spacing: .04em; opacity: .75; }
  body.dark .fab a { background: var(--paper); color: var(--ink); }
  body.dark .fab a.alt { background: var(--ink); color: var(--paper); border-top-color: var(--paper); }
  .footer { padding-bottom: 96px; }
  .hero { align-items: flex-start; padding-top: 12vh; }
  .hero .greek, .hero .scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .rv, .hero .tagline .line { opacity: 1; transform: none; transition: none; }
  .eyebrow.rule::after { transform: none; transition: none; }
  .hero .scroll::after { animation: none; }
  section[data-wm]::before { transform: none; }
}