/* 2026-04-21 00:00:00 */
/* animations.css — View Transition API・フェードイン・reveal・ローダー */

/* ============================================================
   Page Loader
   ============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-logo {
  display: block;
  animation: glitchLogo 2s steps(1) infinite;
  filter: drop-shadow(0 0 20px var(--blue-glow)) drop-shadow(0 0 60px var(--blue-glow));
}

.loader-logo img {
  height: clamp(2.5rem, 7vw, 4rem);
  width: auto;
}

@keyframes glitchLogo {
  0%,
  90%,
  100% {
    transform: none;
    filter: drop-shadow(0 0 20px var(--blue-glow)) drop-shadow(0 0 60px var(--blue-glow));
  }
  92% {
    transform: translate(-3px, 1px) skewX(-2deg);
    filter: drop-shadow(-3px 0 0 var(--purple)) drop-shadow(3px 0 0 var(--blue));
  }
  95% {
    transform: translate(2px, -1px) skewX(1deg);
    filter: drop-shadow(2px 0 0 var(--blue)) drop-shadow(-2px 0 0 var(--purple));
  }
  97% {
    transform: translate(-1px, 2px);
    filter: drop-shadow(0 0 20px var(--blue-glow));
  }
}

.loader-terminal {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--blue);
  opacity: 0.7;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--blue);
  animation:
    loaderType 1.5s steps(35) 0.5s forwards,
    cursorBlink 0.7s step-end infinite;
  width: 0;
  max-width: 100%;
}

@keyframes loaderType {
  to {
    width: 21em;
  }
}

@keyframes cursorBlink {
  50% {
    border-color: transparent;
  }
}

.loader-circuit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.loader-circuit svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: circuitFade 1.5s 0.3s forwards;
}

.loader-circuit svg path {
  stroke: var(--blue);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: circuitDraw 2s 0.3s forwards;
}

@keyframes circuitFade {
  to {
    opacity: 0.08;
  }
}

@keyframes circuitDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ============================================================
   Scroll Progress
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--purple));
  z-index: 10000;
  transition: width 0.08s linear;
}

/* ============================================================
   Reveal / IntersectionObserver
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s var(--ease-out);
}

.reveal.clip-in {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transform: none;
  transition:
    opacity 0.8s ease,
    clip-path 0.8s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal.clip-in.visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.stagger .reveal:nth-child(1) {
  transition-delay: 0s;
}

.stagger .reveal:nth-child(2) {
  transition-delay: 0.15s;
}

.stagger .reveal:nth-child(3) {
  transition-delay: 0.3s;
}

/* ============================================================
   Mouse Glow Follower
   ============================================================ */
.mouse-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 168, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition:
    left 0.15s ease,
    top 0.15s ease;
  display: none;
}

/* ============================================================
   Hero Animations
   ============================================================ */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollPulse {
  0%,
  100% {
    opacity: 0.4;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(8px);
  }
}

@keyframes gridPulse {
  0%,
  100% {
    opacity: 0.03;
  }
  50% {
    opacity: 0.06;
  }
}

/* ============================================================
   MPA View Transition API (Chrome 126+)
   ============================================================ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-fade-out 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-new(root) {
  animation: vt-fade-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes vt-fade-out {
  from {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
  to {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(-8px);
  }
}

@keyframes vt-fade-in {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

/* View Transition API フォールバック（JS側で .page-leaving を付与） */
.page-leaving {
  animation: vt-fade-out 0.35s ease forwards;
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  .reveal,
  .reveal.clip-in {
    transition: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  /* ticker-track は装飾的な横スクロールのため、reduced-motion でも継続 */

  /* #networkCanvas は速度抑制のみ。非表示にしない（iPhoneでは見えるのにPCで消える問題） */

  .loader-logo {
    animation: none;
  }
}

@media (max-width: 768px) {
  .mouse-glow {
    display: none !important;
  }
}