/* =====================================================================
   effects.css — immersive depth layer for perceptionedit
   Palette unchanged (beige · navy · blue · ice · gold). This only adds
   the WebGL canvas, frosted depth over the field, and glow/atmosphere.
   ===================================================================== */

/* --- the WebGL field sits behind everything, above the paper bg --- */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* Let the moving field read faintly through the large content panels,
   creating cinematic depth while keeping text crisp and legible. */
.manifesto {
  background: rgba(255, 255, 255, 0.80) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.04);
  backdrop-filter: blur(16px) saturate(1.04);
}
.method-grid {
  background: rgba(255, 255, 255, 0.74) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.04);
  backdrop-filter: blur(16px) saturate(1.04);
}
.method-grid article:hover {
  background: rgba(242, 245, 245, 0.92) !important;
}
.results {
  background: rgba(255, 255, 255, 0.80) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.04);
  backdrop-filter: blur(16px) saturate(1.04);
}
.contact {
  background: rgba(243, 237, 226, 0.78) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.04);
  backdrop-filter: blur(16px) saturate(1.04);
}

/* Atmospheric glow accents — soft, palette-matched, behind content */
.manifesto, .services, .contact { position: relative; }
.manifesto::after,
.services::after,
.contact::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.manifesto::after { background: radial-gradient(circle, rgba(91,155,255,0.16), transparent 70%); top: -10%; right: -6%; }
.services::after  { background: radial-gradient(circle, rgba(154,174,181,0.20), transparent 70%); bottom: -12%; left: -8%; }
.contact::after   { background: radial-gradient(circle, rgba(191,165,101,0.14), transparent 70%); top: -8%; left: 40%; }
.manifesto > *, .services > *, .contact > * { position: relative; z-index: 1; }

/* Soft paper veil behind the hero copy so type + buttons stay legible
   over the moving field (sits above the canvas, below the text). */
.hero-copy { position: relative; }
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(234, 227, 213, 0.90) 0%,
    rgba(234, 227, 213, 0.62) 42%,
    rgba(234, 227, 213, 0) 74%);
}

/* === "BLUE BELT" BUTTONS ============================================
   Style every button like the navy marquee strip: solid --ink fill,
   light uppercase mono label, with a brighten-to-white hover (the same
   move the belt text makes on hover). Applied to all variants so the
   primary, outline and form buttons read as one confident family. */
.button {
  background: var(--ink) !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 4px;
}
.button, .button span {
  color: var(--accent-soft) !important;   /* pale ice-blue, like the belt */
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
}
/* disable the old light "sweep" fill so the navy stays solid */
.button::before { display: none !important; }
/* hover: lift the navy a touch + flip label to pure white (belt behaviour) */
.button:hover { background: #223453 !important; }
.button:hover, .button:hover span { color: #ffffff !important; }
/* heavier arrow glyphs, matching the label colour */
.button svg path { stroke-width: 1.6 !important; }

/* lift the inline links a touch off the field */
.hero-actions .text-link { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* A touch more dimensional lift on the oversized serif headings */
.hero-copy h1 { text-shadow: 0 18px 60px rgba(27, 42, 69, 0.10); }
.manifesto h2, .services-intro h2, .contact h2 { will-change: transform; }

/* --- quiz page: reveal the field behind the calm beige stage --- */
.quiz-app { background: transparent !important; }
.quiz-app::before { opacity: 0.85; } /* keep the existing soft halo */
.quiz-page .quiz-question {
  /* frosted navy so the field glows subtly at its edges */
  background: rgba(27, 42, 69, 0.92) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* lighten GPU load on small screens */
@media (max-width: 760px) {
  .manifesto, .method-grid, .results, .contact {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* === QUIZ RESULT — a special, contained "verdict" card ==============
   Lifts the result off the busy field and gives it more presence than
   the secondary CTA box below it. Cream panel, gold accent, soft depth. */
.result-card {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 54px clamp(28px, 6vw, 64px) 48px;
  border-radius: 24px;
  background: rgba(251, 248, 241, 0.94);
  border: 1px solid rgba(27, 42, 69, 0.12);
  box-shadow:
    0 40px 100px rgba(21, 32, 58, 0.18),
    0 2px 0 rgba(255, 255, 255, 0.6) inset;
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  overflow: hidden;
  animation: resultCardIn 0.7s var(--ease-out, cubic-bezier(.2,.75,.2,1)) both;
}
/* gold top hairline — echoes the navy question card's accent */
.result-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(191, 165, 101, 0.9), transparent);
}
/* faint corner glow for depth */
.result-card::after {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  top: -40%; right: -12%;
  background: radial-gradient(circle, rgba(91, 155, 255, 0.14), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.result-card > * { position: relative; z-index: 1; }

/* Editorial kicker: gold, centred, with thin flanking rules instead of
   the generic dotted "label" — feels composed rather than templated. */
.result-card .result-type {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 6px;
  color: var(--gold, #bfa565);
  font-family: "DM Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.result-card .result-type::before,
.result-card .result-type::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191, 165, 101, 0.85), transparent);
}

@keyframes resultCardIn {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* visually subordinate the secondary CTA so the result leads */
.quiz-cta { margin-top: 30px; }

@media (max-width: 600px) {
  .result-card { padding: 38px 22px 32px; border-radius: 18px; }
}

/* === QUIZ — iris field on the house warm-beige paper ================
   effects.js rebuilds the quiz field as two interlocked irises — warm
   amber above, inky blue below — drifting in grainy dust, drawn in
   rust and navy ink on the same warm beige paper as the home page.
   Every rule is scoped to .quiz-page. */

/* match the index page's initial background exactly: the deeper warm
   tan (--paper #d1b995), not the lighter beige. Overriding --beige here
   flows the index paper tone through every quiz surface that uses it. */
.quiz-page { --beige: #d1b995; }

/* dual tint halo — amber upper half, ice lower, echoing the two eyes */
.quiz-page .quiz-app::before {
  background:
    radial-gradient(circle at 42% 30%, rgba(191, 132, 61, 0.16), transparent 58%),
    radial-gradient(circle at 58% 72%, rgba(91, 125, 168, 0.15), transparent 58%);
  opacity: 1;
}

/* intro: navy ink sits on a frosted paper panel floating over the
   field — the same move as the home page's frosted content panels.
   Kept compact so the two irises stay visible above and below it. */
.quiz-page .quiz-intro {
  max-width: 680px;
  padding: 40px clamp(26px, 5vw, 56px) 40px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(251, 248, 241, 0.06)),
    rgba(251, 248, 241, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 40px 100px rgba(21, 32, 58, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(6px) saturate(1.24);
  backdrop-filter: blur(6px) saturate(1.24);
}
.quiz-page .quiz-intro .eyebrow { margin-bottom: 20px; }
.quiz-page .quiz-intro h1 { font-size: clamp(32px, 4.6vw, 54px); }
.quiz-page .quiz-intro h1 .quiz-title-light {
  color: rgba(255, 255, 255, 0.98);
  text-shadow:
    0 2px 12px rgba(27, 42, 69, 0.36),
    0 0 34px rgba(27, 42, 69, 0.18);
}
.quiz-page .quiz-intro .quiz-sub { margin-top: 16px; }
.quiz-page .quiz-intro .quiz-instructions { margin: 20px auto 30px; }
/* gold top hairline, echoing the question and result cards */
.quiz-page .quiz-intro::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(191, 165, 101, 0.9), transparent);
}

/* respect reduced-motion: drop the canvas entirely, keep the brand intact */
@media (prefers-reduced-motion: reduce) {
  #bg-canvas { display: none !important; }
  .manifesto, .method-grid, .results { background: #fff !important; }
  .contact { background: var(--bg-subtle) !important; }
}