/* =========================================================
   KEITO SITE — style.css  (ミニマル / クリーン版)
   方針: 白基調・余白多め・墨色文字・朱色は少しだけ。
   動きは「少数精鋭で丁寧」。派手な装飾はしない。
   ========================================================= */

/* ---- カラー・変数 ---- */
:root {
  --bg:     #0a0a0c;   /* ダーク背景（常時ダーク） */
  --surface:#15151b;   /* カード等の面 */
  --ink:    #f2f0ea;   /* 文字（生成り＝明るい） */
  --muted:  #9a988f;   /* 控えめな文字 */
  --line:   #2a2a33;   /* 細い罫線 */
  --accent: #ff6b4f;   /* 暗い背景で映える朱 */
  --max:    1080px;
  --ease:   cubic-bezier(.16, 1, .3, 1);   /* ゆっくり減速 */
}
/* 背景色は html が担当（最背面の #dots を z-index:-1 で見せるため） */
html { background: var(--bg); }

/* ドット波は「ページ最下部」だけに表示する（中央には出さない）。
   body を基準(position:relative)に、最下部へ貼り付くフルワイド帯にする */
#dots {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 100vh;     /* 下から1画面分だけ */
  z-index: -1;                    /* コンテンツの裏（body背景の上） */
  pointer-events: none; overflow: hidden;
}
#dots canvas { display: block; }

/* ---- リセット & ベース ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- Lenis（滑らかスクロール）推奨スタイル ----
   ※ Lenis 使用時は CSS の scroll-behavior:smooth は使わない（競合するため） */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  position: relative;        /* #dots の基準。背景は html が担当し body は透明に */
  background: transparent;
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; height: 100vh; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* =========================================================
   ローディング（細い線が左→右に伸びて、上へ消える）
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  /* 手前(Z方向)に飛んでくる退場。perspective で奥行きを出す */
  transform: perspective(1000px) translateZ(0);
  transition: transform 1s var(--ease), opacity 1s var(--ease), filter 1s var(--ease);
}
/* 完了時：手前にグワッと迫りつつ、ぼけて消える */
.loader.is-done {
  transform: perspective(1000px) translateZ(550px);
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;   /* 透明でも残るのでクリックを通す（重要） */
}
.loader__name {
  font-family: "Inter", sans-serif; font-weight: 500;
  letter-spacing: .5em; font-size: .9rem; padding-left: .5em;
}
.loader__line { width: min(220px, 50vw); height: 1px; background: var(--line); overflow: hidden; }
.loader__line span { display: block; height: 100%; width: 0; background: var(--ink); }

/* =========================================================
   ナビ
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px clamp(20px, 5vw, 64px);
  transition: background .5s var(--ease), padding .5s var(--ease);
  mix-blend-mode: difference; color: #fff;   /* 背景に応じて自然に反転 */
}
.nav.is-scrolled {
  mix-blend-mode: normal; color: var(--ink);
  background: rgba(10, 10, 12, .7);
  backdrop-filter: blur(10px);
  padding-top: 16px; padding-bottom: 16px;
}
.nav__logo { font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.15rem; }
.nav__logo span { color: var(--accent); }
.nav__links { display: flex; gap: 28px; font-size: .9rem; }
.nav__links a { position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 0;
  background: currentColor; transition: width .4s var(--ease);
}
.nav__links a:hover::after { width: 100%; }

/* =========================================================
   テキストの「マスク出現」演出（丁寧な動きの主役）
   .line の中の <span> がマスクの下から上がってくる
   ========================================================= */
.line {
  display: block;
  overflow: hidden;
  /* text-align は継承に任せる（ヒーローは .hero__title 側で中央、
     セクション見出しは既定の左寄せ）。ここで center を固定すると
     About / Service / Tech Stack まで中央に寄ってしまうため付けない */
  /* g・p などの下の出っ張りが切れないよう、下に余白を足して同じ分だけ詰める */
  padding-bottom: .2em;
  margin-bottom: -.2em;
}
.line.is-visible {
  overflow: visible; /* ロード完了後は回転時に切れないよう visible に */
}
.line > span {
  display: inline-block; /* blockからinline-blockにして文字の塊の中心で回転させる */
  transform: translateY(130%);
  transition: transform 1.1s var(--ease);
}
.line.is-visible > span { transform: translateY(0); }

/* 通常要素のフェードアップ */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* 共通: 矢印付きリンク */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: gap .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.link-arrow::after { content: "→"; transition: transform .4s var(--ease); }
.link-arrow:hover { gap: 14px; color: var(--accent); border-color: var(--accent); }
.link-arrow:hover::after { transform: translateX(4px); }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero { min-height: 100vh; display: flex; align-items: center; padding: 0 clamp(20px, 5vw, 64px); }
.hero__inner { max-width: var(--max); margin: 0 auto; width: 100%; }
.hero__eyebrow {
  display: block;
  text-align: center;
  font-family: "Inter", sans-serif; color: var(--muted);
  letter-spacing: .25em; font-size: .8rem;
  margin-top: 20px; margin-bottom: 26px;
  padding-left: .25em; /* letter-spacingによる右への飛び出しを左パディングで完全に打ち消す */
  text-indent: 0;
}
.hero__title-wrap {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  padding: 12px 36px; /* ホバー判定エリアを広げて、マウスの微動による誤作動を完全に防ぐ */
}
.hero__title {
  font-weight: 500; line-height: 1.35; letter-spacing: -.02em;
  font-size: clamp(3rem, 10vw, 8.5rem); /* 元のプレミアムなサイズに戻す */
  cursor: default;
  text-align: center;
  
  /* 離したときにフッと滑らかに戻るための transition */
  transition: transform 0.8s var(--ease), filter 0.8s var(--ease);
  /* ※ will-change / preserve-3d / backface-visibility は付けない。
     グラデ文字(background-clip:text)＋毎フレームのblurと組み合わさると
     GPUレイヤーが再描画されず「DevTools時だけ回る」不具合を起こすため。 */
}

/* 回転中（JS制御中）は transition を無効にしてカクつきを防ぐ */
.hero__title.is-spinning {
  transition: none !important;
}

.hero__sub { color: var(--muted); margin: 34px 0 40px; font-size: clamp(1rem, 2vw, 1.15rem); max-width: 32em; }
.hero__scroll {
  /* 中央寄せは transform を使わない（data-reveal の transform と競合するため） */
  position: absolute; bottom: 34px; left: 0; right: 0;
  text-align: center;
  font-family: "Inter", sans-serif; font-size: .7rem; letter-spacing: .25em; color: var(--muted);
}
.hero__scroll::before {
  content: ""; display: block; width: 1px; height: 44px; margin: 0 auto 12px;
  background: var(--muted);
  transform-origin: top;
  animation: scrollLine 2.4s var(--ease) infinite;
}
/* 上から伸びて、下へ消える。
   ※ origin の切り替えは「線がフル(scaleY:1)のとき」だけ行うのでカクつかない */
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =========================================================
   共通セクション
   ========================================================= */
.section { max-width: var(--max); margin: 0 auto; padding: clamp(90px, 16vh, 180px) clamp(20px, 5vw, 64px); }
.section__index { font-family: "Inter", sans-serif; color: var(--accent); font-size: .85rem; margin-bottom: 14px; }
.section__title { font-weight: 500; font-size: clamp(2.2rem, 6vw, 4.2rem); letter-spacing: -.02em; margin-bottom: 56px; }

/* About */
.about__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: start; }
.about__lead { font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 400; line-height: 1.7; }
.about__list { list-style: none; }
.about__list li {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line); font-size: .95rem;
}
.about__list b { color: var(--muted); font-weight: 400; font-family: "Inter", sans-serif; }

/* Works（クリーンなインデックス・リスト） */
.works__list { list-style: none; border-top: 1px solid var(--line); }
.work a {
  display: grid; grid-template-columns: 60px 1fr auto 40px; align-items: center; gap: 20px;
  padding: 32px 8px; border-bottom: 1px solid var(--line);
  transition: padding .5s var(--ease), background .5s var(--ease);
}
.work a:hover { padding-left: 24px; background: var(--surface); }
.work__no { font-family: "Inter", sans-serif; color: var(--muted); font-size: .9rem; }
.work__name { font-size: clamp(1.4rem, 3.5vw, 2.4rem); font-weight: 500; letter-spacing: -.01em; }
.work__meta { color: var(--muted); font-size: .9rem; }
.work__arrow { font-size: 1.3rem; opacity: 0; transform: translateX(-8px); transition: .5s var(--ease); }
.work a:hover .work__arrow { opacity: 1; transform: translateX(0); color: var(--accent); }

/* View All Services ボタン */
.works__more {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}
.works__more-link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: "Inter", sans-serif; font-size: .95rem; font-weight: 500;
  color: var(--muted);
  letter-spacing: .03em;
  transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), gap .4s var(--ease);
}
.works__more-arrow {
  display: inline-block;
  transition: transform .4s var(--ease);
}
.works__more-link:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--surface);
  gap: 16px;
}
.works__more-link:hover .works__more-arrow {
  transform: translate(3px, -3px);
}

/* Skills */
.skills__list { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; }
.skills__list li {
  padding: 12px 26px; border: 1px solid var(--line); border-radius: 100px;
  font-family: "Inter", sans-serif; font-size: .95rem;
  transition: .4s var(--ease);
}
.skills__list li:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Contact */
.contact__big { font-weight: 500; font-size: clamp(3rem, 12vw, 9rem); line-height: 1; letter-spacing: -.03em; margin-bottom: 40px; }
.contact__mail { font-size: clamp(1.1rem, 3vw, 1.6rem); }
.contact__sns { display: flex; gap: 26px; margin-top: 40px; font-family: "Inter", sans-serif; color: var(--muted); font-size: .95rem; }
.contact__sns a { position: relative; }
.contact__sns a:hover { color: var(--ink); }

/* Footer */
.footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  padding: 36px clamp(20px, 5vw, 64px);
  border-top: 1px solid var(--line);
  font-family: "Inter", sans-serif; color: var(--muted); font-size: .8rem;
}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 760px) {
  .nav { padding: 20px; }
  .nav__links { gap: 16px; font-size: .8rem; }
  .about__grid { grid-template-columns: 1fr; gap: 36px; }
  .work a { grid-template-columns: 40px 1fr; row-gap: 4px; }
  .work__meta, .work__arrow { grid-column: 2; }
  .work__arrow { display: none; }
}

/* 動きを減らす設定の人には、動きを止める */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-reveal], .line > span { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   🥚 イースターエッグ（コナミコマンド → 雫が降る → 隠しページ）
   ※ JS が body に .egg-active を付けたときだけ表示される
   ========================================================= */

/* 雫を入れる透明な層（クリックは下に通す） */
.egg-rain {
  position: fixed; inset: 0; z-index: 9000;
  pointer-events: none; overflow: hidden;
}

/* 1粒の雫（細長い水滴。JS が left/大きさ/速さをランダムに設定） */
.egg-drop {
  position: absolute; top: -12vh;
  width: 2px; height: 22px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, #6b8fb5);
  opacity: .8;
  animation: eggFall linear forwards;
}
@keyframes eggFall {
  to { transform: translateY(120vh); }
}

/* --- D: 実績解除トースト（下からスッと出て、数秒で消える） --- */
.egg-toast {
  position: fixed; left: 50%; bottom: 40px; z-index: 9200;
  transform: translate(-50%, 24px);
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px; border-radius: 14px;
  background: var(--ink); color: var(--bg);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .28);
  max-width: min(90vw, 360px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.egg-toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.egg-toast__icon  { font-size: 1.8rem; line-height: 1; }
.egg-toast__title { font-weight: 600; font-size: .95rem; letter-spacing: .02em; }
.egg-toast__sub   { font-size: .8rem; opacity: .7; margin-top: 2px; }

/* （以前の「夜モード切替」は廃止：サイトは :root で常時ダークになりました） */

/* =========================================================
   💡 ヒーローの「ランプ」演出
   Aceternity UI "Lamp"（React + Tailwind + Framer Motion）を
   素の HTML / CSS だけで再現したもの。
   ・光は暖色オレンジ／ヒーローだけダーク背景
   ・点灯アニメは「ローディング完了 = body から is-loading が外れる」に同期
   ・全要素 transform/translate で中央(stage center)から相対配置
   ========================================================= */
.hero--lamp {
  --lamp-bg:   #0a0a0c;   /* ヒーローの暗い背景 */
  --lamp-cone: #ff7a18;   /* 光の三角（円錐グラデ） */
  --lamp-glow: #ff6a00;   /* 大きいグロー（にじみ） */
  --lamp-core: #ff9d4d;   /* 中心の強い光 */
  --lamp-line: #ffb066;   /* ランプの管（最も明るいライン） */

  position: relative;
  flex-direction: column;          /* 既定の .hero は row。ランプでは縦積み中央 */
  justify-content: center;
  background: var(--lamp-bg);
  overflow: hidden;
  isolation: isolate;
}

/* 光のステージ：縦1.25倍に引き伸ばして奥行きを出す層
   （translateY を先に書くと「拡大の影響を受けず」素直に上下へ動かせる） */
.lamp {
  position: absolute; inset: 0;
  overflow: hidden;
  transform: translateY(-4rem) scaleY(1.25);
  z-index: 0;
  pointer-events: none;  /* 装飾なのでマウスイベントを下のテキストに通す */
}
.lamp > * { position: absolute; }

/* --- 円錐グラデで作る光の三角（左右で対） --- */
.lamp__cone {
  top: 50%;
  height: 14rem;
  width: 15rem;                    /* 点灯前（細い） */
  opacity: .5;
  transform: translateY(-50%);
  transition: width .8s var(--ease) .25s, opacity .8s var(--ease) .25s;
}
.lamp__cone--left  { right: 50%; background: conic-gradient(from 70deg  at center top, var(--lamp-cone), transparent, transparent); }
.lamp__cone--right { left:  50%; background: conic-gradient(from 290deg at center top, transparent, transparent, var(--lamp-cone)); }
/* 点灯（ローディング完了）で広がって明るくなる */
body:not(.is-loading) .lamp__cone { width: 30rem; opacity: 1; }

/* 円錐の「下」と「外側」を背景色で覆ってフェードさせ、光の輪郭を柔らかく */
.lamp__cone::before, .lamp__cone::after { content: ""; position: absolute; background: var(--lamp-bg); }
.lamp__cone::before {            /* 下を上へフェード */
  left: 0; right: 0; bottom: 0; height: 10rem;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
}
.lamp__cone--left::after {       /* 左コーンの外側（左）をフェード */
  bottom: 0; left: 0; width: 10rem; height: 100%;
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
          mask-image: linear-gradient(to right, #000, transparent);
}
.lamp__cone--right::after {      /* 右コーンの外側（右）をフェード */
  bottom: 0; right: 0; width: 10rem; height: 100%;
  -webkit-mask-image: linear-gradient(to left, #000, transparent);
          mask-image: linear-gradient(to left, #000, transparent);
}

/* --- 光の下側をなじませる、ぼかした暗バー --- */
.lamp__blur {
  top: 50%; left: 50%; width: 100%; height: 12rem;
  background: var(--lamp-bg); filter: blur(40px);
  transform: translate(-50%, -50%) translateY(3rem) scaleX(1.5);
  z-index: 1;
}
/* --- 中央のうっすらした奥行き --- */
.lamp__backdrop {
  top: 50%; left: 50%; width: 100%; height: 12rem;
  transform: translate(-50%, -50%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: .1; z-index: 5;
}
/* --- 大きいグロー（光のにじみ） --- */
.lamp__halo {
  top: 50%; left: 50%; width: 28rem; height: 9rem;
  border-radius: 999px; background: var(--lamp-glow);
  opacity: .5; filter: blur(64px);
  transform: translate(-50%, -50%) translateY(-4.5rem);
  z-index: 5;
}
/* --- 中心の強い光（点灯で広がる） --- */
.lamp__core {
  top: 50%; left: 50%; width: 8rem; height: 9rem;
  border-radius: 999px; background: var(--lamp-core); filter: blur(40px);
  transform: translate(-50%, -50%) translateY(-6rem);
  transition: width .8s var(--ease) .25s;
  z-index: 3;
}
body:not(.is-loading) .lamp__core { width: 16rem; }
/* --- ランプの管（最も明るいライン・点灯で横に伸びる） --- */
.lamp__line {
  top: 50%; left: 50%; width: 15rem; height: 2px;
  background: var(--lamp-line); box-shadow: 0 0 12px 1px var(--lamp-core);
  transform: translate(-50%, -50%) translateY(-7rem);
  transition: width .8s var(--ease) .25s;
  z-index: 6;
}
body:not(.is-loading) .lamp__line { width: 30rem; }
/* --- 上半分を覆ってラインをくっきり見せるカバー --- */
.lamp__topcover {
  top: 50%; left: 50%; width: 100%; height: 11rem;
  background: var(--lamp-bg);
  transform: translate(-50%, -50%) translateY(-12.5rem);
  z-index: 4;
}

/* --- ヒーロー本文（光だまりの中に配置） --- */
.hero--lamp .hero__inner {
  position: relative; z-index: 2;
  text-align: center;
  transform: translateY(-1.5rem);
}
/* 周辺テキストはダーク背景向けの明るい配色へ */
.hero--lamp .hero__title .line > span {
  background: linear-gradient(180deg, #ffffff 0%, #ffcaa0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ホバー時の回転とブラーはJSで h1.hero__title 自体に適用する。
   ※ 以前ここに will-change / preserve-3d / backface-visibility を付けていたが、
     グラデ文字＋blur との相性でレイヤーが再描画されず
     「DevToolsを開いたときだけ回転する」不具合の原因になったため撤去。 */

/* ランプの光の線と重ならないよう、このテキストだけ少し下へずらす
   （position:relative の top なので他要素のレイアウトやdata-revealのtransformに影響しない） */
.hero--lamp .hero__eyebrow { color: #f0a86a; position: relative; top: 2rem; }
.hero--lamp .hero__sub     { color: rgba(255, 255, 255, .6); margin-inline: auto; }
.hero--lamp .hero__sub #heroClock {
  font-family: "Inter", ui-monospace, "Cascadia Code", monospace;
  font-variant-numeric: tabular-nums;   /* 数字を等幅で並べてカクつき防止 */
  letter-spacing: .12em;
}
.hero--lamp .link-arrow    { color: #fff; border-color: rgba(255, 255, 255, .4); }
.hero--lamp .link-arrow:hover { color: var(--lamp-core); border-color: var(--lamp-core); }
.hero--lamp .hero__scroll  { color: rgba(255, 255, 255, .5); }
.hero--lamp .hero__scroll::before { background: rgba(255, 255, 255, .4); }

/* スマホでは光のサイズを少し控えめに（画面からはみ出し過ぎないよう） */
@media (max-width: 600px) {
  body:not(.is-loading) .lamp__cone { width: 20rem; }
  body:not(.is-loading) .lamp__line { width: 18rem; }
  body:not(.is-loading) .lamp__core { width: 10rem; }
  .lamp__halo { width: 20rem; }
}

/* =========================================================
   🌈 グローライン・シェーダー（About↔Service の区切り帯）
   全幅・黒背景。#shaderCanvas に WebGL で sin 波の光線を描く。
   ========================================================= */
.shader {
  position: relative; width: 100%;
  height: clamp(300px, 55vh, 560px);
  overflow: hidden; background: #000;
  /* 上下の境界線を消して、前後のダーク背景へ自然に溶け込ませる */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.shader canvas { display: block; width: 100%; height: 100%; }
/* About と Service(Works) の間に余計な縦の隙間を作らない（帯を上下のセクションへ密着） */
/* ネガティブマージンでフェード部分をセクションに食い込ませ、見た目の隙間を縮小 */
.about { padding-bottom: 0; position: relative; z-index: 1; }
.shader { margin-top: -100px; margin-bottom: -100px; }
.shader + .section { padding-top: 0; }