/* ====================================================================
 * SHOKU (職) - Japanese Industrial Aesthetic & Component Styles
 * Tanren-Go Platform (tanren-go.net)
 * ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root {
  --primary-navy: #0b1329;
  --secondary-navy: #132247;
  --hazard-amber: #f59e0b;
  --hazard-orange: #ea580c;
  --torii-red: #dc2626;
  --success-emerald: #10b981;
}

body {
  font-family: 'Plus Jakarta Sans', 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #0d1527;
  color: #f1f5f9;
}

/* Japanese Industrial Accent Strip (Hazard Stripes) */
.industrial-stripe {
  background: repeating-linear-gradient(
    -45deg,
    #f59e0b,
    #f59e0b 12px,
    #1e293b 12px,
    #1e293b 24px
  );
}

.industrial-stripe-red {
  background: repeating-linear-gradient(
    -45deg,
    #ef4444,
    #ef4444 12px,
    #0f172a 12px,
    #0f172a 24px
  );
}

/* 3D Flashcard Flip Effect */
.perspective-1000 {
  perspective: 1000px;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.flashcard-inner.flipped {
  transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
}

.flashcard-back {
  transform: rotateY(180deg);
}

/* Tadashii & Ayamari Custom Button Highlights */
.btn-tadashii {
  transition: all 0.2s ease-in-out;
}
.btn-tadashii:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
}
.btn-tadashii.active {
  background-color: #059669;
  border-color: #34d399;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3);
}

.btn-ayamari {
  transition: all 0.2s ease-in-out;
}
.btn-ayamari:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.4);
}
.btn-ayamari.active {
  background-color: #dc2626;
  border-color: #f87171;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.3);
}

/* Custom Scrollbar for Matrices & Lists */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Subtle glow for badges */
.glow-amber {
  box-shadow: 0 0 15px -3px rgba(245, 158, 11, 0.3);
}
.glow-emerald {
  box-shadow: 0 0 15px -3px rgba(16, 185, 129, 0.3);
}

/* Audio Waveform Animation */
@keyframes audioWave {
  0%, 100% { height: 6px; }
  50% { height: 22px; }
}

.wave-bar:nth-child(1) { animation: audioWave 1s infinite 0.1s; }
.wave-bar:nth-child(2) { animation: audioWave 1s infinite 0.3s; }
.wave-bar:nth-child(3) { animation: audioWave 1s infinite 0.2s; }
.wave-bar:nth-child(4) { animation: audioWave 1s infinite 0.4s; }