/* ============================================================
   hero-globe.css
   地球 + 飛行機アニメーション for 株式会社YouNewJapan
   ============================================================ */

/* ---------- Hero レイアウト: 2カラム ---------- */
.hero__inner--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  min-height: calc(100vh - var(--header-height));
  padding-top: clamp(3rem, 6vh, 5rem);
  padding-bottom: clamp(3rem, 6vh, 5rem);
}

.hero__content {
  position: relative;
  z-index: 2;
}

.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 地球と軌道が収まる高さ */
  height: clamp(340px, 48vw, 520px);
}

/* ---------- 星屑パーティクル ---------- */
.hero__stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.star {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(255,255,255,.55);
  border-radius: 50%;
  animation: starTwinkle 3s ease-in-out infinite;
}

/* 各星の位置・タイミング */
.star--1  { top:  8%; left: 12%; animation-delay: 0s;    width:3px; height:3px; }
.star--2  { top: 15%; left: 42%; animation-delay: .4s; }
.star--3  { top: 25%; left: 72%; animation-delay: .8s;  width:3px; height:3px; }
.star--4  { top: 45%; left: 88%; animation-delay: 1.2s; }
.star--5  { top: 62%; left: 65%; animation-delay: 1.6s; }
.star--6  { top: 78%; left: 20%; animation-delay: 2.0s; }
.star--7  { top: 90%; left: 55%; animation-delay: 0.3s; }
.star--8  { top:  5%; left: 80%; animation-delay: 1.0s;  width:2.5px; height:2.5px; }
.star--9  { top: 35%; left:  5%; animation-delay: 1.8s; }
.star--10 { top: 55%; left: 30%; animation-delay: 2.2s;  width:1.5px; height:1.5px; }
.star--11 { top: 70%; left: 92%; animation-delay: 0.6s;  width:2.5px; height:2.5px; }
.star--12 { top: 20%; left: 95%; animation-delay: 2.5s; }

@keyframes starTwinkle {
  0%, 100% { opacity: .55; transform: scale(1);   }
  50%       { opacity: 1;   transform: scale(1.5); }
}

/* ---------- 外側の光輪（大気圏演出） ---------- */
.globe-outer-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width:  clamp(290px, 40vw, 450px);
  height: clamp(290px, 40vw, 450px);
  border-radius: 50%;
  border: 1px solid rgba(74,168,232,.18);
  animation: outerRingPulse 4s ease-in-out infinite;
  pointer-events: none;
}
.globe-outer-ring--2 {
  width:  clamp(330px, 46vw, 510px);
  height: clamp(330px, 46vw, 510px);
  border-color: rgba(74,168,232,.08);
  animation-delay: 2s;
}

@keyframes outerRingPulse {
  0%, 100% { opacity: .6; transform: translate(-50%, -50%) scale(1);    }
  50%       { opacity: 1;  transform: translate(-50%, -50%) scale(1.03); }
}

/* ---------- 地球本体 ---------- */
.globe-wrap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width:  clamp(220px, 30vw, 340px);
  height: clamp(220px, 30vw, 340px);
  z-index: 2;
  filter: drop-shadow(0 0 28px rgba(74,168,232,.35))
          drop-shadow(0 8px 32px rgba(10,30,60,.45));
}

.globe-svg {
  width: 100%; height: 100%;
  /* 回転はJS(globe.js)の正射影投影アニメーションで行う */
}

/* 都市ドットのパルスアニメーション */
.city-dot { animation: none; }

.city-dot--pulse   { animation: dotPulse 2.2s ease-in-out infinite; }
.city-dot--pulse2  { animation: dotPulse 2.2s ease-in-out infinite .7s; }
.city-dot--pulse3  { animation: dotPulse 2.2s ease-in-out infinite 1.4s; }
.city-dot--kumamoto {
  animation: kumamotoPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255,140,66,.8));
}

@keyframes dotPulse {
  0%, 100% { opacity: .9; r: 3;   }
  50%       { opacity: 1;  r: 4.5; }
}
@keyframes kumamotoPulse {
  0%, 100% { opacity: .95; r: 4.5; }
  50%       { opacity: 1;   r: 6;   filter: drop-shadow(0 0 6px rgba(255,140,66,1)); }
}

/* 貿易ルートのアニメーション */
.trade-routes path {
  stroke-dashoffset: 0;
  animation: routeFlow 6s linear infinite;
}
.trade-routes path:nth-child(2) { animation-delay: 1.5s; }
.trade-routes path:nth-child(3) { animation-delay: 3s;   }
.trade-routes path:nth-child(4) { animation-delay: 4.5s; }

@keyframes routeFlow {
  0%   { stroke-dashoffset: 0;   }
  100% { stroke-dashoffset: -60; }
}

/* 地球の底の楕円形シャドウ */
.globe-shadow {
  position: absolute;
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 12%;
  background: radial-gradient(ellipse, rgba(10,20,50,.55) 0%, transparent 75%);
  border-radius: 50%;
  pointer-events: none;
}

/* ============================================================
   飛行機 軌道システム
   
   仕組み:
     .orbit — 地球を中心に回転するラッパー（transform-origin: center）
     .plane-wrap — 軌道上の固定位置に配置、地球の半径 + オフセット分だけ平行移動
     飛行機SVGは orbit の逆回転で常に「前向き」を保つ
   ============================================================ */

/* ---- 軌道共通 ---- */
.orbit {
  position: absolute;
  top: 50%; left: 50%;
  /* 軌道の直径 = 地球径 × 1.45 程度 */
  width:  clamp(280px, 39vw, 460px);
  height: clamp(280px, 39vw, 460px);
  margin-top: calc(clamp(280px, 39vw, 460px) / -2);
  margin-left: calc(clamp(280px, 39vw, 460px) / -2);
  border-radius: 50%;
  /* デバッグ用（本番は非表示） */
  /* border: 1px dashed rgba(255,255,255,.1); */
  pointer-events: none;
  z-index: 3;
}

/* ---- 軌道ごとのサイズ・傾き・速度 ---- */

/* 軌道1: 大きな正面ループ（最も目立つ） */
.orbit--1 {
  width:  clamp(290px, 41vw, 480px);
  height: clamp(290px, 41vw, 480px);
  margin-top:  calc(clamp(290px, 41vw, 480px) / -2);
  margin-left: calc(clamp(290px, 41vw, 480px) / -2);
  transform: rotate(0deg) rotateX(18deg);
  animation: orbitRotate1 14s linear infinite;
}

/* 軌道2: 斜め方向（縦長楕円） */
.orbit--2 {
  width:  clamp(240px, 34vw, 400px);
  height: clamp(300px, 43vw, 500px);
  margin-top:  calc(clamp(300px, 43vw, 500px) / -2);
  margin-left: calc(clamp(240px, 34vw, 400px) / -2);
  transform: rotate(35deg) rotateX(25deg);
  animation: orbitRotate2 20s linear infinite;
}

/* 軌道3: 小さな高速ループ */
.orbit--3 {
  width:  clamp(220px, 30vw, 360px);
  height: clamp(220px, 30vw, 360px);
  margin-top:  calc(clamp(220px, 30vw, 360px) / -2);
  margin-left: calc(clamp(220px, 30vw, 360px) / -2);
  transform: rotate(-55deg) rotateX(12deg);
  animation: orbitRotate3 18s linear infinite reverse;
}

@keyframes orbitRotate1 { from { transform: rotate(0deg)   rotateX(18deg); } to { transform: rotate(360deg)  rotateX(18deg); } }
@keyframes orbitRotate2 { from { transform: rotate(35deg)  rotateX(25deg); } to { transform: rotate(395deg) rotateX(25deg); } }
@keyframes orbitRotate3 { from { transform: rotate(-55deg) rotateX(12deg); } to { transform: rotate(305deg) rotateX(12deg); } }

/* ---- 飛行機ラッパー共通 ---- */
/*
  軌道円の "右端" に飛行機を配置するため:
    top: 50%  → 縦中央
    right: 0  → 円の右端
    transform: translateY(-50%) → 縦センタリング
*/
.plane-wrap {
  position: absolute;
  top: 50%;
  right: -1%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0;
}

/* 飛行機が軌道の回転に追従しながらも常に前を向くように逆回転 */
.plane-wrap--1 { animation: planeCounter1 14s linear infinite; }
.plane-wrap--2 { animation: planeCounter2 20s linear infinite; }
.plane-wrap--3 { animation: planeCounter3 18s linear infinite reverse; }

@keyframes planeCounter1 { from { transform: translateY(-50%) rotate(0deg);    } to { transform: translateY(-50%) rotate(-360deg);  } }
@keyframes planeCounter2 { from { transform: translateY(-50%) rotate(-35deg);  } to { transform: translateY(-50%) rotate(-395deg);  } }
@keyframes planeCounter3 { from { transform: translateY(-50%) rotate(55deg);   } to { transform: translateY(-50%) rotate(-305deg);  } }

/* ---- 飛行機 SVG サイズ ---- */
.plane-svg      { width: clamp(36px, 4.5vw, 52px); height: auto; drop-shadow: 0 0 8px rgba(200,230,255,.7); filter: drop-shadow(0 0 6px rgba(180,220,255,.65)); }
.plane-svg--sm  { width: clamp(28px, 3.8vw, 42px); }
.plane-svg--xs  { width: clamp(22px, 3.0vw, 34px); }

/* ---- 飛行機雲（コントレイル） ---- */
.contrail {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to left, rgba(255,255,255,.0), rgba(255,255,255,.55));
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.contrail--1 { width: clamp(30px, 5vw, 70px);  animation: contrailFade 14s linear infinite; }
.contrail--2 { width: clamp(22px, 3.5vw, 52px); animation: contrailFade 20s linear infinite; height: 1.5px; }
.contrail--3 { width: clamp(16px, 2.5vw, 38px); animation: contrailFade 18s linear infinite reverse; height: 1px; }

@keyframes contrailFade {
  0%, 100% { opacity: .65; }
  50%       { opacity: .9;  }
}

/* ---------- 熊本起点バッジ ---------- */
.globe-badge {
  position: absolute;
  bottom: clamp(-2px, 2%, 8px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .45rem;
  background: rgba(10, 24, 48, 0.72);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50px;
  padding: .3rem .85rem .3rem .6rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  z-index: 4;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.globe-badge__dot {
  width: 7px; height: 7px;
  background: #ff8c42;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px rgba(255,140,66,.85);
  animation: badgeDotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes badgeDotPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255,140,66,.8);  }
  50%       { box-shadow: 0 0 12px rgba(255,140,66,1); }
}

.globe-badge__text {
  font-size: clamp(.58rem, .8vw, .7rem);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  font-family: 'Georgia', serif;
}

/* ============================================================
   レスポンシブ — Tablet
   ============================================================ */
@media (max-width: 1024px) {
  .hero__inner--split {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .hero__visual {
    height: clamp(280px, 44vw, 400px);
  }
}

/* ============================================================
   レスポンシブ — Mobile
   ============================================================ */
@media (max-width: 768px) {
  .hero__inner--split {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 2rem;
  }

  /* モバイルでは地球ビジュアルをテキストの上部に小さく表示 */
  .hero__visual {
    order: -1;
    height: clamp(220px, 65vw, 300px);
    margin-bottom: 1.5rem;
  }

  .globe-wrap {
    width:  clamp(150px, 44vw, 220px);
    height: clamp(150px, 44vw, 220px);
  }

  /* モバイルでは軌道を少し小さく */
  .orbit--1 {
    width:  clamp(190px, 55vw, 280px);
    height: clamp(190px, 55vw, 280px);
    margin-top:  calc(clamp(190px, 55vw, 280px) / -2);
    margin-left: calc(clamp(190px, 55vw, 280px) / -2);
  }
  .orbit--2 {
    width:  clamp(155px, 45vw, 230px);
    height: clamp(195px, 56vw, 290px);
    margin-top:  calc(clamp(195px, 56vw, 290px) / -2);
    margin-left: calc(clamp(155px, 45vw, 230px) / -2);
  }
  .orbit--3 {
    width:  clamp(140px, 40vw, 210px);
    height: clamp(140px, 40vw, 210px);
    margin-top:  calc(clamp(140px, 40vw, 210px) / -2);
    margin-left: calc(clamp(140px, 40vw, 210px) / -2);
  }

  .plane-svg     { width: clamp(24px, 6vw, 34px); }
  .plane-svg--sm { width: clamp(18px, 5vw, 26px); }
  .plane-svg--xs { width: clamp(14px, 4vw, 20px); }

  /* テキスト側の余白調整 */
  .hero__content {
    padding: 0 0.25rem;
  }

  .hero__title-en {
    display: none;
  }
}

/* ============================================================
   アクセシビリティ: モーション軽減
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* 地球は元々固定なので対象外 */
  .orbit,
  .orbit--1,
  .orbit--2,
  .orbit--3,
  .plane-wrap--1,
  .plane-wrap--2,
  .plane-wrap--3,
  .star,
  .globe-outer-ring,
  .contrail--1,
  .contrail--2,
  .contrail--3,
  .city-dot--pulse,
  .city-dot--pulse2,
  .city-dot--pulse3,
  .city-dot--kumamoto,
  .trade-routes path {
    animation: none !important;
  }
}