@charset "utf-8";
/* ============================================================
   components.css
   セクションの共通枠 / 見出し / VIEW MOREボタン / 実績カード
   → WordPress では template-parts/ に切り出す想定のパーツ群
   ============================================================ */

/* ------------------------------------------------------------
   SECTION SHELL
   ------------------------------------------------------------ */
.section{
  position:relative;
  padding:120px 0 140px;
  overflow:hidden;
  isolation:isolate;
}
.section__inner{
  position:relative;z-index:2;
  padding:0 var(--gutter);
  max-width:1920px;margin:0 auto;
}

/* 背景の細いグリッド（全セクション共通の下地） */
.section::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(140,190,210,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,190,210,.035) 1px,transparent 1px);
  background-size:78px 78px;
}

/* ------------------------------------------------------------
   セクション番号（01 / ABOUT）
   ------------------------------------------------------------ */
.section__no{
  --depth:52;
  display:flex;align-items:center;gap:14px;
  margin-bottom:34px;
  font-family:var(--font-en);
  font-size:10px;letter-spacing:.32em;color:#8a99a8;
}
.section__no b{font-weight:400;color:#c8d3dc}
.section__no i{font-style:normal;color:#57646f}

/* ------------------------------------------------------------
   大見出し
   ------------------------------------------------------------ */
.section__head{
  position:relative;
  display:flex;align-items:flex-end;flex-wrap:wrap;
  gap:clamp(14px,2.2vw,40px);
  padding-right:clamp(0px,17vw,280px);
  margin-bottom:66px;
}
.section__title{
  --depth:-34;
  transform:translate3d(0,var(--y,0px),0);
  font-size:clamp(48px,8.5vw,150px);
  font-weight:300;line-height:.86;letter-spacing:-.015em;
  color:#fff;
}
.section__sub{
  --depth:34;
  padding-bottom:1.35em;
  font-family:var(--font-jp);
  font-size:clamp(13px,1.15vw,21px);letter-spacing:.32em;color:#e4eaef;
  white-space:nowrap;
}
.section__head .btn-pill{position:absolute;right:0;bottom:.9em;margin:0}

/* 1文字ずつ立ち上がる見出しアニメーション（main.jsで分割） */
[data-split]{--p:0;--y:0px}
[data-split] .char{display:inline-block}
[data-split] .char--space{width:.28em}
[data-split] .word{display:inline-block;white-space:nowrap}

/* 1文字ずつ、ネオンのグラデーション色で光りながら現れる。
   --flash（文字ごとの色）は main.js がピンク→バイオレット→シアンで割り当てる。
   アニメーションは一時停止したまま、負のディレイでスクロール量ぶんだけ
   コマ送りする（＝時間ではなくスクロールで進む） */
[data-split] .char{
  --cp:clamp(0,calc((var(--p) - var(--i,0) * .026) / .4),1);
  animation:tcNeonIn 1s linear paused both;
  animation-delay:calc(var(--cp) * -1s);
}
html:not(.js) [data-split] .char{animation:none;opacity:1}
/* 100%で色と影を指定しないことで、親の「オーロラグラデ」へ自然に着地する */
@keyframes tcNeonIn{
  0%{
    opacity:0;
    transform:translateY(.42em) rotate(2deg);
    color:var(--flash,var(--cyan));
    -webkit-text-stroke-color:var(--flash,var(--cyan));
    text-shadow:0 0 22px var(--flash,var(--cyan)),0 0 58px var(--flash,var(--cyan)),0 0 110px var(--flash,var(--cyan));
  }
  38%{
    opacity:1;
    color:var(--flash,var(--cyan));
    -webkit-text-stroke-color:var(--flash,var(--cyan));
    text-shadow:0 0 18px var(--flash,var(--cyan)),0 0 48px var(--flash,var(--cyan)),0 0 96px var(--flash,var(--cyan));
  }
  100%{
    opacity:1;
    transform:none;
  }
}

/* 白抜き文字（アウトライン） */
.txt-outline{
  color:transparent;
  -webkit-text-stroke:1px rgba(200,215,225,.62);
}

/* セクションに入った瞬間、上端をネオンの線が走り抜ける（切り替えの合図） */
.section::before{
  content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--n1) 35%,var(--n2) 60%,transparent 100%);
  opacity:0;transform:scaleX(0);transform-origin:left center;
  pointer-events:none;
}
.section.is-inview::before{animation:tcSweep 1.5s var(--ease) forwards}
.section--planning::before,
.section--development::before{transform-origin:right center}
@keyframes tcSweep{
  0%  {opacity:0;transform:scaleX(0)}
  22% {opacity:1}
  70% {opacity:1;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(1)}
}

/* ------------------------------------------------------------
   NEON LIGHT — 見出しをネオン管のように光らせる
   --n1〜--n4 はセクションごとに sections.css で切り替える
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   NEON LABEL — 大見出しの上の小さい文字だけをネオンにする
   --n1〜--n3 はセクションごとに sections.css で切り替える
   ------------------------------------------------------------ */
/* 発光色はセクションの背景色に引きずられないよう固定する
   （背景と同系色だと光っていないように見えるため） */
[data-neon]{
  color:#f4f9fd;
  text-shadow:
    0 0 3px rgba(255,255,255,.75),
    0 0 9px var(--cyan),
    0 0 20px var(--violet),
    0 0 38px var(--pink);
}
.section__no[data-neon] b{color:#fff}
.section__no[data-neon] i{color:rgba(238,245,250,.42)}

/* 点灯後は不規則に瞬く。周期 --flick は main.js が1周ごとに振り直す */
[data-neon].is-lit{
  animation:tcNeonFlicker var(--flick,3.2s) linear .4s infinite;
}
@keyframes tcNeonFlicker{
  0%,40%   {opacity:1}
  41%      {opacity:.55}
  42%      {opacity:1}
  43%      {opacity:.76}
  45%,72%  {opacity:1}
  73%      {opacity:.86}
  74%,100% {opacity:1}
}

/* ------------------------------------------------------------
   AURORA — 背景を漂う光の帯
   position/border-radius ではなく transform だけを動かすので、
   合成レイヤーで処理されて描画コストがほぼかからない
   ------------------------------------------------------------ */
.aurora{
  position:absolute;inset:-22%;z-index:0;
  pointer-events:none;overflow:hidden;
}
.aurora span{
  position:absolute;
  width:62%;aspect-ratio:1;
  border-radius:50%;
  /* mix-blend-mode は合成レイヤーを無効化してスクロールを重くするので使わない。
     暗い背景なので、半透明のグラデーションだけで十分に発光して見える */
  opacity:.72;
  will-change:transform;
  animation-play-state:paused;
}
.aurora span:nth-child(1){
  left:-8%;top:-12%;
  background:radial-gradient(circle at 50% 50%,var(--a1) 0%,rgba(0,0,0,0) 66%);
  animation:tcAurora1 26s ease-in-out infinite alternate;
}
.aurora span:nth-child(2){
  right:-10%;top:6%;
  background:radial-gradient(circle at 50% 50%,var(--a2) 0%,rgba(0,0,0,0) 66%);
  animation:tcAurora2 34s ease-in-out infinite alternate;
}
.aurora span:nth-child(3){
  left:26%;bottom:-24%;
  background:radial-gradient(circle at 50% 50%,var(--a3) 0%,rgba(0,0,0,0) 66%);
  animation:tcAurora3 42s ease-in-out infinite alternate;
}
/* 画面に入っているセクションだけ動かす */
.section.is-inview .aurora span{animation-play-state:running}

@keyframes tcAurora1{
  0%  {transform:translate3d(0,0,0) scale(1)}
  40% {transform:translate3d(38%,26%,0) scale(1.25)}
  70% {transform:translate3d(12%,52%,0) scale(.95)}
  100%{transform:translate3d(56%,10%,0) scale(1.15)}
}
@keyframes tcAurora2{
  0%  {transform:translate3d(0,0,0) scale(1.1)}
  45% {transform:translate3d(-42%,34%,0) scale(.9)}
  75% {transform:translate3d(-14%,8%,0) scale(1.3)}
  100%{transform:translate3d(-52%,44%,0) scale(1)}
}
@keyframes tcAurora3{
  0%  {transform:translate3d(0,0,0) scale(1)}
  35% {transform:translate3d(-30%,-40%,0) scale(1.2)}
  65% {transform:translate3d(24%,-18%,0) scale(.92)}
  100%{transform:translate3d(-8%,-54%,0) scale(1.18)}
}

/* ------------------------------------------------------------
   VIEW MORE ボタン
   ------------------------------------------------------------ */
.btn-pill{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:26px;
  min-width:222px;height:52px;padding:0 32px;
  border-radius:999px;
  font-size:10px;letter-spacing:.32em;color:#fff;
  overflow:hidden;
  transition:color .35s ease,transform .35s var(--ease);
}
.btn-pill::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.btn-pill::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;
  background:linear-gradient(90deg,rgba(255,40,168,.9),rgba(50,231,255,.9));
  opacity:0;transform:scaleX(.2);transform-origin:left;
  transition:opacity .4s ease,transform .5s var(--ease);
}
.btn-pill span{position:relative;z-index:1}
.btn-pill__arrow{
  position:relative;z-index:1;
  font-size:15px;line-height:1;
  transition:transform .4s var(--ease);
}
.btn-pill:hover{transform:translateY(-2px)}
.btn-pill:hover::after{opacity:1;transform:scaleX(1)}
.btn-pill:hover .btn-pill__arrow{transform:translateX(7px)}

/* 中央配置バリエーション（ABOUT用） */
.btn-pill--center{display:flex;width:fit-content;margin:78px auto 0}

/* ------------------------------------------------------------
   WORK CARD GRID
   ------------------------------------------------------------ */
.work-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px 24px;
}

/* --- カード本体（暗いパネルの中に画像とテキストを収める） --- */
.work-card{
  --cc:var(--pink);
  --p:0;
  --y:0px;
  position:relative;
  display:flex;flex-direction:column;
  min-width:0;
  padding:20px 20px 24px;
  background:linear-gradient(180deg,rgba(13,18,25,.86),rgba(6,9,13,.92));
  border:1px solid rgba(140,175,200,.13);
  transition:border-color .35s ease,box-shadow .35s ease,background .35s ease;
}
.work-card[data-cat="webdesign"]{--cc:var(--cyan)}
.work-card[data-cat="development"]{--cc:var(--violet)}

/* パネルは早めに出して、中身を順に立ち上げる */
.js .work-card{opacity:clamp(0,calc(var(--p) / .34),1)}
html:not(.js) .work-card{opacity:1;transform:none;clip-path:none}

.work-card__year,
.work-card__body > *{
  --cp:clamp(0,calc((var(--p) - .22 - var(--i,0) * .11) / .42),1);
  opacity:var(--cp);
  transform:translateY(calc((1 - var(--cp)) * 14px));
}
.work-card__year{--i:0}
.work-card__cat{--i:1}
.work-card__title{--i:2}
.work-card__desc{--i:3}
.work-card__tags{--i:4}
html:not(.js) .work-card__year,
html:not(.js) .work-card__body > *{opacity:1;transform:none}

/* --- サムネイル --- */
.work-card__thumb{
  position:relative;overflow:hidden;
  aspect-ratio:16/10.2;
  background:#0b1a2a;
  clip-path:inset(0 0 calc((1 - clamp(0,calc(var(--p) / .5),1)) * 100%) 0);
  transition:transform .55s var(--ease);
}
html:not(.js) .work-card__thumb{clip-path:none}
.work-card__thumb img{
  width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,var(--py,0px),0) scale(var(--s,1.02));
  filter:grayscale(.72) brightness(.72) contrast(1.05);
  transition:transform .8s var(--ease),filter .6s ease;
}
.work-card:hover .work-card__thumb img{--s:1.07;filter:grayscale(0) brightness(1) contrast(1)}

/* 光のスイープ */
.work-card__thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  z-index:2;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.2) 50%,transparent 68%);
  transform:translateX(-120%);
  transition:transform .95s var(--ease);
}
.work-card:hover .work-card__thumb::after{transform:translateX(120%)}

/* 年号が明るい画像に埋もれないよう、上端に薄い暗幕を敷く */
.work-card__thumb::before{
  content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:38%;
  background:linear-gradient(180deg,rgba(4,7,11,.72),transparent);
  pointer-events:none;
}

/* 年号（サムネイル右上） */
.work-card__year{
  position:absolute;z-index:3;top:10px;right:12px;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.14em;
  color:var(--cc);
  text-shadow:0 0 10px var(--cc);
}

/* --- テキスト側 --- */
.work-card__body{
  display:flex;flex-direction:column;
  padding-top:22px;
}
.work-card__cat{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.22em;
  color:var(--cc);
  transition:text-shadow .3s ease;
}
.work-card:hover .work-card__cat{text-shadow:0 0 14px var(--cc)}

.work-card__title{
  margin-top:12px;
  font-family:var(--font-display);
  font-weight:700;font-size:23px;line-height:1.15;letter-spacing:.005em;
  color:#f2f6fa;
  transition:color .3s ease,text-shadow .3s ease;
}
.work-card:hover .work-card__title{
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.45),0 0 24px var(--cc);
}

.work-card__desc{
  margin-top:14px;
  font-size:13px;line-height:1.95;letter-spacing:.03em;
  color:#8d9aa7;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;
  transition:color .3s ease;
}
.work-card:hover .work-card__desc{color:#a9b6c2}

/* --- タグ --- */
.work-card__tags{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:18px;
}
.work-card__tags li{
  padding:6px 11px;
  border:1px solid rgba(140,175,200,.2);
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.1em;
  color:#7c8a97;
  transition:border-color .3s ease,color .3s ease;
}
.work-card:hover .work-card__tags li{border-color:rgba(140,175,200,.36);color:#9dabb8}

/* --- ホバーでカテゴリー色のネオン縁が灯る --- */
.work-card:hover{
  border-color:var(--cc);
  background:linear-gradient(180deg,rgba(16,22,30,.9),rgba(8,11,16,.94));
  box-shadow:0 0 14px rgba(0,0,0,.5),0 0 22px var(--cc);
}

/* ------------------------------------------------------------
   カードの登場はスクロール量に直結（パララックス）
     --p : 0 → 1 で「どこまで出てきたか」。main.js がスクロールに合わせて更新
     --y : 列ごとに速度を変えた奥行き方向のズレ
   ------------------------------------------------------------ */
/* 02 WORKS — 奥からせり上がってくる */
.section--works .work-card{
  transform:translate3d(0,calc(var(--y) + (1 - var(--p)) * 70px),0)
            scale(calc(.86 + var(--p) * .14));
}
/* 03 PLANNING — 左右から交互に、傾きながら寄ってくる */
.section--planning .work-card{
  transform:translate3d(calc((1 - var(--p)) * -96px),var(--y),0)
            skewX(calc((1 - var(--p)) * -7deg));
}
.section--planning .work-card:nth-child(even){
  transform:translate3d(calc((1 - var(--p)) * 96px),var(--y),0)
            skewX(calc((1 - var(--p)) * 7deg));
}
/* 04 WEB DESIGN — 左から右へワイプして現れる */
.js .section--webdesign .work-card{opacity:1}
.section--webdesign .work-card{
  clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);
  transform:translate3d(calc((1 - var(--p)) * 34px),var(--y),0);
}
/* 05 DEVELOPMENT — 板が起き上がるように3D回転 */
.section--development .work-grid{perspective:1600px}
.section--development .work-card{
  transform-origin:50% 0;
  transform:translate3d(0,var(--y),0)
            rotateX(calc((1 - var(--p)) * -52deg));
}

@media(prefers-reduced-motion:reduce){
  .work-card{--p:1;--y:0px}
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .work-card{--p:1;--y:0px}
}

@media(max-width:1200px){
  .work-grid{grid-template-columns:repeat(3,1fr);gap:46px 22px}
}
@media(max-width:900px){
  :root{--gutter:7vw}

  .section{padding:86px 0 96px}
  .section__head{gap:20px;margin-bottom:46px;padding-right:0}
  .section__sub{padding-bottom:0;font-size:13px;letter-spacing:.28em}
  .section__head .btn-pill{position:relative;right:auto;bottom:auto;width:100%;margin-top:6px}
  .work-grid{grid-template-columns:repeat(2,1fr);gap:36px 18px}
  .work-card{padding:15px 15px 19px}
  .work-card__body{padding-top:18px}
  .work-card__title{font-size:18px}
  .work-card__desc{margin-top:11px;font-size:12px;line-height:1.85}
  .work-card__tags{margin-top:14px}
  .btn-pill--center{margin-top:56px}
}
@media(max-width:560px){
  .section__title{font-size:clamp(44px,15vw,78px)}
  /* スマホでも2列を維持する。
     ただし2列だと説明文とタグは折り返しが増えて読めないので、
     年号・カテゴリー・タイトルだけに絞る（詳細は個別ページで見せる） */
  .work-grid{grid-template-columns:repeat(2,1fr);gap:20px 10px}
  .work-card{padding:10px 10px 16px}
  .work-card__body{padding-top:13px}
  .work-card__year{font-size:9px;top:7px;right:8px}
  .work-card__cat{font-size:9px;letter-spacing:.14em}
  .work-card__title{
    margin-top:8px;font-size:14px;line-height:1.25;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  }
  .work-card__desc,
  .work-card__tags{display:none}
}

/* ---- パンくず（記事ページ・カテゴリー一覧ページ共通） ---- */
.breadcrumb{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    font-family:var(--font-mono);
    font-size:.75rem;
    letter-spacing:.05em;
    color:var(--text-mute);
    margin-bottom:28px;
}
.breadcrumb a{ color:var(--text-dim); }
.breadcrumb a:hover{ color:var(--cyan); }
.breadcrumb span{ color:var(--text-mute); }

/* ---- タグクラウド（Works一覧ページなどで使用） ---- */
.tag-cloud{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}

.tag-cloud a{
    border:1px solid var(--line);
    padding:6px 16px;
    border-radius:999px;
    font-size:.78rem;
    color:var(--text-dim);
    transition:.25s var(--ease);
}

.tag-cloud a:hover{
    border-color:var(--cyan);
    color:var(--cyan);
}