/* ============================================================
   RW Spinner — Rainier Woodworking branded loading indicator
   Usage:
     <div class="rw-spinner"></div>            (default 64px)
     <div class="rw-spinner rw-spinner-sm"></div>  (40px)
     <div class="rw-spinner rw-spinner-lg"></div>  (96px)
     <div class="rw-spinner-block">
       <div class="rw-spinner"></div>
       <div class="rw-spinner-label">Loading from Innergy...</div>
     </div>
   ============================================================ */

.rw-spinner {
  --rw-size: 64px;
  --rw-green: #3a7d44;
  --rw-green-light: #c8e6c9;
  --rw-green-pale: #e8f5e9;
  position: relative;
  display: inline-block;
  width: var(--rw-size);
  height: var(--rw-size);
  vertical-align: middle;
}

.rw-spinner-sm { --rw-size: 40px; }
.rw-spinner-lg { --rw-size: 96px; }
.rw-spinner-xl { --rw-size: 128px; }

/* Outer ring (track) */
.rw-spinner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--rw-green-pale);
  box-sizing: border-box;
}

/* Spinning arc */
.rw-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--rw-green);
  border-right-color: var(--rw-green);
  box-sizing: border-box;
  animation: rw-spin 1.1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

/* Logo mark in the center (pulses gently) */
.rw-spinner > .rw-mark,
.rw-spinner > img.rw-mark {
  position: absolute;
  top: 50%; left: 50%;
  width: calc(var(--rw-size) * 0.62);
  height: calc(var(--rw-size) * 0.62);
  transform: translate(-50%, -50%);
  transform-origin: center;
  animation: rw-pulse 1.6s ease-in-out infinite;
  border-radius: calc(var(--rw-size) * 0.08);
  box-shadow: 0 2px 6px rgba(58, 125, 68, 0.25);
}

/* Auto-inject a background mark if no <img> is provided */
.rw-spinner:not(:has(> .rw-mark))::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--rw-green-pale);
  box-sizing: border-box;
}

/* Block wrapper with optional label underneath */
.rw-spinner-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  width: 100%;
}

.rw-spinner-label {
  font-size: 13px;
  color: #5a7d5e;
  font-style: italic;
  animation: rw-fade 1.8s ease-in-out infinite;
}

/* Inline variant (logo + label on a single row) */
.rw-spinner-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #666;
  font-style: italic;
}

/* Animations */
@keyframes rw-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rw-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(0.92); opacity: 0.88; }
}

@keyframes rw-fade {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  .rw-spinner::after,
  .rw-spinner > .rw-mark,
  .rw-spinner-label { animation: none; }
  .rw-spinner::after {
    border-top-color: var(--rw-green);
    border-right-color: var(--rw-green);
    opacity: 0.8;
  }
}