@import url('../../App/genericCss/fonts.css');

* {
	border: 0px solid red;
}

:root {
	--body-bg: #f3f3f3;
  --grad-left: #864d94;
  --grad-right: #5e589e;
  --grad-left-rgb: 134, 77, 148;
  --grad-right-rgb: 94, 88, 158;
  --dark: #111;
  --black: #000;
  --light-gray: #eee;
  --dark-gray:;
  --white: #fff;
  --full-grad: linear-gradient(45deg, #744fb2 0%, #c058b4 100%);
  --bubble1: rgba(135,77,149,0.2);
  --bubble2: rgba(94,88,158,0.2);
  --bubble3: rgba(145,85,155,0.18);
  --bubble4: rgba(100,92,160,0.18);
  --bubble5: rgba(125,70,140,0.15);
  --bubble6: rgba(110,80,150,0.15);
  --bubble7: rgba(140,75,150,0.18);
  --bubble8: rgba(105,85,155,0.17);
  --bubble9: rgba(130,72,145,0.16);
  --bubble10: rgba(115,82,152,0.17);
  --bubble11: rgba(120,78,148,0.16);
  --bubble12: rgba(135,80,155,0.18);
  --shadow: #444;
  --violet-1: #3f008f;   /* deep violet */
  --violet-2: #8a2be2;   /* mid violet */
  --accent:   #b743b6;   /* warmer violet accent */
  --highlight: rgba(255,255,255,0.06);
  --cool: #b7a2f1;

  /* ===== SPACING SCALE ===== */
  --spacing-2xs: 0.25rem;   /* 4px */
  --spacing-xs: 0.5rem;     /* 8px */
  --spacing-sm: 1rem;       /* 16px */
  --spacing-md: 1.5rem;     /* 24px */
  --spacing-lg: 2rem;       /* 32px */
  --spacing-xl: 2.5rem;     /* 40px */
  --spacing-2xl: 4rem;      /* 64px */
  --spacing-3xl: 5rem;      /* 80px */
  --spacing-section: 7.5rem; /* 120px - between sections */

  /* ===== SHADOW DEPTHS ===== */
  --shadow-xs: 1px 2px 4px rgba(0,0,0,0.06);
  --shadow-sm: 2px 3px 6px rgba(0,0,0,0.08);
  --shadow-md: 4px 6px 12px rgba(0,0,0,0.12);
  --shadow-lg: 6px 10px 20px rgba(0,0,0,0.15);
  --shadow-xl: 8px 14px 28px rgba(0,0,0,0.18);

  /* ===== BORDER RADIUS ===== */
  --radius-xs: 0.25rem;     /* 4px */
  --radius-sm: 0.5rem;      /* 8px */
  --radius-md: 0.75rem;     /* 12px */
  --radius-lg: 1rem;        /* 16px */
  --radius-xl: 1.5rem;      /* 24px */
  --radius-full: 9999px;    /* pill shape */

  /* ===== ANIMATION TIMING ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-slower: 0.8s ease;

  /* ===== Z-INDEX SCALE ===== */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-tooltip: 400;
}

.boldy{
	font-weight: bold;
}

.gradient{
	background: var(--full-grad);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section-title{
	font-size: var(--font-size-4xl);
	font-weight: bold;
	margin-top: 70px;
	margin-bottom: 10px;
	z-index:10;

}

.section-tagline{
	font-size: var(--font-size-md);
	color: var(--dark);
	z-index:10;

}





html{
  font-family: var(--font-sans);

}

.airflow-font{
	font-family: var(--font-brand);

}

body {
	
	margin: 0px 0px 0px;
	box-sizing: border-box;
	background-color: var(--body-bg);

}

a {
	text-decoration: none;
}



.outer{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*overflow: hidden; do not use, or topbar won't be sticky*/
}

/* Prevent accidental horizontal scrolling caused by stray pixels or positioned elements */
/* Using overflow-x: clip instead of hidden - clip doesn't create a scroll container */
html, body, .outer {
    overflow-x: clip;
    min-width: 0;
}

/* Ensure images and media don't block vertical scrolling */
img, video, svg, canvas {
    touch-action: pan-y;
    -webkit-user-drag: none;
}



.text-about{
	color: white;
	padding-left:15px;

}

.desc-wrapper{
	display: flex;
	flex-direction: row;
	margin-bottom: 20px;
}

.sideband{
	width: 4px;
	border-radius: 3px;
	background-color: var(--gold);
}

.spacer{
	color:transparent;
}

/* ===== UNIFIED SCROLL ANIMATIONS ===== */
/* Base fade-in element - used globally for scroll-triggered reveals */
.fade-in-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Staggered animation delays for children */
.fade-in-stagger > .fade-in-element:nth-child(1) { transition-delay: 0s; }
.fade-in-stagger > .fade-in-element:nth-child(2) { transition-delay: 0.1s; }
.fade-in-stagger > .fade-in-element:nth-child(3) { transition-delay: 0.2s; }
.fade-in-stagger > .fade-in-element:nth-child(4) { transition-delay: 0.3s; }
.fade-in-stagger > .fade-in-element:nth-child(5) { transition-delay: 0.4s; }
.fade-in-stagger > .fade-in-element:nth-child(6) { transition-delay: 0.5s; }

/* Section-level fade (for whole sections fading in) */
.section-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Scale-up fade variation (for cards, images) */
.fade-in-scale {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fade-in-element,
  .section-fade,
  .fade-in-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== UNIFIED CARD & BOX STYLES ===== */
/* Consistent card styling across the page */
.unified-card {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: var(--spacing-lg);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.unified-card:hover {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Glass card variant (for colored backgrounds) */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--spacing-lg);
  transition: background var(--transition-normal), transform var(--transition-normal);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ===== UNIFIED SECTION PADDING ===== */
.section-padding {
  padding: var(--spacing-3xl) 5%;
}

.section-padding-sm {
  padding: var(--spacing-2xl) 5%;
}

@media (max-width: 1024px) {
  .section-padding {
    padding: var(--spacing-2xl) 5%;
  }
  .section-padding-sm {
    padding: var(--spacing-xl) 5%;
  }
}

@media (max-width: 768px) {
  .section-padding {
    padding: var(--spacing-xl) 4%;
  }
  .section-padding-sm {
    padding: var(--spacing-lg) 4%;
  }
}

/* ===== UNIFIED MAX-WIDTH CONTAINERS ===== */
.content-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.content-container-narrow {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}