@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');

/* ── Glitch heading ── */
.glitch-heading { position: relative; }
.glitch-heading::before,
.glitch-heading::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: white;
  overflow: hidden;
}
.glitch-heading::before {
  left: 2px;
  color: #F2C94C;
  animation: glitch-before 3.5s infinite linear;
  clip-path: polygon(0 20%, 100% 20%, 100% 35%, 0 35%);
}
.glitch-heading::after {
  left: -2px;
  color: #e05a5a;
  animation: glitch-after 3.5s infinite linear;
  clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
}
@keyframes glitch-before {
  0%   { transform: translate(0); opacity: 0; }
  2%   { transform: translate(-3px, 1px); opacity: 1; clip-path: polygon(0 15%, 100% 15%, 100% 32%, 0 32%); }
  4%   { transform: translate(3px, -1px); opacity: 1; clip-path: polygon(0 40%, 100% 40%, 100% 55%, 0 55%); }
  6%   { transform: translate(0); opacity: 0; }
  48%  { transform: translate(0); opacity: 0; }
  50%  { transform: translate(-4px, 2px); opacity: 1; clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%); }
  52%  { transform: translate(2px, -2px); opacity: 1; clip-path: polygon(0 70%, 100% 70%, 100% 85%, 0 85%); }
  54%  { transform: translate(0); opacity: 0; }
  100% { transform: translate(0); opacity: 0; }
}
@keyframes glitch-after {
  0%   { transform: translate(0); opacity: 0; }
  2%   { transform: translate(3px, -1px); opacity: 1; clip-path: polygon(0 55%, 100% 55%, 100% 70%, 0 70%); }
  4%   { transform: translate(-2px, 1px); opacity: 1; clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%); }
  6%   { transform: translate(0); opacity: 0; }
  48%  { transform: translate(0); opacity: 0; }
  50%  { transform: translate(4px, 1px); opacity: 1; clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%); }
  52%  { transform: translate(-3px, -1px); opacity: 1; clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%); }
  54%  { transform: translate(0); opacity: 0; }
  100% { transform: translate(0); opacity: 0; }
}

/* ── Hero diagonal lines ── */
.hero-diagonal-lines {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 18px,
    rgba(255,255,255,0.025) 18px,
    rgba(255,255,255,0.025) 19px
  );
  pointer-events: none;
}

/* ── Scroll line ── */
.hero-scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
  animation: scroll-line 1.6s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes scroll-line {
  0%   { transform: scaleY(0); opacity: 1; transform-origin: top center; }
  50%  { transform: scaleY(1); opacity: 1; transform-origin: top center; }
  100% { transform: scaleY(1); opacity: 0; transform-origin: bottom center; }
}

/* ── Scroll animations ── */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}
[data-animate-left] {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-animate-left].visible {
  opacity: 1;
  transform: translateX(0);
}
[data-animate-right] {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-animate-right].visible {
  opacity: 1;
  transform: translateX(0);
}
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }

/* ── Mega menu ── */
#mega-menu {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  padding-top: 1rem;
  width: 100vw;
  max-width: 64rem;
  z-index: 99;
}
.mega-menu-trigger:hover #mega-menu,
#mega-menu:hover {
  display: block;
}

/* ── Mobile menu ── */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#mobile-menu.open {
  max-height: 600px;
}

/* ── Typewriter cursor blink ── */
.tw-cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: white;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1.06s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── 15th badge confetti ── */
.confetti-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 1px;
  animation: confetti-fly 0.8s ease-out forwards;
}
@keyframes confetti-fly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.3) rotate(var(--rot)); }
}

/* ── Magnetic text ── */
.magnetic-text {
  display: inline-block;
  cursor: default;
  transition: transform 0.15s ease;
}

/* ── Atlas Terminal Chat ── */
.chat-line {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}
.chat-prefix {
  flex-shrink: 0;
  margin-top: 0.05em;
  font-weight: 700;
}
#chat-history {
  scrollbar-width: thin;
  scrollbar-color: rgba(242,201,76,0.3) transparent;
}
#chat-history::-webkit-scrollbar { width: 3px; }
#chat-history::-webkit-scrollbar-track { background: transparent; }
#chat-history::-webkit-scrollbar-thumb { background: rgba(242,201,76,0.3); border-radius: 2px; }
#chat-input::placeholder { color: rgba(255,255,255,0.25); }

/* ── Language selector ── */
.lang-active {
  background: rgba(242,201,76,0.3);
  color: #3c3c3b !important;
}

/* ── Nav overlay fix for mega ── */
nav { z-index: 50; }

/* ── Smooth transition for nav bg ── */
#main-nav {
  transition: background-color 0.3s, box-shadow 0.3s;
}