/* ————— LSDirectory - Obsidian Mist (Animated) —————
   Motion principles:
   • Only transform/opacity for perf (GPU-friendly)
   • Respect prefers-reduced-motion
   • Subtle idle motion + delightful interactive states
------------------------------------------------------------------- */

/* ========== Palette & Motion Tokens ========== */
:root{
  /* Core surfaces */
  --bg:#111318;
  --bg-elev:#151923;
  --bg-tertiary:#0D1016;

  /* Text */
  --text:#E6EAF2;
  --muted:#A5AEC2;

  /* Lines & strokes */
  --line:#2A2F3A;

  /* Accents */
  --brand:#7C6FF6;     /* iris */
  --accent-2:#22D3EE;  /* cyan */
  --accent-3:#FFB454;  /* amber */
  --white:#FFFFFF;

  /* Motion */
  --ease-snap:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --dur-1:120ms;
  --dur-2:200ms;
  --dur-3:420ms;
  --dur-4:9000ms;      /* long idle animation */
  --shadow-iris:0 10px 28px -18px #000, 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent) inset;
}

/* Reduced motion preference */
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-1:1ms; --dur-2:1ms; --dur-3:1ms; --dur-4:1ms;
  }
  *{animation:none !important; transition:none !important}
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ========== Ambient Backdrop ========== */
body::before{
  content:"";
  position:fixed; inset:-20vmax;
  pointer-events:none; z-index:-1;
  background:
    radial-gradient(40vmax 40vmax at 80% 10%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 60%),
    radial-gradient(36vmax 36vmax at 10% 90%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%);
  filter:blur(50px) saturate(120%);
  opacity:.35;
  animation:ambientShift var(--dur-4) linear infinite;
  will-change:transform, opacity;
}
@keyframes ambientShift{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:.30 }
  50%{ transform:translate3d(2%, -1%, 0) scale(1.03); opacity:.40 }
  100%{ transform:translate3d(0,0,0) scale(1); opacity:.30 }
}

/* ========== Containers ========== */
img{max-width:100%;display:block;border-radius:12px}
.container{width:min(1100px,92%);margin-inline:auto}
.narrow{width:min(800px,92%)}

/* ========== Header ========== */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(17,19,24,.75);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
  transition:background var(--dur-3) var(--ease-snap), border-color var(--dur-2) var(--ease-snap);
}
.site-header::after{
  /* animated accent line */
  content:"";
  display:block; height:1px; width:100%;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--brand) 35%, transparent),
      color-mix(in srgb, var(--accent-2) 35%, transparent),
      color-mix(in srgb, var(--accent-3) 35%, transparent));
  background-size:200% 100%;
  animation:lineSweep 6s linear infinite;
  opacity:.55;
}
@keyframes lineSweep{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{
  font-weight:800; letter-spacing:.3px; text-decoration:none; color:var(--text); font-size:1.1rem;
  position:relative; display:inline-block;
}
.brand::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:100%;
  background:linear-gradient(90deg, var(--brand), var(--accent-2));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-2) var(--ease-snap);
}
.brand:hover::after{ transform:scaleX(1) }

.nav{list-style:none;display:flex;gap:6px;margin:0;padding:0}
.tab{
  display:inline-block; padding:10px 14px; border-radius:12px;
  text-decoration:none; color:var(--text); border:1px solid transparent;
  position:relative; overflow:hidden;
  transition:color var(--dur-2) var(--ease-snap), border-color var(--dur-2) var(--ease-snap), transform var(--dur-2) var(--ease-snap);
  will-change:transform;
}
.tab::before{
  /* sheen */
  content:""; position:absolute; inset:-40% -20%;
  background:linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--white) 35%, transparent) 50%, transparent 70%);
  transform:translateX(-60%) rotate(8deg);
  opacity:0;
}
.tab:hover{ background:var(--bg-elev); border-color:var(--line); transform:translateY(-1px) }
.tab:hover::before{ animation:sheen var(--dur-3) ease-out 1; opacity:1 }
@keyframes sheen{
  0%{ transform:translateX(-60%) rotate(8deg); opacity:0 }
  30%{ opacity:.4 }
  100%{ transform:translateX(60%) rotate(8deg); opacity:0 }
}
.tab.active{
  color:var(--white);
  border-color:color-mix(in srgb, var(--brand) 40%, var(--line));
  background:color-mix(in srgb, var(--brand) 20%, var(--bg-elev));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 28%, transparent);
}

/* ========== Promo Card ========== */
.promo{padding:6px 0 24px}
.promo-card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 88%, var(--brand) 12%), var(--bg-elev));
  border:1px solid var(--line); border-radius:16px; padding:22px;
  display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  box-shadow:0 8px 28px -16px color-mix(in srgb, var(--brand) 30%, transparent);
  position:relative; overflow:hidden;
  transition:transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3) var(--ease-spring);
}
.promo-card::before{
  /* slow moving texture */
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(30% 50% at 20% 30%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 60%),
             radial-gradient(30% 50% at 80% 70%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%);
  filter:blur(40px);
  opacity:.35; animation:floaty 12s ease-in-out infinite alternate;
}
@keyframes floaty{
  0%{ transform:translate3d(-2%, -1%, 0) scale(1) }
  100%{ transform:translate3d(2%, 1%, 0) scale(1.03) }
}
.promo-card:hover{ transform:translateY(-2px); box-shadow:0 14px 44px -22px color-mix(in srgb, var(--brand) 40%, transparent) }
.promo-card h2{margin:0;font-size:1.25rem}
.promo-card p{margin:6px 0 0;color:var(--muted);max-width:65ch}

/* ========== Buttons ========== */
.button{
  display:inline-block; padding:10px 14px; border-radius:12px; text-decoration:none;
  color:var(--white);
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, white 8%), var(--brand));
  border:1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  box-shadow:0 10px 20px -12px color-mix(in srgb, var(--brand) 55%, transparent);
  position:relative; overflow:hidden;
  transition:transform var(--dur-1) var(--ease-spring), filter var(--dur-2) var(--ease-snap);
  will-change:transform;
}
.button::after{
  /* glossy sweep */
  content:""; position:absolute; inset:-60% -20%;
  background:linear-gradient(120deg, transparent 20%, color-mix(in srgb, var(--white) 45%, transparent) 50%, transparent 80%);
  transform:translateX(-60%) rotate(10deg);
  opacity:0;
}
.button:hover{ filter:brightness(1.05) }
.button:hover::after{ animation:sheen var(--dur-3) ease-out 1; opacity:1 }
.button:active{ transform:translateY(1px) }

.button.secondary{
  background:color-mix(in srgb, var(--accent-2) 18%, var(--bg-elev));
  border-color:color-mix(in srgb, var(--accent-2) 30%, var(--line));
}

/* ========== Grid / Business Cards ========== */
.grid{display:grid;gap:16px;padding:8px 0 40px;grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.grid{grid-template-columns:1fr}}

.business{
  background:var(--bg-elev); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  transition:transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3) var(--ease-spring), border-color var(--dur-2) var(--ease-snap);
  will-change:transform, box-shadow;
}
.business:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-iris);
  border-color:color-mix(in srgb, var(--brand) 24%, var(--line));
}
.business .thumb{width:100%;height:200px;object-fit:cover;border-radius:0;border-bottom:1px solid var(--line); transition:transform var(--dur-3) var(--ease-spring)}
.business:hover .thumb{ transform:scale(1.03) }
.business .info{padding:14px}
.name{margin:0 0 6px;font-size:1.1rem}
.meta{margin:0 0 6px;color:var(--muted);font-size:.95rem}
.meta a{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--line)}
.desc{margin:0;color:var(--text)}

/* ========== Ads ========== */
.ads{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);padding:22px 0}
.ads .ad{
  position:relative; overflow:hidden; border-radius:12px;
  border:1px solid var(--line);
  transition:transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-3) var(--ease-spring);
}
.ads .ad img{width:100%;height:auto;display:block; transform:scale(1); transition:transform var(--dur-3) var(--ease-spring)}
.ads .ad:hover img{ transform:scale(1.04) }
.ads .ad:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -22px #000 }
@media (max-width:900px){.ads{grid-template-columns:1fr}}

/* ========== Category Filter ========== */
.controls{display:flex;align-items:center;gap:12px;margin:10px 0 20px}
.select{
  background:var(--bg-tertiary); border:1px solid var(--line); color:var(--text);
  border-radius:10px; padding:10px 12px;
  transition:border-color var(--dur-2) var(--ease-snap), background var(--dur-2) var(--ease-snap);
}
.select:focus{ outline:none; border-color:color-mix(in srgb, var(--brand) 40%, var(--line)) }
.cat-pill{
  display:inline-block; background:var(--bg-tertiary); border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:4px 10px; font-size:.8rem; margin:0 0 8px;
  transition:transform var(--dur-2) var(--ease-snap), border-color var(--dur-2) var(--ease-snap), background var(--dur-2) var(--ease-snap);
}
.cat-pill:hover{ transform:translateY(-1px); border-color:color-mix(in srgb, var(--brand) 26%, var(--line)); background:color-mix(in srgb, var(--brand) 6%, var(--bg-tertiary)) }

/* ========== Copy Toast ========== */
#toast{
  position:fixed; left:50%; top:30px; transform:translateX(-50%) translateY(-6px);
  background:var(--bg-elev); color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:10px 14px;
  opacity:0; pointer-events:none; z-index:1000;
  box-shadow:0 0 12px 2px color-mix(in srgb, var(--accent-2) 45%, transparent);
}
#toast.show{
  animation:toastIn var(--dur-3) var(--ease-spring) forwards, toastPulse 2.6s ease-in-out 1.2s 1 both;
}
@keyframes toastIn{
  from{ opacity:0; transform:translateX(-50%) translateY(-6px) scale(.98) }
  to{ opacity:1; transform:translateX(-50%) translateY(4px) scale(1) }
}
@keyframes toastPulse{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent-2) 45%, transparent) }
  100%{ box-shadow:0 0 0 16px transparent }
}
.copy{cursor:pointer}

/* ========== Lists & Footer ========== */
.bullet-list{line-height:1.9}
.bullet-list li{margin:6px 0}

.site-footer{
  border-top:1px solid var(--line); padding:18px 0; margin-top:10px; background:var(--bg-tertiary);
  position:relative; overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent, color-mix(in srgb, var(--brand) 8%, transparent));
  background-size:200% 100%; opacity:.4;
  animation:footerFlow 14s linear infinite;
}
@keyframes footerFlow{
  0%{ background-position:0% 50% }
  100%{ background-position:200% 50% }
}
.footer-inner{display:flex;align-items:center;justify-content:space-between; position:relative}
.footer-link{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--line); transition:opacity var(--dur-2) var(--ease-snap)}
.footer-link:hover{opacity:.9}