@charset "utf-8";
/* ============================================================
   base.css
   カラー変数 / リセット / 基本タイポグラフィ / 共通keyframes
   WordPress化のときは wp_enqueue_style('tc-base', ...) で読み込み
   ============================================================ */

:root{
  /* --- brand color --- */
  --bg:#07101a;
  --text:#f5f7f9;
  --text-dim:#9eabb7;
  --text-mute:#6c7a89;
  --pink:#ff28a8;
  --cyan:#32e7ff;
  --violet:#9a72ff;
  --line:rgba(140,175,200,.18);

  /* --- font --- */
  --font-en:"Jost","Century Gothic","Futura","Helvetica Neue",Arial,sans-serif;
  --font-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --font-hero:Arial,"Helvetica Neue","Noto Sans JP",sans-serif; /* ヒーローは既存のまま */

  /* --- layout --- */
  --gutter:8.5vw;
  --header-h:84px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-jp);
  font-weight:400;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* 英字はディスプレイフォント、ヒーローだけ既存の見た目を維持 */
.en,.section__title,.about__title,.contact__title,
.header,.side-index,.btn-pill{
  font-family:var(--font-en);
}
.hero,.hero *{font-family:var(--font-hero)}

/* キーボードフォーカスは必ず見えるように */
a:focus-visible,button:focus-visible{
  outline:1px solid var(--cyan);
  outline-offset:4px;
}

::selection{background:var(--pink);color:#fff}

/* ---- 共通keyframes ---- */
@keyframes tcUp{to{opacity:1;transform:translateY(0)}}
@keyframes tcFade{to{opacity:1}}
@keyframes tcGradientLoop{
  0%{background-position:0% 50%;filter:brightness(.85);box-shadow:0 0 8px rgba(255,40,168,.22)}
  50%{background-position:100% 50%;filter:brightness(1.45);box-shadow:0 0 18px rgba(50,231,255,.48)}
  100%{background-position:0% 50%;filter:brightness(.85);box-shadow:0 0 8px rgba(255,40,168,.22)}
}
@keyframes tcSpin{to{transform:rotate(360deg)}}
@keyframes tcSpinBack{to{transform:rotate(-360deg)}}
@keyframes tcDash{to{stroke-dashoffset:0}}

/* ---- スクロール連動リビール（共通） ----
   --p は main.js がスクロール量から 0→1 で更新する「出現の進み具合」。
   --y は要素ごとの奥行き（--depth が大きいほどゆっくり動いて奥に見える）。
   時間で再生せず位置で進むので、スクロールを止めれば途中で止まり、戻せば戻る。 */
[data-reveal]{
  --p:0;
  --y:0px;
  --depth:0;
  opacity:var(--p);
  transform:translate3d(0,calc(var(--y) + (1 - var(--p)) * 30px),0);
}
html:not(.js) [data-reveal]{opacity:1;transform:none}

/* ---- 動きを減らす設定への配慮 ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal],[data-split],.about-circle,.work-card{--p:1;--y:0px}
  [data-reveal]{opacity:1;transform:none}
}