/* Sacred geometry — whimsical knowledge-deck overlays (additive décor) */

.sacred-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.sacred-layer__corner {
  position: absolute;
  width: clamp(72px, 11vw, 140px);
  height: clamp(72px, 11vw, 140px);
  opacity: 0.14;
  filter: drop-shadow(0 0 6px rgba(201, 162, 39, 0.25));
}

.sacred-layer__corner svg {
  width: 100%;
  height: 100%;
}

.sacred-layer__corner--tl {
  top: 4.5rem;
  left: calc(260px + 0.75rem);
  animation: sacred-drift-a 90s ease-in-out infinite;
}

.sacred-layer__corner--tr {
  top: 4.5rem;
  right: 0.75rem;
  animation: sacred-drift-b 110s ease-in-out infinite reverse;
}

.sacred-layer__corner--bl {
  bottom: 1.5rem;
  left: calc(260px + 0.75rem);
  animation: sacred-drift-b 100s ease-in-out infinite;
}

.sacred-layer__corner--br {
  bottom: 1.5rem;
  right: 0.75rem;
  animation: sacred-drift-a 85s ease-in-out infinite reverse;
}

.sacred-layer__corner--mid-l {
  top: 42%;
  left: calc(260px + 0.25rem);
  width: clamp(56px, 8vw, 100px);
  height: clamp(56px, 8vw, 100px);
  opacity: 0.09;
  animation: sacred-geo-rotate 200s linear infinite;
}

.sacred-layer__corner--mid-r {
  top: 38%;
  right: 0.25rem;
  width: clamp(56px, 8vw, 100px);
  height: clamp(56px, 8vw, 100px);
  opacity: 0.09;
  animation: sacred-geo-rotate 240s linear infinite reverse;
}

.sacred-layer__keys {
  position: absolute;
  inset: 0;
}

.sacred-key {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: rgba(201, 162, 39, 0.22);
  text-shadow: 0 0 12px rgba(0, 245, 255, 0.15);
  animation: sacred-key-glimmer 8s ease-in-out infinite;
}

.sacred-key--1 { top: 22%; left: calc(260px + 12%); animation-delay: 0s; }
.sacred-key--2 { top: 18%; right: 14%; animation-delay: -2s; }
.sacred-key--3 { bottom: 28%; left: calc(260px + 18%); animation-delay: -4s; }
.sacred-key--4 { bottom: 22%; right: 10%; animation-delay: -1s; }

.sacred-layer__wisdom-rail {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: rgba(201, 162, 39, 0.16);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.sacred-layer__wisdom-rail span {
  animation: sacred-key-glimmer 12s ease-in-out infinite;
}

.sacred-layer__wisdom-rail span:nth-child(2) { animation-delay: -3s; color: rgba(0, 245, 255, 0.14); }
.sacred-layer__wisdom-rail span:nth-child(3) { animation-delay: -6s; }
.sacred-layer__wisdom-rail span:nth-child(4) { animation-delay: -9s; color: rgba(255, 176, 32, 0.14); }

/* Main content area — subtle hex veil */
.main-content {
  position: relative;
}

.main-content::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='0.35'%3E%3Cpolygon points='28,2 54,16 54,44 28,58 2,44 2,16'/%3E%3Cpolygon points='28,42 54,56 54,84 28,98 2,84 2,56'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 100px;
  animation: sacred-hex-scroll 120s linear infinite;
}

.main-content > * {
  position: relative;
  z-index: 1;
}

.page-header--sacred {
  position: relative;
  padding-bottom: 0.75rem;
}

.page-header--sacred::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 162, 39, 0.5) 15%,
    rgba(0, 245, 255, 0.35) 50%,
    rgba(201, 162, 39, 0.5) 85%,
    transparent
  );
}

.page-header--sacred .page-header-sacred-motif {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  opacity: 0.2;
  pointer-events: none;
}

/* Neon card corner watermarks */
.neon-card {
  isolation: isolate;
}

.neon-card-sacred {
  position: absolute;
  width: 52px;
  height: 52px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
}

.neon-card-sacred svg {
  width: 100%;
  height: 100%;
}

.neon-card-sacred--tl { top: 6px; left: 6px; }
.neon-card-sacred--br { bottom: 6px; right: 6px; opacity: 0.12; animation: sacred-geo-rotate 180s linear infinite; }
.neon-card-sacred--tr {
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  opacity: 0.1;
}

/* Session gate — vault of keys */
.session-gate {
  position: relative;
  overflow: hidden;
}

.session-gate::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 40% 35% at 20% 30%, rgba(0, 245, 255, 0.06), transparent 55%),
    radial-gradient(ellipse 35% 40% at 80% 70%, rgba(255, 45, 166, 0.05), transparent 55%);
  pointer-events: none;
}

.session-gate-sacred-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 520px);
  height: min(90vw, 520px);
  transform: translate(-50%, -50%);
  opacity: 0.1;
  pointer-events: none;
}

.session-gate-sacred-ring svg {
  width: 100%;
  height: 100%;
  animation: sacred-geo-rotate 160s linear infinite;
}

.session-gate-keys {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.session-gate-key {
  position: absolute;
  width: clamp(40px, 8vw, 72px);
  height: clamp(40px, 8vw, 72px);
  opacity: 0.12;
}

.session-gate-key--tl { top: 8%; left: 8%; animation: sacred-drift-a 70s ease-in-out infinite; }
.session-gate-key--br { bottom: 10%; right: 8%; animation: sacred-drift-b 80s ease-in-out infinite reverse; }

.session-gate-card {
  position: relative;
  z-index: 2;
}

.session-gate-whisper {
  font-family: var(--font-tech);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(201, 162, 39, 0.35);
  margin-top: 0.5rem;
}

/* Sidebar knowledge sigil */
.sidebar-sacred-sigil {
  position: absolute;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 88px;
  opacity: 0.11;
  pointer-events: none;
  animation: sacred-geo-rotate 300s linear infinite;
}

.sidebar-sacred-sigil svg {
  width: 100%;
  height: 100%;
}

/* Ambient extra corners */
.ambient-geo-corner {
  position: absolute;
  width: min(22vw, 280px);
  height: min(22vw, 280px);
  opacity: 0.06;
  pointer-events: none;
}

.ambient-geo-corner svg {
  width: 100%;
  height: 100%;
}

.ambient-geo-corner--tl {
  top: 8%;
  left: calc(260px + 2%);
  animation: sacred-geo-rotate 400s linear infinite;
}

.ambient-geo-corner--br {
  bottom: 6%;
  right: 3%;
  animation: sacred-geo-rotate 320s linear infinite reverse;
}

.ambient-geo-hex-veil {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='83' viewBox='0 0 48 83'%3E%3Cpath d='M24 1 L47 14 L47 42 L24 55 L1 42 L1 14 Z' fill='none' stroke='%23c9a227' stroke-width='0.4'/%3E%3Cpath d='M24 28 L47 41 L47 69 L24 82 L1 69 L1 41 Z' fill='none' stroke='%2300f5ff' stroke-width='0.25' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 48px 83px;
}

.nav-item::before {
  content: '';
  position: absolute;
  left: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  opacity: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12,2 22,8 22,16 12,22 2,16 2,8' fill='none' stroke='%23c9a227' stroke-width='1'/%3E%3C/svg%3E");
  background-size: contain;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.nav-item:hover::before,
.nav-item.active::before {
  opacity: 0.35;
}

/* Page heroes — command deck titles */
.deck-hero {
  position: relative;
}

.deck-hero::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 56px;
  height: 56px;
  opacity: 0.12;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23c9a227' stroke-width='0.2' opacity='0.8'%3E%3Ccircle cx='50' cy='50' r='32'/%3E%3Cpolygon points='50,18 62,42 50,50 38,42'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.section-title.font-display,
.deck-hero h1 {
  text-shadow: 0 0 24px rgba(201, 162, 39, 0.08);
}

.command-deck .neon-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background: radial-gradient(circle at 100% 0%, rgba(0, 245, 255, 0.2), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(255, 176, 32, 0.15), transparent 40%);
}

@keyframes sacred-drift-a {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6px, -8px) rotate(6deg); }
}

@keyframes sacred-drift-b {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-8px, 6px) rotate(-5deg); }
}

@keyframes sacred-key-glimmer {
  0%, 100% { opacity: 0.14; filter: blur(0); }
  50% { opacity: 0.32; filter: blur(0.3px); }
}

@keyframes sacred-hex-scroll {
  from { background-position: 0 0; }
  to { background-position: 56px 100px; }
}

@keyframes sacred-geo-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* mid-l/r corners need rotate on child */
.sacred-layer__corner--mid-l,
.sacred-layer__corner--mid-r {
  transform-origin: center center;
}

@media (max-width: 900px) {
  .sacred-layer__corner--tl,
  .sacred-layer__corner--bl,
  .sacred-layer__corner--mid-l {
    left: 0.5rem;
  }

  .ambient-geo-corner--tl {
    left: 2%;
  }

  .sacred-key--1,
  .sacred-key--3 {
    left: 8%;
  }

  .sacred-layer__wisdom-rail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sacred-layer__corner,
  .sacred-key,
  .sacred-layer__wisdom-rail span,
  .neon-card-sacred--br,
  .session-gate-sacred-ring,
  .session-gate-key,
  .sidebar-sacred-sigil,
  .ambient-geo-corner,
  .ambient-sacred-geo,
  .ambient-sparkle,
  .main-content::before {
    animation: none !important;
  }
}
