/* Full font: the original inline subset contains only the letters in DeepBuild. */
@font-face {
  font-family: 'Jakarta Hero';
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  src: url('./PlusJakartaSans.ttf') format('truetype');
}

body {
  font-family: 'Jakarta Hero', ui-sans-serif, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
html, body { height: 100%; overflow: hidden; }

.wrap { max-width: none; padding: 0; }
.info-panel { position: fixed; z-index: 3; top: 29px; font-size: 16px; }
.founders-panel { left: 36px; text-align: left; }
.exploring-panel { right: 36px; text-align: right; }
.info-panel summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-weight: 500;
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 4px; transition: text-decoration-color 180ms ease;
}
.info-panel summary::-webkit-details-marker { display: none; }
.info-panel summary:hover, .info-panel[open] summary { text-decoration-color: currentColor; }
.info-copy {
  position: absolute; top: 100%; right: 0;
  width: min(410px, calc(100vw - 48px));
  max-height: calc(100svh - 110px); overflow-y: auto;
  padding: 22px 0 0 28px; text-align: left;
  background: var(--bg); color: var(--text);
  font-size: 16px; line-height: 1.62;
  will-change: opacity, transform;
}
.info-copy p { margin: 0 0 14px; }
.info-copy p:last-child { margin-bottom: 0; }
.info-copy strong { font-weight: 600; }
.founders-panel .info-copy { left: 0; right: auto; padding: 22px 28px 0 0; }
.contact-panel { top: auto; left: 36px; bottom: 28px; text-align: left; }
.contact-copy {
  top: auto; right: auto; bottom: 100%; left: 0;
  width: min(360px, calc(100vw - 48px));
  padding: 0 28px 22px 0;
}
.hero {
  min-height: 100svh; display: grid; place-items: center; padding: 80px 24px;
  transition: transform 760ms cubic-bezier(.22, .61, .36, 1);
}
.brand {
  width: max-content; max-width: 100%; margin: 0; padding: 5px 10px;
  display: flex; justify-content: center; align-items: center; gap: 27.5px;
  cursor: default; user-select: none; -webkit-user-select: none;
}
.brand.is-thinking { width: var(--hover-width); }
.brand-mark { position: relative; width: 85px; height: 90px; flex: 0 0 85px; }
.brand svg {
  position: relative; z-index: 1; width: 100%; height: 100%;
  transform-origin: 50% 52%;
}
.brand-glow {
  position: absolute; inset: -14px; border-radius: 50%; opacity: 0;
  background: conic-gradient(from 0deg,
    rgba(100,160,210,.7), rgba(140,130,180,.66), rgba(200,160,190,.64),
    rgba(190,170,120,.6), rgba(120,180,150,.66), rgba(100,160,210,.7));
  filter: blur(14px); transition: opacity 420ms ease-out;
}
.wordmark {
  position: relative; display: block; overflow: visible;
  height: 1.42em; width: 5.3em;
  font-family: 'Jakarta Hero', ui-sans-serif, sans-serif;
  font-size: clamp(42.5px, 5.625vw, 60px); font-weight: 600;
  line-height: 1.3; letter-spacing: -.035em;
}
.brand.has-long-label .wordmark { font-size: clamp(18px, 5.7vw, 60px); }
.wordmark.is-transitioning { overflow: hidden; }
.wordmark-label { position: absolute; top: .06em; left: 0; white-space: nowrap; }
.wordmark-label.entering { animation: labelIn 420ms cubic-bezier(.45,.05,.25,1) both; }
.wordmark-label.leaving { animation: labelOut 420ms cubic-bezier(.45,.05,.25,1) both; }
@keyframes labelIn {
  from { opacity: 0; transform: translateY(100%); }
  50% { opacity: .7; }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes labelOut {
  from { opacity: 1; transform: translateY(0); }
  50% { opacity: .2; }
  to { opacity: 0; transform: translateY(-100%); }
}
/* Thinking timing and palette taken from the application's AskAvatar. */
.brand.is-thinking svg { animation: markSpin 4.8s cubic-bezier(.45,.05,.25,1) infinite, markHue 4.8s ease-in-out infinite; }
.brand.is-thinking .brand-glow { animation: glowOrbit 4.8s linear infinite; }
@keyframes markSpin {
  0% { transform: rotate(0deg); } 3% { transform: rotate(-12deg); }
  18% { transform: rotate(372deg); } 24%,48% { transform: rotate(360deg); }
  51% { transform: rotate(348deg); } 66% { transform: rotate(732deg); }
  72%,100% { transform: rotate(720deg); }
}
@keyframes glowOrbit {
  0%,100% { opacity: .38; transform: scale(.98) rotate(0deg); }
  50% { opacity: .54; transform: scale(1.05) rotate(180deg); }
  99.99% { transform: scale(.98) rotate(360deg); }
}
@keyframes markHue {
  0%,100% { filter: drop-shadow(0 0 4px rgba(100,160,210,.5)); }
  25% { filter: drop-shadow(0 0 4px rgba(140,130,180,.52)); }
  50% { filter: drop-shadow(0 0 4px rgba(200,160,190,.48)); }
  75% { filter: drop-shadow(0 0 4px rgba(120,180,150,.46)); }
}
footer { position: fixed; right: 36px; bottom: 28px; margin: 0; padding: 0; border: 0; font-size: 15px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }
@media (min-width: 780px) and (max-width: 1250px) {
  body:has(.exploring-panel[open]) .hero { transform: translateX(max(-210px, -25vw)); }
}
@media (max-width: 480px) {
  .info-panel { top: 22px; font-size: 14px; }
  .founders-panel { left: 24px; }
  .exploring-panel { right: 24px; }
  .info-copy { padding: 22px 0 0 16px; font-size: 14px; }
  .founders-panel .info-copy { padding: 22px 16px 0 0; }
  .contact-panel { top: auto; left: 24px; bottom: 24px; }
  .contact-copy { padding: 0 16px 22px 0; }
  .brand { gap: 4.17vw; }
  .brand-mark { width: 13.02vw; height: 13.8vw; flex-basis: 13.02vw; }
  .wordmark { font-size: 8.85vw; }
  .brand.has-long-label .wordmark { font-size: max(18px, 5.7vw); }
  footer { right: 24px; bottom: 24px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero { transition: none; }
  .brand.is-thinking svg, .brand.is-thinking .brand-glow,
  .wordmark-label.entering, .wordmark-label.leaving { animation: none; }
  .brand.is-thinking .brand-glow { opacity: .4; }
  .brand-glow { transition: none; }
}