/* ==========================================================================
   MINARIS DEGRADE BLANC v4 — LITERAL EXTRACTION FROM loop.minaris.ai
   (Ambient Radial Orbs + Tech-Noir Architectural Mesh + Lapidated Glass
    + Specular Highlights + Multi-Layer 3D Shadows + 5-Module Chromatic Cycle)
   ========================================================================== */

:root {
  --bg-blanc-start: #FFFFFF;
  --bg-blanc-mid: #F4F7FB;
  --bg-blanc-end: #E6ECF5;
  --text-primary: #0F172A;
  --text-secondary: #334155;
  --text-muted: #475569;

  /* Loop Canonical Accent Tokens */
  --metallic-gold: #D4AF37;
  --gold-soft: #F9E076;
  --electric-blue: #00D4FF;
  --minaris-teal: #00FFCC;

  /* 5-Module Sequential Palette */
  --mod-1-blue: #2563EB;    /* Módulo 01: Lilith -> Presença Habitada */
  --mod-2-lilac: #7C3AED;   /* Módulo 02: Faraó -> Impulso do Hinê-ni */
  --mod-3-red: #DC2626;     /* Módulo 03: Juízes de Sodoma -> Justiça & Coragem */
  --mod-4-green: #059669;   /* Módulo 04: Roboão & Jeroboão -> Coesão Sistêmica */
  --mod-5-gray: #475569;    /* Módulo 05: A Serpente -> Visão Alquímica do Ser */
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

html,
body {
  background:
    radial-gradient(52rem 32rem at 14% 6%, rgba(0, 212, 255, 0.16), transparent 58%),
    radial-gradient(48rem 30rem at 86% 10%, rgba(124, 58, 237, 0.14), transparent 56%),
    radial-gradient(54rem 34rem at 50% 48%, rgba(37, 99, 235, 0.10), transparent 64%),
    radial-gradient(48rem 28rem at 18% 86%, rgba(5, 150, 105, 0.11), transparent 60%),
    radial-gradient(46rem 28rem at 84% 90%, rgba(212, 175, 55, 0.12), transparent 60%),
    linear-gradient(135deg, var(--bg-blanc-start) 0%, var(--bg-blanc-mid) 46%, var(--bg-blanc-end) 100%) !important;
  background-attachment: fixed;
  color: var(--text-primary) !important;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.degrade-blanc-body {
  position: relative;
  overflow-x: hidden;
}

/* Typography extracted from loop.minaris.ai (app/globals.css lines 77-88) */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.024em;
  text-wrap: balance;
  color: #0F172A;
}

.font-mono,
.minaris-kicker {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.minaris-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

/* ==========================================================================
   1. CAMADAS DE FUNDO (loop-screen::before & ::after + page-band cycling)
   ========================================================================== */
.loop-degrade-canvas {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

/* Malha Geométrica / Grid Tech-Noir com feixes diagonais (loop.minaris.ai lines 146-159) */
.loop-degrade-canvas::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(0, 212, 255, 0.11) 28.2%, transparent 28.8% 100%),
    linear-gradient(63deg, transparent 0 44%, rgba(124, 58, 237, 0.09) 44.2%, transparent 44.8% 100%),
    linear-gradient(148deg, transparent 0 62%, rgba(212, 175, 55, 0.09) 62.2%, transparent 62.8% 100%),
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.045) 0, rgba(15, 23, 42, 0.045) 1px, transparent 1px, transparent 86px),
    repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.036) 0, rgba(15, 23, 42, 0.036) 1px, transparent 1px, transparent 68px);
  mask-image: radial-gradient(ellipse 92% 86% at 50% 45%, black 38%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 92% 86% at 50% 45%, black 38%, transparent 90%);
  opacity: 0.85;
  animation: meshDrift 17s ease-in-out infinite;
}

/* Orbes de Luz Ambiental Difusa + Nodes de Circuito (loop.minaris.ai lines 161-173) */
.loop-degrade-canvas::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36rem 24rem at 48% 6%, rgba(0, 212, 255, 0.14), transparent 62%),
    radial-gradient(32rem 22rem at 16% 68%, rgba(37, 99, 235, 0.11), transparent 60%),
    radial-gradient(32rem 22rem at 85% 74%, rgba(124, 58, 237, 0.11), transparent 60%),
    radial-gradient(circle at 43px 34px, rgba(37, 99, 235, 0.09) 1.25px, transparent 1.6px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 86px 68px;
  opacity: 0.78;
}

@keyframes meshDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translate3d(1.1%, -0.8%, 0) scale(1.025);
    opacity: 0.94;
  }
}

/* Bandas atmosféricas de seção (loop.minaris.ai lines 121-144 adaptadas ao Degrade Blanc) */
.page-band {
  position: relative;
  isolation: isolate;
}

.page-band-blue {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.065) 0%, rgba(0, 212, 255, 0.045) 48%, rgba(255, 255, 255, 0.45) 100%);
  border-top: 1px solid rgba(37, 99, 235, 0.10);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.page-band-lilac {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.065) 0%, rgba(37, 99, 235, 0.04) 50%, rgba(255, 255, 255, 0.45) 100%);
  border-top: 1px solid rgba(124, 58, 237, 0.12);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.page-band-emerald {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.065) 0%, rgba(0, 212, 255, 0.04) 50%, rgba(255, 255, 255, 0.45) 100%);
  border-top: 1px solid rgba(5, 150, 105, 0.12);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.page-band-crimson {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.055) 0%, rgba(212, 175, 55, 0.05) 50%, rgba(255, 255, 255, 0.45) 100%);
  border-top: 1px solid rgba(220, 38, 38, 0.11);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

/* ==========================================================================
   2. HEADER COMPACTO & LOGOTIPO MINARIS 42PX (SEM BORDAS)
   ========================================================================== */
header,
.db-header {
  min-height: 68px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 247, 251, 0.80)) padding-box,
    linear-gradient(90deg, rgba(37, 99, 235, 0.22), rgba(0, 212, 255, 0.28), rgba(124, 58, 237, 0.22)) border-box !important;
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  border-bottom: 1px solid rgba(37, 99, 235, 0.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 12px 34px -12px rgba(15, 23, 42, 0.10),
    0 0 24px rgba(0, 212, 255, 0.06);
}

header img,
.brand-logo,
.minaris-logo {
  height: 42px !important;
  max-height: 42px !important;
  width: auto !important;
  object-fit: contain !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.18));
}

/* Hero Title & Multi-Stop Metallic/Cobalt Gradient */
h1,
.hero-title {
  color: #0F172A !important;
  letter-spacing: -0.028em;
}

h1 span.hero-highlight,
.hero-highlight {
  background: linear-gradient(110deg, #0F172A 0%, #1D4ED8 28%, #2563EB 52%, #7C3AED 78%, #0284C7 100%) !important;
  background-size: 160% 160%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #2563EB !important;
  display: inline-block;
  filter: drop-shadow(0 6px 22px rgba(37, 99, 235, 0.16));
}

/* ==========================================================================
   3. CARDS & GLASSMORPHISM LAPIDADO (loop.minaris.ai lines 175-268, 459-485)
   ========================================================================== */
.panel-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.10), transparent 48%),
    radial-gradient(circle at 85% 100%, rgba(124, 58, 237, 0.08), transparent 46%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.86) 0%, rgba(248, 250, 252, 0.78) 52%, rgba(241, 245, 249, 0.84) 100%) padding-box,
    linear-gradient(135deg, rgba(37, 99, 235, 0.42), rgba(0, 212, 255, 0.34) 36%, rgba(212, 175, 55, 0.38) 68%, rgba(124, 58, 237, 0.38)) border-box;
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(0, 212, 255, 0.14),
    0 26px 68px -18px rgba(15, 23, 42, 0.15),
    0 10px 28px -10px rgba(37, 99, 235, 0.10),
    0 0 36px rgba(0, 212, 255, 0.08);
}

/* Brilho diagonal interno de loop.minaris.ai (.panel-shell::before line 563) */
.panel-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.55), transparent 22%, transparent 74%, rgba(0, 212, 255, 0.07));
}

.panel-shell > * {
  position: relative;
  z-index: 1;
}

.sanctuary-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    radial-gradient(ellipse 64% 38% at 50% -4%, rgba(212, 175, 55, 0.15), rgba(0, 212, 255, 0.08) 46%, transparent 72%),
    radial-gradient(circle at 84% 104%, rgba(37, 99, 235, 0.10), transparent 44%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 249, 253, 0.80) 50%, rgba(238, 244, 251, 0.86) 100%) padding-box,
    linear-gradient(
      115deg,
      rgba(212, 175, 55, 0.55) 0%,
      rgba(37, 99, 235, 0.38) 32%,
      rgba(0, 212, 255, 0.42) 58%,
      rgba(124, 58, 237, 0.42) 82%,
      rgba(212, 175, 55, 0.48) 100%
    ) border-box;
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(0, 212, 255, 0.16),
    0 30px 76px -18px rgba(15, 23, 42, 0.16),
    0 0 42px rgba(212, 175, 55, 0.10),
    0 0 80px rgba(0, 212, 255, 0.08);
  transition: box-shadow 380ms ease, transform 380ms ease;
}

.altar-card,
.db-glass-card {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.70), transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.84), rgba(244, 247, 251, 0.76)) padding-box,
    linear-gradient(135deg, rgba(37, 99, 235, 0.36), rgba(148, 163, 184, 0.34) 38%, rgba(0, 212, 255, 0.32) 72%, rgba(212, 175, 55, 0.36)) border-box !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 18px 46px -14px rgba(15, 23, 42, 0.12),
    0 6px 18px -6px rgba(37, 99, 235, 0.08),
    0 0 24px rgba(0, 212, 255, 0.06);
  transition:
    transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 380ms ease,
    filter 380ms ease;
  color: var(--text-primary);
}

.altar-card:hover {
  transform: translateY(-5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 26px 58px -12px rgba(15, 23, 42, 0.16),
    0 0 36px rgba(37, 99, 235, 0.14),
    0 0 60px rgba(0, 212, 255, 0.10);
}

/* Barra de luz especular no topo do altar (loop.minaris.ai lines 440-453) */
.mantle-altar-topline {
  position: relative;
}

.mantle-altar-topline::before {
  content: "";
  position: absolute;
  inset: 0 20px auto 20px;
  height: 2px;
  z-index: 5;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.85), rgba(0, 212, 255, 0.75), rgba(37, 99, 235, 0.80), transparent);
  pointer-events: none;
}

/* ==========================================================================
   4. BOTÕES LAPIDADOS & PÍLULAS DE STATUS (loop.minaris.ai .rgb-glow-cta / .sanctuary-cta)
   ========================================================================== */
.btn-sovereign-primary,
.rgb-glow-cta,
.sanctuary-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, #0F172A 0%, #1E3A8A 38%, #2563EB 74%, #0284C7 100%) padding-box,
    linear-gradient(95deg, rgba(0, 243, 255, 0.85) 0%, rgba(249, 224, 118, 0.80) 48%, rgba(124, 58, 237, 0.75) 100%) border-box;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 243, 255, 0.24),
    0 16px 38px -8px rgba(37, 99, 235, 0.42),
    0 0 26px rgba(0, 212, 255, 0.20);
  transition:
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 320ms ease,
    filter 320ms ease;
  transform: translateZ(0);
}

.btn-sovereign-primary::before,
.rgb-glow-cta::before,
.sanctuary-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(0, 243, 255, 0.24), rgba(212, 175, 55, 0.22) 45%, rgba(124, 58, 237, 0.24));
  opacity: 0;
  transition: opacity 320ms ease;
}

.btn-sovereign-primary:hover,
.rgb-glow-cta:hover,
.sanctuary-cta:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 20px 46px -8px rgba(37, 99, 235, 0.54),
    0 0 36px rgba(0, 212, 255, 0.34),
    0 0 64px rgba(212, 175, 55, 0.18);
  filter: saturate(112%) brightness(1.04);
}

.btn-sovereign-primary:hover::before,
.rgb-glow-cta:hover::before,
.sanctuary-cta:hover::before {
  opacity: 1;
}

.sanctuary-cta-arrow {
  display: inline-block;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), color 320ms ease;
}

.sanctuary-cta:hover .sanctuary-cta-arrow,
.btn-sovereign-primary:hover .sanctuary-cta-arrow {
  transform: translateX(6px);
  color: #F9E076;
}

[dir="rtl"] .sanctuary-cta:hover .sanctuary-cta-arrow,
[dir="rtl"] .btn-sovereign-primary:hover .sanctuary-cta-arrow {
  transform: translateX(-6px);
}

/* Botão secundário lapidado (Loop glass pill) */
.loop-glass-btn {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.84)) padding-box,
    linear-gradient(120deg, rgba(37, 99, 235, 0.38), rgba(0, 212, 255, 0.34), rgba(212, 175, 55, 0.38)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 10px 26px -8px rgba(15, 23, 42, 0.10),
    0 0 18px rgba(0, 212, 255, 0.08);
  backdrop-filter: blur(16px);
  transition: all 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.loop-glass-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 14px 32px -8px rgba(37, 99, 235, 0.18),
    0 0 24px rgba(0, 212, 255, 0.16);
}

/* ==========================================================================
   5. SEQUÊNCIA CROMÁTICA DOS 5 MÓDULOS (Cards, Badges, Bordas e Botões)
   ========================================================================== */
.db-module-card {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 0%, var(--mod-glow, rgba(37, 99, 235, 0.12)), transparent 54%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.88) 0%, rgba(244, 247, 251, 0.80) 100%) padding-box,
    linear-gradient(135deg, var(--mod-accent, #2563EB), rgba(148, 163, 184, 0.32) 45%, var(--mod-accent, #2563EB)) border-box !important;
  border: 1px solid transparent !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    0 20px 50px -14px rgba(15, 23, 42, 0.13),
    0 0 28px 0 var(--mod-glow, rgba(37, 99, 235, 0.12));
  transition:
    transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 380ms ease,
    filter 380ms ease;
}

.db-module-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 28px 64px -12px rgba(15, 23, 42, 0.18),
    0 0 42px 0 var(--mod-glow, rgba(37, 99, 235, 0.24));
}

/* 5-Module Top Chromatic Bars */
.db-module-card[data-module="1"],
.db-module-card[data-module="lilith"],
.db-module-card[data-module="presenca"] {
  border-top: 4px solid var(--mod-1-blue) !important;
}

.db-module-card[data-module="2"],
.db-module-card[data-module="farao"],
.db-module-card[data-module="hine-ni"] {
  border-top: 4px solid var(--mod-2-lilac) !important;
}

.db-module-card[data-module="3"],
.db-module-card[data-module="sodoma"],
.db-module-card[data-module="justica"] {
  border-top: 4px solid var(--mod-3-red) !important;
}

.db-module-card[data-module="4"],
.db-module-card[data-module="roboao"],
.db-module-card[data-module="coesao"] {
  border-top: 4px solid var(--mod-4-green) !important;
}

.db-module-card[data-module="5"],
.db-module-card[data-module="serpente"],
.db-module-card[data-module="alquimia"] {
  border-top: 4px solid var(--mod-5-gray) !important;
}

/* Sculpted Module Action Buttons */
.btn-mod-solid {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 14px 30px -8px rgba(15, 23, 42, 0.28);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 280ms ease, filter 280ms ease;
}

.btn-mod-solid:hover {
  transform: translateY(-2px);
  filter: brightness(1.07) saturate(110%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 18px 38px -8px rgba(15, 23, 42, 0.36);
}

/* Modal Light Surface & Backdrop */
.modal-content {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.08), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.96)) !important;
  border: 1px solid rgba(148, 163, 184, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 32px 80px -16px rgba(15, 23, 42, 0.28),
    0 0 42px rgba(0, 212, 255, 0.12) !important;
}

.db-modal-backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
  backdrop-filter: blur(10px);
}

@keyframes dbFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.db-reveal {
  animation: dbFadeUp 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .loop-degrade-canvas::before,
  .db-reveal,
  .altar-card,
  .db-module-card,
  .portal-node,
  .sanctuary-cta,
  .btn-sovereign-primary,
  .sanctuary-cta-arrow {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}