/*
 * Kouider — Red & Black Glassmorphism
 * Aesthetic layer only. Layout handled by theme.json.
 */


/* --- Hero ASCII Art --- */
.k-hero-title-ascii { margin: 0 0 1.25rem; }
.k-ascii { position: relative; perspective: 1000px; width: fit-content; }
.k-ascii-tilt { display: block; transform-style: preserve-3d; will-change: transform; }
.k-ascii-scene { position: relative; display: block; transform-style: preserve-3d; animation: k-ascii-float 6s ease-in-out infinite; }
.k-ascii-layer {
  white-space: pre;
  font-family: ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, 'Courier New', monospace;
  font-size: clamp(9px, 2.2vw, 22px);
  line-height: 1.06;
  letter-spacing: 0;
  font-weight: 700;
}
.k-ascii-row { display: block; }
.k-ascii-char { display: inline-block; animation: k-char-wave 2.6s ease-in-out infinite; will-change: transform, opacity; }
.k-ascii-depth { position: absolute; inset: 0; transform: translateZ(-30px) translate(5px, 7px); color: rgba(255,38,56,.20); filter: blur(1.4px); }
.k-ascii-front { position: relative; display: block; transform: translateZ(18px); filter: drop-shadow(0 0 12px rgba(255,38,56,.38)) drop-shadow(0 0 32px rgba(255,38,56,.16)); }
.k-ascii-shine {
  position: absolute; inset: -4px; transform: translateZ(34px);
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.30) 50%, transparent 58%);
  background-size: 260% 260%;
  animation: k-ascii-shine 4.2s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
.k-ascii-plain { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--wp--preset--color--k-red-bright); line-height: 1.15; }
.k-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes k-char-wave {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(-4px); opacity: 1; }
}
@keyframes k-ascii-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes k-ascii-shine {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .k-ascii-scene, .k-ascii-char, .k-ascii-shine { animation: none !important; }
  .k-ascii-char { opacity: 1 !important; }
}