/* ═══════════════════════════════════════════════════════════════════════════
   TECH-X — PROMO NOTIFICATION
   Preserved from the original build, deliberately unchanged in behaviour and
   shape. Only the nav offset hooks were rewired onto the new token names so
   it keeps sitting correctly above the redesigned header.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ─── DARK mode (default) ─── */
.projectunite-notification-container {
  background: linear-gradient(135deg, #1A1A2E 0%, #2D2B55 60%, #1F2544 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 4px 20px;
  display: flex;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  height: auto;
  border-bottom: 1px solid rgba(108, 99, 255, 0.25);
}

/* ─── LIGHT mode ─── */
[data-theme="light"] .projectunite-notification-container {
  background: linear-gradient(135deg, #ece9ff 0%, #f0f0ff 100%);
  border-bottom: 1px solid rgba(108, 99, 255, 0.18);
}

.projectunite-notification-container.projectunite-hidden {
  transform: translateY(-100%);
  opacity: 0;
}

.projectunite-liquid-glass-bar {
  background: rgba(108, 99, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(108, 99, 255, 0.25);
  border-radius: 25px;
  padding: 8px 16px;
  box-shadow: 0 4px 16px rgba(108, 99, 255, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -1px 0 rgba(108, 99, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  width: 100%;
  min-height: 42px;
  position: relative;
  overflow: hidden;
  animation: projectuniteGlassShimmer 3s ease-in-out infinite;
}

[data-theme="light"] .projectunite-liquid-glass-bar {
  background: rgba(108, 99, 255, 0.07);
  border: 1px solid rgba(108, 99, 255, 0.18);
  box-shadow: 0 4px 16px rgba(108, 99, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -1px 0 rgba(108, 99, 255, 0.05);
}

.projectunite-liquid-glass-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: projectuniteLiquidFlow 4s ease-in-out infinite;
}

@keyframes projectuniteGlassShimmer {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(108, 99, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(108, 99, 255, 0.08);
  }
  50% {
    box-shadow: 0 6px 24px rgba(108, 99, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(108, 99, 255, 0.12);
  }
}

@keyframes projectuniteLiquidFlow {
  0% {
      left: -100%;
  }

  50% {
      left: 100%;
  }

  100% {
      left: 100%;
  }
}

/* iOS inner elements inside projectunite bar */
.ios-inner-notification {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.ios-app-icon {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #6C63FF, #4E46E5);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.ios-icon-symbol {
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  font-family: var(--font-mono);
}

.ios-text-content {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ios-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.ios-app-name {
  font-size: 10px;
  font-weight: 700;
  color: rgba(168, 162, 255, 0.9);  /* light purple tint on dark */
  letter-spacing: 0.05em;
}

[data-theme="light"] .ios-app-name {
  color: #4E46E5;  /* brand dark-purple on light */
}

.ios-time-sep {
  font-size: 8px;
  color: rgba(108, 99, 255, 0.5);
}

[data-theme="light"] .ios-time-sep {
  color: rgba(78, 70, 229, 0.4);
}

.ios-time {
  font-size: 10px;
  color: rgba(168, 162, 255, 0.6);
}

[data-theme="light"] .ios-time {
  color: rgba(78, 70, 229, 0.5);
}

.ios-message-container {
  display: grid;
  grid-template-areas: "stack";
  overflow: hidden;
  perspective: 400px;
}

.ios-message {
  grid-area: stack;
  font-size: 11px;
  color: rgba(240, 240, 255, 0.9);  /* soft white with purple tint on dark */
  line-height: 1.35;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.8s ease;
  opacity: 0;
  transform: translateY(100%) rotateX(90deg);
  transform-origin: center bottom;
  pointer-events: none;
  backface-visibility: hidden;
}

.ios-message.active {
  opacity: 1;
  transform: translateY(0) rotateX(0);
  pointer-events: auto;
}

.ios-message.exit {
  opacity: 0;
  transform: translateY(-100%) rotateX(-90deg);
  transform-origin: center top;
}

[data-theme="light"] .ios-message {
  color: #2D2B55;  /* deep purple-navy on light */
}

.ios-message strong {
  font-weight: 700;
  color: #A8A2FF;  /* site accent lighter on dark */
}

[data-theme="light"] .ios-message strong {
  color: #4E46E5;  /* brand dark-purple on light */
}

.projectunite-right-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 15px;
}

.projectunite-register-link {
  background: linear-gradient(135deg, #6C63FF 0%, #4E46E5 100%);
  color: white;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 10px rgba(108, 99, 255, 0.4);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}

.projectunite-register-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.projectunite-register-link:hover::before {
  left: 100%;
}

.projectunite-register-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(108, 99, 255, 0.55);
  background: linear-gradient(135deg, #7b73ff 0%, #5a52e0 100%);
}

.projectunite-close-btn {
  background: rgba(108, 99, 255, 0.2);
  border: none;
  color: rgba(200, 196, 255, 0.9);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-theme="light"] .projectunite-close-btn {
  background: rgba(108, 99, 255, 0.1);
  color: #4E46E5;
}

.projectunite-close-btn:hover {
  background: rgba(108, 99, 255, 0.4);
  color: #fff;
  transform: scale(1.1);
}

[data-theme="light"] .projectunite-close-btn:hover {
  background: rgba(108, 99, 255, 0.2);
  color: #4E46E5;
}

.projectunite-close-btn:active {
  transform: scale(0.95);
}

/* Adjust sticky navbar and mobile menu transition/position */
.navbar {
  transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              background var(--d-base) var(--ease-soft),
              box-shadow var(--d-base) var(--ease-soft),
              border-color var(--d-base) var(--ease-soft);
}

body.projectunite-notification-visible .navbar {
  top: var(--notif-h, 60px); /* measured at runtime; see initPromo in site.js */
}

body.projectunite-notification-visible .mobile-menu {
  top: calc(var(--notif-h, 60px) + var(--nav-h));
}

@media (max-width: 768px) {
  .projectunite-notification-container {
    padding: 4px 8px;
  }

  .projectunite-liquid-glass-bar {
    padding: 6px 12px;
    min-height: 37px;
  }

  .ios-inner-notification {
    gap: 8px;
  }

  .ios-app-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
  }

  .ios-icon-symbol {
    font-size: 8px;
  }

  .ios-message {
    font-size: 10px;
  }

  .projectunite-right-section {
    margin-left: 8px;
  }

  .projectunite-register-link {
    padding: 5px 10px;
    font-size: 10px;
  }

  .projectunite-close-btn {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }
}