/* ==============================================
   liminalSpace — Logo Animation Styles
   
   【使い方】
   SVGを囲む親要素に class="logo-wrap" id="logoWrap" を付与してください。
   SVGの直前に <canvas id="noiseCanvas"></canvas> を追加してください。
   
   例:
   <div class="logo-wrap" id="logoWrap">
     <canvas id="noiseCanvas"></canvas>
     <!-- ここにSVGを貼り付け -->
   </div>
   ============================================== */

/* ---- レイアウト ---- */
.logo-wrap {
  position: relative;
  width: 300px; /* SP */
}
@media (min-width: 768px) {
  .logo-wrap {
    width: 400px;  /* PC */
  }
}


.logo-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- square: ゆっくり浮遊 + 微細な揺れ ---- */
#square {
  animation: squareDrift 8s ease-in-out infinite;
  transform-origin: 325px 275px;
	-webkit-transform-origin: 325px 275px;
}

@keyframes squareDrift {
  0%,  100% { transform: translateY(0px)   rotate(0deg);    opacity: 1;    }
  25%        { transform: translateY(-6px)  rotate(0.3deg);  opacity: 0.95; }
  50%        { transform: translateY(-10px) rotate(-0.2deg); opacity: 1;    }
  75%        { transform: translateY(-4px)  rotate(0.15deg); opacity: 0.97; }
}

/* ---- text-cyan: グリッチでX方向にずれる ---- */
/*
  10秒ループ・3回発火のリズム:
  0s      静止開始
  1s      グリッチ①（強め）       → 10%
  3.5s    軽い静止あけ グリッチ②  → 35%
  6s      短い静止あけ グリッチ③  → 60%
  10s     静止して折り返し
*/
#text-cyan {
  transform: translateX(0);
  opacity: 1;
  animation: glitchCyan 10s steps(1) infinite;
  transform-origin: 325px 573px;
}

@keyframes glitchCyan {
  0%     { transform: translateX(0);    opacity: 0;   }
  /* グリッチ① */
  10%    { transform: translateX(0);    opacity: 0;   }
  10.4%  { transform: translateX(-5px); opacity: 0.85;}
  10.8%  { transform: translateX(3px);  opacity: 0.55;}
  11.2%  { transform: translateX(0);    opacity: 0;   }
  /* グリッチ② */
  35%    { transform: translateX(0);    opacity: 0;   }
  35.3%  { transform: translateX(-4px); opacity: 0.75;}
  35.6%  { transform: translateX(2px);  opacity: 0.45;}
  36%    { transform: translateX(0);    opacity: 0;   }
  /* グリッチ③（軽め） */
  60%    { transform: translateX(0);    opacity: 0;   }
  60.3%  { transform: translateX(-3px); opacity: 0.6; }
  60.6%  { transform: translateX(0);    opacity: 0;   }
  100%   { transform: translateX(0);    opacity: 0;   }
}

/* ---- text-magenta: グリッチでcyanと逆方向 ---- */
#text-magenta {
  transform: translateX(0);
  opacity: 1;
  animation: glitchMagenta 10s steps(1) infinite;
  transform-origin: 325px 573px;
}

@keyframes glitchMagenta {
  0%     { transform: translateX(0);    opacity: 0;    }
  /* グリッチ① */
  10%    { transform: translateX(0);    opacity: 0;    }
  10.4%  { transform: translateX(5px);  opacity: 0.8;  }
  10.8%  { transform: translateX(-2px); opacity: 0.5;  }
  11.2%  { transform: translateX(0);    opacity: 0;    }
  /* グリッチ② */
  35%    { transform: translateX(0);    opacity: 0;    }
  35.3%  { transform: translateX(4px);  opacity: 0.7;  }
  35.6%  { transform: translateX(-2px); opacity: 0.4;  }
  36%    { transform: translateX(0);    opacity: 0;    }
  /* グリッチ③（軽め） */
  60%    { transform: translateX(0);    opacity: 0;    }
  60.3%  { transform: translateX(3px);  opacity: 0.55; }
  60.6%  { transform: translateX(0);    opacity: 0;    }
  100%   { transform: translateX(0);    opacity: 0;    }
}

/* ---- text-white: グリッチ中はわずかにちらつく ---- */
#text-white {
  animation: whiteFlicker 10s steps(1) infinite;
}

@keyframes whiteFlicker {
  0%     { opacity: 1;    transform: translateX(0);    }
  /* グリッチ① */
  10%    { opacity: 1;    transform: translateX(0);    }
  10.4%  { opacity: 0.7;  transform: translateX(1px);  }
  10.8%  { opacity: 1;    transform: translateX(0);    }
  11.2%  { opacity: 1;    transform: translateX(0);    }
  /* グリッチ② */
  35%    { opacity: 1;    transform: translateX(0);    }
  35.3%  { opacity: 0.75; transform: translateX(-1px); }
  35.6%  { opacity: 1;    transform: translateX(0);    }
  36%    { opacity: 1;    transform: translateX(0);    }
  /* グリッチ③（軽め） */
  60%    { opacity: 1;    transform: translateX(0);    }
  60.3%  { opacity: 0.8;  transform: translateX(1px);  }
  60.6%  { opacity: 1;    transform: translateX(0);    }
  100%   { opacity: 1;    transform: translateX(0);    }
}

/* ---- ノイズオーバーレイ（Canvasで描画） ---- */
#noiseCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: screen;
}

/* ---- 強グリッチ: JSが .big-glitch クラスを付与したとき発火 ---- */
.big-glitch #text-cyan {
  animation: none;
  transform: translateX(-8px);
  opacity: 0.9;
}

.big-glitch #text-magenta {
  animation: none;
  transform: translateX(8px);
  opacity: 0.9;
}

.big-glitch #text-white {
  animation: none;
  opacity: 0.3;
}

.big-glitch #square {
  animation: bigSquareGlitch 0.25s steps(1) forwards;
}

@keyframes bigSquareGlitch {
  0%   { transform: translateX(0)    skewX(0deg);    opacity: 1;    }
  20%  { transform: translateX(-5px) skewX(-2deg);   opacity: 0.7;  }
  40%  { transform: translateX(4px)  skewX(1deg);    opacity: 0.9;  }
  60%  { transform: translateX(-3px) skewX(-1deg);   opacity: 0.6;  }
  80%  { transform: translateX(2px)  skewX(0.5deg);  opacity: 0.85; }
  100% { transform: translateX(0)    skewX(0deg);    opacity: 1;    }
}