/* ==========================================================================
   Bottom Navigation — Telegram-inspired / Apple Liquid Glass
   Built entirely on the existing tokens from style.css (--liquid-glass-*,
   --accent, --accent-2/3/4, --shadow-glow). No new colors invented.
   Namespaced under .liquid-nav — cannot collide with anything in style.css.
   ========================================================================== */

:root{
  --lnav-h: 64px;
  --lnav-item-w: 72px;
  --lnav-radius: 30px;
  --lnav-spring: cubic-bezier(.34,1.56,.64,1);
  --lnav-smooth: cubic-bezier(.16,1,.3,1);
  --lnav-home: var(--accent);      /* #5d8bff */
  --lnav-blog: var(--accent-3);    /* #9d6bff */
  --lnav-services: var(--accent-4);/* #2dd4bf */
  --lnav-contact: var(--accent-2); /* #7af0ff */
}

.liquid-nav{
  position: fixed;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--lnav-h);
  padding: 7px;
  border-radius: var(--lnav-radius);
  background: var(--liquid-glass-bg);
  border: 1px solid var(--liquid-glass-border);
  backdrop-filter: blur(var(--liquid-glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--liquid-glass-blur)) saturate(160%);
  box-shadow: var(--shadow-glow);
  isolation: isolate;
  animation: lnav-float-in .7s var(--lnav-smooth) both;
  transition: background .5s ease, border-color .5s ease, transform .4s var(--lnav-smooth);
}

/* fine grain so the glass reads as material, not a flat blur */
.liquid-nav::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  opacity:.05;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* top specular edge — the "liquid" highlight */
.liquid-nav::before{
  content:"";
  position:absolute;
  top:1px; left:12%; right:12%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--liquid-glass-highlight), transparent);
  opacity:.6;
  pointer-events:none;
}

.liquid-nav__indicator{
  position:absolute;
  top:7px; bottom:7px; left:7px;
  width:0;
  border-radius:calc(var(--lnav-radius) - 7px);
  background: var(--liquid-glass-bg-hover);
  border:1px solid var(--nav-accent, var(--liquid-glass-border-hover));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.35);
  transition: transform .55s var(--lnav-spring), width .55s var(--lnav-spring), border-color .4s ease;
  z-index:0;
  pointer-events:none;
}

.liquid-nav__item{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:var(--lnav-item-w);
  height:100%;
  border-radius:calc(var(--lnav-radius) - 7px);
  text-decoration:none;
  color:var(--muted);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  transition: color .35s var(--lnav-smooth);
}

.liquid-nav__icon{
  width:22px; height:22px;
  display:grid; place-items:center;
  transition: transform .5s var(--lnav-spring);
}
.liquid-nav__icon svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  transition: filter .4s ease;
}
.liquid-nav__label{
  font-family:'Vazirmatn', sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:.01em;
  opacity:.82;
  transition: opacity .35s var(--lnav-smooth), transform .35s var(--lnav-smooth);
}

.liquid-nav__item[data-page="home"]     { --nav-accent: var(--lnav-home); }
.liquid-nav__item[data-page="blog"]     { --nav-accent: var(--lnav-blog); }
.liquid-nav__item[data-page="services"] { --nav-accent: var(--lnav-services); }
.liquid-nav__item[data-page="contact"]  { --nav-accent: var(--lnav-contact); }

.liquid-nav__item.is-active{ color:var(--nav-accent); }
.liquid-nav__item.is-active .liquid-nav__icon{ transform:translateY(-1px) scale(1.14); }
.liquid-nav__item.is-active .liquid-nav__icon svg{ filter:drop-shadow(0 0 7px var(--nav-accent)); }
.liquid-nav__item.is-active .liquid-nav__label{ opacity:1; }

.liquid-nav__item:active .liquid-nav__icon{ transform:scale(.86); }

.liquid-nav__item:focus-visible{
  outline: 2px solid var(--nav-accent, var(--accent-2));
  outline-offset: 2px;
}

/* ripple on tap */
.liquid-nav__ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.32);
  transform:scale(0);
  animation: lnav-ripple .6s var(--lnav-smooth) forwards;
  pointer-events:none;
}
@keyframes lnav-ripple{ to{ transform:scale(3); opacity:0; } }

@keyframes lnav-float-in{
  from{ opacity:0; transform:translate(-50%, 26px) scale(.96); }
  to{ opacity:1; transform:translate(-50%, 0) scale(1); }
}

@media (max-width:420px){
  :root{ --lnav-item-w:64px; }
  .liquid-nav__label{ font-size:10px; }
}

@media (min-width:1024px){
  :root{ --lnav-item-w:88px; --lnav-h:68px; }
  .liquid-nav{ padding:8px; }
  .liquid-nav__label{ font-size:12px; }
}

@media (prefers-reduced-motion: reduce){
  .liquid-nav, .liquid-nav__indicator, .liquid-nav__icon, .liquid-nav__item{
    animation:none !important;
    transition-duration:.01ms !important;
  }
}

/* reserve room so the floating nav never sits on top of page content */
body.has-liquid-nav{
  padding-bottom: calc(var(--lnav-h) + 34px + env(safe-area-inset-bottom));
}