/* =============================
   Civic Vault — Premium Visual CSS
   - subtle animated background drift (motion-safe)
   - section-tint tile glow on hover/focus
============================= */

:root{
  /* Core */
  --text: #eef3f6;
  --muted: rgba(238,243,246,.78);

  /* Background palette */
  --bg-0: #0b0f14;
  --bg-1: #0f1820;
  --bg-2: #111a24;

  /* Header / UI */
  --panel: rgba(96, 122, 132, .55);
  --panel-border: rgba(255,255,255,.12);

  /* Surfaces */
  --stroke: rgba(255,255,255,.12);
  --stroke-2: rgba(255,255,255,.18);

  /* Shadows */
  --shadow: 0 14px 34px rgba(0,0,0,.35);
  --shadow-soft: 0 12px 26px rgba(0,0,0,.22);

  --radius: 16px;
  --radius-sm: 12px;
  --max: 980px;

  /* Section tints (your original vibe) */
  --t-round: #5e6258;
  --t-highway: #6a6247;
  --t-transit: #6a6a6a;
  --t-neigh: #6c6a7f;
  --t-construct: #8b634d;
  --t-cycling: #5d636b;
  --t-figures: #586a73;
  --t-moses: #7c6466;

  /* Soft ambient glows */
  --glow-a: rgba(103, 193, 255, .12);
  --glow-b: rgba(168, 120, 255, .10);
  --glow-c: rgba(255, 184, 110, .09);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 520ms;

  /* Tile glow intensity (not too strong) */
  --glow-ring: 0 0 0 4px rgba(255,255,255,.10);
  --glow-lift: 0 18px 30px rgba(0,0,0,.22);

  /* Drift controls */
  --drift1x: 20%;
  --drift1y: 10%;
  --drift2x: 80%;
  --drift2y: 20%;
  --drift3x: 60%;
  --drift3y: 90%;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

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

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.45;

  /* Calm but richer background */
  background:
    radial-gradient(1200px 700px at var(--drift1x) var(--drift1y), var(--glow-a), transparent 60%),
    radial-gradient(900px 600px at var(--drift2x) var(--drift2y), var(--glow-b), transparent 62%),
    radial-gradient(1100px 700px at var(--drift3x) var(--drift3y), var(--glow-c), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 55%, var(--bg-2));
  background-attachment: fixed;

  animation: pageIn var(--t-slow) var(--ease-soft) both;
}

@keyframes pageIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Subtle grain overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity: .06;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* =============================
   1) BACKGROUND DRIFT (motion-safe)
============================= */
@media (prefers-reduced-motion: no-preference){
  body{
    animation:
      pageIn var(--t-slow) var(--ease-soft) both,
      drift 22s var(--ease-soft) infinite alternate;
  }

  @keyframes drift{
    0%{
      --drift1x: 18%; --drift1y: 12%;
      --drift2x: 82%; --drift2y: 18%;
      --drift3x: 62%; --drift3y: 88%;
    }
    50%{
      --drift1x: 24%; --drift1y: 8%;
      --drift2x: 76%; --drift2y: 26%;
      --drift3x: 56%; --drift3y: 92%;
    }
    100%{
      --drift1x: 20%; --drift1y: 14%;
      --drift2x: 84%; --drift2y: 22%;
      --drift3x: 64%; --drift3y: 86%;
    }
  }
}

/* Layout */
.shell{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.topbar{
  position: sticky;
  top:0;
  z-index: 20;

  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding: 16px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);

  transition: background var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

.navwrap{
  max-width: var(--max);
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 180px;
}

.logo{
  width: 34px;
  height: 34px;
  object-fit: contain; /* keeps proportions */
  border-radius: 8px;

  transition: transform 0.2s ease;
}

.logo{
  background: rgba(255,255,255,0.08);
  padding: 4px;
}

.brand:hover .logo{
  transform: scale(1.05);
}
.brand:hover .logo{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.40);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 10px 18px rgba(0,0,0,.18);
}

.brandtext{ display:flex; flex-direction:column; line-height:1.05; }
.brandtext strong{ font-size: 14px; letter-spacing:.4px; }
.brandtext span{ font-size: 12px; opacity:.82; }

nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap: 8px;
}

nav a{
  text-decoration:none;
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);

  transition: transform var(--t-fast) var(--ease),
              background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
nav a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 18px rgba(0,0,0,.18);
}
nav a:active{ transform: translateY(0) scale(.99); }
nav a:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}
nav a[aria-current="page"]{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
}

main{
  width:100%;
  flex:1;
  padding: 22px 14px 42px;
}

.container{
  max-width: var(--max);
  margin: 0 auto;
}

.pageTitle{
  text-align:center;
  font-size: 34px;
  letter-spacing: .3px;
  margin: 14px 0 14px;
  text-shadow: 0 4px 18px rgba(0,0,0,.35);
  animation: riseIn var(--t-slow) var(--ease-soft) both;
}
@keyframes riseIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}

.pageSub{
  max-width: 720px;
  margin: 0 auto 18px;
  text-align:center;
  color: var(--muted);
  font-size: 14px;
}

/* Panels */
.panel{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);

  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.panel:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(255,255,255,.14);
}

/* Tints with gentle depth */
.tint-round{ background-color: var(--t-round); }
.tint-highway{ background-color: var(--t-highway); }
.tint-transit{ background-color: var(--t-transit); }
.tint-neigh{ background-color: var(--t-neigh); }
.tint-construct{ background-color: var(--t-construct); }
.tint-cycling{ background-color: var(--t-cycling); }
.tint-figures{ background-color: var(--t-figures); }
.tint-moses{ background-color: var(--t-moses); }

.tint-round,
.tint-highway,
.tint-transit,
.tint-neigh,
.tint-construct,
.tint-cycling,
.tint-figures,
.tint-moses{
  background-image:
    radial-gradient(900px 500px at 30% 0%, rgba(255,255,255,.10), transparent 58%),
    radial-gradient(900px 500px at 80% 100%, rgba(0,0,0,.20), transparent 62%);
}

.panelInner{ padding: 18px 16px; }

.sectionTitle{
  margin: 6px 0 10px;
  font-size: 30px;
  text-align:center;
  text-shadow: 0 3px 14px rgba(0,0,0,.30);
}

.sectionText{
  margin: 0 auto 14px;
  max-width: 760px;
  color: var(--muted);
  font-size: 14px;
  text-align:center;
}

.stack{ display:grid; gap: 14px; }

/* Grids */
.grid2, .grid4{ display:grid; gap: 12px; }
.grid2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 760px){
  .grid4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* =============================
   2) TILE GLOWS (section-tint aware)
============================= */

/* Tiles */
.tile{
  border-radius: var(--radius-sm);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-height: 130px;

  background: rgba(8, 10, 14, .22);
  border: 1px solid rgba(255,255,255,.14);

  box-shadow: 0 10px 18px rgba(0,0,0,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  position: relative; /* enables glow overlay */
  isolation: isolate;

  transition: transform var(--t-fast) var(--ease),
              background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}

/* Glow overlay */
.tile::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius-sm) + 2px);
  opacity: 0;
  pointer-events:none;

  /* default glow (gets replaced by section glow rules below) */
  background:
    radial-gradient(240px 140px at 30% 20%, rgba(255,255,255,.14), transparent 65%),
    radial-gradient(260px 160px at 70% 80%, rgba(255,255,255,.08), transparent 70%);
  filter: blur(2px);
  transition: opacity var(--t-med) var(--ease);
  z-index: -1;
}

.tile:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--glow-lift);
}
.tile:hover::after{ opacity: 1; }

.tile:active{ transform: translateY(0) scale(.99); }

.tile:focus-within{
  border-color: rgba(255,255,255,.30);
  box-shadow: var(--glow-ring), var(--glow-lift);
}
.tile:focus-within::after{ opacity: 1; }

.tile .label{
  font-weight: 650;
  letter-spacing: .2px;
  text-align:center;
}

/* Placeholders */
.placeholder{
  border-radius: 12px;
  height: 78px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.22);

  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.tile:hover .placeholder{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.30);
}

.heroPlaceholder{
  height: 170px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.22);

  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}
.heroPlaceholder:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.30);
  transform: translateY(-1px);
}

/* Section-aware glows: when tiles are inside a tinted panel */
.tint-round .tile::after{
  background:
    radial-gradient(260px 160px at 30% 15%, rgba(94, 98, 88, .65), transparent 65%),
    radial-gradient(260px 160px at 80% 90%, rgba(255,255,255,.10), transparent 70%);
}
.tint-highway .tile::after{
  background:
    radial-gradient(260px 160px at 30% 15%, rgba(106, 98, 71, .60), transparent 65%),
    radial-gradient(260px 160px at 80% 90%, rgba(255,255,255,.10), transparent 70%);
}
.tint-transit .tile::after{
  background:
    radial-gradient(260px 160px at 30% 15%, rgba(106, 106, 106, .60), transparent 65%),
    radial-gradient(260px 160px at 80% 90%, rgba(255,255,255,.10), transparent 70%);
}
.tint-neigh .tile::after{
  background:
    radial-gradient(260px 160px at 30% 15%, rgba(108, 106, 127, .62), transparent 65%),
    radial-gradient(260px 160px at 80% 90%, rgba(255,255,255,.10), transparent 70%);
}
.tint-construct .tile::after{
  background:
    radial-gradient(260px 160px at 30% 15%, rgba(139, 99, 77, .62), transparent 65%),
    radial-gradient(260px 160px at 80% 90%, rgba(255,255,255,.10), transparent 70%);
}
.tint-cycling .tile::after{
  background:
    radial-gradient(260px 160px at 30% 15%, rgba(93, 99, 107, .62), transparent 65%),
    radial-gradient(260px 160px at 80% 90%, rgba(255,255,255,.10), transparent 70%);
}
.tint-figures .tile::after{
  background:
    radial-gradient(260px 160px at 30% 15%, rgba(88, 106, 115, .62), transparent 65%),
    radial-gradient(260px 160px at 80% 90%, rgba(255,255,255,.10), transparent 70%);
}
.tint-moses .tile::after{
  background:
    radial-gradient(260px 160px at 30% 15%, rgba(124, 100, 102, .62), transparent 65%),
    radial-gradient(260px 160px at 80% 90%, rgba(255,255,255,.10), transparent 70%);
}

/* Figures */
.figureList{ display:grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px){
  .figureList{ grid-template-columns: 1fr 1fr; }
}
.figureCard{
  border-radius: var(--radius);
  padding: 14px;
  background: rgba(8, 10, 14, .22);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
.figureCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 26px rgba(0,0,0,.18);
}
.figureCard h3{ margin: 4px 0 10px; text-align:center; font-size: 20px; }
.figureCard p{ margin: 0; color: var(--muted); font-size: 14px; text-align:center; }
.figureCard .bigPlaceholder{
  height: 170px;
  margin-top: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.22);
  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.figureCard:hover .bigPlaceholder{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.30);
}

/* Planning search */
.searchWrap{
  max-width: 520px;
  margin: 0 auto 12px;
  display:flex;
  gap: 10px;
  align-items:center;
}
.searchWrap input{
  width:100%;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              background var(--t-med) var(--ease);
}
.searchWrap input::placeholder{ color: rgba(238,243,246,.55); }
.searchWrap input:focus{
  border-color: rgba(255,255,255,.34);
  background: rgba(0,0,0,.26);
  box-shadow: 0 0 0 4px rgba(255,255,255,.12);
}

/* Footer */
.footerHint{
  text-align:center;
  color: rgba(238,243,246,.62);
  font-size: 12px;
  margin-top: 18px;
  transition: opacity var(--t-med) var(--ease);
}
.footerHint:hover{ opacity: .92; }

/* Mobile tweaks */
@media (max-width: 420px){
  .pageTitle{ font-size: 30px; }
  .sectionTitle{ font-size: 26px; }
  nav a{ padding: 8px 9px; }
}

.img{
  width: 100%;
  height: 78px; /* matches your placeholder size */
  object-fit: cover;
  border-radius: 12px;

  transition: transform 0.25s ease, filter 0.25s ease;
}

.tile:hover .img{
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* Bigger images (hero sections) */
.img-large{
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 14px;

  transition: transform 0.3s ease;
}

.img-square{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;

  transition: transform 0.3s ease;
}

.img-large:hover{
  transform: scale(1.02);
}

.img{
  display: block;
  margin: 0 auto;  /* centers horizontally */
}

.img-square:hover{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;

  transition: transform 0.3s ease;
}