/* ============================================================
   Q.M.P — SPACE PREVIEW THEME (additive layer)
   Original styles are untouched. This file only re-skins via
   CSS variables + decorative layers. Gold (#d4af37) stays the
   brand thread in every world.
   ============================================================ */

/* ---------- Per-world palettes & scenery ---------- */
html.world-mars         { --navy:#33150a; --navy-2:#57230f; --navy-deep:#1f0d06; --w-glow:#ff9a56; --w-img:url("space/mars.jpg"); }
html.world-nebula       { --navy:#1c0f3d; --navy-2:#2e1a5e; --navy-deep:#120826; --w-glow:#a58bff; --w-img:url("space/nebula.jpg"); }
html.world-station      { --navy:#0d2440; --navy-2:#173d66; --navy-deep:#081627; --w-glow:#6fc3ff; --w-img:url("space/station.jpg"); }
html.world-aurora       { --navy:#07301f; --navy-2:#0c4a30; --navy-deep:#04190f; --w-glow:#3fe0a8; --w-img:url("space/aurora.jpg"); }
html.world-asteroids    { --navy:#2b1e0c; --navy-2:#4a3413; --navy-deep:#1a1206; --w-glow:#ffb84d; --w-img:url("space/asteroids.jpg"); }
html.world-solar        { --navy:#3d0d12; --navy-2:#61161c; --navy-deep:#26060a; --w-glow:#ff7847; --w-img:url("space/solar.jpg"); }
html.world-constellation{ --navy:#131f4d; --navy-2:#21337a; --navy-deep:#0a1030; --w-glow:#8fb0ff; --w-img:url("space/constellation.jpg"); }
html.world-earth        { --navy:#0a2e3a; --navy-2:#11495c; --navy-deep:#06222b; --w-glow:#39d0c4; --w-img:url("space/earth.jpg"); }
html.world-earthrise    { --navy:#2a1e24; --navy-2:#45303a; --navy-deep:#191016; --w-glow:#ffc98a; --w-img:url("space/earthrise.jpg"); }
html.world-deepfield    { --navy:#0c1730; --navy-2:#16264d; --navy-deep:#05070f; --w-glow:#7f9cc9; --w-img:url("space/deepfield.jpg"); }
html.world-dock         { --navy:#0c2b2e; --navy-2:#17464c; --navy-deep:#071a1c; --w-glow:#4fd8c8; --w-img:url("space/dock.jpg"); }
html.world-hq           { --navy:#12283f; --navy-2:#1f4066; --navy-deep:#0b1727; --w-glow:#ffd98a; --w-img:url("space/hq.jpg"); }
html.world-satellite    { --navy:#1a1440; --navy-2:#2c2169; --navy-deep:#0d0a24; --w-glow:#59e0ff; --w-img:url("space/satellite.jpg"); }

/* Legal pages: deep-space starfield, content flipped to dark like the site's own dark scheme */
html.world-legal { --navy:#0d1f42; --navy-2:#12294f; --navy-deep:#050b1a; --w-glow:#8fb0ff; --w-img:none;
  --paper:#070d1f; --paper-2:#0b1526; --ink:#e8edf7; --ink-soft:#aebadd; --line:#26355c;
  --shadow:0 10px 30px rgba(0,0,0,.5); }
html.world-legal body{
  background-color:#070d1f;
  background-image:
    radial-gradient(1.4px 1.4px at 22px 34px, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 130px 90px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 210px 160px, rgba(212,175,55,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 300px 40px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 70px 190px, rgba(255,255,255,.5) 50%, transparent 52%);
  background-size:340px 240px;
  background-attachment:fixed;
}

/* ---------- Shared chrome: nav & footer pick up world-deep + star dust ---------- */
.topnav{
  background-image:
    radial-gradient(1.2px 1.2px at 18px 10px, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 120px 22px, rgba(255,255,255,.45) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 240px 8px, rgba(212,175,55,.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 330px 18px, rgba(255,255,255,.5) 50%, transparent 52%);
  background-size:380px 30px;
}
footer{
  background-image:
    radial-gradient(1.2px 1.2px at 30px 26px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 170px 60px, rgba(255,255,255,.4) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 300px 20px, rgba(212,175,55,.65) 50%, transparent 52%),
    radial-gradient(1px 1px at 90px 110px, rgba(255,255,255,.35) 50%, transparent 52%);
  background-size:360px 150px;
}

::selection{ background:var(--gold); color:#221a02; }

/* ---------- HERO (home): layered world with parallax + twinkle ---------- */
.hero{ position:relative; overflow:hidden; isolation:isolate; }
.hero::before{
  content:""; position:absolute; inset:-16% 0; z-index:0;
  background-image:linear-gradient(180deg, rgba(5,6,14,.22) 0%, rgba(5,6,14,.05) 42%, rgba(5,6,14,.42) 100%), var(--w-img);
  background-size:cover; background-position:center 38%;
  transform:translate3d(0, var(--py, 0px), 0) scale(1.04);
  will-change:transform;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 24px 30px, rgba(255,255,255,.95) 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 110px 80px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 190px 20px, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 260px 110px, rgba(212,175,55,.85) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 60px 150px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 320px 60px, rgba(255,255,255,.7) 50%, transparent 52%);
  background-size:340px 190px;
  animation:qmpTwinkle 4.6s ease-in-out infinite alternate;
}
.hero > *{ position:relative; z-index:2; }
.hero h1, .hero .tagline, .hero .subtag{ text-shadow:0 2px 20px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.65); }
.hero .logo-mark img{ filter:drop-shadow(0 6px 22px rgba(0,0,0,.55)); }
@keyframes qmpTwinkle{ from{ opacity:.45; } to{ opacity:1; } }

/* ---------- Skyline band (home): becomes Martian terrain ---------- */
.skyline{ background:var(--navy-deep); }
.skyline img{ opacity:0; }
.skyline::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(180deg, rgba(31,13,6,.35), rgba(31,13,6,0) 40%), var(--w-img);
  background-size:cover; background-position:center 88%;
}
.skyline-cap{ z-index:2; }

/* ---------- Sub-page banner: every service/legal page opens on its world ---------- */
.page-view::before{
  content:""; display:block; height:clamp(170px, 32vw, 300px);
  margin:2px 0 10px; border:2px solid var(--gold); border-radius:18px;
  background-image:linear-gradient(180deg, rgba(4,6,14,.05), rgba(4,6,14,.28)), var(--w-img);
  background-size:cover; background-position:50% var(--bpy, 42%);
  box-shadow:var(--shadow);
}
html.world-legal .page-view::before{
  height:110px; background-image:
    radial-gradient(1.5px 1.5px at 26px 30px, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(1px 1px at 140px 70px, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(1.7px 1.7px at 250px 24px, rgba(212,175,55,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 330px 84px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 80px 96px, rgba(255,255,255,.45) 50%, transparent 52%);
  background-size:360px 120px; background-color:#050b1a;
}

/* ---------- Cards & accents pick up a world glow on hover ---------- */
.svc, .detail-side, #trust .tcard{ transition:box-shadow .35s ease, transform .35s ease; }
.svc:hover, #trust .tcard:hover{
  box-shadow:0 16px 38px rgba(0,0,0,.35), 0 0 0 1px var(--w-glow), 0 0 26px -6px var(--w-glow);
}
.sec-head h2{ color:var(--navy); }
html.world-legal .sec-head h2{ color:#e8edf7; }

/* ---------- Scroll reveal (JS adds .rv; content is never hidden without JS) ---------- */
html.qmp-js .rv{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
html.qmp-js .rv.in{ opacity:1; transform:none; }

/* ---------- Service tooltip cards (home grid): a peek into each world ---------- */
.svc{ position:relative; }
.svc-tip{
  position:absolute; top:-16px; right:14px; z-index:30; width:232px; max-width:74vw;
  border:2px solid var(--gold); border-radius:14px; overflow:hidden;
  background:#0a1120; box-shadow:0 20px 44px rgba(0,0,0,.5);
  opacity:0; transform:translateY(10px) scale(.96); transform-origin:top right;
  pointer-events:none; transition:opacity .32s ease, transform .32s ease;
}
.svc-tip img{ display:block; width:100%; height:118px; object-fit:cover; }
.svc-tip span{
  display:block; padding:9px 12px; color:#f4f6fb; font-size:.8rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.svc-tip span i{ display:block; font-style:normal; color:var(--gold); font-size:.68rem; letter-spacing:.22em; margin-bottom:2px; }
.svc:hover .svc-tip, .svc:focus-within .svc-tip, .svc.tip-open .svc-tip{
  opacity:1; transform:translateY(0) scale(1);
}

/* ---------- Small screens ---------- */
@media (max-width:720px){
  .page-view::before{ height:clamp(140px, 40vw, 200px); border-radius:14px; }
  html.world-legal .page-view::before{ height:84px; }
  .svc-tip{ width:204px; top:-10px; right:8px; }
  .svc-tip img{ height:100px; }
}

@media (prefers-reduced-motion: reduce){
  .hero::before{ transform:none; }
  .hero::after{ animation:none; }
  html.qmp-js .rv{ opacity:1; transform:none; transition:none; }
  .svc-tip{ transition:none; }
}