/* ---------- 画面全体 ---------- */
html, body {
    position: absolute;
    inset: 0;          /* = top:0; right:0; bottom:0; left:0 */
    margin: 0;
    height: 200vh;
    background: #fff;
    transition: background 1s ease;            /* 白→黒 */
  }
  html.dark,
  body.dark { background: #111; }             /* 黒 */
  
  /* ---------- キャンバス ---------- */
  canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    transition: opacity 1s linear;            /* 透明化 */
  }
  
  /* ロゴ：横幅を 100% にして text-align:center → 完全中央寄せ */
  #logo {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);         /* ← 画面中央 */
    font: 64px "Times New Roman", serif;
    color: #111;
    opacity: 0;                               /* 10 s 後にフェードイン */
    pointer-events: none;
    transition: color 1s ease, opacity 1s ease;
    z-index: 11;
  }
  
  /* ───── 2 つのテキストを "完全重ね" ───── */
  #logo span {
    position: absolute; inset: 0;             /* ← 全面を覆って完全重ね */
    display: flex; align-items: center; justify-content: center;
    transition: opacity 1s ease;
  }
  #logo img { opacity: 1; }                   /* 最初は画像だけ見える */
  #logo .new {
    opacity: 0;
    transition-delay: 1s;                     /* ★ 画像が消えた後に開始 */
    width: 1200px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);              /* 要素自体を中央に配置 */
    font-weight: bold;    
  }
  
  /* ---------- バースト開始後に付くクラス ---------- */
  html.dark #logo { color: #fff; }            /* 黒文字→白文字 */
  
  /* ---------- バースト後に付くクラス ---------- */
  #logo.switch img  { 
    opacity: 0;
    transition: opacity 2s ease;
  }
  #logo.switch .new  {
    opacity: 1;                               
    transition-delay: 1.2s;                   
  }

/* ─── Header をバーストと同時にゆっくりフェードイン ─── */
.animation-wrapper > header {               /* 初期状態：非表示 */
  opacity: 0;
  transition: opacity 3s ease;              /* 2 秒かけて徐々に出現 */
  pointer-events: none;                     /* 見えない間はクリック不可（任意） */
  z-index: 5;                               /* ダイヤより前面に（任意） */
}

html.dark .animation-wrapper > header,      /* バースト開始＝html.dark */
body.dark .animation-wrapper > header {     /* 併せて body.dark も念のため */
  opacity: 1;
  pointer-events: auto;                     /* 表示後はクリック可（任意） */
}

  /* ロゴを画面中央に固定しておく */
.fixed-centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 後で付与するクラス。
   transform だけ残し、position を absolute に */
.absolute-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* css/top_animation.css などに追記（または置換） */
#top-animation-container {          /* ← ロゴの後ろで全画面に降るダイヤ */
  position: fixed;
  inset: 0;
  opacity: 0;                       /* JS で 1 にする */
  transition: opacity 1s ease;
  pointer-events: none;             /* クリックをブロックしない */
  z-index: 3;                       /* ロゴより手前/ヘッダーより奥くらいで調整 */
}

/* それ以外の diamonds-container はセクション内レイアウト */

/* ---------- アニメーション図形用のキーフレーム ---------- */
@keyframes shape-float-red {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translate(40px, -30px) rotate(45deg) scale(1.3); }
  50% { transform: translate(15px, 50px) rotate(90deg) scale(0.8); }
  75% { transform: translate(-25px, 25px) rotate(135deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(180deg) scale(1); }
}

@keyframes shape-float-blue {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translate(-35px, 25px) rotate(60deg) scale(1.2); }
  50% { transform: translate(25px, -40px) rotate(120deg) scale(0.9); }
  75% { transform: translate(45px, 15px) rotate(180deg) scale(1.3); }
  100% { transform: translate(0, 0) rotate(240deg) scale(1); }
}

@keyframes shape-3d-rotate {
  0% { transform: rotate3d(1, 1, 1, 0deg) scale(1); }
  25% { transform: rotate3d(1, 0, 1, 90deg) scale(1.2); }
  50% { transform: rotate3d(0, 1, 1, 180deg) scale(0.8); }
  75% { transform: rotate3d(1, 1, 0, 270deg) scale(1.1); }
  100% { transform: rotate3d(1, 1, 1, 360deg) scale(1); }
}
.diamonds-container:not(#top-animation-container) {
  position: relative;               /* または relative でも OK */
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  opacity: 1;                       /* セクションに常時表示したいなら */
}

/* 丸アニメを入れたラッパー（例） */
#about-circle-box {       /* ← あなたが用意した枠の ID に置き換えてください */
  position: relative;     /* 基準化 */
  z-index: 5;             /* ★ダイヤ(3)より前面に */
}

/* 全画面で見せたい場合 */
.animation-wrapper {
  position: relative;
  width: 100%;
  height: 100dvh;   /* 動的ビューポート高 (fallback に 100vh を重ねても◎) */
  overflow: hidden; /* 必要なら auto にして内部スクロールも可 */
}

.animation-wrapper canvas {
  position: absolute;
  inset: 0;          /* top:0 right:0 bottom:0 left:0 と同義 */
  width: 100%;
  height: 100%;
  pointer-events: none;
}

section {
  position: relative;
  z-index: 1;
}

/* About Section Animation */
.about {
  position: relative;
  overflow: hidden;
}

.floating-elements {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 51, 234, 0.3));
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.circle-1 {
  width: 120px;
  height: 120px;
  top: 10%;
  right: 20%;
  animation: float1 8s ease-in-out infinite, rotate 20s linear infinite;
}

.circle-2 {
  width: 80px;
  height: 80px;
  top: 40%;
  right: 50%;
  animation: float2 6s ease-in-out infinite, rotate 15s linear infinite reverse;
}

.circle-3 {
  width: 60px;
  height: 60px;
  top: 70%;
  right: 15%;
  animation: float3 10s ease-in-out infinite, rotate 25s linear infinite;
}

.floating-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid;
  background: transparent;
}

.ring-1 {
  width: 150px;
  height: 150px;
  top: 25%;
  right: 35%;
  border-color: rgba(34, 197, 94, 0.4);
  animation: float1 12s ease-in-out infinite, pulse 4s ease-in-out infinite;
}

.ring-2 {
  width: 100px;
  height: 100px;
  top: 55%;
  right: 5%;
  border-color: rgba(251, 191, 36, 0.4);
  animation: float2 9s ease-in-out infinite, pulse 3s ease-in-out infinite;
}

.floating-gradient-orb {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 15%;
  right: 5%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(59, 130, 246, 0.1) 50%, transparent 100%);
  border-radius: 50%;
  animation: float3 15s ease-in-out infinite, breathe 8s ease-in-out infinite;
  filter: blur(1px);
}

@keyframes float1 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  25% { transform: translateY(-20px) translateX(10px); }
  50% { transform: translateY(-10px) translateX(-15px); }
  75% { transform: translateY(-30px) translateX(5px); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  33% { transform: translateY(-15px) translateX(-10px); }
  66% { transform: translateY(-25px) translateX(8px); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-20px) translateX(-12px); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .floating-elements {
      width: 40%;
  }
  
  .circle-1 { width: 80px; height: 80px; }
  .circle-2 { width: 60px; height: 60px; }
  .circle-3 { width: 40px; height: 40px; }
  .ring-1 { width: 100px; height: 100px; }
  .ring-2 { width: 70px; height: 70px; }
  .floating-gradient-orb { width: 150px; height: 150px; }
}


/* About Section - Background Diamonds */
.about-diamonds-bg {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.diamonds-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.diamond {
  position: absolute;
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  border: 3px solid;
  background: transparent;
  opacity: 0.6;
}

.blue-diamond {
  border-color: #203F90;
  opacity: 0.3!important;
}

.red-diamond {
  border-color: #F30100;
  opacity: 0.3!important;
}

/* ダイヤモンドの配置とアニメーション */
.diamond-1 { top: 15%; left: 10%; animation: diamond-float 20s ease-in-out infinite; animation-delay: 0s; }
.diamond-2 { top: 25%; left: 75%; animation: diamond-float 18s ease-in-out infinite reverse; animation-delay: 2s; }
.diamond-3 { top: 45%; left: 20%; animation: diamond-float 22s ease-in-out infinite; animation-delay: 4s; }
.diamond-4 { top: 35%; left: 85%; animation: diamond-float 16s ease-in-out infinite reverse; animation-delay: 1s; }
.diamond-5 { top: 65%; left: 15%; animation: diamond-float 24s ease-in-out infinite; animation-delay: 3s; }
.diamond-6 { top: 55%; left: 80%; animation: diamond-float 19s ease-in-out infinite reverse; animation-delay: 5s; }
.diamond-7 { top: 75%; left: 25%; animation: diamond-float 21s ease-in-out infinite; animation-delay: 2.5s; }
.diamond-8 { top: 85%; left: 70%; animation: diamond-float 17s ease-in-out infinite reverse; animation-delay: 4.5s; }
.diamond-9 { top: 95%; left: 40%; animation: diamond-float 23s ease-in-out infinite; animation-delay: 1.5s; }
.diamond-10 { top: 20%; left: 50%; animation: diamond-float 15s ease-in-out infinite reverse; animation-delay: 3.5s; }

@keyframes diamond-float {
  0%, 100% { transform: translateY(0) translateX(0) rotate(45deg) scale(1); opacity: 0.4; }
  25% { transform: translateY(-30px) translateX(20px) rotate(135deg) scale(1.2); opacity: 0.8; }
  50% { transform: translateY(-15px) translateX(-25px) rotate(225deg) scale(0.7); opacity: 0.3; }
  75% { transform: translateY(-40px) translateX(15px) rotate(315deg) scale(1.1); opacity: 0.9; }
}

/* about-contentを前面に */
.about-content {
  position: relative;
  z-index: 2;
}

/* 浮遊アニメーション要素 */
.floating-elements {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 51, 234, 0.3));
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.circle-1 {
  width: 120px;
  height: 120px;
  top: 10%;
  right: 20%;
  animation: float1 8s ease-in-out infinite, rotate 20s linear infinite;
}

.circle-2 {
  width: 80px;
  height: 80px;
  top: 40%;
  right: 50%;
  animation: float2 6s ease-in-out infinite, rotate 15s linear infinite reverse;
}

.circle-3 {
  width: 60px;
  height: 60px;
  top: 70%;
  right: 15%;
  animation: float3 10s ease-in-out infinite, rotate 25s linear infinite;
}

.floating-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid;
  background: transparent;
}

.ring-1 {
  width: 150px;
  height: 150px;
  top: 25%;
  right: 35%;
  border-color: rgba(34, 197, 94, 0.4);
  animation: float1 12s ease-in-out infinite, pulse 4s ease-in-out infinite;
}

.ring-2 {
  width: 100px;
  height: 100px;
  top: 55%;
  right: 5%;
  border-color: rgba(251, 191, 36, 0.4);
  animation: float2 9s ease-in-out infinite, pulse 3s ease-in-out infinite;
}

.floating-gradient-orb {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 15%;
  right: 5%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, rgba(59, 130, 246, 0.1) 50%, transparent 100%);
  border-radius: 50%;
  animation: float3 15s ease-in-out infinite, breathe 8s ease-in-out infinite;
  filter: blur(1px);
}

@keyframes float1 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  25% { transform: translateY(-20px) translateX(10px); }
  50% { transform: translateY(-10px) translateX(-15px); }
  75% { transform: translateY(-30px) translateX(5px); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  33% { transform: translateY(-15px) translateX(-10px); }
  66% { transform: translateY(-25px) translateX(8px); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0px) translateX(0px); }
  50% { transform: translateY(-20px) translateX(-12px); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .diamond {
      width: 30px;
      height: 30px;
      border-width: 2px;
  }
  
  .floating-elements {
      width: 40%;
  }
  
  .circle-1 { width: 80px; height: 80px; }
  .circle-2 { width: 60px; height: 60px; }
  .circle-3 { width: 40px; height: 40px; }
  .ring-1 { width: 100px; height: 100px; }
  .ring-2 { width: 70px; height: 70px; }
  .floating-gradient-orb { width: 150px; height: 150px; }
}