@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Onest:wght@300;400;500;600&display=swap');

:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #000000;
  color: #ededed;
  overflow-x: hidden;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.025em;
  font-weight: 500;
}

::selection {
  background: #ffffff;
  color: #000000;
}

/* Card bottom title: exactly 400 weight, 15px, white */
.card-title-bottom {
  font-weight: 400 !important;
  font-size: 15px !important;
  color: #ffffff !important;
  letter-spacing: -0.01em;
}

/* Subtle, minimal dark scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #000000;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Code & technical typography */
pre, code {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "calt" 1;
}

/* Vertical smooth fade mask for Bento Card contents */
.mask-fade-y {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 78%, transparent 100%);
}

/* Infinite continuous upward chat scroll */
@keyframes chatScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.chat-scroll-track {
  animation: chatScroll 22s linear infinite;
}

.chat-scroll-track:hover {
  animation-play-state: paused;
}

/* Animated pulse for REC camera in The Last Costume */
@keyframes recBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.15;
  }
}

.rec-dot {
  animation: recBlink 1.2s infinite ease-in-out;
}

/* Terminal blink cursor */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cursor-blink {
  animation: cursorBlink 0.9s infinite step-start;
}

/* Toast alert notification */
#toast {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

/* HERO ENTRANCE CASCADE ANIMATION (STAGGERED REVEAL) */
@keyframes heroEntrance {
  0% {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

.hero-animate {
  animation: heroEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  will-change: transform, opacity, filter;
}

.anim-delay-nav    { animation-delay: 0.05s; }
.anim-delay-badge  { animation-delay: 0.15s; }
.anim-delay-title  { animation-delay: 0.25s; }
.anim-delay-sub    { animation-delay: 0.35s; }
.anim-delay-btn    { animation-delay: 0.45s; }
.anim-delay-bento  { animation-delay: 0.55s; }

/* SCROLL REVEAL (INTERSECTION OBSERVER) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* GROK VOICE ORB OPTICAL LENS ANIMATION */
@keyframes orbFloat {
  0% {
    transform: scale(1.35) rotate(0deg);
  }
  100% {
    transform: scale(1.38) rotate(8deg);
  }
}

.orb-floating {
  animation: orbFloat 12s ease-in-out infinite alternate;
  will-change: transform;
}

/* MOBILE & ACCESSIBILITY OPTIMIZATIONS */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  -webkit-tap-highlight-color: transparent;
}

/* Smooth hidden scrollbars for horizontal pill rows */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Reduced motion for accessibility, low power & performance */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-animate {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .orb-floating {
    animation: none !important;
  }
  .chat-scroll-track {
    animation: none !important;
  }
}

/* TECHNICAL MOBILE ADAPTATION (@media (max-width: 768px)) */
@media (max-width: 768px) {
  /* 1. Prevent horizontal scrolling */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
  }

  /* 2. Multi-column grids to 1 vertical column & prevent horizontal expansion */
  .grid:not(.grid-cols-12):not(.grid-cols-3) {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Reset column spans in mobile single-column view & ensure grid items never exceed screen */
  .grid:not(.grid-cols-12):not(.grid-cols-3) > * {
    grid-column: span 1 / span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .grid:not(.grid-cols-12) > [class*="md:col-span-"],
  .grid:not(.grid-cols-12) > [class*="lg:col-span-"] {
    grid-column: span 1 / span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Inline mini-metrics row (3 columns) */
  .grid.grid-cols-3,
  [class*="grid-cols-3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .grid.grid-cols-3 > *,
  [class*="grid-cols-3"] > * {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Bento collage 12-column grid */
  .grid.grid-cols-12,
  [class*="grid-cols-12"] {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  .grid.grid-cols-12 > *,
  [class*="grid-cols-12"] > * {
    min-width: 0 !important;
  }
  .grid.grid-cols-12 > .col-span-7,
  [class*="grid-cols-12"] > .col-span-7 {
    grid-column: span 7 / span 7 !important;
  }
  .grid.grid-cols-12 > .col-span-5,
  [class*="grid-cols-12"] > .col-span-5 {
    grid-column: span 5 / span 5 !important;
  }

  /* 3. Text and paddings: safe 16px lateral padding for primary containers */
  main,
  section,
  header > div,
  footer > div {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Reduce typography so headings wrap cleanly without overflowing */
  h1, .hero-title, [data-i18n-html="hero_title"], [data-i18n-html="docs_hero_title"] {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  h2, [data-i18n-html="dev_title"] {
    font-size: clamp(24px, 6vw, 30px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* 4. Code & terminal blocks: horizontal finger scroll without pushing page width */
  pre,
  code {
    max-width: 100% !important;
  }

  #devCodeContainer,
  #docCodeView {
    overflow-x: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
  }

  #devCodeContainer pre,
  #docCodeView pre {
    overflow-x: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: pre !important;
  }

  /* 5. Navigation: prevent overlapping on small screens */
  header nav {
    flex-wrap: wrap;
  }

  /* Media & canvas constraints */
  img, video, canvas {
    max-width: 100% !important;
    height: auto;
  }

  /* 6. Orion Chat (mobile touch scroll & bubble constraints) */
  #orionChatCard {
    background-color: #0f0f11 !important;
    border-radius: 16px !important;
    padding: 16px !important;
    max-height: 440px !important;
    overflow: hidden !important;
  }

  #orionChatContainer {
    max-height: 380px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #orionChatContainer .chat-scroll-track {
    animation: none !important;
    padding-bottom: 24px;
  }

  #orionChatContainer .chat-msg-user,
  #orionChatContainer [class*="ml-auto"] {
    max-width: 85% !important;
    width: auto !important;
  }

  #orionChatContainer .chat-msg-ai,
  #orionChatContainer [class*="mr-auto"] {
    max-width: 90% !important;
    width: auto !important;
  }

  /* 7. Hide text in logo on mobile */
  .logo-text {
    display: none !important;
  }
}

/* Fullscreen Solid Mobile Overlay Menu (Universal for all viewports where burger is active) */
#mobileNavDrawer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: #09090b;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px) scale(0.98);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.28s;
}

#mobileNavDrawer.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* Staggered cascading fade-in for mobile menu items */
.mobile-nav-item {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s ease;
}

#mobileNavDrawer.active .mobile-nav-item {
  opacity: 1;
  transform: translateY(0);
}

#mobileNavDrawer.active .mobile-nav-item:nth-child(1) { transition-delay: 0.05s; }
#mobileNavDrawer.active .mobile-nav-item:nth-child(2) { transition-delay: 0.10s; }
#mobileNavDrawer.active .mobile-nav-item:nth-child(3) { transition-delay: 0.15s; }
#mobileNavDrawer.active .mobile-nav-item:nth-child(4) { transition-delay: 0.20s; }
#mobileNavDrawer.active .mobile-nav-item:nth-child(5) { transition-delay: 0.25s; }

/* Language switcher button clean minimal styles (NO ANIMATION) */
.lang-btn,
button[onclick*="toggleLanguage"] {
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
  user-select: none;
}

.lang-btn:hover,
button[onclick*="toggleLanguage"]:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.lang-btn:active,
button[onclick*="toggleLanguage"]:active {
  opacity: 0.75;
}

.lang-label {
  display: inline-block;
}

/* ==========================================================================
   PREMIUM DESKTOP MICRO-INTERACTIONS (XAI / APPLE HOVER LIFTS)
   ========================================================================== */
@media (min-width: 769px) {
  /* Interactive Bento cards & News cards hover lift */
  #projects .grid > div,
  #projects .grid > a,
  #latest-news .grid > a {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #projects .grid > div:hover,
  #projects .grid > a:hover,
  #latest-news .grid > a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
  }

  /* Interactive action buttons slight lift */
  a.rounded-full,
  button.rounded-full {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  a.rounded-full:hover,
  button.rounded-full:hover {
    transform: translateY(-2px);
  }
}