/* Shared moving dual-color treatment for page and section headings. */
:root {
  --heading-gradient-light: linear-gradient(110deg, #1e40af 0%, #0284c7 52%, #1d4ed8 100%);
  --heading-gradient-dark: linear-gradient(110deg, #67e8f9 0%, #38bdf8 52%, #22d3ee 100%);
  --heading-gradient: var(--heading-gradient-dark);
}

body.bg-white,
#root,
.bg-light-theme,
.homepage-theme,
.bg-white {
  --heading-gradient: var(--heading-gradient-light);
}

section[class*="bg-[#050805]"],
section[class*="bg-[#07152e]"],
section[class*="bg-[#0b1f4b]"],
section[class*="bg-[#0B100C]"],
section[class*="bg-[#08100E]"],
section[class*="bg-[#091310]"],
section[class*="bg-[#0b1f3e]"],
section[class*="bg-[#16251b]"],
[class*="from-[#0b1f4b]"],
[class*="from-[#07152e]"],
[class*="from-[#0B100C]"],
[class~="bg-slate-950"],
[class~="bg-slate-900"],
[class~="bg-slate-800"],
[class*="from-slate-950"],
[class*="from-slate-900"],
[class*="bg-[#0"],
[class*="bg-[#1"],
[class*="from-[#0"],
[class*="from-[#1"],
[class*="bg-[#050805]"],
.dark-card-override,
footer {
  --heading-gradient: var(--heading-gradient-dark);
}

/* Keep dark-section heading typography consistent across all page templates. */
section[class*="bg-[#0"] :is(h1, h2, h3, h4, h5, h6),
section[class*="bg-[#1"] :is(h1, h2, h3, h4, h5, h6),
section[class~="bg-slate-950"] :is(h1, h2, h3, h4, h5, h6),
section[class~="bg-slate-900"] :is(h1, h2, h3, h4, h5, h6) {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.12 !important;
}

#problem-statement,
#for-students,
#for-institutions,
#features,
#trust,
#self-assessment,
#faq,
#hero {
  --heading-gradient: var(--heading-gradient-light);
}

@keyframes dual-heading-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-white-cyan-gradient {
  --heading-gradient: linear-gradient(110deg, #ffffff 0%, #e0f2fe 38%, #67e8f9 70%, #ffffff 100%);
}

footer h4 {
  --heading-gradient: linear-gradient(110deg, #ffffff 0%, #e0f2fe 38%, #67e8f9 70%, #ffffff 100%);
}

h1:not(.no-dual),
h2:not(.no-dual),
h3:not(.no-dual),
h4:not(.no-dual),
h5:not(.no-dual),
h6:not(.no-dual),
h1:not(.no-dual) span,
h2:not(.no-dual) span,
h3:not(.no-dual) span,
h4:not(.no-dual) span,
h5:not(.no-dual) span,
h6:not(.no-dual) span,
h1:not(.no-dual) strong,
h2:not(.no-dual) strong,
h3:not(.no-dual) strong,
h4:not(.no-dual) strong,
h5:not(.no-dual) strong,
h6:not(.no-dual) strong,
body #root h1:not(.no-dual),
body #root h2:not(.no-dual),
body #root h3:not(.no-dual),
body #root h4:not(.no-dual),
body #root h5:not(.no-dual),
body #root h6:not(.no-dual),
body #root h1:not(.no-dual) span,
body #root h2:not(.no-dual) span,
body #root h3:not(.no-dual) span,
body #root h4:not(.no-dual) span,
body #root h5:not(.no-dual) span,
body #root h6:not(.no-dual) span,
body #root h1:not(.no-dual) strong,
body #root h2:not(.no-dual) strong,
body #root h3:not(.no-dual) strong,
body #root h4:not(.no-dual) strong,
body #root h5:not(.no-dual) strong,
body #root h6:not(.no-dual) strong,
.gradient-text,
.text-gradient-premium,
.brand-gradient-text,
.brand-dual-text,
.bg-light-theme .card-title,
.premium-pricing-card .card-title,
.bg-light-theme .premium-pricing-card .card-title,
.bg-light-theme .premium-pricing-card .current-price,
.price-block .current-price,
strong[class*="text-"],
b[class*="text-"],
span[class*="text-primary-"],
span[class*="text-blue-"],
span[class*="text-sky-"],
span[class*="text-cyan-"],
span[class*="text-indigo-"],
span[class*="text-emerald-"] {
  background-image: var(--heading-gradient) !important;
  background-size: 240% 240% !important;
  background-position: 0% 50%;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  animation: dual-heading-shift 7.5s ease-in-out infinite;
}

/* Preserve the hero entrance animation while animating its gradient. */
.hero-animate:is(h1, h2, h3, h4, h5, h6) {
  animation-name: heroReveal, dual-heading-shift;
  animation-duration: 0.9s, 7.5s;
  animation-timing-function: ease, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}

@media (prefers-reduced-motion: reduce) {
  h1:not(.no-dual),
  h2:not(.no-dual),
  h3:not(.no-dual),
  h4:not(.no-dual),
  h5:not(.no-dual),
  h6:not(.no-dual),
  h1:not(.no-dual) span,
  h2:not(.no-dual) span,
  h3:not(.no-dual) span,
  h4:not(.no-dual) span,
  h5:not(.no-dual) span,
  h6:not(.no-dual) span,
  h1:not(.no-dual) strong,
  h2:not(.no-dual) strong,
  h3:not(.no-dual) strong,
  h4:not(.no-dual) strong,
  h5:not(.no-dual) strong,
  h6:not(.no-dual) strong,
  body #root h1:not(.no-dual),
  body #root h2:not(.no-dual),
  body #root h3:not(.no-dual),
  body #root h4:not(.no-dual),
  body #root h5:not(.no-dual),
  body #root h6:not(.no-dual),
  body #root h1:not(.no-dual) span,
  body #root h2:not(.no-dual) span,
  body #root h3:not(.no-dual) span,
  body #root h4:not(.no-dual) span,
  body #root h5:not(.no-dual) span,
  body #root h6:not(.no-dual) span,
  body #root h1:not(.no-dual) strong,
  body #root h2:not(.no-dual) strong,
  body #root h3:not(.no-dual) strong,
  body #root h4:not(.no-dual) strong,
  body #root h5:not(.no-dual) strong,
  body #root h6:not(.no-dual) strong,
  .gradient-text,
  .text-gradient-premium,
  .brand-gradient-text,
  .brand-dual-text,
  .bg-light-theme .card-title,
  .premium-pricing-card .card-title,
  .bg-light-theme .premium-pricing-card .card-title,
  .bg-light-theme .premium-pricing-card .current-price,
  .price-block .current-price,
  strong[class*="text-"],
  b[class*="text-"],
  span[class*="text-primary-"],
  span[class*="text-blue-"],
  span[class*="text-sky-"],
  span[class*="text-cyan-"],
  span[class*="text-indigo-"],
  span[class*="text-emerald-"] {
    animation: none;
  }

  .hero-animate:is(h1, h2, h3, h4, h5, h6) {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Keep every text element laid over a photo white, even when it is also a
   gradient heading or a brand-colored label. */
body .image-overlay-copy :is(h1, h2, h3, h4, h5, h6, p, span, strong, b, em, small, label)[class] {
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  animation: none !important;
}