/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Add Inter font family */
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}
/* Style for the retro display emphasis */
.retro-text {
    font-family: 'Courier New', Courier, monospace; /* Example retro font */
}

/* Styles for JS Counter Display */
#counter-thing-container {
    padding: 10px; /* Padding */
    background-color: #ffffff; /* White container background */
    border-radius: 12px; /* More rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow */
    display: inline-block; /* Fit content */
}
#counter-thing-svg {
    display: block; /* Remove extra space below SVG */
    background-color: #1a1a1a; /* Dark background for the screen */
    border-radius: 6px; /* Slightly rounded corners for the screen */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); /* Inset shadow for depth */
    overflow: hidden; /* Ensure content outside the viewBox is hidden */
}
/* Style for the 'LEDs' */
.pixel {
   /* No transition needed */
}
/* Style for the scrolling group */
#scrolling-content {
    /* REMOVED CSS transition - animation handled by JS */
    /* transition: transform 0.8s ease-in-out; */
}

/* Wiggle animation for counter hover */
@keyframes wiggle {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

#counter-thing-container.wiggle {
  animation: wiggle 0.3s ease-in-out infinite;
}