/* ==========================================================================
   Intermynd Instruments — Design System
   v1.0
   ========================================================================== */

/* --- Font Face — Graxebeosa (display / pixel) ----------------------------- */
@font-face {
  font-family: 'Pixel';
  src: url('Nexmod-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* --- Design Tokens -------------------------------------------------------- */
:root {
  /* Palette — primary accent */
  --color-primary:       #6f26de;
  --color-primary-hover: #5a1eb2;

  /* Palette — dark surfaces */
  --color-bg-darkest:    #000000;
  --color-bg-dark:       #0a0a0a;
  --color-bg-muted:      #050505;

  /* Palette — light surfaces */
  --color-bg-light:      #ffffff;
  --color-bg-off:        #f9fafb;  /* Tailwind neutral-50 */

  /* Palette — borders */
  --color-border-dark:   #262626;  /* Tailwind neutral-800 */
  --color-border-light:  #e5e5e5;  /* Tailwind neutral-200 */

  /* Palette — text */
  --color-text-heading:  #171717;  /* neutral-900 */
  --color-text-body:     #737373;  /* neutral-500 */
  --color-text-muted:    #a3a3a3;  /* neutral-400 */

  /* Typography */
  --font-sans:    'Geist', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-display: 'Pixel', monospace;
}

/* --- Background Patterns -------------------------------------------------- */

/* Subtle dot grid — dark version (for light surfaces) */
.dot-grid {
  background-image: radial-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Subtle dot grid — primary-tinted (for callouts) */
.dot-grid-primary {
  background-image: radial-gradient(rgba(111, 38, 222, 0.15) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* --- Hamburger Menu ------------------------------------------------------- */
.hamburger-line {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-menu-open .hamburger-top {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-open .hamburger-mid {
  opacity: 0;
}

.mobile-menu-open .hamburger-bot {
  transform: translateY(-8px) rotate(-45deg);
}

/* --- Product Grid Layout -------------------------------------------------- */

/* Full-width tile grid — no rounded corners, no gaps, internal borders */
.products-grid > * {
  border-bottom: 1px solid var(--color-border-dark);
}

.products-grid > *:last-child {
  border-bottom: none;
}

/* Tablet: 2-column → add right borders, remove from even children */
@media (min-width: 640px) {
  .products-grid > * {
    border-right: 1px solid var(--color-border-dark);
  }
  .products-grid > *:nth-child(even) {
    border-right: none;
  }
}

/* Desktop: 3-column → reset all to have right border, then drop from 3n */
@media (min-width: 1024px) {
  .products-grid > *:nth-child(n) {
    border-right: 1px solid var(--color-border-dark);
  }
  .products-grid > *:nth-child(3n) {
    border-right: none;
  }
}

/* --- How-It-Works / 2-col Grid -------------------------------------------- */
.how-grid > * {
  border-bottom: 1px solid var(--color-border-dark);
}

.how-grid > *:last-child {
  border-bottom: none;
}

@media (min-width: 640px) {
  .how-grid > * {
    border-bottom: none;
    border-right: 1px solid var(--color-border-dark);
  }
  .how-grid > *:last-child {
    border-right: none;
  }
}

/* --- Section Header / Label ----------------------------------------------- */

/* / Section Name ■ */
.section-label {
  font-size:    0.75rem;    /* text-xs */
  font-weight:  600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-primary);
}

.section-label .slash {
  color: var(--color-text-muted);
}

/* --- Utility -------------------------------------------------------------- */

/* Hide scrollbar (for carousels / horizontal scroll) */
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* --- Terminal / Typewriter Animations ---------------------------------- */

/* Initial hidden state */
.terminal-label .term-slash,
.terminal-label .term-block {
  opacity: 0;
}

.terminal-label .term-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  clip-path: inset(0 100% 0 0);
}

/* Animate on trigger */
.terminal-label.terminal-active .term-slash {
  animation: blink3 1s ease forwards;
  animation-delay: 0.1s;
}

.terminal-label.terminal-active .term-text {
  animation: type-reveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.3s;
}

.terminal-label.terminal-active .term-block {
  animation: blink5 1.6s ease forwards;
  animation-delay: 0.9s;
}

/* Keyframes — blink 3 times, end visible */
@keyframes blink3 {
  0%, 14% { opacity: 1; }
  15%, 28% { opacity: 0; }
  29%, 42% { opacity: 1; }
  43%, 56% { opacity: 0; }
  57%, 71% { opacity: 1; }
  72%, 85% { opacity: 0; }
  86%, 100% { opacity: 1; }
}

/* Keyframes — blink 5 times, end visible */
@keyframes blink5 {
  0%, 8% { opacity: 1; }
  9%, 16% { opacity: 0; }
  17%, 24% { opacity: 1; }
  25%, 32% { opacity: 0; }
  33%, 40% { opacity: 1; }
  41%, 48% { opacity: 0; }
  49%, 56% { opacity: 1; }
  57%, 64% { opacity: 0; }
  65%, 72% { opacity: 1; }
  73%, 80% { opacity: 0; }
  81%, 100% { opacity: 1; }
}

/* Keyframes — clip-path reveal left to right */
@keyframes type-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* --- Hero Blinking Square ------------------------------------------------ */

.hero-blink {
  opacity: 0;
  animation:
    hero-appear 0.3s ease 0.15s forwards,
    blink5 2s ease 0.6s infinite;
}

@keyframes hero-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Section Fade-in ----------------------------------------------------- */

.fade-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fade-section.fade-visible {
  opacity: 1;
  transform: translateY(0);
}