@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600&display=swap");

:root {
  --radius: 1rem;
  /* Sustainable Energypreneur palette */
  --power-blue: #002ABC;
  --sky-blue: #47A0FF;
  --energy-orange: #FF6229;
  --warm-amber: #FFBD39;
  --sustain-green: #0D4BD1;

  --background: #002ABC;                  /* Power Blue */
  --foreground: #FFFFFF;
  --deep: #001A7A;                        /* deeper power blue */
  --electric: #47A0FF;                    /* sky blue glow */
  --mesh: #47A0FF;
  --card: #001E8F;
  --card-foreground: #FFFFFF;
  --popover: #001E8F;
  --popover-foreground: #FFFFFF;
  --primary: #FF6229;                     /* Energy Orange — primary CTA */
  --primary-foreground: #FFFFFF;
  --secondary: #47A0FF;
  --secondary-foreground: #001A7A;
  --muted: #0a37c9;
  --muted-foreground: #BCD5FF;
  --accent: #FF6229;                      /* Energy Orange accent */
  --accent-foreground: #FFFFFF;
  --destructive: oklch(0.65 0.24 25);
  --destructive-foreground: #FFFFFF;
  --border: rgba(255,255,255,0.14);
  --input: rgba(255,255,255,0.18);
  --ring: #FF6229;
}
#about{
  background-color: var(--foreground);
  color: var(--energy-orange);
}
#career{
  background-color: var(--foreground);
}
* {
  border-color: var(--border);
  font-family: "proxima-nova", system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "proxima-nova", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  margin: 0;
}

h1, h2, h3, h4 {
  letter-spacing: -0.02em;
}

.text-balance {
  text-wrap: balance;
}

.bg-deep {
  background-color: var(--deep);
}
.bg-foreground {
  background-color: black;
}
.p{
  color: black;
}
.b{
  color: blue;
}
.liquid-gradient {
  background:
    radial-gradient(60% 80% at 15% 20%, rgba(71,160,255,0.45), transparent 60%),
    radial-gradient(60% 60% at 85% 25%, rgba(255,98,41,0.30), transparent 60%),
    radial-gradient(60% 60% at 80% 80%, rgba(13,75,209,0.35), transparent 60%),
    radial-gradient(80% 70% at 50% 105%, rgba(0,26,122,0.85), transparent 60%),
    var(--background);
}
ul{
  color: var(--energy-orange);
}
h2{
  color: var(--energy-orange);
}
.glass {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.text-mesh-gradient {
  background: linear-gradient(120deg, #FFFFFF 0%, #FFBD39 35%, #FF6229 65%, #FFFFFF 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mesh-shimmer 6s ease-in-out infinite;
}
.text-mesh-gradient2 {
  background: linear-gradient(120deg, #FFFFFF 0%, #1E90FF 35%, #003CFF 65%, #FFFFFF 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: mesh-shimmer 6s ease-in-out infinite;
}

@keyframes mesh-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes wave-drift {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-20px) translateY(-10px); }
  100% { transform: translateX(0) translateY(0); }
}
.animate-wave-drift {
  animation: wave-drift 14s ease-in-out infinite;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(2deg); }
}
.animate-float-slow {
  animation: float-slow 8s ease-in-out infinite;
}

@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 70% 30% / 45% 30% 70% 55%; }
  50% { border-radius: 70% 30% 35% 65% / 60% 55% 45% 40%; }
}
.animate-blob {
  animation: blob-morph 12s ease-in-out infinite;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* GSAP Reveal initial state */
.gsap-reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition: opacity 0.1s, transform 0.1s, filter 0.1s; /* smooth start */
}

/* ---------------- CAROUSEL ANIMATION ---------------- */
@keyframes infinite-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 12px)); } /* 12px accounts for half the gap */
}
.animate-carousel {
  animation: infinite-scroll 40s linear infinite;
  display: flex;
  gap: 1.5rem; /* 24px = gap-6 equivalent */
  width: max-content;
}
.animate-carousel:hover {
  animation-play-state: paused;
}
.carousel-card {
  width: 380px;
  flex-shrink: 0;
}


/* Signature and curated IEA blogs */
.about-signature {
  max-width: 640px;
}
.signature-wave-img {
  width: min(100%, 640px);
  border-radius: 1.25rem;
  box-shadow: 0 24px 70px rgba(0, 42, 188, 0.20);
}
.wave-bg-image {
  position: absolute;
  width: min(900px, 95vw);
  opacity: 0.28;
  filter: saturate(1.25) blur(0.2px);
  mix-blend-mode: screen;
  animation: wave-drift 16s ease-in-out infinite;
}
.wave-bg-top {
  top: 4rem;
  right: -12rem;
}
.featured-blog-card,
.compact-blog-card,
.blog-card {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.20);
}
.blog-page-body {
  background: var(--background);
  color: var(--foreground);
}
.blog-hero {
  min-height: 72vh;
}
.blog-content p,
.blog-content li {
  color: rgba(255,255,255,0.82);
  line-height: 1.85;
}
.blog-content h2 {
  color: #fff;
}