@import url('fonts.css');

/* ==========================================================================
   HATCH IMPERATIVE DESIGN SYSTEM & BRAND COLOR TOKENS
   Change hex codes below to update site-wide colors at any time!
   ========================================================================== */
:root {
  --color-graphite: #16181D; /* Main dark background & high contrast text */
  --color-steel: #3A6EA5;    /* Brand Guideline Steel Color #3A6EA5 */
  --color-signal: #E3B505;   /* Single Main Brand Accent Color */
  --color-blue: #3A6EA5;     /* Accent Blue / Steel for Scrollbar & Coffee Meetings */
  --color-blue-hover: #2F5986;
  --color-fog: #EEF0F2;      /* Crisp light section background */
  --color-dark-gray: #7C8794;
  --color-diff-gray: #626A74;
  --color-light-gray: #9AA3AD;
  --color-white: #FFFFFF;
}

body {
  background-color: var(--color-graphite);
  color: #EEF0F2;
  font-family: 'IBM Plex Sans', sans-serif;
  overflow-x: hidden;
}

/* Custom Brand Scrollbar (Steel #3A6EA5 Accent) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-graphite);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
::-webkit-scrollbar-thumb {
  background: var(--color-blue);
  transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-blue-hover);
}

/* Firefox Scrollbar Standard */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-blue) var(--color-graphite);
}

/* Coffee Meeting Button Styling (#3A6EA5 Brand Steel) */
.btn-coffee {
  border: 2px solid #3A6EA5 !important;
  color: #3A6EA5 !important;
  transition: all 0.2s ease;
}
.btn-coffee:hover {
  background-color: rgba(58, 110, 165, 0.2) !important;
}

/* Custom Underline Style */
.brand-underline {
  position: relative;
  display: inline-block;
}
.brand-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 4px;
  background-color: var(--color-signal);
  transform: skewX(-12deg);
  border-radius: 2px;
}

.brand-underline-steel::after {
  background-color: var(--color-steel);
}

/* Artful Pull Quote Styling */
.pull-quote {
  border-left: 5px solid var(--color-signal);
  background: rgba(227, 181, 5, 0.05);
  position: relative;
}

/* Standard Scroll Reveal for Body Sections */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Specialized Prominent Motion for Hero 5 Soundbites */
.soundbite-reveal {
  opacity: 0;
  transform: translateY(70px) scale(0.96);
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
@media (max-width: 640px) {
  .soundbite-reveal {
    transform: translateY(24px) scale(0.98);
    transition-duration: 0.8s;
  }
}
.soundbite-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* Glassmorphism Card Style */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fade-in {
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}