/* Overlay polish for tool pages — immersive chrome */
@import url("fonts.css");

html {
  background: #060912;
}
html[data-theme="light"] {
  background: #F0F2EF;
}

body {
  font-family: "Sora", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background: transparent !important;
  background-image: none !important;
}

/* Fixed atmosphere behind tools */
.tool-atmo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 70% 0%, rgba(110, 146, 119, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 10% 100%, rgba(36, 48, 86, 0.45), transparent 50%),
    #060912;
}
.tool-atmo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .tool-atmo,
.tool-page[data-theme="light"] ~ .tool-atmo,
body[data-theme="light"] .tool-atmo {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(110, 146, 119, 0.1), transparent 50%),
    #F0F2EF;
}

.legacy-preview-banner { /* unused — retained so the rule set stays valid */
  position: relative;
  z-index: 20;
  background: linear-gradient(90deg, #1a2e22, #1C244B 40%, #243056 70%, #1a2e22) !important;
  color: rgba(248, 247, 243, 0.8) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  letter-spacing: 0.03em;
}

.wrap {
  position: relative;
  z-index: 2;
}

/* Brand header */
header {
  position: relative;
}

.brand a,
.brand-row a {
  transition: opacity 0.2s;
}
.brand a:hover,
.brand-row a:hover {
  opacity: 0.85;
}

.brand-row img.mark {
  filter: drop-shadow(0 0 12px rgba(110, 146, 119, 0.35));
}

.journey-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 16px;
  margin-top: 20px !important;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 15, 31, 0.55);
  backdrop-filter: blur(12px);
  font-family: "IBM Plex Mono", ui-monospace, monospace !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em;
}

:root[data-theme="light"] .journey-link {
  border-color: rgba(28, 36, 75, 0.1);
  background: rgba(255, 255, 255, 0.7);
}

.journey-link strong {
  color: #9BC4A4;
  font-weight: 600;
}

.journey-link a {
  color: #6E9277 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.journey-link a:hover {
  background: rgba(110, 146, 119, 0.15);
  color: #9BC4A4 !important;
}

/* Headlines */
h1 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
}

.eyebrow {
  letter-spacing: 0.18em !important;
}

/* Cards / picks — glass lift */
.pick,
.qcard,
.result,
.card,
.total {
  backdrop-filter: blur(16px);
  transition: transform 0.25s cubic-bezier(0.22, 0.85, 0.28, 1),
    border-color 0.25s, box-shadow 0.25s !important;
}

.pick:hover,
.instrument:hover {
  box-shadow: 0 20px 50px -16px rgba(110, 146, 119, 0.25) !important;
}

.btn-primary,
.btn-p {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(155, 196, 164, 0.2), 0 12px 32px -10px rgba(110, 146, 119, 0.55) !important;
}

/* Chip on state pulse */
.chip.on {
  box-shadow: 0 0 20px -4px rgba(110, 146, 119, 0.5);
}

/* Score ring glow */
.ring .val {
  filter: drop-shadow(0 0 6px rgba(110, 146, 119, 0.45));
}

/* Soft entrance */
.wrap > header,
.wrap > .stage,
.wrap > div[style],
.wrap > .grid,
.wrap > .qtitle,
.wrap > .chips,
.wrap > .result,
.wrap > details,
.wrap > .cta,
.wrap > .note,
.wrap > footer,
.journey-link {
  animation: tool-in 0.7s cubic-bezier(0.22, 0.85, 0.28, 1) both;
}

.wrap > header { animation-delay: 0.05s; }
.journey-link { animation-delay: 0.12s; }

@keyframes tool-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wrap > * { animation: none !important; }
}