/* File: css/navigation.css */
:root{--accent:#8e53e1;--btn:#a466ff;--text: #F2EEFB}
.top-nav{position:fixed;left:0;right:0;top:0;height:var(--nav-height);z-index:1400;pointer-events:none;transition:transform .45s cubic-bezier(.22,.9,.41,1),opacity .35s}
.top-nav.hidden{transform:translateY(-120%);opacity:0}
.top-nav.visible{transform:translateY(0);opacity:1;pointer-events:auto}

.top-nav .nav-inner{max-width:1400px;margin:10px auto;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;border-radius:14px}
.top-nav .nav-inner{background:rgba(255,255,255,0.02);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.04)}

.nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);pointer-events:auto}
.nav-logo-img{height:48px;width:auto;border-radius:8px}
.studio-text{font-family:'Wix Madefor Display',sans-serif;font-weight:700;color:var(--accent)}

.nav-center{display:flex;gap:12px}
.nav-btn{
  background:transparent;
  border:0;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  pointer-events:auto;
  color:#fff;
}
.nav-btn:hover{ transform: translateY(-4px); box-shadow: 0 10px 30px rgba(104, 53, 163, 0.45); background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.nav-btn.fsi-pressed{ transform: translateY(1px) scale(.995); opacity:0.98; }
.nav-btn.active{ background:linear-gradient(90deg,var(--btn), #8e5dff); color:#fff; box-shadow:0 8px 18px rgba(164,102,255,0.18); }
.nav-btn:focus, .nav-meta:focus, .mobile-nav-btn:focus{ box-shadow: 0 0 0 3px rgba(164,102,255,0.18); outline: none; }

.nav-meta-wrap{display:flex;gap:8px}
.nav-meta{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  cursor:pointer;
  font-weight:600;
  color:#fff;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.meta-socials{
  background: linear-gradient(0deg, rgba(117, 60, 163, 0.247), rgba(117, 60, 163, 0.219));
  box-shadow: 0 6px 18px rgba(142,83,225,0.06);
}
.meta-socials:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(142, 83, 225, 0.432); }
.meta-socials.active{ background:linear-gradient(90deg,var(--btn), #8e5dff); color:#fff; box-shadow:0 8px 18px rgba(164,102,255,0.18);}
.meta-contacts{
  background: linear-gradient(0deg, rgba(117, 60, 163, 0.247), rgba(117, 60, 163, 0.219));
  box-shadow: 0 6px 18px rgba(142,83,225,0.06);
}
.meta-contacts:hover{ transform: translateY(-3px); box-shadow: 0 10px 30px rgba(142, 83, 225, 0.432); }
.meta-contacts.active{ background:linear-gradient(90deg,var(--btn), #8e5dff); color:#fff; box-shadow:0 8px 18px rgba(164,102,255,0.18);}

/* Mobile menu button visible on small screens */
.meta-menu{ display:none; background:transparent; border-radius:10px; padding:8px 10px; }
@media (max-width:900px){
  .nav-center{ display:none; }
  .meta-menu{ display:inline-flex; }
}

@media (max-width:430px){
  .studio-text{display: none;}
}

@media (max-width:350px){
  .meta-contacts{font-size: 10px;}
  .meta-socials{font-size: 10px;}
  .meta-menu{font-size: 10px;}
}