/*
 * 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.
 */

input[type='date'], input[type='time'] {
    -webkit-appearance: none;
}

/* Loading Animation */

.spinner {
animation: rotate 2s linear infinite;
	   transform-origin: center center;
}
.path {
stroke: #F17313;
	stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
	100% { transform: rotate(360deg); }
}
@keyframes dash {
	0% {
		stroke-dasharray: 1, 150;
		stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -35;
	}
	100% {
		stroke-dasharray: 90, 150;
		stroke-dashoffset: -124;
	}
}

/* Animation 1: The movement of the magnifying glass.
   The translate values are kept within a range that prevents clipping.
 */
@keyframes scan-path {
	0%, 100% { transform: translate(0, 0); }
	25% { transform: translate(-15px, 30px); } /* Scan down-left */
	50% { transform: translate(10px, 50px); }  /* Scan down-right */
	75% { transform: translate(25px, 20px); }  /* Scan up-right */
}

/* Animation 2: The receipt lines highlighting.
   They turn the brand color and slightly expand.
 */
@keyframes highlight-data {
	0%, 80%, 100% { fill: #E6E6E6; transform: scaleX(1); }
	30%, 60% { fill: #F17313; transform: scaleX(1.05); }
}

.magnifier-group {
animation: scan-path 4s ease-in-out infinite;
}

.receipt-line {
	transform-origin: left center; /* Ensure they grow from the left */
}

/* Delays to stagger the highlighting effect as the glass moves */
.line-1 { animation: highlight-data 4s ease-in-out infinite 0.3s; }
.line-2 { animation: highlight-data 4s ease-in-out infinite 1.5s; }
.line-3 { animation: highlight-data 4s ease-in-out infinite 2.8s; }