/* LIT STUDIO ── WebGL 演出のできること
 * 2026-08-19 作成。営業でお見せするための1枚もの。
 * 参考にした自社資産: Desktop\code-catalog（動きの指示カタログ 108項目）
 */

:root{
  --bg:#07070c;
  --bg-2:#0c0d16;
  --fg:#eef0f5;
  --fg-mute:#8b91a3;
  --line:rgba(255,255,255,.10);
  --accent:#6c7bff;
  --accent-2:#00e0c6;
  --wrap:1160px;
  --font:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);
  line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
canvas{display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ── 読み込み中 ───────────────────────── */
.loader{
  position:fixed;inset:0;z-index:999;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease,visibility .7s ease;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader-inner{text-align:center}
.loader-mark{
  display:block;width:54px;height:54px;margin:0 auto 22px;border-radius:50%;
  border:1px solid var(--line);border-top-color:var(--accent);
  animation:spin 1.1s cubic-bezier(.6,.05,.3,.95) infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-num{font-size:13px;letter-spacing:.28em;color:var(--fg-mute);margin:0}
.loader-num i{font-style:normal;opacity:.55;margin-left:2px}

/* ── ナビ ─────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(7,7,12,.75),rgba(7,7,12,0));
}
.nav-brand{font-size:14px;font-weight:700;letter-spacing:.16em;text-decoration:none}
.nav-brand span{
  display:inline-block;margin-left:9px;padding:2px 8px;border-radius:20px;
  font-size:10px;letter-spacing:.18em;color:var(--accent-2);
  border:1px solid rgba(0,224,198,.35);
}
.nav nav{display:flex;gap:26px;align-items:center}
.nav nav a{font-size:13px;text-decoration:none;color:var(--fg-mute);transition:color .25s}
.nav nav a:hover{color:var(--fg)}
.nav-cta{
  padding:9px 20px;border-radius:30px;border:1px solid var(--line);
  color:var(--fg)!important;
}
.nav-cta:hover{background:var(--fg);color:var(--bg)!important;border-color:var(--fg)}

/* ── ヒーロー ─────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
/* 左半分に暗い幕をかけて、文章を確実に読めるようにする。
   3Dは右側に寄せてあるので、幕は左に強くかける */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,7,12,.94) 0%,rgba(7,7,12,.86) 34%,rgba(7,7,12,.24) 56%,rgba(7,7,12,0) 72%),
    radial-gradient(120% 90% at 66% 50%,rgba(7,7,12,0) 34%,rgba(7,7,12,.72) 100%);
}
.hero-copy{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%}
.eyebrow{font-size:11px;letter-spacing:.34em;color:var(--accent-2);margin:0 0 22px}
.hero-title{font-size:clamp(38px,7.2vw,88px);line-height:1.18;margin:0 0 26px;letter-spacing:.01em;font-weight:700}
.hero-title .line{display:block;overflow:hidden}
.hero-title em{font-style:normal;background:linear-gradient(100deg,var(--accent-2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{max-width:34em;color:var(--fg-mute);font-size:15px;margin:0 0 34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-scroll{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:10px;letter-spacing:.3em;color:var(--fg-mute);display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero-scroll span{width:1px;height:44px;background:linear-gradient(var(--accent-2),transparent);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}
.hero-note{
  position:absolute;right:28px;bottom:26px;z-index:2;margin:0;max-width:23em;
  font-size:11px;color:var(--fg-mute);text-align:right;line-height:1.8;
}
.hero-note b{color:var(--fg)}

.btn{
  display:inline-block;padding:14px 30px;border-radius:32px;text-decoration:none;
  background:var(--fg);color:var(--bg);font-size:14px;font-weight:700;
  border:1px solid var(--fg);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--fg)}
.btn.big{padding:18px 46px;font-size:15px}

/* ── 節 ───────────────────────────────── */
.section{position:relative;padding:120px 0}
.sec-en{font-size:11px;letter-spacing:.34em;color:var(--accent-2);margin:0 0 18px}
.sec-h{font-size:clamp(26px,4vw,44px);line-height:1.4;margin:0 0 24px;font-weight:700}
.sec-lead{max-width:44em;color:var(--fg-mute);font-size:15px;margin:0}
.sec-lead b{color:var(--fg)}

/* ── できること（貼り付き＋3D） ─────────── */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:var(--wrap);margin:70px auto 0;padding:0 28px}
.showcase-sticky{position:sticky;top:14vh;height:72vh;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg-2)}
.showcase-sticky canvas{width:100%;height:100%}
.showcase-label{
  position:absolute;left:18px;bottom:16px;font-size:11px;letter-spacing:.24em;
  color:var(--fg-mute);border:1px solid var(--line);padding:6px 14px;border-radius:20px;
  backdrop-filter:blur(8px);
}
.showcase-steps{display:flex;flex-direction:column;gap:6vh;padding:6vh 0}
.step{min-height:56vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .5s}
.step.is-on{opacity:1}
.step h3{font-size:clamp(21px,2.6vw,29px);margin:0 0 16px;font-weight:700}
.step p{color:var(--fg-mute);font-size:15px;margin:0 0 12px;max-width:30em}
.step-tag{
  display:inline-block;font-size:11px;letter-spacing:.14em;color:var(--accent-2);
  border:1px solid rgba(0,224,198,.28);border-radius:20px;padding:5px 14px;margin-top:6px!important;
  align-self:flex-start;
}

/* ── 反応する帯 ───────────────────────── */
.field-section{padding:0;min-height:88svh;display:flex;align-items:center;overflow:hidden}
.field-canvas{position:absolute;inset:0;width:100%;height:100%}
.field-copy{position:relative;z-index:2}

/* ── 難易度 ───────────────────────────── */
.levels{list-style:none;margin:54px 0 0;padding:0;border-top:1px solid var(--line)}
.lv{
  display:grid;grid-template-columns:64px 1fr auto;gap:26px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line);transition:background .3s;
}
.lv:hover{background:rgba(255,255,255,.02)}
.lv-n{font-size:34px;font-weight:700;color:var(--fg-mute);opacity:.4;line-height:1}
.lv h3{margin:0 0 6px;font-size:19px}
.lv p{margin:0;color:var(--fg-mute);font-size:14px}
.lv p b{color:var(--fg)}
.lv-tag{font-size:11px;letter-spacing:.14em;color:var(--fg-mute);white-space:nowrap}
.lv.is-ours .lv-n{color:var(--accent-2);opacity:1}
.lv.is-ours .lv-tag{color:var(--accent-2)}
.lv.is-out{opacity:.5}
.levels-note{margin:34px 0 0;color:var(--fg-mute);font-size:14px}

/* ── 進め方 ───────────────────────────── */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:54px}
.flow-i{border:1px solid var(--line);border-radius:14px;padding:26px 22px;background:var(--bg-2)}
.flow-i span{display:block;font-size:11px;letter-spacing:.24em;color:var(--accent-2);margin-bottom:14px}
.flow-i h3{margin:0 0 10px;font-size:17px}
.flow-i p{margin:0;color:var(--fg-mute);font-size:14px}

/* ── CTA・フッター ────────────────────── */
.cta{padding:130px 0;text-align:center;background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.cta h2{font-size:clamp(26px,4.4vw,46px);line-height:1.4;margin:0 0 18px}
.cta p{color:var(--fg-mute);margin:0 0 34px}
.cta-sub{font-size:12px;letter-spacing:.14em;margin-top:26px!important}
.foot{border-top:1px solid var(--line);padding:30px 0;font-size:12px;color:var(--fg-mute)}
.foot .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot p{margin:0}

/* ── 出現の演出 ───────────────────────── */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
[data-reveal].is-in{opacity:1;transform:none}

/* ── 狭い画面 ─────────────────────────── */
@media (max-width:960px){
  .nav nav a:not(.nav-cta){display:none}
  .showcase{grid-template-columns:1fr;gap:0}
  .showcase-sticky{height:52vh;top:12vh}
  .showcase-steps{padding:4vh 0;gap:2vh}
  .step{min-height:auto;padding:34px 0;opacity:1}
  .section{padding:80px 0}
  .flow{grid-template-columns:1fr 1fr}
  .lv{grid-template-columns:44px 1fr;gap:16px}
  .lv-tag{grid-column:2;margin-top:8px}
  .hero-note{display:none}
  /* 縦画面は 3D が上、文章が下。幕も上下でかける */
  .hero::after{
    background:
      linear-gradient(180deg,rgba(7,7,12,.30) 0%,rgba(7,7,12,.20) 26%,rgba(7,7,12,.88) 46%,rgba(7,7,12,.96) 100%);
  }
  .hero .hero-copy{padding-top:34vh}
}
@media (max-width:560px){
  .flow{grid-template-columns:1fr}
}

/* 動きを減らす設定の人には止めて出す */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .loader-mark{animation:none}
  .hero-scroll span{animation:none}
}