/* ============================================================
   Techmonk Solutions — GLAM MODE
   Everything here is dormant until <html data-glam="..."> is set
   by glam.js (after the quiz). The quiz modal and the button are
   always styled, because they're the star of the show.
   ============================================================ */

/* ---------- the button ---------- */
.glam-btn {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 60;
  max-width: calc(100vw - 36px);
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: #f6e27a;
  background: #0d0b08;
  border: 1px solid #a5772f;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  animation: glamPulse 2.8s ease-in-out infinite;
  transition: transform 0.2s ease;
}
.glam-btn:hover { transform: translateY(-2px) scale(1.03); }
.glam-btn.is-on { animation: none; background: var(--bg-alt); color: var(--ink); border-color: var(--line); }
@keyframes glamPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 0 rgba(212,175,55,.5); }
  50%      { box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 10px rgba(212,175,55,0); }
}

/* ---------- the quiz ----------
   Uses the site's ORIGINAL look (white, near-black ink, brass + red
   accents, system fonts) with fixed colours, so it always matches the
   plain site no matter which glam theme is saved. */
body.glam-lock { overflow: hidden; }

.glam-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(23, 24, 26, 0.55);
}
.glam-overlay.is-open { display: flex; }

.glam-panel {
  position: relative;
  width: 100%; max-width: 520px;
  padding: 34px 28px 26px;
  text-align: center;
  color: #17181a;
  background: #ffffff;
  border: 1px solid rgba(23, 24, 26, 0.14);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(23, 24, 26, 0.28);
}

.glam-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: 0; color: #6b6b6b;
  font-size: 28px; line-height: 1; cursor: pointer;
}
.glam-close:hover { color: #b3272d; }

.glam-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 18px; }
.glam-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(23, 24, 26, 0.14); }
.glam-dots span.done { background: #a5772f; }
.glam-dots span.now { background: #b3272d; }

.glam-say { margin: 0 0 8px; font-style: italic; font-size: 0.88rem; color: #6b6b6b; min-height: 1.3em; }
.glam-eyebrow { margin: 0; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #a5772f; }
.glam-q { margin: 0 0 6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: #17181a; }
.glam-sub { margin: 0 0 22px; color: #6b6b6b; font-size: 0.95rem; }

.glam-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.glam-options.three { grid-template-columns: 1fr; }
@media (max-width: 460px) { .glam-options { grid-template-columns: 1fr; } }

.glam-opt {
  padding: 14px 12px;
  font: inherit; font-size: 0.95rem; color: #17181a;
  background: #f7f6f2;
  border: 1px solid rgba(23, 24, 26, 0.14);
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, border-color .2s ease;
}
.glam-opt:hover, .glam-opt:focus-visible { background: #ffffff; border-color: #17181a; transform: translateY(-2px); outline: none; }

.glam-go { width: 100%; margin-top: 6px; font-weight: 700; color: #fff; background: #17181a; border-color: #17181a; }
.glam-go:hover { background: #b3272d; border-color: #b3272d; }
.glam-go:focus-visible { outline: 2px solid #a5772f; outline-offset: 2px; }
.glam-link { display: block; margin: 14px auto 0; background: none; border: 0; color: #6b6b6b; font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.glam-link:hover { color: #b3272d; }
.glam-result { font-size: 2rem; }

/* the "Others" page: blank, white, loading, judgemental */
.glam-overlay.is-blank { background: #fff; backdrop-filter: none; align-items: flex-start; }
.glam-overlay.is-blank .glam-panel { background: none; border: 0; box-shadow: none; color: #17181a; max-width: 640px; padding-top: 24px; }
.glam-overlay.is-blank .glam-close { color: #999; }
.glam-blank-choices { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 15vh; }
.glam-opt.light { color: #17181a; background: #f4f4f2; border: 1px solid #ccc; min-width: 110px; }
.glam-opt.light:hover, .glam-opt.light:focus-visible { background: #e9e9e6; border-color: #17181a; }
.glam-loading-title { margin: 14px 0 10px; font-size: 1.1rem; color: #555; }
.glam-loading-msg { margin: 18px 0 0; color: #17181a; font-size: 1.05rem; }
.glam-loading-fine { margin: 8px 0 0; color: #888; font-size: .85rem; font-style: italic; }
.glam-spinner { width: 42px; height: 42px; margin: 0 auto; border: 4px solid #e4e4e0; border-top-color: #17181a; border-radius: 50%; animation: glamSpin 1s linear infinite; }
.glam-bar { height: 6px; max-width: 320px; margin: 0 auto; background: #e9e9e6; border-radius: 4px; overflow: hidden; }
.glam-bar span { display: block; height: 100%; width: 0; background: #17181a; animation: glamCrawl 9s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes glamSpin { to { transform: rotate(360deg); } }
@keyframes glamCrawl { to { width: 99%; } }  /* stops at 99%. As is tradition. */

/* ---------- toast + sparkles ---------- */
.glam-toast {
  position: fixed; left: 50%; bottom: 76px; z-index: 120;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 36px);
  padding: 10px 18px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 13px; text-align: center;
  color: #f6e27a; background: #0d0b08; border: 1px solid #a5772f;
  transition: opacity .3s ease, transform .3s ease;
}
.glam-toast.show { opacity: 1; transform: translate(-50%, 0); }

.glam-spark {
  position: fixed; z-index: 90; pointer-events: none;
  background: var(--spark, #f6e27a);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 4px var(--spark, #f6e27a));
  transform: translate(-50%, -50%);
  animation: glamSpark .9s ease-out forwards;
}
@keyframes glamSpark {
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2) rotate(180deg); opacity: 0; }
}

/* ============================================================
   THE THEMES
   ============================================================ */

html[data-glam] {
  --nav-bg: color-mix(in srgb, var(--bg) 88%, transparent);
  --btn-ink: #fff;
  --heading-font: "Didot", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
}

html[data-glam="gold"] {
  --bg: #0b0a08; --bg-alt: #16130d; --ink: #f4ead2; --muted: #b6a98a;
  --line: rgba(212,175,55,.3); --line-soft: rgba(212,175,55,.14);
  --red: #d4af37; --brass: #f0cf6b; --navy: #050403; --smoke: rgba(212,175,55,.1);
  --spark: #f6d776; --btn-ink: #1a1306;
  --glam-grad: linear-gradient(110deg,#f6e27a 0%,#d4af37 35%,#a57c1b 55%,#f6e27a 100%);
}
html[data-glam="rose"] {
  --bg: #fff6f6; --bg-alt: #fde8ea; --ink: #3b1f26; --muted: #8a5e66;
  --line: rgba(183,110,121,.35); --line-soft: rgba(183,110,121,.16);
  --red: #b76e79; --brass: #b76e79; --navy: #5a2a35; --smoke: rgba(183,110,121,.1);
  --spark: #e8a0ab;
  --glam-grad: linear-gradient(110deg,#c9818d 0%,#a8556a 40%,#7d3347 60%,#c9818d 100%);
}
html[data-glam="disco"] {
  --bg: #12001f; --bg-alt: #1f0733; --ink: #fdf2ff; --muted: #c9a9dd;
  --line: rgba(255,47,185,.4); --line-soft: rgba(255,47,185,.18);
  --red: #ff2fb9; --brass: #2ff3ff; --navy: #0a0016; --smoke: rgba(47,243,255,.1);
  --spark: #2ff3ff;
  --glam-grad: linear-gradient(110deg,#ff2fb9,#ffd700,#2ff3ff,#ff2fb9);
}
html[data-glam="emerald"] {
  --bg: #04130d; --bg-alt: #0b2218; --ink: #e6f5ec; --muted: #8fb5a0;
  --line: rgba(46,204,143,.3); --line-soft: rgba(46,204,143,.14);
  --red: #2ecc8f; --brass: #d9c27a; --navy: #020a07; --smoke: rgba(46,204,143,.1);
  --spark: #7dffc6; --btn-ink: #03150e;
  --glam-grad: linear-gradient(110deg,#7dffc6 0%,#2ecc8f 35%,#d9c27a 70%,#7dffc6 100%);
}
html[data-glam="sunset"] {
  --bg: #fff3e6; --bg-alt: #ffe2cc; --ink: #3a1620; --muted: #84504f;
  --line: rgba(232,81,42,.3); --line-soft: rgba(232,81,42,.15);
  --red: #e8512a; --brass: #c2410c; --navy: #3a1030; --smoke: rgba(232,81,42,.1);
  --spark: #ff9a3c;
  --glam-grad: linear-gradient(110deg,#e8631a 0%,#e0245e 45%,#6a1fd6 75%,#e8631a 100%);
}

/* ---- shared glam treatment ---- */
html[data-glam] body { background: var(--bg); transition: background .5s ease; }
html[data-glam="disco"] body { background: radial-gradient(120% 80% at 50% 0%, #3a0a5c 0%, #12001f 60%) fixed; }
html[data-glam="gold"] body { background: radial-gradient(100% 70% at 50% 0%, #1d1608 0%, #0b0a08 65%) fixed; }
html[data-glam="sunset"] body { background: linear-gradient(180deg, #ffe9d2 0%, #ffd2c2 55%, #f7c6e0 100%) fixed; }
html[data-glam="rose"] body { background: linear-gradient(180deg, #fff6f6 0%, #fde1e4 100%) fixed; }
html[data-glam="emerald"] body { background: radial-gradient(100% 70% at 50% 0%, #0c2c1f 0%, #04130d 65%) fixed; }

html[data-glam] .site-nav { background: var(--nav-bg); }

html[data-glam] h1,
html[data-glam] h2 {
  font-family: var(--heading-font);
  font-weight: 700;
  background: var(--glam-grad);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: glamShine 7s linear infinite;
}
html[data-glam] h3, html[data-glam] h4, html[data-glam] .card-title { font-family: var(--heading-font); }
@keyframes glamShine { to { background-position: -220% 0; } }

html[data-glam] .brand span { color: var(--red); text-shadow: 0 0 10px var(--red); }

html[data-glam] .btn {
  background: var(--glam-grad);
  background-size: 220% 100%;
  color: var(--btn-ink);
  font-weight: 700;
  border: 0;
  animation: glamShine 6s linear infinite;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--red) 40%, transparent);
}
html[data-glam] .btn:hover { filter: brightness(1.12); background-color: transparent; }
html[data-glam] .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--red); animation: none; box-shadow: none; }

html[data-glam] .playing-card,
html[data-glam] .project-card,
html[data-glam] .review-card,
html[data-glam] .service-card,
html[data-glam] .form-card {
  background: var(--bg-alt);
  border: 1px solid transparent;
  background-image: linear-gradient(var(--bg-alt), var(--bg-alt)), var(--glam-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
html[data-glam] .playing-card:hover { box-shadow: 0 20px 40px color-mix(in srgb, var(--red) 35%, transparent); }

html[data-glam] .capability-tags span,
html[data-glam] .tag-cloud span,
html[data-glam] .stack-tags span { border-color: var(--line); color: var(--brass); }

html[data-glam] .ember { background: var(--red); box-shadow: 0 0 14px 4px var(--red); }
html[data-glam] .cursor-blink { background: var(--red); }

/* The page's one-line editorial: heavy sections stay dramatic */
html[data-glam] .biz-hero,
html[data-glam] .cta-band { background-image: radial-gradient(90% 120% at 80% 0%, color-mix(in srgb, var(--red) 30%, transparent), transparent 60%); }

/* "max" glamour: ambient glitter drifting over everything */
html[data-glam-fx="max"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 5; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 20%, var(--spark), transparent),
    radial-gradient(2px 2px at 78% 35%, var(--spark), transparent),
    radial-gradient(3px 3px at 40% 70%, var(--spark), transparent),
    radial-gradient(2px 2px at 90% 85%, var(--spark), transparent),
    radial-gradient(2px 2px at 25% 90%, var(--spark), transparent),
    radial-gradient(3px 3px at 62% 12%, var(--spark), transparent);
  background-size: 420px 420px;
  animation: glamGlitter 14s linear infinite;
  opacity: .7;
}
@keyframes glamGlitter { from { background-position: 0 0; } to { background-position: 420px 420px; } }

@media (prefers-reduced-motion: reduce) {
  html[data-glam] h1, html[data-glam] h2, html[data-glam] .btn,
  html[data-glam-fx="max"] body::after, .glam-btn { animation: none; }
}

/* quiz result heading previews its own theme (readable on white) */
.glam-result[data-preview="gold"]    { color: #a5772f; }
.glam-result[data-preview="rose"]    { color: #a8556a; }
.glam-result[data-preview="disco"]   { color: #d4149a; }
.glam-result[data-preview="emerald"] { color: #1f9d6b; }
.glam-result[data-preview="sunset"]  { color: #e8512a; }

/* ---------- Easter egg: the 2000-year mark ---------- */
.glam-opt:disabled, .glam-opt.light:disabled { opacity: .4; cursor: not-allowed; transform: none; background: #eceae4; border-color: rgba(23,24,26,.14); }

.glam-overlay.is-coming { background: #0a0e2a; overflow-y: auto; align-items: flex-start; }
.glam-overlay.is-coming .glam-panel { color: #fffbe8; max-width: 560px; margin: 0 auto; }
.glam-overlay.is-coming .glam-close { color: #d9d4c0; }
.glam-coming-choices { margin-bottom: 14px; }

/* the sky sits in its own dark box so the figure is always clearly visible */
.glam-scene {
  position: relative; height: 340px; margin: 0 auto;
  overflow: hidden; border-radius: 10px;
  background: linear-gradient(180deg, #0a0e2a 0%, #243275 62%, #5a6cb8 100%);
  border: 1px solid rgba(255,240,170,.35);
}
.glam-rays {
  position: absolute; left: 50%; top: 90px; width: 560px; height: 560px; margin-left: -280px; margin-top: -150px;
  background: repeating-conic-gradient(from 0deg, rgba(255,240,170,.34) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, transparent 85%);
          mask-image: radial-gradient(circle closest-side, #000 0%, transparent 85%);
  animation: glamRays 40s linear infinite;
}
@keyframes glamRays { to { transform: rotate(360deg); } }

.glam-cloud { position: absolute; top: 4px; height: 40px; border-radius: 40px; background: rgba(255,255,255,.92); }
.glam-cloud::before, .glam-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.glam-cloud::before { width: 50px; height: 50px; left: 16px; top: -24px; }
.glam-cloud::after  { width: 38px; height: 38px; left: 58px; top: -14px; }
.glam-cloud.c1 { left: 4%;  width: 120px; animation: glamPartL 5s ease-in forwards; }
.glam-cloud.c2 { right: 4%; width: 140px; top: 14px; animation: glamPartR 5s ease-in forwards; }
.glam-cloud.c3 { left: 36%; width: 110px; top: -8px; animation: glamPartL 6s ease-in forwards; }
@keyframes glamPartL { to { transform: translateX(-170px); opacity: 0; } }
@keyframes glamPartR { to { transform: translateX(170px); opacity: 0; } }

.glam-figure {
  position: absolute; left: 50%; top: 0; width: 140px; margin-left: -70px;
  filter: drop-shadow(0 0 10px rgba(255,240,170,.95)) drop-shadow(0 0 3px #000);
  animation: glamDescend 7s cubic-bezier(.3,.1,.25,1) forwards;
}
.glam-figure svg { display: block; }
@keyframes glamDescend { from { transform: translateY(-240px); } to { transform: translateY(112px); } }

.glam-bubble {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  width: min(92%, 400px); box-sizing: border-box; text-align: center;
  padding: 10px 16px; border-radius: 14px;
  background: #fff; color: #17181a; font-size: .92rem; font-weight: 600; line-height: 1.35;
  animation: glamPop .6s cubic-bezier(.3,1.6,.5,1) 7.2s both;
}
.glam-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px;
  border: 8px solid transparent; border-bottom: 0; border-top-color: #fff;
}

/* sitcom-style vanity card: black, plain, a bit too honest */
.glam-vanity {
  margin-top: 14px; padding: 18px 20px; text-align: left;
  background: #000; color: #f1f1f1; border: 1px solid #2a2a2a; border-radius: 6px;
  font-family: Georgia, "Times New Roman", serif; font-size: .92rem; line-height: 1.55;
  animation: glamFadeIn 1.2s ease 8.4s both;
}
.glam-vanity p { margin: 0 0 10px; }
.glam-vanity p:first-child { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #9a9a9a; }
.glam-vanity .glam-vanity-sign { margin: 14px 0 0; text-align: right; font-size: .78rem; letter-spacing: .06em; color: #bdbdbd; }
@keyframes glamFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .glam-rays, .glam-cloud, .glam-figure, .glam-bubble, .glam-vanity { animation: none; }
  .glam-figure { transform: translateY(112px); }
  .glam-cloud { opacity: 0; }
}

@keyframes glamPop { from { opacity: 0; transform: translateX(-50%) scale(.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }

/* phones: the speech bubble wraps to 4 lines, so give the halo more room */
@media (max-width: 460px) {
  .glam-scene { height: 360px; }
  @keyframes glamDescend { from { transform: translateY(-240px); } to { transform: translateY(132px); } }
}
@media (max-width: 460px) and (prefers-reduced-motion: reduce) {
  .glam-figure { transform: translateY(132px); }
}