/* =====================================================================
   K.V.N. Webdesign — "Worlds" design switcher
   One site, seven fully transformed aesthetics.
   The base site is entirely CSS-variable driven, so re-declaring the
   tokens under html[data-world="…"] retextures the whole page at once.
   Everything below layers world-specific set pieces on top of that.
   ===================================================================== */

/* smooth cross-fade whenever the world changes */
html[data-world] body,
html[data-world] .cap,
html[data-world] .device,
html[data-world] header,
html[data-world] .marquee,
html[data-world] .btn,
html[data-world] .eyebrow,
html[data-world] .quiz-shell,
html[data-world] .code-demo{
  transition: background .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease;
}

/* make <main> a flex column so worlds can reorder sections with `order` */
main#top{ display:flex; flex-direction:column; }

/* ---------------------------------------------------------------------
   Heading clipping fix — the decorative world fonts (Rye, Pacifico,
   Orbitron, Cormorant, Playfair…) carry taller ascenders/descenders and
   the italic gradient words rendered with background-clip:text get their
   tails shaved by the tight 1.02 line-height. Give the display headings a
   touch more line-height and bottom breathing room in every world.
   --------------------------------------------------------------------- */
html[data-world] .hero h1{ line-height:1.1; padding-bottom:.12em; }
html[data-world] footer#contact .contact-row h2{ line-height:1.14; padding-bottom:.14em; }
html[data-world] .hero h1 .grad,
html[data-world] footer#contact .contact-row h2 .grad{
  display:inline-block; padding:0 .14em .14em; margin:0 -.14em -.14em;
}
/* the retro script face has a long descender on the italic "f" */
html[data-world="american"] .hero h1{ line-height:1.18; }
html[data-world="american"] .hero h1 .grad{ padding:0 .2em .38em; margin:0 -.2em -.38em; }
html[data-world="american"] footer#contact .contact-row h2{ line-height:1.22; padding-bottom:.3em; overflow:visible; }
html[data-world="american"] footer#contact .contact-row h2 .grad{ padding:0 .2em .4em; margin:0 -.2em -.4em; }

/* keep the last lines of the page (privacy link, copyright) clear of the
   fixed world switcher */
body:has(.world-switcher){ padding-bottom:var(--ws-clearance, 150px); }

/* worlds whose own scenery replaces the dot-and-line particle field */
html[data-world="western"] #particles,
html[data-world="nature"] #particles,
html[data-world="oldmoney"] #particles{ display:none !important; }

/* ---------------------------------------------------------------------
   Variable-driven component re-skins (apply to every world, incl. signature).
   Written with color-mix off the theme tokens so they adapt automatically
   and keep the original dark "signature" look virtually identical.
   --------------------------------------------------------------------- */
header{ background:color-mix(in srgb, var(--paper) 68%, transparent) !important; }
.marquee{ background:color-mix(in srgb, var(--paper) 55%, transparent) !important; }
.cap{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--paper-2) 90%, transparent),
    color-mix(in srgb, var(--paper) 72%, transparent)) !important;
}
.device{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--paper-2) 94%, transparent),
    color-mix(in srgb, var(--paper) 82%, transparent)) !important;
}
.lang-menu{ background:color-mix(in srgb, var(--paper) 94%, transparent) !important; }
.code-demo{
  background:color-mix(in srgb, var(--ink) 88%, var(--paper)) !important;
  color:color-mix(in srgb, var(--paper) 90%, var(--ink)) !important;
  border-color:var(--line) !important;
}

/* =====================================================================
   Decorative fixed layers — one per world, toggled purely by CSS.
   ===================================================================== */
#world-fx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#world-fx .wfx{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
html[data-world="western"]  #world-fx .wfx-western,
html[data-world="miami"]    #world-fx .wfx-miami,
html[data-world="american"] #world-fx .wfx-american,
html[data-world="nature"]   #world-fx .wfx-nature,
html[data-world="modern"]   #world-fx .wfx-modern,
html[data-world="oldmoney"] #world-fx .wfx-oldmoney{ opacity:1; }

/* =====================================================================
   1. SIGNATURE — original theme, no overrides needed.
   ===================================================================== */

/* =====================================================================
   2. WESTERN — sun-baked parchment, wood, branding-iron rust, WANTED poster
   ===================================================================== */
html[data-world="western"]{
  --paper:#cdb488; --paper-2:#ddc79b; --paper-3:#ecdab2;
  --ink:#3a2412; --slate:#6d4a2a; --slate-2:#8a6a45;
  --cyan:#9c3b1b; --violet:#c8792e; --magenta:#e0a94b;
  --accent:#9c3b1b;
  --line:rgba(70,40,15,0.22); --line-2:rgba(70,40,15,0.40);
  --glass:rgba(240,224,190,0.72);
  --serif:'Rye','Fraunces',Georgia,serif;
  --sans:'Special Elite','Inter',monospace;
  --mono:'Special Elite',monospace;
  --grad:linear-gradient(120deg,#9c3b1b,#c8792e 55%,#e0a94b);
}
.wfx-western{ background:linear-gradient(180deg,#d8c096,#cdb488); }
.wfx-western::before{ display:none; }
/* WANTED ribbon injected at very top of the page */
#wanted-ribbon{ display:none; }
html[data-world="western"] #wanted-ribbon{
  display:flex; align-items:center; justify-content:center; gap:14px;
  text-decoration:none; color:#3a2412; text-align:center;
  padding:10px 18px; font-family:'Rye',serif; letter-spacing:.04em;
  background:repeating-linear-gradient(45deg,#c8792e 0 14px,#b26a26 14px 28px);
  border-bottom:3px solid #3a2412; box-shadow:0 6px 18px rgba(0,0,0,.25);
  position:relative; z-index:41;
}
#wanted-ribbon b{ font-size:1.05rem; }
#wanted-ribbon .reward{ font-family:'Special Elite',monospace; text-transform:uppercase; font-size:.7rem; border:2px dashed #3a2412; padding:3px 8px; border-radius:4px; }
/* reorder: the "start a project" quiz jumps to the very top as a WANTED poster */
html[data-world="western"] #quiz{ order:-2; }
html[data-world="western"] .hero{ order:-1; }
html[data-world="western"] .quiz-shell{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(120,70,30,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(90,52,20,.04) 0 2px, transparent 2px 6px),
    #ecdab2 !important;
  border:3px solid #6d4a2a !important; border-radius:6px !important;
  box-shadow:0 0 0 3px #ecdab2, 0 0 0 6px #6d4a2a, 0 24px 60px rgba(0,0,0,.3);
}
html[data-world="western"] #quiz-heading::before{
  content:'★ WANTED ★'; display:block; font-family:'Rye',serif; font-size:1.4rem;
  letter-spacing:.12em; color:#7a2e12; margin-bottom:6px;
}
html[data-world="western"] .btn.primary,
html[data-world="western"] .quiz-btn:not(.ghost),
html[data-world="western"] .nav-cta{ border:2px solid #3a2412 !important; }
/* the four service cards get the same framed "WANTED poster" treatment as the quiz */
html[data-world="western"] .svc{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(120,70,30,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(90,52,20,.04) 0 2px, transparent 2px 6px),
    #ecdab2 !important;
  border:3px solid #6d4a2a !important; border-radius:6px !important;
  box-shadow:0 0 0 3px #ecdab2, 0 0 0 6px #6d4a2a, 0 18px 44px rgba(0,0,0,.28) !important;
}
html[data-world="western"] .svc .ic{ color:#7a2e12 !important; border-color:#6d4a2a !important; }
html[data-world="western"] .svc h3{ color:#3a2412 !important; }
/* out-specificity the global white override at index.html:308 so text stays readable on parchment */
html[data-world="western"] section#services .svc-grid:nth-of-type(2) .svc p{ color:#5b3a1e !important; }
/* kill the leftover blue/purple glow that leaks in from the base theme */
html[data-world="western"] .about-portrait::before{ background:none !important; }

/* =====================================================================
   3. MIAMI RETRO — synthwave sunset, neon grid, retro arcade minigame
   ===================================================================== */
html[data-world="miami"]{
  --paper:#160a2b; --paper-2:#1f0f3f; --paper-3:#2a1556;
  --ink:#fdeeff; --slate:#d7b3ff; --slate-2:#a07fd6;
  --cyan:#22e5d6; --violet:#8a5bff; --magenta:#ff2d8a;
  --accent:#ff2d8a;
  --line:rgba(255,90,200,0.24); --line-2:rgba(120,220,255,0.38);
  --glass:rgba(40,15,80,0.5);
  --serif:'Orbitron','Inter',sans-serif;
  --sans:'Inter',sans-serif;
  --mono:'Press Start 2P','JetBrains Mono',monospace;
  --grad:linear-gradient(120deg,#ff2d8a,#ff8a3d 40%,#22e5d6 92%);
}
html[data-world="miami"] .eyebrow,
html[data-world="miami"] .cap-num,
html[data-world="miami"] .marquee-item{ font-size:.6rem; }
html[data-world="miami"] h1,
html[data-world="miami"] h2{ text-shadow:0 0 18px rgba(255,45,138,.5),0 0 40px rgba(34,229,214,.25); }
.wfx-miami{
  background:
    radial-gradient(60% 42% at 50% 34%, #ff9a3d 0 22%, #ff2d8a 40%, transparent 62%),
    linear-gradient(180deg,#2a0f4d 0%, #46145f 40%, #7a1e5a 60%, #160a2b 100%);
}
.wfx-miami::after{ /* the sun's scan-line slats */
  content:''; position:absolute; left:50%; top:34%; width:min(60vw,520px); height:min(40vh,320px);
  transform:translate(-50%,-38%);
  background:repeating-linear-gradient(180deg, transparent 0 14px, #160a2b 14px 22px);
  -webkit-mask:radial-gradient(circle at 50% 30%, #000 60%, transparent 62%);
  mask:radial-gradient(circle at 50% 30%, #000 60%, transparent 62%);
}
.wfx-miami .grid-floor{ /* perspective neon grid rushing toward the horizon */
  position:absolute; left:-25%; right:-25%; bottom:-10%; height:55vh;
  background-image:
    linear-gradient(rgba(34,229,214,.55) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,45,138,.45) 2px, transparent 2px);
  background-size:100% 34px, 44px 100%;
  transform:perspective(340px) rotateX(74deg);
  transform-origin:bottom center;
  animation:miamiGrid 1.6s linear infinite;
  -webkit-mask:linear-gradient(180deg, transparent, #000 42%); mask:linear-gradient(180deg, transparent, #000 42%);
}
@keyframes miamiGrid{ 0%{ background-position:0 0,0 0; } 100%{ background-position:0 34px,0 0; } }

/* retro arcade minigame — only present in Miami world */
#miami-game{ display:none; }
html[data-world="miami"] #miami-game{ display:block; }
#miami-game .mg-shell{
  border:2px solid var(--line-2); border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, rgba(20,8,48,.9), rgba(12,5,30,.92));
  box-shadow:0 0 0 1px rgba(255,45,138,.25), 0 30px 80px rgba(0,0,0,.5);
}
#miami-game .mg-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; font-family:'Press Start 2P',monospace; font-size:.6rem; color:#22e5d6;
  border-bottom:2px solid var(--line-2); background:rgba(255,45,138,.08); }
#miami-game canvas{ display:block; width:100%; height:auto; background:#0d0522; touch-action:none; }
#miami-game .mg-foot{ padding:10px 16px; font-family:'Press Start 2P',monospace; font-size:.5rem;
  color:var(--slate); text-align:center; }
#miami-game .mg-btn{ font-family:'Press Start 2P',monospace; font-size:.55rem; color:#160a2b;
  background:var(--grad); border:0; padding:8px 12px; border-radius:8px; cursor:pointer; }

/* =====================================================================
   4. AMERICAN RETRO — '60s diner: Coca red, cream, chrome, checkerboard
   ===================================================================== */
html[data-world="american"]{
  --paper:#0b0512; --paper-2:#150a20; --paper-3:#1e0f2e;
  --ink:#fff3e2; --slate:#d9c6ae; --slate-2:#b39a82;
  --cyan:#ff2d55; --violet:#ff6b3d; --magenta:#1fd9c8;
  --accent:#ff2d55;
  --line:rgba(255,220,180,0.16); --line-2:rgba(255,220,180,0.30);
  --glass:rgba(20,10,30,0.72);
  --serif:'Pacifico','Fraunces',cursive;
  --sans:'Poppins','Inter',sans-serif;
  --mono:'Poppins',sans-serif;
  --grad:linear-gradient(120deg,#ff2d55,#ff6b3d 45%,#1fd9c8);
}
.wfx-american{
  background:
    radial-gradient(90% 60% at 22% 26%, rgba(96,78,150,.32), transparent 60%),
    radial-gradient(80% 55% at 80% 22%, rgba(66,92,150,.30), transparent 60%),
    radial-gradient(120% 90% at 50% 4%, #223052 0%, #141d33 46%, transparent 74%),
    linear-gradient(180deg,#0b1226 0%,#0c1430 55%,#070a16 100%);
}
.wfx-american .am-stars{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 16%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 26% 40%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 44% 12%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.1px 1.1px at 62% 34%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 40%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.1px 1.1px at 36% 62%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 70% 60%, rgba(255,255,255,.6), transparent 60%);
}
.wfx-american::after{ /* checkerboard diner floor */
  content:''; position:absolute; left:0; right:0; bottom:0; height:30vh;
  background:
    conic-gradient(#0e1730 90deg, #0a1122 0 180deg, #0e1730 0 270deg, #0a1122 0) 0 0/58px 58px;
  transform:perspective(320px) rotateX(68deg); transform-origin:bottom;
  -webkit-mask:linear-gradient(180deg, transparent, #000 72%); mask:linear-gradient(180deg, transparent, #000 72%);
  opacity:.92;
}
.wfx-american::before{ /* neon reflected up off the wet diner floor */
  content:''; position:absolute; left:0; right:0; bottom:0; height:40vh; z-index:1;
  background:linear-gradient(180deg, transparent 28%, rgba(255,140,44,.24) 56%, rgba(255,44,74,.30) 74%, rgba(44,132,255,.26) 92%);
  -webkit-mask:linear-gradient(180deg,transparent,#000); mask:linear-gradient(180deg,transparent,#000);
  opacity:.6; mix-blend-mode:screen;
}
/* chrome starburst "OPEN 24 HRS" badge, floats top-right on desktop */
#retro-badge{ display:none; }
html[data-world="american"] #retro-badge{
  display:grid; place-items:center; position:fixed; top:88px; right:24px; z-index:39;
  width:118px; height:118px; color:#fff; text-align:center; pointer-events:none;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.72rem; line-height:1.15;
  background:
    conic-gradient(from 0deg, #c8102e 0 10deg, #e23744 10deg 20deg);
  clip-path:polygon(50% 0,61% 20%,83% 12%,79% 35%,100% 43%,82% 57%,94% 79%,68% 76%,58% 100%,44% 78%,20% 84%,26% 60%,3% 52%,23% 39%,13% 16%,38% 22%);
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
@media (max-width:760px){ html[data-world="american"] #retro-badge{ display:none; } }
html[data-world="american"] .btn.primary{ border-radius:999px !important; box-shadow:0 6px 0 #7a0a1c !important; }
html[data-world="american"] h1,
html[data-world="american"] h2,
html[data-world="american"] .hero-stat .num{ color:var(--accent) !important; }
/* bright diner panels — drop the inherited dark glass for cream + chrome trim */
html[data-world="american"] .quiz-shell{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,45,85,.16), transparent 62%),
    linear-gradient(180deg, rgba(24,12,34,.92), rgba(14,7,22,.94)) !important;
  border:2px solid color-mix(in srgb,var(--accent) 60%, transparent) !important;
  border-radius:22px !important;
  box-shadow:0 0 0 1px rgba(255,45,85,.25), 0 0 42px rgba(255,45,85,.18), 0 22px 54px rgba(0,0,0,.55) !important;
}
html[data-world="american"] .svc{
  background:linear-gradient(180deg,#ffffff,#f8f1e2) !important;
  border:2px solid var(--accent) !important; border-radius:18px !important;
  box-shadow:0 7px 0 rgba(200,16,46,.18), 0 14px 30px rgba(0,0,0,.12) !important;
}
html[data-world="american"] .svc .ic{ color:var(--accent) !important; border-color:rgba(200,16,46,.35) !important; }
html[data-world="american"] .svc h3{ color:var(--accent) !important; }
html[data-world="american"] section#services .svc-grid:nth-of-type(2) .svc p{ color:#5c5347 !important; }

/* big flashing motel-style neon sign — "KVN webdesign" in the classic styling */
.wfx-american .am-sign{
  position:absolute; left:50%; top:4%; transform:translateX(-50%);
  width:min(88vw,430px); display:flex; flex-direction:column; align-items:center;
  gap:14px; user-select:none; z-index:0;
}
.am-sign .am-star{ position:absolute; top:-10px; right:-4px; width:60px; height:60px; }
.am-sign .am-star svg{ width:100%; height:100%; }
.am-sign .am-starp{ fill:#ffd23f; filter:drop-shadow(0 0 6px #ffb01a) drop-shadow(0 0 16px #ff8a1a); animation:neonBuzzA 2.6s infinite; }
.am-sign .am-welcome{
  font-family:'Pacifico',cursive; font-size:clamp(1.4rem,5vw,2.2rem); color:#ffe07a;
  padding:8px 42px; border-radius:50%/64%;
  background:radial-gradient(circle at 50% 45%,#5c1616,#360d0d);
  border:2px solid #ffcf5a;
  text-shadow:0 0 6px #fff,0 0 14px #ffcf3a,0 0 28px #ff9b1a;
  box-shadow:0 0 14px rgba(255,180,60,.5), inset 0 0 22px rgba(0,0,0,.55);
  animation:neonBuzzA 3.4s infinite;
}
.am-sign .am-arrow{ width:100%; margin:-2px 0; }
.am-sign .am-arrow svg{ display:block; width:100%; height:auto; overflow:visible; }
.am-sign .am-arrow-body{ fill:#360d0d; stroke:#ff6a2a; stroke-width:3;
  filter:drop-shadow(0 0 8px rgba(255,120,40,.6)); }
.am-sign .am-bulb{ fill:#ffcf5a; filter:drop-shadow(0 0 3px #ff9b1a); animation:bulbChase 1.1s steps(1) infinite; }
@keyframes bulbChase{ 0%,100%{ opacity:1; } 50%{ opacity:.2; } }
.am-sign .am-board{ position:relative; width:90%; padding:20px 16px 24px; text-align:center;
  background:linear-gradient(180deg,#3a0f0f,#230909);
  border-radius:8px; box-shadow:inset 0 0 0 3px rgba(255,120,60,.4), 0 0 22px rgba(0,0,0,.6); }
.am-sign .am-kvn{
  font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:.14em;
  font-size:clamp(2.4rem,11vw,4.4rem); line-height:.9; color:#fff2f3;
  -webkit-text-stroke:1.5px #ff5b6e;
  text-shadow:0 0 6px #fff,0 0 16px var(--accent),0 0 34px var(--accent),0 0 66px color-mix(in srgb,var(--accent) 70%,transparent);
  animation:neonFlickerA 5s infinite steps(1);
}
.am-sign .am-web{
  font-family:'Pacifico',cursive; margin-top:.04em; font-size:clamp(1.4rem,6vw,2.6rem); color:#ffd0e6;
  text-shadow:0 0 5px #fff,0 0 14px #ff6bd0,0 0 30px #ff2da0,0 0 56px color-mix(in srgb,#ff2da0 70%,transparent);
  animation:neonBuzzA 3s infinite;
}
.am-sign .am-open{
  font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:.08em; font-size:clamp(1.1rem,5vw,1.9rem);
  color:#e0202f; background:#e8d24a; padding:3px 26px; border-radius:4px;
  box-shadow:0 0 12px rgba(230,210,80,.55), inset 0 0 8px rgba(0,0,0,.15);
}
.am-sign .am-vac{
  font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:.16em; font-size:clamp(.66rem,3vw,.95rem);
  color:#9fd8ff; padding:6px 26px; border-radius:999px; border:2px solid #4aa8e0;
  background:linear-gradient(180deg,#0e2740,#0a1c30);
  text-shadow:0 0 6px #6fc4ff,0 0 16px #2a8fe0; box-shadow:0 0 12px rgba(60,150,230,.4);
}
.am-sign .am-free{
  font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:.2em; font-size:clamp(.66rem,3vw,.9rem);
  color:#2a2a2a; padding:6px 22px; border:2px solid #b23a2a; border-radius:4px;
  background:repeating-linear-gradient(90deg,#efe7d2 0 6px,#e2d8bf 6px 12px);
}
.am-sign .am-posts{ width:130px; height:16vh; margin-top:2px;
  background:
    linear-gradient(180deg,#4a3a5e,#2a2038) no-repeat 40px 0/12px 100%,
    linear-gradient(180deg,#4a3a5e,#2a2038) no-repeat 78px 0/12px 100%;
}
@media (max-width:700px){ .wfx-american .am-sign{ width:min(92vw,340px); } }
@keyframes neonFlickerA{
  0%,18%,20%,50%,52%,100%{ opacity:1; }
  19%,51%{ opacity:.42; }
  80%,82%{ opacity:.7; }
}
@keyframes neonBuzzA{
  0%,42%,47%,91%,100%{ opacity:1; } 44%{ opacity:.5; } 93%{ opacity:.72; }
}
@media (prefers-reduced-motion:reduce){
  .am-neon .am-neon-n1, .am-neon .am-neon-n2{ animation:none; }
}

/* "iconic design" gallery — real period photos that take on the theme colour */
#iconic-gallery{ display:none; }
html[data-world="american"] #iconic-gallery{ display:block; position:relative; z-index:1; padding:clamp(44px,7vw,92px) 0; }
#iconic-gallery .ig-head{ text-align:center; max-width:66ch; margin:0 auto 40px; }
#iconic-gallery .ig-head h2{
  font-family:var(--serif); font-weight:450; font-size:clamp(2rem,4.6vw,3rem); color:var(--accent);
  margin:14px 0 16px; text-shadow:0 0 20px color-mix(in srgb,var(--accent) 45%,transparent);
}
#iconic-gallery .ig-head p{ color:var(--slate); margin:0 auto; }
#iconic-gallery .ig-head em{ color:var(--ink); font-style:italic; }
#iconic-gallery .ig-collage{
  max-width:840px; margin:0 auto; border-radius:18px; overflow:hidden; position:relative;
  background:linear-gradient(180deg,#170b24,#0c0716);
  border:1px solid rgba(255,220,180,.14);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent), 0 24px 60px rgba(0,0,0,.6);
}
#iconic-gallery .ig-collage img{
  --ig-hue:224deg;
  width:100%; height:auto; display:block;
  filter:hue-rotate(var(--ig-hue)) saturate(1.18) contrast(1.03);
  transition:filter .4s ease;
}
@media (prefers-reduced-motion: reduce){ #iconic-gallery .ig-collage img{ transition:none; } }
@media (prefers-reduced-motion: reduce){ .am-sign .am-bulb, .am-sign .am-starp, .am-sign .am-kvn, .am-sign .am-web, .am-sign .am-welcome{ animation:none; } }

/* =====================================================================
   5. NATURE — damp pine forest, mossy greens, drifting embers, campfire glow
   ===================================================================== */
html[data-world="nature"]{
  --paper:#0f1a12; --paper-2:#152a1b; --paper-3:#1d3a26;
  --ink:#e9f2e4; --slate:#a9c4a2; --slate-2:#7f9c78;
  --cyan:#6bbf59; --violet:#3f8f5a; --magenta:#e08a3c;
  --accent:#6bbf59;
  --line:rgba(150,200,150,0.16); --line-2:rgba(150,200,150,0.30);
  --glass:rgba(20,40,28,0.55);
  --serif:'Fredericka the Great',Georgia,serif;
  --sans:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --grad:linear-gradient(120deg,#6bbf59,#3f8f5a 50%,#e0a94b);
}
/* rough, hand-inked headings for a woodsy, outdoorsy feel */
html[data-world="nature"] h1,
html[data-world="nature"] h2,
html[data-world="nature"] h3,
html[data-world="nature"] .eyebrow{ font-family:'Fredericka the Great',Georgia,serif !important; letter-spacing:.01em; }
/* real forest photograph backdrop — only the drifting fireflies remain on top */
.wfx-nature{
  background:
    linear-gradient(180deg, rgba(6,12,8,.22), rgba(6,12,8,.30)),
    url("/nature-forest.png") center center / cover no-repeat;
}
.wfx-nature canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* =====================================================================
   6. MODERN — clean, businesslike, premium pastels, generous whitespace
   ===================================================================== */
html[data-world="modern"]{
  --paper:#f6f6f4; --paper-2:#ffffff; --paper-3:#eef0f5;
  --ink:#14161a; --slate:#5f6672; --slate-2:#9aa1ad;
  --cyan:#6b7cff; --violet:#8f7cff; --magenta:#7fd1b9;
  --accent:#6b7cff;
  --line:rgba(20,25,40,0.10); --line-2:rgba(20,25,40,0.18);
  --glass:rgba(255,255,255,0.70);
  --serif:'Inter',-apple-system,sans-serif;
  --sans:'Inter',-apple-system,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --grad:linear-gradient(120deg,#6b7cff,#8f7cff 50%,#7fd1b9);
}
/* strip the heavy ambience for a calm, corporate feel */
html[data-world="modern"] #particles,
html[data-world="modern"] .aurora,
html[data-world="modern"] .grid-overlay,
html[data-world="modern"] .cursor-dot,
html[data-world="modern"] .cursor-ring{ display:none !important; }
html[data-world="modern"]{ cursor:auto; }
.wfx-modern{
  background:
    radial-gradient(40% 30% at 12% 8%, rgba(107,124,255,.12), transparent 60%),
    radial-gradient(42% 32% at 88% 22%, rgba(127,209,185,.14), transparent 60%),
    linear-gradient(180deg,#fbfbfa,#f6f6f4);
}
html[data-world="modern"] .cap,
html[data-world="modern"] .svc,
html[data-world="modern"] .device,
html[data-world="modern"] .quiz-shell{ box-shadow:0 12px 40px rgba(20,25,40,.06) !important; }
html[data-world="modern"] h1,
html[data-world="modern"] h2{ letter-spacing:-.03em; }
/* drop the inherited dark glass panel — go clean, light and airy to match the theme */
html[data-world="modern"] .quiz-shell{
  background:linear-gradient(180deg,#ffffff,#f6f6f4) !important;
  border:1px solid var(--line-2) !important;
}
html[data-world="modern"] .svc{
  background:#ffffff !important; border:1px solid var(--line) !important; border-radius:16px !important;
}
html[data-world="modern"] .svc .ic{ color:var(--accent) !important; border-color:var(--line-2) !important; }
html[data-world="modern"] .svc h3{ color:var(--ink) !important; }
html[data-world="modern"] section#services .svc-grid:nth-of-type(2) .svc p{ color:var(--slate) !important; }
html[data-world="modern"] .code-demo{
  background:#0f1117 !important; color:#e6e8ef !important;
}

/* =====================================================================
   7. OLD MONEY — heritage luxury: hunter green, gold, crest, herringbone
   ===================================================================== */
html[data-world="oldmoney"]{
  --paper:#0d1512; --paper-2:#122019; --paper-3:#182b20;
  --ink:#efe7d0; --slate:#bdb08f; --slate-2:#8f846a;
  --cyan:#c9a24a; --violet:#e8cf8a; --magenta:#9c7a2e;
  --accent:#c9a24a;
  --line:rgba(201,162,74,0.20); --line-2:rgba(201,162,74,0.36);
  --glass:rgba(20,32,25,0.55);
  --serif:'Playfair Display','Cormorant Garamond',Georgia,serif;
  --sans:'EB Garamond',Georgia,serif;
  --mono:'EB Garamond',serif;
  --grad:linear-gradient(120deg,#c9a24a,#e8cf8a 50%,#9c7a2e);
}
html[data-world="oldmoney"] h1,
html[data-world="oldmoney"] h2,
html[data-world="oldmoney"] h3{ font-family:'Playfair Display',Georgia,serif !important; font-weight:600; letter-spacing:.01em; }
.wfx-oldmoney{
  background:
    radial-gradient(90% 70% at 50% -12%, rgba(201,162,74,.12), transparent 60%),
    linear-gradient(180deg,#0f1813,#0a110d);
}
/* art-deco mansion panelling — repeating gold sunburst fans framed by deco chevrons */
.wfx-oldmoney::before{
  content:''; position:absolute; inset:0; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.1'%3E%3Cg%3E%3Cpath d='M120 120 V44'/%3E%3Cpath d='M120 120 L150 52'/%3E%3Cpath d='M120 120 L176 68'/%3E%3Cpath d='M120 120 L90 52'/%3E%3Cpath d='M120 120 L64 68'/%3E%3Cpath d='M120 44 A80 80 0 0 1 176 68' /%3E%3Cpath d='M120 44 A80 80 0 0 0 64 68'/%3E%3C/g%3E%3Cpath d='M120 120 L120 196 L60 236 M120 196 L180 236'/%3E%3Cpath d='M0 0 L40 40 M240 0 L200 40 M0 240 L40 200 M240 240 L200 200'/%3E%3Cpath d='M120 8 l14 20 h-28 z' fill='%23c9a24a' stroke='none'/%3E%3Crect x='30' y='30' width='180' height='180' /%3E%3C/g%3E%3C/svg%3E");
  background-size:180px 180px; background-position:center;
}
.wfx-oldmoney::after{ /* dark vignette for a candle-lit drawing-room mood */
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent 48%, rgba(0,0,0,.62));
}
/* engraved monogram crest watermark behind the hero */
#om-crest{ display:none; }
html[data-world="oldmoney"] #om-crest{
  display:block; position:fixed; top:120px; left:50%; transform:translateX(-50%);
  width:min(52vw,440px); aspect-ratio:1; z-index:0; pointer-events:none; opacity:.10;
  color:#c9a24a;
}
html[data-world="oldmoney"] .btn.primary,
html[data-world="oldmoney"] .quiz-btn:not(.ghost){ color:#0d1512 !important; }
html[data-world="oldmoney"] .eyebrow{ letter-spacing:.24em; }

/* =====================================================================
   THE SWITCHER — a slider with 7 named stops, fixed to the viewport
   ===================================================================== */
.world-switcher{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:200; width:min(760px, calc(100vw - 28px));
  padding:12px 16px 14px; border-radius:18px;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line-2);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  font-family:var(--sans);
  transition:transform .4s cubic-bezier(.16,.9,.3,1.2), opacity .3s ease;
}
.world-switcher.collapsed{ transform:translateX(-50%) translateY(calc(100% - 46px)); }
.ws-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.ws-title{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.ws-title .lab{ font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); }
.ws-title .cur{ font-family:var(--serif); font-size:1.05rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-collapse{ flex:none; width:30px; height:30px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--glass); color:var(--ink);
  display:grid; place-items:center; transition:.2s ease; }
.ws-collapse:hover{ border-color:var(--accent); }
.ws-collapse svg{ transition:transform .3s ease; }
.world-switcher.collapsed .ws-collapse svg{ transform:rotate(180deg); }

.ws-track{ position:relative; padding:0 6px; }
.ws-range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; outline:none; cursor:pointer;
  background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 70%, transparent), var(--accent)); }
.ws-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--grad); border:2px solid var(--paper); box-shadow:0 4px 14px rgba(0,0,0,.4); cursor:grab; }
.ws-range::-moz-range-thumb{ width:22px; height:22px; border-radius:50%;
  background:var(--accent); border:2px solid var(--paper); box-shadow:0 4px 14px rgba(0,0,0,.4); cursor:grab; }
.ws-range:active::-webkit-slider-thumb{ cursor:grabbing; }

.ws-stops{ display:flex; justify-content:space-between; gap:4px; margin-top:8px; overflow-x:auto; scrollbar-width:none; }
.ws-stops::-webkit-scrollbar{ display:none; }
.ws-stop{ flex:1 1 auto; min-width:60px; text-align:center; cursor:pointer;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.04em; line-height:1.2;
  color:var(--slate-2); background:none; border:0; padding:4px 2px; border-radius:8px;
  transition:color .2s ease, background .2s ease; }
.ws-stop:hover{ color:var(--ink); }
.ws-stop[aria-current="true"]{ color:var(--ink); background:color-mix(in srgb,var(--accent) 18%, transparent); }
.ws-stop .dot{ display:block; width:7px; height:7px; border-radius:50%; margin:0 auto 5px;
  background:var(--stopc,var(--accent)); box-shadow:0 0 8px var(--stopc,var(--accent)); opacity:.5; transition:.2s ease; }
.ws-stop[aria-current="true"] .dot{ opacity:1; transform:scale(1.35); }

@media (max-width:620px){
  .ws-stop{ min-width:52px; font-size:.52rem; }
  .ws-title .cur{ font-size:.95rem; }
}