/* Final Statement Typewriter Component Styles */

.component-statement {
  width: 100%;
  background-color: var(--color-bg-dark, #151512);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.statement-wrapper {
  max-width: var(--content-max-width, 1080px);
  width: 100%;
  margin: 0 auto;
  padding: var(--gap-section) var(--side-padding-fluid);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Container to prevent height jumping during typewriting */
.statement-text-container {
  position: relative;
  display: inline-block;
  min-height: clamp(80px, 12vw, 150px); /* Responsive baseline height prevents vertical shifts */
  width: 100%;
}

.statement-heading {
  font-family: var(--font-family);
  font-size: clamp(22px, 3.8vw, 44px); /* Big slick centered editorial size */
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
  display: inline;
  white-space: pre-line; /* Honors newlines */
  letter-spacing: -0.02em;
  color: #DED5D5; /* Clean solid warm silver off-white (site palette) */
}

/* Blinking Typewriter Cursor */
.typewriter-cursor {
  font-family: var(--font-family);
  font-size: clamp(22px, 3.8vw, 44px);
  font-weight: 300;
  color: var(--color-primary-blue, #5AA4F9); /* Glowing theme blue cursor */
  text-shadow: 0 0 12px rgba(90, 164, 249, 0.95); /* Vibrant cursor light emission */
  margin-left: 4px;
  display: inline-block;
  animation: cursorBlink 0.8s infinite;
  vertical-align: middle;
  position: relative;
  top: -2px;
  transition: opacity 1s ease; /* Fade-out transition when completed */
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Responsive mobile tuning */
@media (max-width: 768px) {
  .statement-wrapper {
    padding: var(--gap-section-mobile, 40px) var(--side-padding-fluid);
  }
}

/* Semantic Footer styling at the bottom of the page */
.footer-container {
  width: 100%;
  padding-bottom: var(--gap-micro, 24px); /* Vertical micro-breathing room at absolute bottom */
  text-align: center;
  background-color: var(--color-bg-dark, #151512);
  z-index: 2;
  position: relative;
}

.footer-copyright {
  font-family: var(--font-family);
  font-size: clamp(0.78rem, 2vw, 0.85rem); /* Slick, minimal typographic scale */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.22); /* Smooth, secondary muted grey (perfect contrast on #151512) */
  letter-spacing: 0.06em;
  margin: 0;
}