/*▼ローディング▼*/

.neon-loader-wrap{
  position: fixed;
  inset: 0;
  z-index: 999999;
  background:#000;
  display:grid;
  place-items:center;
  pointer-events:none;
  animation: loaderOut .6s ease-out 2.4s forwards;
}
@keyframes loaderOut{ to{ opacity:0; visibility:hidden; } }
.neon-loader-wrap.is-dead{ display:none !important; }

.neon-content{
  width:min(360px,78vw);
  padding:16px;
  display: grid;
  place-items: center;
}

.neon-logo{
  width:230px; height:auto; overflow:visible; display:block;
  opacity:0; animation: bootIn .5s linear forwards;
	
  /* ===== チューニング ===== */
  --lap: .6s;
  --cycle: .9s;
  --dash: 1650;
  --gap:  480;
  --w: 40;
  --chaseLife: 2.30s;
  --glowW: 80;
  --glowBlur: 200px;
  --glowAlpha: .6;
}
@keyframes bootIn{ to{ opacity:1; } }
.chasePath,
.glowPath{
  pathLength:1000;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray: var(--dash) var(--gap);
  animation: chaseMove var(--lap) linear infinite !important;
  will-change: stroke-dashoffset, opacity;
}
.chasePath{
  stroke-width: var(--w);
}
.glowPath{
  stroke-width: var(--glowW);
  filter: blur(var(--glowBlur));
  opacity: var(--glowAlpha);
	mix-blend-mode: screen; 
}
@keyframes chaseMove{
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -1900; }
}
.blue   .chasePath{ stroke: #ffffff; }
.purple .chasePath{ stroke: #ffffff; }
.blue   .glowPath{ stroke: rgba(120, 220, 255, 1); }
.purple .glowPath{ stroke: rgba(190, 140, 255, 1); }
.blue{
  filter: drop-shadow(0 0 8px rgba(100, 210, 255, 0.4))
          drop-shadow(0 0 20px rgba(80, 190, 255, 0.2));
}
.purple{
  filter: drop-shadow(0 0 8px rgba(190, 150, 255, 0.4))
          drop-shadow(0 0 20px rgba(160, 120, 255, 0.2));
}
.blue .chasePath{
  filter:
    drop-shadow(0 0 4px rgba(100, 235, 255, 1))
    drop-shadow(0 0 12px rgba(50, 200, 255, 0.8));
}
.purple .chasePath{
  filter:
    drop-shadow(0 0 4px rgba(210, 160, 255, 1))
    drop-shadow(0 0 12px rgba(180, 100, 255, 0.8));
}
.blue .glowPath{
  filter:
    blur(var(--glowBlur))
    drop-shadow(0 0 20px rgba(0, 180, 255, 0.6))
    drop-shadow(0 0 60px rgba(0, 100, 255, 0.4));
}
.purple .glowPath{
  filter:
    blur(var(--glowBlur))
    drop-shadow(0 0 20px rgba(180, 100, 255, 0.6))
    drop-shadow(0 0 60px rgba(120, 50, 255, 0.4));
}
.blue .chasePath{
  filter:
    drop-shadow(0 0 6px rgba(170,235,255,.35))
    drop-shadow(0 0 14px rgba(120,210,255,.18));
}
.purple .chasePath{
  filter:
    drop-shadow(0 0 6px rgba(210,175,255,.32))
    drop-shadow(0 0 14px rgba(190,150,255,.18));
}
@keyframes blueSmooth{
  0%    { opacity: 1; }
  52%   { opacity: 1; }
  62%   { opacity: .35; }
  78%   { opacity: .0; }
  100%  { opacity: 0; }
}
@keyframes purpleSmooth{
  0%    { opacity: 0; }
  52%   { opacity: 0; }
  62%   { opacity: .65; }
  76%   { opacity: 1; }
  100%  { opacity: 0; }
}
.chaseBlue{
  animation: blueSmooth var(--chaseLife) ease-out 1 forwards;
}
.chasePurple{
  animation: purpleSmooth var(--chaseLife) ease-out 1 forwards;
}
.logoFinal{
  opacity:0;
  transform: translateY(4px);
  animation: logoIn .6s ease-out 1 forwards;
  animation-delay: 1.5s; 
}
.logoText{
  opacity: 0;
  transform: translateY(6px);
  animation: logoIn .8s ease-out 1 forwards;
  animation-delay: 1.7s; 
}
@keyframes logoIn{ to{ opacity:1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .neon-loader-wrap{ animation:none !important; }
  .neon-logo{ opacity:1 !important; animation:none !important; }
  .chaseBlue,.chasePurple{ animation:none !important; opacity:0 !important; }
  .chasePath,.glowPath{ animation:none !important; }
  .logoFinal{ opacity:1 !important; animation:none !important; transform:none !important; }
	 .logoText{ opacity:1 !important; animation:none !important; transform:none !important; }
}
@media screen and (max-width: 959px) {
    .neon-logo{width: 160px;}
}