/* ════════════════════════════════════════════════════════════
   NEN CODEX · PRINCIPLES ENHANCEMENT
   New visual treatment for Chapter 1 — pictograph SVG figures
   inspired by classic nen-system explainer diagrams.
   ════════════════════════════════════════════════════════════ */

/* Bigger, more cinematic principle cards */
.princ-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 22px !important;
}

.princ-card {
  padding: 0 !important;
  overflow: visible !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, transparent 60%),
    var(--surface) !important;
}

/* Hide the old corner kanji watermark — replaced by pictograph */
.princ-card__kanji { display: none !important; }

/* ─── Pictograph slot ──────────────────────────────────────── */
.princ-pict {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255, 255, 255, 0.05), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,0.012) 23px 24px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
/* Corner brackets — use four absolute spans drawn from CSS */
.princ-pict__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  opacity: 0.55;
}
.princ-pict__corner--tl { top: 10px; left: 10px;
  border-top: 1px solid var(--card-accent); border-left: 1px solid var(--card-accent); }
.princ-pict__corner--tr { top: 10px; right: 10px;
  border-top: 1px solid var(--card-accent); border-right: 1px solid var(--card-accent); }
.princ-pict__corner--bl { bottom: 10px; left: 10px;
  border-bottom: 1px solid var(--card-accent); border-left: 1px solid var(--card-accent); }
.princ-pict__corner--br { bottom: 10px; right: 10px;
  border-bottom: 1px solid var(--card-accent); border-right: 1px solid var(--card-accent); }

.princ-pict__kanji-bg {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 180px;
  font-weight: 900;
  color: var(--card-accent);
  opacity: 0.05;
  letter-spacing: 0;
  pointer-events: none;
  line-height: 1;
  user-select: none;
  z-index: 1;
}
.princ-pict-svg {
  position: relative;
  z-index: 2;
  width: 160px;
  height: 180px;
  display: block;
  filter: drop-shadow(0 6px 24px rgba(255, 255, 255, 0.16));
}
.princ-pict__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--card-accent);
  letter-spacing: 2px;
  font-weight: 700;
  z-index: 3;
}
.princ-pict__index {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  font-weight: 900;
  color: var(--card-accent);
  opacity: 0.5;
  z-index: 3;
  line-height: 1;
}

/* Body of card */
.princ-card__inner {
  padding: 24px 24px 22px;
}
.princ-card__badge { margin-top: 0 !important; }
.princ-card__name {
  font-size: 30px !important;
  margin-bottom: 2px !important;
}

/* Subtle hover animation on the SVG figure */
.princ-card:hover .princ-pict__kanji-bg { opacity: 0.10; transition: opacity 0.6s; }
.princ-card:hover .princ-pict-svg { transform: scale(1.06); transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.princ-card .princ-pict-svg { transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }

/* Aura animations inside the SVG */
.princ-aura-pulse { animation: auraPulse 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.princ-aura-spin  { animation: auraSpin  18s linear infinite; transform-origin: center; transform-box: fill-box; }
.princ-aura-fade  { animation: auraFade  2.6s ease-in-out infinite alternate; }
.princ-aura-drift { animation: auraDrift 5s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
@keyframes auraPulse { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.85;transform:scale(1.08)} }
@keyframes auraSpin  { to { transform: rotate(360deg); } }
@keyframes auraFade  { from { opacity: .3 } to { opacity: .8 } }
@keyframes auraDrift { 0%{transform:translate(0,0)} 100%{transform:translate(3px,-3px)} }

/* ─── Extended details ─────────────────────────────────────── */
.princ-detail-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
  line-height: 1.85;
}
.princ-detail-row:last-child { border-bottom: 0; }
.princ-detail-row__icon {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--card-accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}
.princ-detail-row__body strong { color: var(--card-accent); font-weight: 700; }
.princ-detail-row__body { color: var(--text-2); }
.princ-detail-row__body em { color: var(--text); font-style: normal; font-weight: 600; }

.princ-quote {
  margin: 14px 0 6px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.055);
  border-right: 3px solid var(--card-accent);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 2;
  font-style: italic;
}
.princ-quote::before {
  content: "❝";
  color: var(--card-accent);
  font-size: 22px;
  font-style: normal;
  margin-left: 4px;
  vertical-align: -4px;
}

/* Card toggle arrow */
.princ-card__toggle {
  margin: 14px 0 4px !important;
  border-top: 1px solid var(--border);
  padding-top: 12px !important;
  color: var(--card-accent) !important;
  font-weight: 600;
}
.princ-card.open .princ-card__toggle::before { content: "▲"; margin-left: 6px; }
.princ-card:not(.open) .princ-card__toggle::before { content: "▼"; margin-left: 6px; }
.princ-card.open .princ-card__toggle { content: ""; }

/* Sec heading lift */
.sec__heading {
  position: relative;
  margin-top: 36px !important;
}
.sec__heading::before {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan), transparent);
  border-radius: 100px;
}
.sec__heading { padding-right: 14px !important; }

/* Comparison band between the two heading groups */
.princ-divider {
  margin: 48px auto 24px;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
}
.princ-divider::before, .princ-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-2));
}
.princ-divider::after { background: linear-gradient(-90deg, transparent, var(--border-2)); }