/* ============================================================
   HEADER
   Fixed glass navigation bar with sabre edge animation
   ============================================================ */

.site-header,
.site-header .brand .byline,
.site-header .site-nav,
.site-header .btn-auth {
  font-family: 'OpenSans', sans-serif;
  font-weight: 300;
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(8, 10, 20, 0.28); /* Darker base for high-contrast tech look */
  backdrop-filter: blur(28px) saturate(220%) brightness(1.06);
  -webkit-backdrop-filter: blur(28px) saturate(220%) brightness(1.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 56px);
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 10px 40px rgba(0, 0, 0, 0.40);
  /* Staged reveal — slides down after preloader */
  transform: translateY(-100%);
  transition: transform 2.8s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, height 0.35s ease, border-bottom 0.35s ease, box-shadow 0.35s ease;
  will-change: transform, height, background;
}

.site-header.reveal { transform: translateY(0); }

/* ---- Scroll shrink header styling ---- */
.site-header.scrolled {
  height: var(--header-h); /* keep header size constant on scroll */
  background: rgba(5, 7, 16, 0.68);
  backdrop-filter: blur(32px) saturate(240%) brightness(0.92);
  -webkit-backdrop-filter: blur(32px) saturate(240%) brightness(0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 48px rgba(0, 0, 0, 0.55);
}

.brand img {
  height: 42px;
  width: auto;
  display: block;
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled .brand img {
  height: 42px; /* keep brand logo size constant on scroll */
}

.brand .byline {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.scrolled .brand .byline {
  transform: none; /* keep byline size constant on scroll */
}

/* ---- Glass reflection diagonal sweep ---- */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.08)   0%,
    rgba(255, 255, 255, 0.02) 28%,
    transparent                46%,
    transparent                68%,
    rgba(255, 255, 255, 0.04) 100%
  );
  pointer-events: none;
}

/* ---- Sabre line along bottom edge ---- */
.site-header .hdr-edge {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

@keyframes sabreSlide {
  from { transform: translateX(-45vw); }
  to   { transform: translateX(105vw); }
}

.site-header .hdr-edge::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 38vw;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent                       0%,
    rgba(110, 195, 255, 0.55)        30%,
    rgba(190, 230, 255, 0.95)        50%,
    rgba(110, 195, 255, 0.55)        70%,
    transparent                      100%
  );
  animation: sabreSlide 11s linear infinite;
}

/* ---- Brand (logo + byline) ---- */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.brand-logo,
.brand-vj {
  text-decoration: none;
  display: block;
}

.brand img {
  height: 42px;
  width: auto;
  display: block;
}

.brand .byline {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  white-space: nowrap;
}

.brand .byline .by {
  font-family: 'OpenSans', sans-serif;
  font-weight: 300;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 3.17px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 3px;
}

.brand .byline .name {
  font-family: 'OpenSans', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 1.44px;
  color: #ffffff;
}

/* ---- Nav ---- */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.site-nav a.nav-link {
  color: rgba(235, 235, 240, 0.85);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 300;
  letter-spacing: 0.015em;
  padding: 6px 0;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.site-nav a.nav-link:hover {
  color: #3BA1E1;
}

/* ---- Liquid glass CTA button ---- */
.btn-auth {
  position: relative;
  overflow: hidden;
  font-family: 'OpenSans', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 12px 28px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  cursor: pointer;
  z-index: 1;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;

  /* Pure Clear 3D Glass Body (No Blue Tint in Default State) */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  backdrop-filter: blur(24px) saturate(140%) brightness(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(140%) brightness(1.08);

  /* 3D Glass Bevel Rim (Clear Glass Edge Refraction) */
  border-top: 1.5px solid rgba(255, 255, 255, 0.65);
  border-left: 1.5px solid rgba(255, 255, 255, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.08);

  box-shadow:
    /* High-contrast top edge specular reflection */
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
    /* Soft internal light scattering */
    inset 0 3px 15px rgba(255, 255, 255, 0.12),
    /* Bottom clear edge shadow */
    inset 0 -2px 8px rgba(255, 255, 255, 0.06),
    /* Deep outer ambient drop shadow */
    0 8px 24px rgba(0, 0, 0, 0.40);
}

/* Specular reflection window shine (3D volume) */
.btn-auth::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.12) 25%,
    transparent 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.35s ease;
}

/* Light sweep shimmer effect */
.btn-auth::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 30%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.0) 70%,
    transparent 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 3;
}

.btn-auth:hover {
  transform: translateY(-2px) scale(1.03);
  /* Glowing Blue Gradient (Highly saturated volumetric light injection on hover) */
  background: linear-gradient(
    135deg,
    #44AFE5 0%,
    #2F8EDF 50%,
    #1F63D6 100%
  );
  border-top: 1.5px solid rgba(255, 255, 255, 0.85);
  border-left: 1.5px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.98),
    inset 0 4px 18px rgba(255, 255, 255, 0.22),
    inset 0 -4px 16px rgba(110, 195, 255, 0.38),
    0 12px 38px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(59, 161, 225, 0.38);
}

.btn-auth:hover::after {
  animation: glassShine 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes glassShine {
  0% { left: -150%; }
  100% { left: 150%; }
}

/* Clicked — glass presses inward */
.btn-auth:active {
  transform: scale(0.97) translateY(0);
  box-shadow:
    inset 0 3px 14px rgba(140, 190, 230, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px 6px rgba(160, 210, 255, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.28);
}

.btn-auth:active::before { opacity: 0.55; }
.btn-auth:active::after  { opacity: 0.40; }

.btn-auth:focus { outline: none; }

/* ---- Hamburger button (hidden on desktop) ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 1002;
  flex-shrink: 0;
  touch-action: manipulation;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.28s ease;
  transform-origin: center;
}

.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .site-header  { padding: 0 20px; }
  .brand .byline {
    display: flex !important;
  }
  .brand .byline .by {
    font-size: 8px !important;
    line-height: 10px !important;
    letter-spacing: 2px !important;
    margin-bottom: 1px !important;
  }
  .brand .byline .name {
    font-size: 13px !important;
    line-height: 14px !important;
    letter-spacing: 1px !important;
  }
  .brand img    { height: 36px; }

  /* Hide nav by default; shown as dropdown when .open */
  .site-nav {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 24px;
    background: rgba(4, 4, 14, 0.97);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
            backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 998;
  }

  .site-nav.open { display: flex; }

  .site-nav a.nav-link {
    font-size: 1rem;
    font-weight: 300;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    letter-spacing: 0.02em;
    touch-action: manipulation;
  }

  .btn-auth {
    margin-top: 16px;
    text-align: center;
    padding: 14px 24px;
    font-size: 0.95rem;
    touch-action: manipulation;
  }

  .nav-toggle { display: flex; }
}

@media (max-width: 480px) {
  .site-header { padding: 0 16px; }
  .brand img   { height: 32px; }
}