@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap');
@import "tailwindcss";

@font-face {
  font-family: "Hiragino Mincho ProN";
  src: url("/hiragino-mincho-pron-w3.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}

@theme {
  --color-bg-primary: #02040a;
  --color-bg-panel: rgba(9, 13, 20, 0.92);
  --color-bg-masthead: #08162e;
  --color-bg-nav: #0c1729;
  --color-bg-input: #0f1c2f;
  --color-bg-button: #0d1b2d;
  --color-bg-terminal: #0f3c78;

  --color-blue-primary: #0f3c78;
  --color-blue-accent: #3f6fb3;
  --color-blue-glow: #75aafc;

  --color-text-primary: #dbe7ff;
  --color-text-secondary: #9bc3ff;
  --color-text-muted: #e4edff;

  --color-border-primary: #2f476d;
  --color-border-accent: #3f6fb3;

  --font-body: "Yu Mincho", "Hiragino Mincho ProN", "HiraMinProN-W3", "MS PMincho", "MS Mincho", "Noto Serif JP", serif;
  --font-mono: "Courier New", "Osaka-mono", Consolas, monospace;
  --font-logo: "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho", "Noto Serif JP", serif;
}

html {
  background-color: var(--color-bg-primary);
}

body {
  margin: 0;
  padding: 0;
  color: var(--color-text-primary);
  min-height: 100vh;
  background-color: var(--color-bg-primary);
  background-image: linear-gradient(
      rgba(8, 22, 46, 0.65),
      rgba(8, 22, 46, 0.65)
    ),
    url("/02cdkj.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  font-family: var(--font-body);
  line-height: 1.7;
  letter-spacing: 0.03em;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

::selection {
  background: rgba(117, 170, 252, 0.35);
}

/* Grid overlay */
.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.grid-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      90deg,
      rgba(117, 170, 252, 0.22) 1px,
      rgba(255, 255, 255, 0.08) 1px
    ),
    linear-gradient(
      0deg,
      rgba(117, 170, 252, 0.22) 1px,
      rgba(255, 255, 255, 0.08) 1px
    );
  background-size: 28px 28px;
  mix-blend-mode: screen;
  opacity: 0.8;
}

.grid-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 17, 40, 0.8) 0%,
    rgba(7, 15, 29, 0.5) 45%,
    rgba(3, 17, 40, 0.8) 100%
  );
}

/* Logo animations */
@keyframes sweep-out {
  0% {
    opacity: 0.45;
    transform: scale(0.55);
  }
  40% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes ring-scan {
  0% {
    stroke: #0f3c78;
    opacity: 0.9;
    stroke-dasharray: 400 0;
    stroke-linecap: butt;
  }
  25% {
    stroke: #6fa0ff;
    opacity: 1;
    stroke-dasharray: 18 14;
    stroke-linecap: round;
  }
  55% {
    stroke: #1e4c94;
    opacity: 0.88;
    stroke-dasharray: 10 18;
  }
  70% {
    stroke: #0f3c78;
    opacity: 0.9;
    stroke-dasharray: 6 22;
  }
  90% {
    stroke: #aac6ff;
    opacity: 0.82;
    stroke-dasharray: 4 26;
  }
  100% {
    stroke: #0f3c78;
    opacity: 0.9;
    stroke-dasharray: 400 0;
    stroke-linecap: butt;
  }
}

@keyframes idle-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes glow-pulse {
  0% {
    opacity: 0.16;
    transform: scale(1.02);
  }
  50% {
    opacity: 0.28;
    transform: scale(1.12);
  }
  100% {
    opacity: 0.16;
    transform: scale(1.02);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Logo shell */
.logo-shell {
  border-radius: 50%;
  border: 1px solid rgba(63, 111, 179, 0.6);
  background: #070f1d;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

.logo-shell::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(15, 60, 120, 0.35);
  box-shadow: 0 0 0 rgba(15, 60, 120, 0.1);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.45s ease, transform 0.6s ease;
}

.logo-shell::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(15, 60, 120, 0.08) 0deg 6deg,
    rgba(117, 170, 252, 0.1) 6deg 12deg
  );
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.25) 40%, transparent 80%);
  opacity: 0.7;
}

.logo-shell.listening .ring-outer,
.logo-shell:not(.no-hover-animation):hover .ring-outer {
  animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
  animation-delay: 0.7s;
}

.logo-shell.listening .ring-middle,
.logo-shell:not(.no-hover-animation):hover .ring-middle {
  animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
  animation-delay: 0.35s;
}

.logo-shell.listening .ring-inner,
.logo-shell:not(.no-hover-animation):hover .ring-inner {
  animation: ring-scan 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
  animation-delay: 0s;
}

.logo-shell.listening::before,
.logo-shell:not(.no-hover-animation):hover::before {
  opacity: 1;
  transform: scale(1.08);
  animation: glow-pulse 1.6s ease-in-out infinite;
}

.logo-shell.listening .scan-sweep,
.logo-shell:not(.no-hover-animation):hover .scan-sweep {
  opacity: 0.7;
  animation: sweep-out 2.4s ease-out infinite;
}

.logo-shell.listening .logo-svg,
.logo-shell:not(.no-hover-animation):hover .logo-svg {
  filter: drop-shadow(0 0 10px rgba(15, 60, 120, 0.35));
}

.scan-sweep {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(117, 170, 252, 0.25) 0%,
    rgba(117, 170, 252, 0.12) 38%,
    rgba(15, 60, 120, 0.06) 64%,
    transparent 85%
  );
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(0.8px);
  z-index: 1;
  transform: scale(0.65);
}

.scan-sweep.sweep-2 {
  animation-delay: 1.2s;
}

.logo-svg {
  z-index: 2;
  transition: filter 0.4s ease;
}

.logo-svg .ring {
  fill: none;
  stroke: #0f3c78;
  stroke-dasharray: 400 0;
  stroke-linecap: butt;
  transition: stroke 0.35s ease, opacity 0.35s ease;
}

.logo-svg .core {
  fill: #0f3c78;
}

.halo {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(15, 60, 120, 0.5);
  animation: idle-rotate 28s linear infinite;
}

.logo-shell.listening + .halo,
.logo-shell:not(.no-hover-animation):hover + .halo {
  animation: pulse 1.5s ease-in-out infinite;
}

/* Ticker */
.ticker-content {
  display: inline-block;
  padding-left: 2px;
  animation: ticker 22s linear infinite;
  white-space: nowrap;
}

/* Rewrite link scramble effect */
.rewrite-link {
  position: relative;
  display: inline-block;
  padding: 4px 8px;
  border: 1px dashed rgba(117, 170, 252, 0.5);
  background: #0f1c2f;
  text-decoration: none;
  color: #eef5ff;
  font-family: var(--font-mono);
  overflow: hidden;
  transition: border-color 0.2s;
}

.rewrite-link:hover {
  border-color: rgba(117, 170, 252, 0.8);
}

.rewrite-link[aria-disabled="true"] {
  color: #9aa9c6;
  border-color: rgba(117, 170, 252, 0.25);
  cursor: not-allowed;
  pointer-events: none;
  background: #0b1423;
}

/* Panel styles */
.panel {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-primary);
  position: relative;
}

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(89, 122, 170, 0.25);
  pointer-events: none;
}

/* Double border top decoration */
.border-top-double {
  border-top: 4px double #050d1f;
}

/* Stripe decoration for frame top */
.stripe-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    #0f3c78 0px,
    #0f3c78 40px,
    #3f6fb3 40px,
    #3f6fb3 44px
  );
  opacity: 0.7;
}