@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Martel:wght@200;300;400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

/* Main compiled Tailwind utilities */
@import url('/styles.css');

/* Remove any rounding from top bars site-wide */
header,
nav.main-nav {
  border-radius: 0 !important;
}

:root {
  --primary-bg:    #101017;
  --primary-text:  #faf1f1;
  --header-bg:     #000000;
  --header-border: #333333;
  --header-text:   #b62057;
  --link-color:    #1c561c;
  --link-hover:    #00bcd4;
  --hero-bg:       #272838;
  --hero-text:     #611C35;
  --btn-bg:        #88AA88;
  --btn-hover:     #d7e4d7;
  --btn-text-color: #154f13;
  --footer-bg:     #100d0d;
  --footer-border: #797979;
  --footer-text:   #cccccc;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Martel", serif;
  font-weight: 400;
  line-height: 1.6;
  background-color: var(--primary-bg);
  color: var(--primary-text);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  background-color: var(--primary-bg); /* Base header bg */
  transition: transform 0.6s ease-in-out; /* Transition for showing */
}

#main-header {
  transition: transform 0.3s ease-in-out; /* Re-adding this specific transition */
}


.header--hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out; /* Transition for hiding */
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: var(--header-bg); /* Specific navbar bg */
  border-bottom: 1px solid var(--header-border);
}

.logo img {
  max-width: 120px;
  height: auto;
}

.logo-text {
  font-size: 2rem;
  font-family: 'Martel', sans-serif;
  color: #fff;
  font-weight: bold;
  margin-top: 10px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--header-text);
  font-size: 1rem;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--link-hover);
}

.account-icon img {
  width: 40px;
  height: 40px;
  border-radius: 4%;
  object-fit: cover;
}

#mobile-menu {
  background-color: rgba(31, 31, 42, 0.95);
}

#mobile-menu ul a {
  color: white;
  padding: 0.75rem 1rem;
  display: block;
}

#mobile-menu ul a:hover {
  color: #FFE5D9;
}

#mobile-menu-button svg {
  color: white;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80vh;
  background-color: var(--hero-bg);
  text-align: center;
  padding: 0 2rem;
  color: var(--hero-text);
}

.hero-content h1 {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.hero-content p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  text-decoration: none;
  color: var(--btn-text-color);
  background-color: var(--btn-bg);
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: var(--btn-hover);
}

.btn,
header nav a { /* Grouping for hover effect */
  position: relative;
}

.btn::after,
header nav a::after {
  content: "";
  background: url("assets/images/loading_scribble.gif") no-repeat center center;
  background-size: contain;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 5px);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.btn:hover::after,
header nav a:hover::after {
  opacity: 1;
}

footer {
  background-color: var(--footer-bg);
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--footer-border);
  color: var(--footer-text);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-left {
  display: flex;
  flex-direction: column;
}

.footer-logo-quicklinks {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 1rem;
}

.footer-logo {
  max-width: 80px;
  height: auto;
}

.quick-links {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.quick-links li a {
  text-decoration: none;
  color: var(--footer-text);
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.quick-links li a:hover {
  color: var(--link-hover);
}

.footer-cat, .footer-cat img, .flex.justify-center.md\:justify-end img.h-48 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 260px;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.hover-popup-container {
  position: relative;
  display: inline-block;
}

.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 1s ease-out forwards;
  opacity: 0;
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideUp {
  opacity: 0;
  animation: slideUp 0.35s forwards;
}

#loader {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loader.hide {
  opacity: 0;
  visibility: hidden;
}

.tab-button.active {
  background-color: #FFE5D9;
  color: #101017;
}

#chat-history::-webkit-scrollbar {
  width: 8px;
}

#chat-history::-webkit-scrollbar-track {
  background: rgba(16, 16, 23, 0.6);
}

#chat-history::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #88AA88, #b62057);
  border-radius: 4px;
}

/* Tailwind @apply rules - kept as is, require Tailwind processing */
.user-message {
  @apply bg-[#abb3ed] text-white px-4 py-2 rounded-lg rounded-tr-none max-w-[80%] ml-auto mb-2;
}

.bot-message {
  @apply bg-gray-700 text-white px-4 py-2 rounded-lg rounded-tl-none max-w-[80%] mr-auto mb-2;
}

/* API Page Specific Styles */
.api-key-hero-bg {
  background-image: url('../assets/images/api-key-hero.webp');
  background-size: cover;
  background-position: center;
}

.sidebar a {
  display: block;
  padding: 0.75rem 1rem;
  border-left: 4px solid transparent;
  color: #374151;
  font-weight: 500;
}

.sidebar a.active,
.sidebar a:hover {
  border-color: #1D4ED8;
  background-color: #f0f4ff;
  color: #1D4ED8;
}

#api-sidebar {
  position: fixed;
  left: 0;
  top: 50%;
  width: 200px;
  background: transparent;
  backdrop-filter: blur(8px);
  padding: 1.5rem;
  border-radius: 0 8px 8px 0;
  z-index: 40;
  box-shadow: none;
  /* Initial hidden state */
  transform: translateY(-50%) translateX(-100%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  pointer-events: none;
}

#api-sidebar.visible {
   pointer-events: auto; /* Allow interaction when visible class is added */
}

#api-sidebar.active {
  /* Active visible state */
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

#api-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#api-sidebar a {
  color: #f9e9e1;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  opacity: 0;
  transform: translateX(-20px);
}

#api-sidebar.active a {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered animation delays for sidebar links */
#api-sidebar a:nth-child(1) { transition-delay: 0.1s; }
#api-sidebar a:nth-child(2) { transition-delay: 0.15s; }
#api-sidebar a:nth-child(3) { transition-delay: 0.2s; }
#api-sidebar a:nth-child(4) { transition-delay: 0.25s; }
#api-sidebar a:nth-child(5) { transition-delay: 0.3s; }
#api-sidebar a:nth-child(6) { transition-delay: 0.35s; }
#api-sidebar a:nth-child(7) { transition-delay: 0.4s; }

#api-sidebar a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFE5D9;
}

/* Background & Content Slideshow Styles */
.background-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.background-slide.active {
  opacity: 1;
}

.background-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
}

.background-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-dot {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.nav-dot.active {
  width: 32px; /* Wider for horizontal layout */
  background-color: white;
}

.content-slide {
  position: absolute;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease-in-out;
  pointer-events: none;
}

.content-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Card Specific Backgrounds & Effects */
.beautiful-philosophy-card, .future-memory-card, .filler-card, .building-trust-card, .reinvesting-card, .contextual-card {
    background-size: cover;
    background-position: center;
}

.beautiful-philosophy-card {
  background: radial-gradient(circle at 70% 30%, #9d4edd 0%, #c77dff 30%, #e0aaff 60%, #7b2cbf 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
}

.future-memory-card {
  background: linear-gradient(225deg, #3a0ca3 0%, #4361ee 25%, #f72585 60%, #ff9e00 100%);
  position: relative;
  overflow: hidden;
}
.future-memory-card::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
}

.filler-card {
  background: conic-gradient(from 145deg at 50% 50%, #0077b6 0%, #00b4d8 25%, #90e0ef 50%, #00b4d8 75%, #0077b6 100%);
  position: relative;
}
.filler-card::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);
}

.building-trust-card {
  background: linear-gradient(315deg, #d00000 0%, #e85d04 30%, #f48c06 60%, #ffba08 100%);
  position: relative;
  overflow: hidden;
}
.building-trust-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 2px, transparent 2px, transparent 4px);
}

.reinvesting-card {
  background: linear-gradient(180deg, #007f5f 0%, #2b9348 25%, #55a630 50%, #80b918 75%, #aacc00 100%);
  position: relative;
}
.reinvesting-card::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
}

.contextual-card {
  background: linear-gradient(270deg, #240046 0%, #3c096c 30%, #5a189a 60%, #7b2cbf 100%);
  position: relative;
  overflow: hidden;
}
.contextual-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 100% 200%;
  animation: shineVertical 3s infinite linear;
}

@keyframes shineVertical {
  to {
    background-position: 0 200%;
  }
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .nav-dot.active {
    width: 8px; /* Back to circle width */
    height: 32px; /* Taller for vertical layout */
  }
  .footer-cat, .footer-cat img, .flex.justify-center.md\:justify-end img.h-48 {
    max-width: 200px;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }
}

@media (max-width: 768px) {
  .hero-bg h1 {
    font-size: 3.5rem;
  }
  .hero-bg p {
    font-size: 1.125rem;
  }
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .footer-cat, .footer-cat img, .flex.justify-center.md\:justify-end img.h-48 {
    max-width: 140px;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
}

.glass-card {
  background: rgba(16, 16, 23, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.hover-scale {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hover-scale:hover {
  transform: scale(1.03);
}

.superellipse {
  border-radius: 20px; /* Base roundness */
  mask-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,0 C10,0 0,10 0,50 C0,90 10,100 50,100 C90,100 100,90 100,50 C100,10 90,0 50,0 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: contain;
}

.depth-layer-1 { filter: blur(0px); z-index: 3; }
.depth-layer-2 { filter: blur(2px); z-index: 2; }
.depth-layer-3 { filter: blur(5px); z-index: 1; }

.gradient-border {
  position: relative;
  border-radius: 16px;
}
.gradient-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 18px;
  background: linear-gradient(45deg, #FFE5D9, #88AA88, #b62057);
  opacity: 0.5;
}

.organic-blob {
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  animation: morph 8s ease-in-out infinite;
}
@keyframes morph {
  0% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
  50% { border-radius: 38% 62% 64% 36% / 58% 32% 68% 42%; }
  100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; }
}

.parallax-section {
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.parallax-layer {
  position: absolute;
  height: 100%;
  width: 100%;
  transform: translateZ(0);
  will-change: transform;
}

/* Dynamic shadow effect */
.dynamic-shadow {
  position: relative;
  overflow: hidden;
}

.dynamic-shadow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%), 
    rgba(255, 255, 255, 0.2) 0%, 
    transparent 50%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dynamic-shadow:hover::after {
  opacity: 1;
}

/* Fluid typography */
h1.fluid-text {
  font-size: clamp(2rem, 5vw + 1rem, 5rem);
  line-height: 1.1;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0.02;
  z-index: -10;
  pointer-events: none;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 222 222" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="1.73" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
}

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.02;
  z-index: 0;
  pointer-events: none;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 222 222" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="1.73" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
  border-radius: inherit;
}

/* Custom scrollbar hiding utility */
.no-scrollbar::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}
.no-scrollbar {
    -ms-overflow-style: none; /* for IE and Edge */
    scrollbar-width: none; /* for Firefox */
}

/* Ensure API sidebars visible on desktop even if hidden utility present */
@media (min-width: 1025px) {
  .left-sidebar,
  .right-sidebar {
    display: block !important;
  }
}

/* =================================================================== */
/* == FORCE HEADER CONTENT VISIBILITY ON DESKTOP                     == */
/* =================================================================== */
/* This rule overrides any other styles (like from the 'scrolled' class)
   that might be incorrectly hiding the search bar and nav links on
   large screens. It ensures they are always displayed as block/flex. */
@media (min-width: 1024px) {
  header .flex-grow.max-w-md.mx-4 {
    display: block !important;
  }
  header nav.hidden.lg\:flex {
    display: flex !important;
  }
}