/* Shared desktop/mobile portfolio header and animated AI entry. */
.shell > .site-header {
  display: grid;
  container: site-header / inline-size;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand actions";
  align-items: center;
  gap: 22px;
  padding: 30px 0;
}

.site-header > .brand {
  grid-area: brand;
  justify-self: start;
}

.site-header .brand .brand-details {
  max-width: none;
  text-wrap: initial;
}

.site-header-actions {
  grid-area: actions;
  display: flex;
  align-items: center;
  gap: 14px;
}

.shell > .site-header .header-connect {
  margin: 0;
}

.shell > .site-header .socials {
  position: static;
}

.site-header .socials a {
  transition: background-color .2s, border-color .2s;
}

.site-header .socials a:hover {
  background-color: #e9f1e6;
  border-color: #abc3ac;
}

.khoa-ai {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  min-width: 174px;
  min-height: 50px;
  padding: 7px 11px;
  border: 1px solid #56896b;
  border-radius: 14px;
  background: radial-gradient(ellipse at 12% 0%, #3b7257, transparent 68%), #173e2e;
  box-shadow: 0 5px 12px -7px #1e4935a6, inset 0 1px #e1ffda2e;
  color: #f5fbf0;
  text-align: left;
  transition: background-color .2s, box-shadow .2s;
  animation: khoa-ai-border 6s ease-in-out infinite;
}

.khoa-ai::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(104deg, transparent 30%, #deffd245 49%, transparent 68%);
  content: "";
  pointer-events: none;
  transform: translateX(-110%);
  animation: khoa-ai-sheen 6s ease-in-out infinite;
}

.khoa-ai:hover,
.khoa-ai:focus-visible {
  background-color: #26543e;
  box-shadow: 0 8px 16px -7px #1e493590, inset 0 1px #e1ffda52;
}

.khoa-ai-mark {
  width: 100%;
  color: #d7f9b9;
  filter: drop-shadow(0 0 4px #c2ffa34a);
}

.khoa-ai-orbit {
  transform-origin: 16px 16px;
  animation: khoa-ai-orbit 6s linear infinite;
}

.khoa-ai-sparkle {
  transform-origin: 16px 16px;
  animation: khoa-ai-sparkle 3s ease-in-out infinite;
}

.khoa-ai-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  white-space: nowrap;
}

.khoa-ai-copy strong {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
}

.khoa-ai-copy small {
  color: #d2e9d0;
  font-size: 11px;
  line-height: 1.2;
}

.khoa-ai-arrow {
  width: 100%;
  color: #d7f9b9;
  transition: transform .2s ease;
}

.khoa-ai:hover .khoa-ai-arrow,
.khoa-ai:focus-visible .khoa-ai-arrow {
  transform: translate(1px, -1px);
}

@keyframes khoa-ai-orbit {
  to { transform: rotate(360deg); }
}

@keyframes khoa-ai-sparkle {
  50% { transform: scale(1.15); }
}

@keyframes khoa-ai-border {
  28%, 52% { border-color: #8bb678; }
}

@keyframes khoa-ai-sheen {
  12% { transform: translateX(-110%); }
  48%, 100% { transform: translateX(110%); }
}

@media (max-width: 820px) {
  .shell > .site-header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "actions";
    gap: 15px 12px;
    padding: 23px 0;
  }

.site-header-actions {
    justify-content: space-between;
  }

  .site-header .brand .brand-headline {
    margin-top: 7px;
  }
}

@media (max-width: 480px) {
  .site-header-actions {
    gap: 8px;
  }

  .shell > .site-header .header-connect,
  .shell > .site-header .socials {
    gap: 4px;
  }

  .khoa-ai {
    grid-template-columns: 24px minmax(0, 1fr) 12px;
    gap: 4px;
    min-width: 137px;
    min-height: 46px;
    padding: 6px 7px;
    border-radius: 12px;
  }

  .khoa-ai-copy strong {
    font-size: 12px;
  }

  .khoa-ai-copy small {
    font-size: 10px;
  }
}

@container site-header (width < 333px) {
  .site-header-actions {
    flex-wrap: wrap;
  }

  .khoa-ai {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .khoa-ai,
  .khoa-ai::before,
  .khoa-ai-orbit,
  .khoa-ai-sparkle {
    animation: none;
  }

  .khoa-ai:hover .khoa-ai-arrow,
  .khoa-ai:focus-visible .khoa-ai-arrow {
    transform: none;
  }
}