/* Add smooth scrolling to the whole page */
html {
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6, .text-l, .text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl, .text-7xl, .text-8xl, .text-9xl, .text-10xl {
    font-family: 'Poppins', sans-serif;
}

p, a, span, label, input, button, select, option, textarea, .text-center, .text-left, .text-sm, .font-semibold, .text-base, .text-xs, .font-medium, .font-normal {
    font-family: 'Inter', sans-serif;
}

ul {
    list-style: disc;
    margin: 0;
    padding: 2px 0 2px 20px;
}

body {
    background-color: white;
    color: #fff;
}

.header-section { 
    background-image: url(https://vapor.investorcaller.com/4c3bd6cd-389c-474e-a79f-ee741af2b3ed/img/hands_holding_phone.png);
    background-position-x: right;
    background-repeat: no-repeat;
    background-position-y: center;
    background-size: 60%;
}

.section-light {
    color: #fff;
}

h4 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin: 2rem 0 1.5rem 0;
}

h3 {
    font-size: 1.7rem;
    line-height: 2.25rem;
    margin: 2rem 0 1.5rem 0;
}

h2 {
    font-size: 1.8rem;
    line-height: 2.5rem;
    margin: 20px 0 0 0;
}

h1 {
    font-size: 3rem;
    line-height: 1;
    margin: 3rem 0rem 2rem 0rem;
}

hr {
    margin: 1.5rem 0;
}

.article-body {
    padding: 0.5rem;
}
.article-body p {
    margin: 15px 0px;
}

.youtube-container {
    display: flex;
    justify-content: center;
}

.youtube-container iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
}

@media only screen and (max-width: 768px) {
    .event-container iframe {
        aspect-ratio: 9 / 16;
        width: 100% !important;
    }
}
#summary-modal {
    font-size: 14px;
}
#summary-modal p {
    margin: 5px 0 0 0;
}

.transcript-container p {
    margin: 15px 0 0 0;
}

#summary-modal h2 {
    font-size: 1.5rem;
    line-height: 2.0rem;
    margin: 20px 0 10px;
}

.article-container h1 {

    margin: 0;

}

.article-cover-image {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,1) 95%);
}

.md\:mt-5 {
    margin-top: 5px;
}

.md\:mt-20 {
    margin-top: 20px;
}

#summary-modal .modal-description {
    max-height: 600px;
}

#summary-modal .modal-transcript {
    max-height: 600px;
}

#summary-modal .dark\:border-gray-800 {
    background-color: #0f0532;
}

.text-gradient {
  background: linear-gradient(90deg, #4B3F8A 0%, #2A6CB4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  display: inline-block; /* Or inline, depending on usage */
}

/* Initial state class applied in HTML */
.initial-hidden {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  visibility: hidden !important;
  transition: none !important; /* Prevent transition on page load */
}

/* Scroll Reveal Animation Styles (JS needed to add/remove .revealed) */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px); /* Increased distance */
  transition: opacity 1s ease, transform 1s ease; /* Slower transition */
  will-change: opacity, transform;
  visibility: hidden; /* Add this to ensure hidden state */
  pointer-events: none; /* Prevent interaction with hidden elements */
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  visibility: visible; /* Make visible when revealed */
  pointer-events: auto; /* Re-enable interaction */
}

/* Fade-in Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px); /* Optional subtle upward movement */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards; /* Adjust duration and timing as needed */
}

/* Floating Animation */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px); /* Adjust vertical distance as needed */
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite; /* Adjust duration and timing as needed */
}

/* Light Pulsing Animation */
@keyframes pulse-light {
  0%, 100% {
    opacity: 0.2; /* Starting/ending opacity */
  }
  50% {
    opacity: 0.8; /* Mid-point opacity - adjust as needed */
  }
}

.animate-pulse-light {
  animation: pulse-light 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; /* Adjust duration and timing */
}

[x-cloak] { display: none !important; }