/* =========================================================
   Hero BG Motion Override (v4)
   - v3 + "more moving" blobs
   - Grid stays FIXED, only blobs move (and pulse)
   Load order:
     style.css
     style_taikisha_bg.css (optional)
     style_bg_motion_override_v4.css
   ========================================================= */

.hero{ position: relative; overflow: hidden; }
.hero--full{ position: relative; }

/* Base layer */
.hero.hero--full > .hero-bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  --mx: 0px;
  --my: 0px;

  background:
    linear-gradient(90deg,
      rgba(226,232,255,1) 0%,
      rgba(239,246,255,1) 34%,
      rgba(236,253,245,1) 72%,
      rgba(240,253,250,1) 100%
    ) !important;

  transform: translate3d(var(--mx), var(--my), 0) !important;
  animation: none !important;
  filter: none !important;
}

/* Blobs (move more) */
.hero.hero--full > .hero-bg::before{
  content: "" !important;
  position: absolute !important;
  inset: -22% !important;
  pointer-events: none !important;

  background:
    /* Trust Blue (主役) */
    radial-gradient(closest-side at 18% 30%, rgba(37, 99, 235, .46), transparent 62%),

    /* Sensor Cyan (AI/計測感) */
    radial-gradient(closest-side at 46% 62%, rgba(34, 211, 238, .36), transparent 64%),

    /* Safety Green (セーフティ) */
    radial-gradient(closest-side at 82% 38%, rgba(16, 185, 129, .34), transparent 62%),

    /* Audit Amber (監査/ガバナンス) ※紫の置換 */
    radial-gradient(closest-side at 78% 84%, rgba(245, 158, 11, .22), transparent 66%),

    /* Deep Blue (深み/安定) */
    radial-gradient(closest-side at 30% 86%, rgba(29, 78, 216, .26), transparent 62%),

    /* White glow (中心の上品な光) */
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.32), transparent 60%),

    /* Scan band (検査/スキャンの“気配”を追加) */
    linear-gradient(180deg,
      transparent 0%,
      rgba(255,255,255,.10) 44%,
      rgba(255,255,255,.18) 50%,
      rgba(255,255,255,.10) 56%,
      transparent 100%);

  opacity: .98 !important;
mix-blend-mode: multiply !important;
filter: blur(10px) saturate(1.22) contrast(1.08) !important;

  /* 2本立てで「移動」+「脈動」 */
  animation:
    heroBlobsDriftFast 9s cubic-bezier(.42,0,.28,1) infinite alternate !important,
    heroBlobsPulse 5.2s ease-in-out infinite alternate !important;

  transform: translate3d(0,0,0) !important;
  will-change: transform, filter, opacity;
}

/* Grid (fixed) */
/* ===== Audit grid (fixed) ===== */
.hero.hero--full > .hero-bg::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;

  /* 監査っぽい：主グリッド + 補助線 + スキャンライン(薄) + 計測点 */
  background:
    /* main grid */
    repeating-linear-gradient(to right, rgba(15,23,42,.10) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom, rgba(15,23,42,.10) 0 1px, transparent 1px 120px),

    /* sub grid (1/4) */
    repeating-linear-gradient(to right, rgba(15,23,42,.055) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(to bottom, rgba(15,23,42,.055) 0 1px, transparent 1px 30px),

    /* scanline (very subtle) */
    repeating-linear-gradient(to bottom, rgba(2,6,23,.035) 0 1px, transparent 1px 8px),

    /* measuring dots (very subtle) */
    radial-gradient(circle, rgba(15,23,42,.085) 0 1px, transparent 1.2px);

  /* dots spacing */
  background-size:
    auto, auto,
    auto, auto,
    auto,
    120px 120px;
  background-position:
    0 0, 0 0,
    0 0, 0 0,
    0 0,
    0 0;

  opacity: .22 !important;
  mix-blend-mode: multiply !important;

  animation: none !important;
  transform: none !important;
}
.hero-inner,
.hero-bottom{ position: relative; z-index: 1; }

@keyframes heroBlobsDriftFast{
  0%   { transform: translate3d(-70px, 28px, 0) scale(1.02) rotate(-1.6deg); }
  35%  { transform: translate3d(22px, -34px, 0) scale(1.06) rotate(1.1deg); }
  70%  { transform: translate3d(78px, 18px, 0) scale(1.08) rotate(-0.8deg); }
  100% { transform: translate3d(44px, 52px, 0) scale(1.07) rotate(1.4deg); }
}

@keyframes heroBlobsPulse{
  0%   { opacity: .92; filter: blur(12px) saturate(1.06); }
  50%  { opacity: .98; filter: blur(14px) saturate(1.10); }
  100% { opacity: .94; filter: blur(11px) saturate(1.07); }
}

@media (prefers-reduced-motion: reduce){
  .hero.hero--full > .hero-bg{ transform: none !important; }
  .hero.hero--full > .hero-bg::before{ animation: none !important; transform:none !important; }
}
/* ===== Circles pop-up reveal ===== */
.circle-pop{
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.96);
  filter: blur(6px);
  transform-origin: 50% 60%;
  will-change: transform, opacity, filter;
}

.circles-in .circle-pop{
  animation: popUp .9s cubic-bezier(.2,.9,.2,1) forwards;
}

/* 段差 */
.circles-in .grid3 > *:nth-child(1) .circle-pop{ animation-delay: .06s; }
.circles-in .grid3 > *:nth-child(2) .circle-pop{ animation-delay: .18s; }
.circles-in .grid3 > *:nth-child(3) .circle-pop{ animation-delay: .30s; }

@keyframes popUp{
  0%{
    opacity:0;
    transform: translate3d(0, 18px, 0) scale(.96);
    filter: blur(6px);
  }
  60%{
    opacity:1;
    transform: translate3d(0, 0, 0) scale(1.02); /* ちょい弾む */
    filter: blur(0);
  }
  100%{
    opacity:1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .circle-pop{ opacity:1; transform:none; filter:none; }
  .circles-in .circle-pop{ animation:none; }
}
/* 下段ヘッダーの登場：少し強めのポップ */
.hero-bottom-head .reveal-item{
  opacity: 0;
  transform: translateY(10px) scale(.98);
  filter: blur(6px);
  transition: opacity .65s cubic-bezier(.2,.8,.2,1),
              transform .65s cubic-bezier(.2,.8,.2,1),
              filter .65s cubic-bezier(.2,.8,.2,1);
  will-change: transform, opacity, filter;
}

.hero-bottom-head .reveal-item.is-inview{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* 順番：タイトル→スイッチ */
.hero-bottom-head .reveal-item:nth-child(1){ transition-delay: .05s; }
.hero-bottom-head .reveal-item:nth-child(2){ transition-delay: .16s; }

/* ===== Globe (top-right, subtle) ===== */
.hero .hero-bg{
  position:absolute;
  inset:0;
}

.hero .hero-globe{
  position:absolute;
  right: clamp(-40px, -3vw, -12px);
  top: clamp(70px, 8vh, 110px);
  width: clamp(260px, 32vw, 520px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;

  /* マウス視差（JSで更新） */
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0) scale(1);
  will-change: transform, filter, opacity;

  /* うっすら馴染ませる */
  opacity: .22;
  filter: blur(.0px) saturate(1.05);
  mix-blend-mode: multiply;
}

/* ワイヤーフレーム地球（SVGを背景に） */
.hero .hero-globe::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 999px;

  background-image: url("../img/globe-hud.svg");

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  /* 右上の光が当たる感じ */
  mask-image: radial-gradient(circle at 35% 28%, rgba(0,0,0,1) 0 55%, rgba(0,0,0,0) 78%);
  opacity: .95;
}

/* Vantaは下のレイヤー */
.hero.hero--full .hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#vanta-rings{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;         /* Vantaは一番下 */
}

/* シミ（blob）は上に残す */
.hero.hero--full .hero-bg::before{
  content: "";
  position: absolute;
  inset: -22%;
  pointer-events: none;
  z-index: 1;         /* シミはVantaの上 */

  background:
    radial-gradient(closest-side at 18% 30%, rgba(99,102,241,.46), transparent 62%),
    radial-gradient(closest-side at 46% 62%, rgba(34,211,238,.38), transparent 64%),
    radial-gradient(closest-side at 82% 38%, rgba(16,185,129,.34), transparent 62%),
    radial-gradient(closest-side at 78% 84%, rgba(168,85,247,.30), transparent 64%),
    radial-gradient(closest-side at 30% 86%, rgba(59,130,246,.26), transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.34), transparent 62%);

  opacity: .95;
  filter: blur(12px) saturate(1.08);

  animation:
    heroBlobsDriftFast 9s cubic-bezier(.42,0,.28,1) infinite alternate,
    heroBlobsPulse 5.2s ease-in-out infinite alternate;
}

/* もし keyframes が無い場合はこれも追加 */
@keyframes heroBlobsDriftFast{
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  100% { transform: translate3d( 1.5%,  1%, 0) scale(1.06); }
}
@keyframes heroBlobsPulse{
  0%   { filter: blur(11px) saturate(1.05); opacity:.92; }
  100% { filter: blur(14px) saturate(1.15); opacity:.98; }
}
/* 背景レイヤーの土台 */
.hero.hero--full{ position: relative; }
.hero.hero--full .hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* Vanta面（canvas） */
#vanta-rings{
  position:absolute;
  inset:0;
  z-index:1;           /* 背景の上、シミの下 */
  pointer-events:none;
}

/* Vantaが生成するcanvasを“薄く” */
#vanta-rings canvas{
  width:100% !important;
  height:100% !important;
  opacity:.18;                 /* ←ここが重要（薄く） */
  mix-blend-mode: multiply;    /* 明るい背景に馴染む。強ければ normal に */
}

/* シミ（blob）はVantaより上 */
.hero.hero--full .hero-bg::before{
  z-index:2;
}

/* コンテンツは最前面に */
.hero.hero--full .hero-inner,
.hero.hero--full .hero-bottom{
  position:relative;
  z-index:5;
}
#vanta-rings canvas{
  opacity:.14;
  mix-blend-mode: multiply; /* 強すぎるなら normal */
  filter: saturate(0.9);
}
.hero-bg canvas{
  filter: grayscale(1) saturate(0) !important;
}
/* VANTAのcanvasごと上にずらす */
.hero-bg {
  transform: translateY(-80px);
}

/* 念のため：canvasが絶対配置ならこちらも効かせる */
.hero-bg canvas {
  transform: translateY(-80px);
}
#vanta-rings{
  opacity: .22; /* 重要：薄くして“背景化” */
  filter: blur(0.2px) saturate(0.8);
  -webkit-mask-image: radial-gradient(circle at 78% 30%, #000 0%, #000 45%, transparent 75%);
  mask-image: radial-gradient(circle at 78% 30%, #000 0%, #000 45%, transparent 75%);
}