/* ============================================================
   NAV — Navigation, Preloader, Progress, Transition
   ============================================================ */

/* ===== Nav ===== */
.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 18px;
  z-index: 100;
  background: var(--nav-bg);
  transition: background .5s;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 4px;
  box-shadow: 0 0 20px rgba(255,140,66,.35);
  overflow: hidden;
  transition: transform .3s;
}
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.05); }

.brand-logo img,
.brand-logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nav-links {
  display: flex;
  gap: 6px;
  list-style: none;
}

.nav-links a {
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--dim);
  transition: .25s;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  background: var(--glass-bg);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== Language Switch ===== */
.lang-switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}
html.light .lang-switch { background: rgba(0,0,0,.06); }

.lang-switch button {
  padding: 6px 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  transition: .2s;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active {
  background: linear-gradient(135deg, var(--c1), var(--c2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,77,77,.35);
}

/* ===== Theme & Admin Toggles ===== */
.theme-toggle,
.admin-toggle {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-bd);
  transition: .25s;
  font-size: 15px;
  position: relative;
}
.theme-toggle:hover,
.admin-toggle:hover { background: rgba(255,255,255,.1); }

.theme-toggle .sun,
.theme-toggle .moon {
  position: absolute;
  transition: opacity .3s, transform .3s;
}
.theme-toggle .moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
html.light .theme-toggle .sun  { opacity: 0; transform: rotate(90deg) scale(.5); }
html.light .theme-toggle .moon { opacity: 1; transform: rotate(0) scale(1); }

.admin-toggle { font-size: 17px; }
.admin-toggle.logged-in {
  color: var(--c4);
  border-color: rgba(74,222,128,.4);
}

@media (max-width: 940px) {
  .nav-links { display: none; }
}

/* ===== Preloader ===== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  transition: opacity .7s, visibility .7s;
}
body.loaded .preloader {
  opacity: 0;
  visibility: hidden;
}

.preloader-logo {
  width: 90px;
  height: 90px;
  animation: preSpin 2.4s ease-in-out infinite;
}
.preloader-logo svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 30px rgba(255,140,66,.5));
}

.preloader-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 12px;
  background: linear-gradient(90deg, #fff 0%, var(--c2) 40%, var(--c5) 60%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: shine 2s linear infinite;
}

.preloader-bar {
  width: 180px;
  height: 3px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
}
.preloader-bar span {
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
  border-radius: 3px;
  animation: loadBar 1.4s ease-in-out infinite;
}

/* ===== Scroll Progress ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c5));
  z-index: 9999;
  transition: width .1s linear;
  box-shadow: 0 0 12px rgba(255,140,66,.6);
}

/* ===== Page Transition ===== */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: var(--bg);
  transform: translateY(-100%);
  transition: transform .6s cubic-bezier(.7,0,.3,1);
  pointer-events: none;
}
.page-transition.active { transform: translateY(0); }
.page-transition.done   { transform: translateY(100%); }