@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

/*
 * DRI landing overrides.
 * This file only repaints the Division des Renseignements Interieurs hub.
 * It relies on index.css for layout — body.home-landing rules stay in charge;
 * body.dri-landing swaps the gold parchment palette for a classified burgundy.
 */

:root {
  --dri-parchment-top: #5a1a0a;
  --dri-parchment-mid: #0a2008;
  --dri-parchment-bottom: #080f08;
  --dri-panel: rgba(40, 10, 8, 0.82);
  --dri-panel-soft: rgba(12,42,14,0.62);
  --dri-card: rgba(6,24,8,0.78);
  --dri-card-hover: rgba(12,40,14,0.92);
  --dri-ink-light: #c0e890;
  --dri-ink-soft: rgba(180,230,170,0.88);
  --dri-ink-faint: rgba(160,220,150,0.72);
  --dri-border-gold: rgba(46,125,50,0.65);
  --dri-border-gold-bright: rgba(100,210,80,0.95);
}

/* ------ Body ------ */
body.dri-landing {
  background: #120604;
  background-image:
    radial-gradient(ellipse at 20% 20%, #0a1f08 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, #0a0302 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232e7d32' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

body.dri-landing::before {
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(67,160,71,0.3), transparent),
    radial-gradient(1px 1px at 45% 65%, rgba(139, 26, 26, 0.35), transparent),
    radial-gradient(1px 1px at 75% 15%, rgba(67,160,71,0.25), transparent),
    radial-gradient(1px 1px at 85% 75%, rgba(139, 26, 26, 0.28), transparent),
    radial-gradient(1px 1px at 25% 85%, rgba(67,160,71,0.2), transparent),
    radial-gradient(1.5px 1.5px at 55% 35%, rgba(100,210,80,0.4), transparent),
    radial-gradient(1px 1px at 35% 55%, rgba(139, 26, 26, 0.22), transparent),
    radial-gradient(1px 1px at 65% 45%, rgba(67,160,71,0.2), transparent);
}

/* ------ Main frame ------ */
body.dri-landing .landing-frame,
body.dri-landing.home-landing .landing-frame {
  background: var(--dri-parchment-mid) !important;
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(160,220,150,0.1) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(0, 0, 0, 0.45) 0%, transparent 60%),
    linear-gradient(160deg, var(--dri-parchment-top) 0%, var(--dri-parchment-mid) 45%, var(--dri-parchment-bottom) 100%) !important;
  border-color: var(--gold) !important;
  box-shadow:
    0 0 0 2px rgba(12, 6, 3, 0.95),
    0 0 0 8px rgba(46,125,50,0.96),
    0 0 0 10px rgba(12, 6, 3, 0.94),
    0 26px 58px rgba(0, 0, 0, 0.6),
    inset 0 0 52px rgba(139, 26, 26, 0.3) !important;
}

body.dri-landing .landing-frame::before,
body.dri-landing .landing-frame::after,
body.dri-landing .corner-tr,
body.dri-landing .corner-bl {
  color: var(--gold-light);
  text-shadow: 0 0 8px rgba(100,210,80,0.6), 0 0 14px rgba(139, 26, 26, 0.4);
}

/* ------ Watermark ------ */
body.dri-landing .watermark {
  color: rgba(160,220,150,0.07);
  text-shadow: 0 0 30px rgba(139, 26, 26, 0.3);
}

/* ------ Title zone ------ */
body.dri-landing h1 {
  color: var(--dri-ink-light) !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55), 0 0 14px rgba(139, 26, 26, 0.25);
}

body.dri-landing .subtitle {
  color: var(--dri-ink-faint) !important;
  opacity: 0.92;
}

/* ------ Divider & kanjis ------ */
body.dri-landing .divider {
  background: linear-gradient(90deg, transparent, var(--gold), #8b1a1a, var(--gold), transparent);
}

body.dri-landing .kanji-row {
  color: var(--gold-light);
  opacity: 0.55;
}

/* ------ Hub sections (panels) ------ */
body.dri-landing .hub-section,
body.dri-landing.home-landing .hub-section {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(160,220,150,0.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(12,42,14,0.72), rgba(26, 6, 4, 0.78)) !important;
  border: 1px solid rgba(46,125,50,0.55) !important;
  box-shadow:
    inset 0 0 22px rgba(139, 26, 26, 0.2),
    0 10px 26px rgba(0, 0, 0, 0.35) !important;
}

body.dri-landing .hub-section::before {
  /* subtle top sheen */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 220, 150, 0.06), transparent 35%);
  pointer-events: none;
}

body.dri-landing .hub-section { position: relative; }

body.dri-landing .hub-heading {
  border-bottom-color: rgba(46,125,50,0.4) !important;
}

body.dri-landing .hub-kicker {
  color: var(--dri-ink-faint) !important;
}

body.dri-landing .hub-heading h2 {
  color: var(--dri-ink-light) !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

body.dri-landing .hub-heading p {
  color: rgba(180,230,170,0.75) !important;
}

/* ------ Nav overview (if ever shown) ------ */
body.dri-landing .nav-overview {
  background:
    radial-gradient(circle at right top, rgba(100,210,80,0.18), transparent 34%),
    linear-gradient(135deg, rgba(12,42,14,0.78), rgba(26, 6, 4, 0.82));
  border-color: rgba(46,125,50,0.55);
  box-shadow: inset 0 0 22px rgba(139, 26, 26, 0.2);
}

body.dri-landing .nav-overview-kicker { color: var(--dri-ink-faint); }
body.dri-landing .nav-overview-copy { color: rgba(180,230,170,0.85); }
body.dri-landing .nav-overview-ribbon span {
  background: rgba(26, 6, 4, 0.6);
  border-color: rgba(46,125,50,0.45);
  color: var(--dri-ink-light);
}

/* ------ Nav cards ------ */
body.dri-landing .nav-card,
body.dri-landing .nav-card--dri,
body.dri-landing.home-landing .nav-card,
body.dri-landing.home-landing .nav-card--feature,
body.dri-landing.home-landing .nav-shell.public-only .nav-card {
  --card-accent: rgba(46,125,50,0.65);
  background:
    radial-gradient(circle at top right, rgba(139, 26, 26, 0.24), rgba(6,24,8,0.82) 34%, rgba(14, 4, 2, 0.94) 100%) !important;
  border: 1px solid var(--card-accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(100,210,80,0.18),
    inset 0 -10px 24px rgba(139, 26, 26, 0.14),
    0 8px 20px rgba(0, 0, 0, 0.45) !important;
}

body.dri-landing .nav-card::before {
  background:
    radial-gradient(circle at top right, rgba(100,210,80,0.18), transparent 30%),
    linear-gradient(135deg, rgba(139, 26, 26, 0.12), transparent 55%);
  opacity: 0.85;
}

body.dri-landing .nav-card::after {
  background: linear-gradient(90deg, transparent, rgba(46,125,50,0.35), transparent);
}

body.dri-landing .nav-card:hover {
  transform: translateY(-4px);
  border-color: var(--dri-border-gold-bright) !important;
  background:
    radial-gradient(circle at top right, rgba(100,210,80,0.22), rgba(12,40,14,0.92) 34%, rgba(20, 5, 3, 0.96) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(100,210,80,0.3),
    inset 0 -10px 26px rgba(139, 26, 26, 0.25),
    0 16px 32px rgba(0, 0, 0, 0.55),
    0 0 22px rgba(100,210,80,0.18) !important;
}

body.dri-landing .nav-card-title {
  color: var(--dri-ink-light) !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

body.dri-landing .nav-card-desc {
  color: rgba(180,230,170,0.82) !important;
}

body.dri-landing .nav-card-icon {
  filter: drop-shadow(0 4px 10px rgba(139, 26, 26, 0.45));
}

/* ------ Stamp + footer ------ */
body.dri-landing .stamp {
  color: #f8c6a6;
  border-color: #f8c6a6;
  background: rgba(139, 26, 26, 0.35);
  box-shadow: inset 0 0 12px rgba(255, 200, 160, 0.12);
  text-shadow: 0 0 6px rgba(255, 200, 160, 0.35);
  opacity: 0.85;
}

body.dri-landing .footer-text {
  color: rgba(180,230,170,0.65);
}

/* ------ DRI logo pulse keeps gold halo but tinted red ------ */
body.dri-landing .logo-svg {
  animation: dri-logo-pulse 4s ease-in-out infinite;
}

@keyframes dri-logo-pulse {
  0%, 100% { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55)); }
  50% { filter: drop-shadow(0 4px 22px rgba(139, 26, 26, 0.6)); }
}

/* ------ User-bar & presence chrome (dark already, just tint) ------ */
body.dri-landing .user-badge,
body.dri-landing .btn-user-action {
  border-color: var(--dri-border-gold);
}

body.dri-landing .btn-user-back {
  color: var(--dri-ink-light);
  background: rgba(12,42,14,0.88);
  border: 1px solid var(--dri-border-gold);
}

body.dri-landing .btn-user-back:hover {
  background: rgba(90, 26, 10, 0.95);
}