/* ================================================================
   TATAR — Code-to-Site Intro Animation Styles
   ================================================================ */

/* --- Variables --- */
:root {
  --intro-bg: #fff5f8;
  --ide-bg: rgba(255, 255, 255, 0.96);
  --ide-border: rgba(219, 39, 119, 0.15);
  --ide-glow: rgba(219, 39, 119, 0.04);
  --ide-header-bg: rgba(255, 240, 245, 0.95);
  --ide-sidebar-bg: rgba(255, 245, 250, 0.92);
  --ide-statusbar-bg: rgba(255, 240, 245, 0.95);
  --code-comment: #8a8a8f;
  --code-keyword: #d01760;
  --code-tag: #007aff;
  --code-string: #107c41;
  --code-prop: #b25900;
  --code-func: #7a00d0;
  --code-brace: #1c1c1e;
  --code-text: #1c1c1e;
  --cursor-color: #d01760;
  --highlight-glow: rgba(219, 39, 119, 0.15);
}

/* --- Scroll Track Container --- */
#intro-pin-container {
  position: relative;
  height: 3000px; /* scroll distance for ScrollTrigger */
}

/* --- Full-viewport Overlay --- */
.tt-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--intro-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  perspective: 1200px;
}

/* --- Glassmorphic IDE Window --- */
.tt-intro-ide {
  width: min(88vw, 860px);
  height: min(75vh, 540px);
  background: var(--ide-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--ide-border);
  border-radius: 14px;
  box-shadow:
    0 30px 80px -15px rgba(0, 0, 0, 0.8),
    0 0 60px -10px var(--ide-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform, opacity;
}

/* --- IDE Header (traffic lights + tabs) --- */
.tt-ide-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--ide-header-bg);
  border-bottom: 1px solid var(--ide-border);
  flex-shrink: 0;
}

.tt-ide-dots {
  display: flex;
  gap: 7px;
}

.tt-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.tt-dot--red { background: #ff5f56; }
.tt-dot--yellow { background: #ffbd2e; }
.tt-dot--green { background: #27c93f; }

.tt-ide-tabs {
  display: flex;
  gap: 2px;
  margin-left: 12px;
}

.tt-ide-tab {
  padding: 5px 14px;
  border-radius: 6px 6px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--code-comment);
  background: transparent;
  transition: background 0.2s, color 0.2s;
}

.tt-ide-tab--active {
  background: var(--ide-bg);
  color: var(--code-text);
  border-left: 1px solid var(--ide-border);
  border-right: 1px solid var(--ide-border);
  border-top: 1px solid var(--ide-border);
}

.tt-ide-actions {
  margin-left: auto;
  color: var(--code-comment);
  opacity: 0.5;
}

/* --- IDE Body (sidebar + editor) --- */
.tt-ide-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* --- Sidebar --- */
.tt-ide-sidebar {
  width: 160px;
  padding: 12px 0;
  background: var(--ide-sidebar-bg);
  border-right: 1px solid var(--ide-border);
  flex-shrink: 0;
}

.tt-sidebar-title {
  padding: 4px 14px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--code-comment);
}

.tt-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--code-comment);
  cursor: default;
  transition: background 0.15s;
}

.tt-sidebar-item svg {
  opacity: 0.5;
  flex-shrink: 0;
}

.tt-sidebar-item--active {
  background: rgba(0, 0, 0, 0.04);
  color: var(--code-text);
}

/* --- Code Editor Area --- */
.tt-ide-editor {
  flex: 1;
  display: flex;
  padding: 16px 0 16px 0;
  overflow: hidden;
  position: relative;
}

.tt-line-numbers {
  padding: 0 12px 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.25);
  text-align: right;
  user-select: none;
  flex-shrink: 0;
  white-space: pre-line;
}

.tt-code-pre {
  margin: 0;
  padding: 0 20px 0 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.75;
  color: var(--code-text);
  white-space: pre;
  overflow: hidden;
  flex: 1;
}

.tt-code-editor {
  display: block;
}

/* --- Syntax Colors --- */
.tt-code-comment { color: var(--code-comment); font-style: italic; }
.tt-code-keyword { color: var(--code-keyword); }
.tt-code-tag { color: var(--code-tag); }
.tt-code-string { color: var(--code-string); }
.tt-code-prop { color: var(--code-prop); }
.tt-code-func { color: var(--code-func); }
.tt-code-brace { color: var(--code-brace); }

/* --- Character Spans (for typing animation) --- */
.tt-char {
  opacity: 0;
  display: inline;
  transition: none; /* GSAP handles transitions */
}

/* --- Cursor --- */
.tt-editor-cursor {
  position: absolute;
  width: 2px;
  height: 16px;
  background: var(--cursor-color);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--cursor-color);
  pointer-events: none;
  z-index: 5;
  animation: tt-cursor-blink 1s step-end infinite;
}

@keyframes tt-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Code Line Highlight Glow --- */
.tt-line-glow {
  background: var(--highlight-glow) !important;
  border-radius: 3px;
  box-shadow: 0 0 20px var(--highlight-glow);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* --- Status Bar --- */
.tt-ide-statusbar {
  display: flex;
  gap: 20px;
  padding: 5px 16px;
  background: var(--ide-statusbar-bg);
  border-top: 1px solid var(--ide-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--code-comment);
  flex-shrink: 0;
}

/* ================================================================
   State: tt-intro-active — hide page elements during animation
   ================================================================ */
html.tt-intro-active .header-ultra {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
}

html.tt-intro-active .hero {
  position: fixed;
  inset: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
}

html.tt-intro-active .hero-copy {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}

html.tt-intro-active .hero-visual {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
}

html.tt-intro-active #telemetry-col {
  opacity: 0;
  pointer-events: none;
}

/* Hide SOHub homepage content during preloader compilation */
html.tt-intro-active .sohub-header,
html.tt-intro-active .home-redesign {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide default TATAR elements on the homepage, reset layout boundaries */
body.tm-home-shell .header-ultra,
body.tm-home-shell .huge-footer,
body.tm-home-shell #contact,
body.tm-home-shell .rich-divider,
body.tm-home-shell .float-cta,
body.tm-home-shell .avail-banner {
  display: none !important;
}

body.tm-home-shell .page-wrapper {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  padding-top: 0 !important;
}

/* Keep scroll progress hidden during intro */
html.tt-intro-active .scroll-progress {
  opacity: 0;
}

/* Keep other decorative elements hidden */
html.tt-intro-active .avail-banner,
html.tt-intro-active .float-cta,
html.tt-intro-active .cursor-glow,
html.tt-intro-active .orb {
  opacity: 0 !important;
  pointer-events: none;
}

/* ================================================================
   Responsive: Mobile
   ================================================================ */
@media (max-width: 768px) {
  #intro-pin-container {
    height: auto; /* no scroll pinning on mobile */
  }

  .tt-intro-ide {
    width: 94vw;
    height: 55vh;
  }

  .tt-ide-sidebar {
    display: none;
  }

  .tt-ide-tab:not(.tt-ide-tab--active) {
    display: none;
  }

  .tt-code-pre {
    font-size: 10px;
  }

  .tt-line-numbers {
    font-size: 10px;
    padding: 0 8px 0 10px;
  }
}

/* ================================================================
   Split Layout & Monospace Terminal Logs
   ================================================================ */
.tt-ide-content-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.tt-ide-editor {
  flex: 1;
  display: flex;
  padding: 16px 0 16px 0;
  overflow-y: auto;
  position: relative;
}

.tt-ide-terminal {
  height: 140px;
  background: rgba(255, 245, 250, 0.98);
  border-top: 1px solid var(--ide-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.tt-terminal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  background: rgba(255, 240, 245, 0.98);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--code-comment);
  letter-spacing: 0.08em;
  user-select: none;
}

.tt-terminal-status {
  color: var(--cursor-color);
}

.tt-terminal-body {
  flex: 1;
  padding: 10px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.6;
  overflow-y: auto;
  color: var(--code-text);
}

.tt-log-line {
  margin-bottom: 4px;
  white-space: pre-wrap;
  word-break: break-all;
}
.tt-log-line--system { color: var(--code-comment); }
.tt-log-line--info {
  color: #007aff;
}
.tt-log-line--success {
  color: #107c41;
}

/* ================================================================
   Canvas Particles Background
   ================================================================ */
#ttIntroParticles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.tt-intro-ide {
  z-index: 2; /* float IDE above canvas */
}

/* ================================================================
   Hologram Previews (Glassmorphism Floating Cards)
   ================================================================ */
.tt-hologram {
  position: absolute;
  z-index: 3;
  background: rgba(255, 240, 248, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(219, 39, 119, 0.25);
  border-radius: 12px;
  box-shadow:
    0 20px 50px rgba(219, 39, 119, 0.15),
    0 0 30px rgba(219, 39, 119, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.7) rotateX(15deg) rotateY(-15deg);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Nav Hologram */
.tt-hologram--nav {
  top: 15%;
  left: 8%;
  width: 290px;
  padding: 10px 16px;
}
.tt-holo-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tt-holo-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: #d01760;
  letter-spacing: 0.1em;
}
.tt-holo-links {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--code-comment);
}
.tt-holo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #db2777;
  box-shadow: 0 0 8px rgba(219, 39, 119, 0.6);
}

/* Bento Hologram */
.tt-hologram--bento {
  top: 36%;
  left: 4%;
  width: 210px;
}
.tt-holo-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #d01760;
  font-weight: 700;
  margin-bottom: 12px;
}
.tt-holo-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 40px);
  gap: 8px;
}
.tt-holo-card {
  background: rgba(219, 39, 119, 0.06);
  border: 1px solid rgba(219, 39, 119, 0.1);
  border-radius: 6px;
}
.tt-holo-card--1 { grid-column: span 3; background: rgba(219, 39, 119, 0.12); border-color: rgba(219, 39, 119, 0.2); }
.tt-holo-card--2 { grid-column: span 1; }
.tt-holo-card--3 { grid-column: span 1; }
.tt-holo-card--4 { grid-column: span 3; background: rgba(219, 39, 119, 0.12); border-color: rgba(219, 39, 119, 0.2); }

/* Metrics Hologram */
.tt-hologram--metrics {
  bottom: 18%;
  right: 6%;
  width: 230px;
}
.tt-holo-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--code-text);
  font-weight: 600;
}
.tt-holo-metric-row strong {
  color: #db2777;
}
.tt-holo-bar {
  width: 100%;
  height: 4px;
  background: rgba(219, 39, 119, 0.1);
  border-radius: 2px;
  margin-bottom: 12px;
  overflow: hidden;
}
.tt-holo-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f472b6, #db2777);
  border-radius: 2px;
}

/* Hologram Hover/Glow */
.tt-hologram-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(219,39,119,0.2) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* Hide floating holograms on tablets/mobiles to prevent layout clutter */
@media (max-width: 1024px) {
  .tt-hologram {
    display: none !important;
  }
}

/* ================================================================
   Prefers Reduced Motion — skip animation entirely
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  #intro-pin-container {
    display: none !important;
    height: 0 !important;
  }

  .tt-intro-overlay {
    display: none !important;
  }

  /* Restore page visibility */
  html.tt-intro-active .header-ultra,
  html.tt-intro-active .hero,
  html.tt-intro-active .hero-copy,
  html.tt-intro-active .hero-visual,
  html.tt-intro-active .avail-banner,
  html.tt-intro-active .float-cta,
  html.tt-intro-active .cursor-glow,
  html.tt-intro-active .orb,
  html.tt-intro-active .scroll-progress {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

/* ================================================================
   Glassmorphic Header on Scroll
   ================================================================ */
.sohub-header {
  z-index: 9999 !important;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, border-bottom 0.3s ease, padding 0.3s ease !important;
}

.sohub-header.sohub-header--scrolled {
  background-color: rgba(240, 246, 248, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(12, 16, 22, 0.08) !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

/* -------------------------------------------------
   Scroll Preloader (light pink theme)
   ------------------------------------------------- */
/* -------------------------------------------------
   Scroll Preloader (dark theme for better readability)
   ------------------------------------------------- */
/* -------------------------------------------------
   Scroll Preloader (light pink theme)
   ------------------------------------------------- */
/* -------------------------------------------------
   Scroll Preloader (enhanced readability light theme)
   ------------------------------------------------- */
/* -------------------------------------------------
   Scroll Preloader (readable light theme)
   ------------------------------------------------- */
.scroll-preloader {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.5s ease;
}

html.tt-intro-active .scroll-preloader {
  opacity: 1;
}

.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: #db2777;
  animation: scrollBounce 2s infinite ease-in-out;
}

.scroll-icon {
  font-size: 1.2rem;
  font-weight: bold;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}