/* Curved Loop Component Styles */
.curved-loop-jacket {
  width: 100%;
  max-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.curved-loop-svg {
  width: 100%;
  max-width: 100vw;
  min-width: 320px;
  height: 120px;
  display: block;
  flex-shrink: 0;
}

.curved-loop-svg text {
  font-size: 24px;
  fill: currentColor;
  font-family: inherit;
}

/* Custom text styles can be applied via class */
.curved-loop-text-primary {
  font-size: 24px;
  fill: #333;
  font-weight: 300;
  opacity: 0.5;
}

.curved-loop-text-secondary {
  font-size: 32px;
  fill: #666;
  font-weight: normal;
}

.curved-loop-text-large {
  font-size: 64px;
  fill: #000;
  font-weight: 900;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  .curved-loop-text-primary {
    fill: #fff;
  }
  
  .curved-loop-text-secondary {
    fill: #ccc;
  }
  
  .curved-loop-text-large {
    fill: #fff;
  }
}

/* Animation performance optimization */
.curved-loop-svg {
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.curved-loop-svg text {
  will-change: transform;
}

/* Keep consistent sizing across all devices */