/* Turris Mercatus — teaser page.
   Warm bronze/stone, dark, single screen. Brand-matched to the app.
   Static, dependency-free. All motion lives in the canvas (assets/js/main.js). */

:root{
  --bg:#15110c;
  --bg-2:#0d0a07;
  --fg:#f4ead6;
  --muted:#ab9c81;
  --bronze:#c89760;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:radial-gradient(1200px 820px at 50% 32%, #241b12 0%, var(--bg) 46%, var(--bg-2) 100%);
  color:var(--fg);
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* full-screen animated backdrop — never intercepts pointer events */
canvas#fx{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
}

.stage{
  position:relative;
  z-index:1;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
}

/* soft pool of shadow behind the wordmark so it stays legible over the motion */
.stage::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(124vw,1120px);
  height:min(72vh,540px);
  background:radial-gradient(closest-side,
    rgba(13,10,7,.80),
    rgba(13,10,7,.36) 55%,
    transparent 78%);
  filter:blur(6px);
  pointer-events:none;
}

.title{
  margin:0;
  font-weight:700;
  font-size:clamp(2.2rem,8.5vw,7rem);
  letter-spacing:.06em;
  line-height:1.05;
  background:linear-gradient(180deg,#f7eeda 0%,#e6cfa2 45%,var(--bronze) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))
         drop-shadow(0 0 34px rgba(200,151,96,.28));
}

.soon{
  margin:1.5rem 0 0;
  font-weight:500;
  font-size:clamp(.66rem,1.5vw,.95rem);
  letter-spacing:.62em;
  text-indent:.62em;          /* re-centre against the trailing letter-spacing */
  text-transform:uppercase;
  color:var(--muted);
  animation:breathe 4.8s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{opacity:.5}
  50%{opacity:.95}
}

@media (prefers-reduced-motion:reduce){
  .soon{animation:none;opacity:.8}
}