/* Nordic UX pass — readable hero, lit environment, frost panels */

/* ——— Environment: lighter, content-first ——— */
.vault-env-sky {
  background:
    radial-gradient(ellipse 100% 55% at 50% -8%,
      rgba(184, 223, 240, 0.35),
      transparent 58%),
    radial-gradient(ellipse 70% 40% at 88% 18%,
      rgba(142, 202, 230, 0.15),
      transparent 55%),
    linear-gradient(165deg, #4a7090 0%, var(--color-bg-mid) 42%, var(--color-bg-base) 100%) !important;
}

.vault-env-haze {
  opacity: 0.35 !important;
  background:
    radial-gradient(circle at 50% 38%, transparent 0, transparent 52%, rgba(21, 37, 54, 0.25) 100%),
    linear-gradient(90deg, rgba(21, 37, 54, 0.12), transparent 20%, transparent 80%, rgba(21, 37, 54, 0.12)) !important;
}

.vault-env-grain { opacity: 0.028 !important; }

.vault-aperture {
  opacity: calc(0.35 - var(--vault-p) * 0.15) !important;
  transform:
    translate(-50%, -50%)
    scale(calc(0.78 + var(--vault-p) * 0.4)) !important;
}

.vault-monolith {
  opacity: calc(0.22 + var(--vault-p) * 0.35) !important;
}

.vault-env-aurora-a,
.vault-env-aurora-b {
  opacity: calc(0.45 + var(--vault-p) * 0.25) !important;
}

.vault-aperture-core {
  background:
    radial-gradient(circle at 50% 42%,
      rgba(255, 220, 160, calc(0.08 + var(--vault-p) * 0.06)),
      rgba(191, 234, 255, calc(.16 + var(--vault-p) * .1)) 46%,
      transparent 72%) !important;
}

/* ——— Hero: always readable ——— */
.vault-arrival-copy.asgard-throne,
.vault-arrival-copy {
  position: relative;
  z-index: 4;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 5vw, 56px);
  border-radius: var(--radius-lg);
  background: rgba(36, 61, 86, 0.82);
  border: 1px solid rgba(212, 234, 245, 0.22);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: var(--shadow-lg), 0 0 80px rgba(142, 202, 230, 0.08);
}

.vault-arrival-copy h1,
.vault-arrival-copy .vault-hero-sub,
.vault-kicker,
.arena-hero-actions,
.vault-scroll-cue {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

.vault-arrival-copy h1 {
  color: var(--color-frost) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  filter: none;
  text-shadow: 0 2px 20px rgba(15, 28, 42, 0.4);
  font-size: clamp(40px, 7vw, 88px) !important;
  line-height: 1.02 !important;
}

.vault-arrival-copy h1 em {
  color: var(--color-accent-primary-strong) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  font-style: italic;
}

.vault-hero-sub {
  color: var(--color-text-secondary) !important;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.65;
}

.vault-kicker {
  color: var(--color-crystal);
  background: rgba(42, 65, 88, 0.65);
  border-color: rgba(184, 223, 240, 0.35);
  letter-spacing: var(--tracking-rune);
}

.vault-kicker::before {
  background: var(--color-accent-gold);
  box-shadow: 0 0 10px rgba(212, 165, 116, 0.7);
}

/* ——— Sections: frost panels on scroll ——— */
.arena-main .section-head,
.vault-activity-grid,
.activity-spotlight,
.moment,
.difference-layout,
.market-gateway,
.breaker-cta > div {
  position: relative;
}

.activity-spotlight,
.section-head > div:first-child {
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: rgba(42, 65, 88, 0.35);
  border: 1px solid var(--color-border-subtle);
  backdrop-filter: blur(8px);
}

.section-label {
  color: var(--color-accent-gold) !important;
  letter-spacing: var(--tracking-label);
}

.section h2 {
  color: var(--color-frost);
  line-height: 1.06;
}

.section-head p,
.activity-spotlight p {
  color: var(--color-text-secondary);
  font-size: 17px;
  line-height: 1.65;
}

/* ——— Header ——— */
.site-header--arena {
  background: rgba(26, 45, 66, 0.72) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  border-bottom: 1px solid rgba(212, 234, 245, 0.14) !important;
}

/* ——— Buttons ——— */
.arena-btn {
  border-color: rgba(212, 234, 245, 0.3) !important;
  color: var(--color-frost) !important;
  background: rgba(42, 65, 88, 0.5) !important;
}

.arena-btn.primary {
  color: var(--color-on-accent) !important;
  background: linear-gradient(135deg, var(--color-accent-primary), #6eb8d8) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(142, 202, 230, 0.28) !important;
}

.arena-btn.primary:hover {
  background: linear-gradient(135deg, var(--color-accent-primary-strong), var(--color-accent-primary)) !important;
  box-shadow: 0 10px 28px rgba(142, 202, 230, 0.35) !important;
}

/* ——— Cards & live grid ——— */
.live-card,
.breaker-card,
.ragnar-card {
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.live-badge {
  background: var(--color-accent-gold) !important;
  color: var(--color-on-gold) !important;
}

.fee-pillar {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(212, 165, 116, 0.12), transparent 45%),
    rgba(42, 65, 88, 0.55) !important;
  border-color: rgba(184, 223, 240, 0.28) !important;
}

.breaker-chip {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(58, 95, 125, 0.35), transparent 55%),
    rgba(16, 31, 46, 0.55) !important;
  border-color: rgba(184, 223, 240, 0.26) !important;
}

.activity-rail,
.activity-breakers {
  background:
    linear-gradient(165deg, rgba(58, 95, 125, 0.22), transparent 50%),
    rgba(14, 27, 41, 0.88) !important;
}

.fee-pillar.hot strong { color: var(--color-accent-gold-strong); }

/* ——— Marketplace gateway (Nordic birch) ——— */
.theme-utility-panel {
  --local-bg: #eef2f6;
  --local-text: #1a2d42;
  --local-muted: #3d5266;
  border-radius: var(--radius-lg);
  color: var(--local-text) !important;
  background:
    linear-gradient(110deg, rgba(43, 108, 176, 0.07), transparent 44%),
    var(--local-bg) !important;
  border: 1px solid rgba(26, 45, 66, 0.1) !important;
}

.theme-utility-panel h2 { color: var(--local-text) !important; }
.theme-utility-panel p { color: var(--local-muted) !important; }

/* ——— Wayfinding ——— */
.vault-path-track::before {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(212, 165, 116, 0.2) 12%,
    rgba(142, 202, 230, 0.45) calc(var(--path-progress, 0) * 100%),
    rgba(184, 223, 240, 0.15) 100%
  );
}

/* ——— Founders ——— */
.founding-counter-premium {
  border-color: var(--color-border-gold) !important;
  color: var(--color-accent-gold-strong) !important;
  background: rgba(212, 165, 116, 0.12) !important;
}

.apply-panel {
  background: rgba(42, 65, 88, 0.55) !important;
  border-color: var(--color-border-default) !important;
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
}

.arena-field input,
.arena-field textarea {
  background: rgba(26, 45, 66, 0.6) !important;
  border-color: var(--color-border-default) !important;
  color: var(--color-frost) !important;
}

/* ——— Footer ——— */
.arena-footer {
  background: rgba(21, 37, 54, 0.5);
  border-top-color: var(--color-border-subtle);
}

/* ——— Reveals ——— */
.reveal-orchestrated {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium);
}
.reveal-orchestrated.in { opacity: 1; transform: none; }

.vault-path-node.is-lit {
  background: var(--color-accent-gold);
  border-color: var(--color-accent-gold-strong);
  box-shadow: 0 0 14px rgba(212, 165, 116, 0.55);
}

@media (max-width: 900px) {
  .vault-path { display: none; }
  .vault-arrival-copy { margin-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .vault-key::before { animation: none; }
  .reveal-orchestrated { opacity: 1; transform: none; transition: none; }
}