/*
Theme Name:   asmap
Theme URI:    https://asmap.biz
Description:  Twenty Twenty-Five Child Theme for asmap.biz
Author:       asmap
Template:     twentytwentyfive
Version:      1.0.0
*/

/* ============================================================
   Hero Section
   ============================================================ */

.asmap-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #03000f;
  color: #fff;
}

/* 深宇宙グラデーション背景 */
.asmap-bg {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(160, 40, 180, .55)  0%, transparent 42%),
    radial-gradient(ellipse at 82% 18%, rgba(40,  20, 160, .65)  0%, transparent 40%),
    radial-gradient(ellipse at 75% 80%, rgba(0,  100, 180, .50)  0%, transparent 40%),
    radial-gradient(ellipse at 22% 78%, rgba(180,  80,  20, .30) 0%, transparent 36%),
    linear-gradient(160deg, #0d0025, #010318, #00091e);
  background-size: 200% 200%;
  animation: asmapGradient 10s ease-in-out infinite alternate;
  will-change: transform;
}

/* 星雲オーブ */
.asmap-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(72px);
  mix-blend-mode: screen;
  will-change: transform;
}

.orb-1 {
  width: 52vw; height: 52vw;
  background: radial-gradient(circle, rgba(190, 60, 220, .75), rgba(80, 0, 180, .35) 55%, transparent);
  top: -18%; left: -14%;
  opacity: .6;
  animation: asmapFloat1 18s ease-in-out infinite alternate;
}

.orb-2 {
  width: 48vw; height: 48vw;
  background: radial-gradient(circle, rgba(30, 120, 255, .7), rgba(0, 60, 200, .3) 55%, transparent);
  right: -16%; bottom: -16%;
  opacity: .55;
  animation: asmapFloat2 24s ease-in-out infinite alternate;
}

.orb-3 {
  width: 32vw; height: 32vw;
  background: radial-gradient(circle, rgba(0, 180, 220, .6), rgba(0, 100, 180, .2) 60%, transparent);
  right: 10%; top: 8%;
  opacity: .45;
  animation: asmapFloat3 14s ease-in-out infinite alternate;
}

.orb-4 {
  width: 26vw; height: 26vw;
  background: radial-gradient(circle, rgba(220, 120, 40, .45), rgba(160, 60, 0, .15) 60%, transparent);
  left: 25%; bottom: 12%;
  opacity: .4;
  animation: asmapFloat1 20s ease-in-out infinite alternate-reverse;
}

/* CSS box-shadow 星フィールド */
.asmap-stars-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.asmap-stars-sm,
.asmap-stars-lg {
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 1px;
  background: rgba(255,255,255,1);
  /* box-shadow は JS で生成 */
}

.asmap-stars-sm {
  animation: asmapTwinkle 3.5s ease-in-out infinite alternate;
}

.asmap-stars-lg {
  animation: asmapTwinkle 5s ease-in-out infinite alternate;
  animation-delay: -2s;
}

@keyframes asmapTwinkle {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

/* Canvas（マウス追従パーティクル専用） */
#asmap-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* テキスト */
.asmap-copy {
  position: relative;
  z-index: 10;   /* canvas(2) の mix-blend-mode の影響を完全に断ち切る */
  text-align: center;
  padding: 24px;
  isolation: isolate;  /* 念のため合成コンテキストを分離 */
}

.asmap-site {
  font-size: clamp(13px, 1.6vw, 22px);
  letter-spacing: .45em;
  margin-bottom: 28px;
  opacity: .65;
  color: #c8b8ff;
  text-transform: uppercase;
}

.asmap-copy h1 {
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 900;
  letter-spacing: .08em;
  margin: 0 0 28px;
  /* 左(暗)→白→シアン→白→右(暗)：左から右へ光が走る */
  background: linear-gradient(90deg,
    rgba(120, 160, 255, .7)  0%,
    #ffffff                  28%,
    #b8edff                  50%,
    #ffffff                  72%,
    rgba(120, 160, 255, .7) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* 背景と同じ 10s ease-in-out alternate で動きを同期 */
  animation: asmapTextShine 10s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0  6px rgba(255, 255, 255, .95))
    drop-shadow(0 0 20px rgba(160, 220, 255, .80))
    drop-shadow(0 0 50px rgba(100, 180, 255, .45));
}

.asmap-copy p {
  font-size: clamp(14px, 1.6vw, 20px);
  letter-spacing: .3em;
  color: rgba(200, 220, 255, .75);
  text-shadow: 0 0 20px rgba(100, 160, 255, .4);
}

/* ============================================================
   Keyframes
   ============================================================ */

@keyframes asmapGradient {
  0%   { background-position: 0%   0%;   transform: scale(1)    translate3d(0,    0,    0); }
  33%  { background-position: 100% 0%;   transform: scale(1.10) translate3d(-4%,  2%,   0); }
  66%  { background-position: 0%   100%; transform: scale(1.06) translate3d( 3%, -3%,   0); }
  100% { background-position: 100% 100%; transform: scale(1.14) translate3d(-2%,  4%,   0); }
}

@keyframes asmapFloat1 {
  from { transform: translate3d(0, 0, 0)        scale(1); }
  to   { transform: translate3d(10vw, 7vh, 0)   scale(1.18); }
}

@keyframes asmapFloat2 {
  from { transform: translate3d(0, 0, 0)         scale(1); }
  to   { transform: translate3d(-8vw, -9vh, 0)   scale(1.14); }
}

@keyframes asmapFloat3 {
  from { transform: translate3d(0, 0, 0)         scale(1); }
  to   { transform: translate3d(5vw, -7vh, 0)    scale(1.22); }
}

@keyframes asmapTextShine {
  from { background-position: 0%   center; }   /* 左側（暗め）から */
  to   { background-position: 100% center; }   /* 右側へ光が流れる */
}

/* ============================================================
   レイアウト調整
   ============================================================ */

.site-main {
  margin: 0 !important;
  padding: 0 !important;
}