/* Case study gate: modal (homepage) and full page (direct links).
   Uses the Wildfire Digital night palette. Safe to load alongside site CSS:
   everything is scoped under .wfg- class names. */

:root {
  --wfg-night: #1A1116;
  --wfg-night-2: #24161E;
  --wfg-fg: #F6EEF0;
  --wfg-fg-dim: rgba(246, 238, 240, 0.66);
  --wfg-fg-faint: rgba(246, 238, 240, 0.38);
  --wfg-line: rgba(246, 238, 240, 0.12);
  --wfg-strontium: #E8283C;
  --wfg-strontium-2: #FF8A65;
  --wfg-copper: #0BA37F;
  --wfg-copper-2: #7BE3A0;
  --wfg-potassium: #7A3CFF;
  --wfg-potassium-2: #C79BFF;
  --wfg-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --wfg-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --wfg-mono: "Martian Mono", ui-monospace, monospace;
  --wfg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Modal shell ---------- */

.wfg-overlay, .wfg-overlay *, .wfg-page, .wfg-page * { box-sizing: border-box; }

.wfg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 16px;
  background: rgba(26, 17, 22, 0.74);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0;
  transition: opacity 0.38s var(--wfg-ease);
}
.wfg-overlay.is-open { opacity: 1; }
.wfg-overlay.is-open .wfg-panel { transform: none; opacity: 1; }
.wfg-overlay .wfg-panel { transform: translateY(18px) scale(0.97); opacity: 0; }

html.wfg-locked, html.wfg-locked body { overflow: hidden; }

/* ---------- Panel ---------- */

.wfg-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 40px 36px 30px;
  border-radius: 22px;
  color: var(--wfg-fg);
  background: linear-gradient(180deg, rgba(36, 22, 30, 0.96), rgba(26, 17, 22, 0.98));
  box-shadow:
    0 0 0 1px var(--wfg-line) inset,
    0 30px 80px -20px rgba(10, 4, 8, 0.7),
    0 10px 30px -10px rgba(232, 40, 60, 0.18);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--wfg-ease), opacity 0.4s var(--wfg-ease);
  font-family: var(--wfg-body);
}

/* Aurora: three flame-chemistry lights drifting behind the content */
.wfg-aurora {
  position: absolute;
  inset: -40% -30% auto -30%;
  height: 120%;
  z-index: -1;
  pointer-events: none;
  filter: blur(46px);
  opacity: 0.55;
}
.wfg-aurora span {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.wfg-aurora span:nth-child(1) { width: 62%; height: 46%; left: 4%;  top: 14%; background: var(--wfg-strontium); }
.wfg-aurora span:nth-child(2) { width: 48%; height: 40%; left: 48%; top: 6%;  background: var(--wfg-potassium); opacity: 0.85; }
.wfg-aurora span:nth-child(3) { width: 36%; height: 30%; left: 34%; top: 34%; background: var(--wfg-copper); opacity: 0.45; }

/* Fade the aurora into the panel so text sits on calm dark */
.wfg-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(26, 17, 22, 0) 0%, rgba(26, 17, 22, 0.55) 38%, rgba(26, 17, 22, 0.94) 62%);
}

.wfg-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--wfg-fg-dim);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.wfg-close:hover { background: rgba(246, 238, 240, 0.08); color: var(--wfg-fg); }
.wfg-close:focus-visible { outline: 2px solid var(--wfg-strontium-2); outline-offset: 2px; }

.wfg-lock {
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(246, 238, 240, 0.06);
  box-shadow: 0 0 0 1px var(--wfg-line) inset;
  color: var(--wfg-strontium-2);
}
.wfg-lock svg { transition: transform 0.45s var(--wfg-ease); }
.wfg-panel.is-success .wfg-lock { color: var(--wfg-copper-2); }
.wfg-shackle { transition: transform 0.45s var(--wfg-ease); transform-origin: 16.5px 10.5px; }
.wfg-panel.is-success .wfg-shackle { transform: translateY(-2px) rotate(28deg); }

.wfg-case {
  margin: 0 0 10px;
  font-family: var(--wfg-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wfg-strontium-2);
}
.wfg-case:empty { display: none; }

.wfg-title {
  margin: 0 0 10px;
  font-family: var(--wfg-display);
  font-weight: 600;
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.wfg-copy {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--wfg-fg-dim);
}

.wfg-form { display: grid; gap: 14px; }

.wfg-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wfg-fg-dim);
}

.wfg-field {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 12px;
  background: rgba(246, 238, 240, 0.05);
  box-shadow: 0 0 0 1px rgba(246, 238, 240, 0.16) inset;
  transition: box-shadow 0.2s, background 0.2s;
}
.wfg-field:focus-within {
  background: rgba(246, 238, 240, 0.07);
  box-shadow: 0 0 0 1px var(--wfg-strontium-2) inset, 0 0 0 4px rgba(255, 138, 101, 0.16);
}
.wfg-panel.is-wrong .wfg-field {
  box-shadow: 0 0 0 1px var(--wfg-strontium) inset, 0 0 0 4px rgba(232, 40, 60, 0.18);
}
.wfg-panel.is-success .wfg-field {
  box-shadow: 0 0 0 1px var(--wfg-copper-2) inset, 0 0 0 4px rgba(123, 227, 160, 0.16);
}

.wfg-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 8px 0 16px;
  border: 0;
  background: transparent;
  color: var(--wfg-fg);
  font: 500 16px/1 var(--wfg-body);
  letter-spacing: 0.04em;
  outline: none;
}
.wfg-input::selection { background: rgba(255, 138, 101, 0.38); color: #fff; }
.wfg-input::placeholder { color: var(--wfg-fg-faint); letter-spacing: 0; }

.wfg-reveal {
  height: 40px;
  margin-right: 6px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--wfg-fg-faint);
  font: 500 12px/1 var(--wfg-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.wfg-reveal:hover { color: var(--wfg-fg); background: rgba(246, 238, 240, 0.06); }
.wfg-reveal:focus-visible { outline: 2px solid var(--wfg-strontium-2); outline-offset: 0; }

.wfg-error {
  min-height: 20px;
  margin: -4px 0 0;
  font-size: 13.5px;
  color: #FF9A8A;
}

.wfg-submit {
  position: relative;
  height: 52px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font: 600 16px/1 var(--wfg-body);
  cursor: pointer;
  background: linear-gradient(100deg, var(--wfg-strontium) 0%, #F2574A 55%, var(--wfg-strontium-2) 100%);
  box-shadow: 0 10px 26px -10px rgba(232, 40, 60, 0.75);
  transition: transform 0.2s var(--wfg-ease), box-shadow 0.2s, filter 0.2s;
  overflow: hidden;
}
.wfg-submit:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(232, 40, 60, 0.85); }
.wfg-submit:active { transform: translateY(0); }
.wfg-submit:focus-visible { outline: 2px solid var(--wfg-fg); outline-offset: 3px; }
.wfg-submit[disabled] { cursor: progress; filter: saturate(0.85); }
.wfg-submit .wfg-label-busy { display: none; }
.wfg-panel.is-busy .wfg-submit .wfg-label-idle { display: none; }
.wfg-panel.is-busy .wfg-submit .wfg-label-busy { display: inline; }
.wfg-panel.is-success .wfg-submit {
  background: linear-gradient(100deg, var(--wfg-copper) 0%, var(--wfg-copper-2) 100%);
  box-shadow: 0 10px 26px -10px rgba(11, 163, 127, 0.75);
}

.wfg-note {
  margin: 0;
  font-size: 13.5px;
  color: var(--wfg-fg-faint);
  text-align: center;
}

.wfg-foot {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--wfg-line);
  font-size: 13.5px;
  color: var(--wfg-fg-faint);
}
.wfg-foot a {
  color: var(--wfg-fg-dim);
  text-decoration: underline;
  text-decoration-color: rgba(246, 238, 240, 0.3);
  text-underline-offset: 3px;
}
.wfg-foot a:hover { color: var(--wfg-fg); text-decoration-color: var(--wfg-strontium-2); }

.wfg-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Wrong password: a short, physical shake */
@keyframes wfg-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.wfg-panel.is-shaking { animation: wfg-shake 0.42s var(--wfg-ease); }

/* Spark burst canvas sits above the panel */
.wfg-sparks {
  position: fixed;
  inset: 0;
  z-index: 1001;
  pointer-events: none;
}

/* ---------- Full page gate (direct links) ---------- */

.wfg-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--wfg-night);
  color: var(--wfg-fg);
  font-family: var(--wfg-body);
  overflow-x: hidden;
}
.wfg-page-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.32;
}
.wfg-page-glow span { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.wfg-page-glow span:nth-child(1) { width: 46vw; height: 40vh; left: 14vw; top: 10vh; background: var(--wfg-strontium); }
.wfg-page-glow span:nth-child(2) { width: 38vw; height: 36vh; left: 50vw; top: 18vh; background: var(--wfg-potassium); }
.wfg-page-glow span:nth-child(3) { width: 30vw; height: 30vh; left: 36vw; top: 46vh; background: var(--wfg-copper); opacity: 0.5; }

.wfg-page-head, .wfg-page-main, .wfg-page-foot { position: relative; z-index: 1; }
.wfg-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(16px, 4vw, 40px);
}
.wfg-wordmark {
  font-family: var(--wfg-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--wfg-fg);
  text-decoration: none;
}
.wfg-back {
  font-size: 14px;
  color: var(--wfg-fg-dim);
  text-decoration: none;
}
.wfg-back:hover { color: var(--wfg-fg); }
.wfg-page-main { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px 16px 48px; }
.wfg-page-foot {
  padding: 20px clamp(16px, 4vw, 40px) 28px;
  font-family: var(--wfg-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--wfg-fg-faint);
}

@media (max-width: 480px) {
  .wfg-panel { padding: 34px 22px 24px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .wfg-overlay, .wfg-panel, .wfg-submit, .wfg-lock svg { transition: none; }
  .wfg-panel.is-shaking { animation: none; }
}

/* Keep Chrome/Safari autofill from painting the field pale blue */
.wfg-input:-webkit-autofill,
.wfg-input:-webkit-autofill:hover,
.wfg-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--wfg-fg);
  caret-color: var(--wfg-fg);
  -webkit-box-shadow: 0 0 0 1000px #2B1E25 inset;
  box-shadow: 0 0 0 1000px #2B1E25 inset;
  transition: background-color 600000s ease 0s;
  border-radius: 12px 0 0 12px;
}
.wfg-field:has(.wfg-input:-webkit-autofill) { background: #2B1E25; }

/* Draw the field outline on a layer above the input, so autofill fills can't hide it */
.wfg-field,
.wfg-field:focus-within,
.wfg-panel.is-wrong .wfg-field,
.wfg-panel.is-success .wfg-field { box-shadow: none; }
.wfg-field::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(246, 238, 240, 0.16) inset;
  transition: box-shadow 0.2s;
}
.wfg-field:focus-within::after {
  box-shadow: 0 0 0 1px var(--wfg-strontium-2) inset, 0 0 0 4px rgba(255, 138, 101, 0.16);
}
.wfg-panel.is-wrong .wfg-field::after {
  box-shadow: 0 0 0 1px var(--wfg-strontium) inset, 0 0 0 4px rgba(232, 40, 60, 0.18);
}
.wfg-panel.is-success .wfg-field::after {
  box-shadow: 0 0 0 1px var(--wfg-copper-2) inset, 0 0 0 4px rgba(123, 227, 160, 0.16);
}