/* Bintang Tech Studio - Main Styling */
@import url('./design-tokens.css');

body {
  font-family: var(--font-sans);
  background-color: var(--color-ivory-100);
  color: var(--color-obsidian-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
.font-heading {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

code,
kbd,
samp,
.font-mono {
  font-family: var(--font-mono);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0c0a09;
}
::-webkit-scrollbar-thumb {
  background: #2a2420;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3a322c;
}

/* Studio Staggered Blur-In Animation */
@keyframes studioBlurIn {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(6px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
  }
}

.animate-blur-in {
  animation: studioBlurIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Dropdown mega menu transitions */
.dropdown-menu-enter {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition:
    opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-menu-enter.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.glass-input {
  background: rgba(20, 20, 23, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-input:focus-within {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.card-hover {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  background: #18181c;
}

.glass-input-raycast {
  background: rgba(18, 20, 25, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-input-raycast:focus-within {
  border-color: rgba(249, 115, 22, 0.4);
  box-shadow: 0 0 0 2px rgba(224, 93, 56, 0.15);
}

.card-hover-raycast {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover-raycast:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  background-color: #171a22;
}

/* Micro-interaction button active state */
button:active:not(:disabled),
.btn-press:active {
  transform: scale(0.98);
}

/* Telegram Bot Simulation Styles */
.telegram-frame {
  max-width: 440px;
  width: 100%;
  height: 740px;
  background-color: #0e1621;
  color: #ffffff;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 20px 40px -10px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

@media (max-width: 640px) {
  .telegram-frame {
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
    border: none;
  }
}

.telegram-chat-area {
  background-color: #0e1621;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
}

.tg-bubble-bot {
  background-color: #182533;
  color: #ffffff;
  border-radius: 14px 14px 14px 4px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  max-width: 88%;
}

.tg-bubble-user {
  background-color: #2b5278;
  color: #ffffff;
  border-radius: 14px 14px 4px 14px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  max-width: 85%;
  margin-left: auto;
}

.tg-btn-keyboard {
  background-color: #242f3d;
  color: #64b5f6;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  transition: all 0.15s ease;
}
.tg-btn-keyboard:hover {
  background-color: #2b3a4a;
  color: #90caf9;
}
.tg-btn-keyboard:active {
  transform: scale(0.97);
}

/* Typing Dots Animation */
.typing-dots span {
  width: 5px;
  height: 5px;
  background-color: #708499;
  border-radius: 50%;
  display: inline-block;
  animation: typingBounce 1.4s infinite ease-in-out both;
}
.typing-dots span:nth-child(1) {
  animation-delay: -0.32s;
}
.typing-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typingBounce {
  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Top Demo Switcher Bar */
.demo-topbar {
  background: rgba(14, 17, 23, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Modal Backdrops */
.modal-backdrop {
  background-color: rgba(11, 13, 16, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Transitions */
.view-container {
  min-height: calc(100vh - 48px);
}

/* Respect reduced-motion preferences across the static demo surfaces. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .animate-blur-in {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  button:active:not(:disabled),
  .btn-press:active {
    transform: none !important;
  }
}

/* Contact sitemap: expand small text links to a comfortable touch target */
.contact-sitemap li > a,
.contact-sitemap li > button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}