/* ============================================================
   ARTEMISRA — Software Section Lab（フロントページ / About 共通）
   静的サイト lab/index.html の <style> を移植
   ============================================================ */

/* ===== Page frame (黒の外枠・全幅) ===== */
.page-frame {
  margin: 24px;
  min-height: calc(100vh - 48px);
  background: #f6f6f6;
  border: 1px solid #111111;     /* 黒枠 */
  border-radius: 2px;
  padding: 9vh 7% 9vh;
}

/* ===== Site header ===== */
.site-header {
  min-height: 60vh;
}
.site-title {
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
  font-weight: 400;
  font-size: clamp(28px, 5.5vw, 46px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;        /* 字間ぶんの右シフトで中央視覚補正 */
  color: #4b4b4b;
  margin-top: 4vh;
  text-decoration: none;
  display: block;
}
.site-tagline {
  font-family: 'Times New Roman', 'Hiragino Mincho ProN', 'YuMincho', serif;
  text-align: center;
  margin-top: 20vh;
  font-size: clamp(13px, 2.4vw, 16px);
  letter-spacing: 0.08em;
  color: #5a5a55;
}

/* ===== Software block ===== */
.software-block { margin-top: 4vh; }
.software-label {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  font-weight: 400;
  font-size: clamp(15px, 2.8vw, 20px);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: #8c8c86;
  margin-bottom: 4vh;
}
.software-frame {
  position: relative;
  border: 1px solid #111111;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 16 / 8.6;     /* ワイヤーフレームに近い横長 */
  background: #000;
}

/* ===== Software Section (three.js シーン) ===== */
#software {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* three.js canvas — full background */
#space-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ===== App Cards overlay ===== */
.app-cards {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 900px;            /* 手前→奥の奥行きを出す */
  perspective-origin: 65% 40%;
  font-family: 'Inter', sans-serif;
}

.app-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: auto;
}

/* 斜めの連なり：上から右下へ降りていく並び */
.app-card[data-index="0"] { left: 48%; top: 26%; }
.app-card[data-index="1"] { left: 56%; top: 45%; }
.app-card[data-index="2"] { left: 64%; top: 64%; }

/* staggered entrance delay（上から順に出現）*/
.app-card:nth-child(1) { transition-delay: 0.1s; }
.app-card:nth-child(2) { transition-delay: 0.3s; }
.app-card:nth-child(3) { transition-delay: 0.5s; }

/* visible: 手前(右・大)から奥の定位置へ飛んで着地 → その後ふわふわ浮遊 */
.app-card.visible {
  animation: flyIn 0.9s cubic-bezier(0.19, 1, 0.22, 1) both,
             float 4s ease-in-out infinite;
  animation-delay: 0s, 0.3s;     /* flyIn, float（floatはflyIn後に開始）*/
}
.app-card:nth-child(2).visible { animation-delay: 0.18s, 1.08s; }
.app-card:nth-child(3).visible { animation-delay: 0.36s, 1.26s; }

/* 手前(z大=拡大)・右・少し傾き → 奥(z0)・正位置・正対へ減速着地 */
@keyframes flyIn {
  0% {
    opacity: 0;
    transform: translateX(150px) translateZ(380px) rotateY(-12deg);
  }
  40%  { opacity: 1; }
  100% {
    opacity: 1;
    transform: translateX(0) translateZ(0) rotateY(0deg);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* App icon */
.app-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
}

.app-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.03em;
}

/* App links (公式サイト / 利用規約とプライバシーポリシー 等) */
.app-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
}
.app-link {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.app-link:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}

/* Section label */
.section-label {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

/* ===== テクスチャ著作権クレジット（CC BY 4.0・表記必須） ===== */
.frame-credit {
  margin-top: 3vh;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #9a9a94;
}
.frame-credit a { color: #6f6f6a; }

/* =========================================================
   About（lab スタイルに合わせたシンプルな会社情報）
   ========================================================= */
.about-block { margin-top: 2vh; max-width: 720px; margin-left: auto; margin-right: auto; }
.about-label {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  font-weight: 400;
  font-size: clamp(15px, 2.8vw, 20px);
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: #8c8c86;
  margin-bottom: 5vh;
}
.about-list { width: 100%; }
.about-list > div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid #e2e2dd;
}
.about-list > div:last-child { border-bottom: 1px solid #e2e2dd; }
.about-list dt {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #8c8c86;
  margin: 0;
}
.about-list dd {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #2a2a2a;
  line-height: 1.7;
}
.about-list dd a { color: #2a2a2a; }
.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: center;
  margin-top: 6vh;
}
.about-links a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #1c1c1c;
  text-decoration: none;
  border-bottom: 1px solid #1c1c1c;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.about-links a:hover { color: #777; border-color: #777; }

/* =========================================================
   Responsive
   ボックスのアスペクト比は lab.js(frameScene) と連動：
   1.86(既定)=横長 / 1.45=中間 / 0.8=縦長
   ========================================================= */
@media (max-width: 900px) {
  .page-frame {
    margin: 16px;
    min-height: calc(100vh - 32px);
    padding: 7vh 5% 7vh;
  }
  .site-header { min-height: 46vh; }
  .site-tagline { margin-top: 14vh; }
  .software-frame { aspect-ratio: 16 / 11; }

  .app-card[data-index="0"] { left: 42%; top: 22%; }
  .app-card[data-index="1"] { left: 54%; top: 44%; }
  .app-card[data-index="2"] { left: 66%; top: 66%; }
}

@media (max-width: 600px) {
  .page-frame {
    margin: 10px;
    min-height: calc(100vh - 20px);
    padding: 6vh 5% 6vh;
  }
  .site-header { min-height: 36vh; }
  .site-tagline { margin-top: 12vh; }
  .software-frame { aspect-ratio: 4 / 5; }  /* 縦長ボックス */

  /* カードを斜め配置ではなく、縦に普通に並べる（左右等しいpadding） */
  .app-cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 0 7%;
  }
  .app-card {
    position: static;   /* data-index の left/top% を無効化して通常フローへ */
    width: 100%;
    gap: 12px;
  }
  .app-icon { width: 42px; height: 42px; border-radius: 11px; font-size: 18px; }
  .app-name { font-size: 13px; }
  .app-desc { font-size: 10px; }
  .app-links { gap: 4px 10px; margin-top: 4px; }
  .app-link { font-size: 9px; }

  .about-list > div { grid-template-columns: 1fr; gap: 4px; }
}