/* ================================================================
   components.css — Reusable component micro-styles
   Shree Industries Website
================================================================ */

/* Scroll-reveal animation base states */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }

/* Counter animation target */
.counter-value { display: inline-block; }

/* Loader spinner on submit button */
.btn__loader::after {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skip-to-content accessibility link */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--orange); color: #fff;
  padding: 10px 16px; font-size: 14px;
  z-index: 9999;
}
.skip-link:focus { left: 0; }

/* Back-to-top button */
.back-to-top {
  position: fixed; bottom: 100px; right: 32px;
  width: 42px; height: 42px;
  background: rgba(232,93,4,0.9); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; text-decoration: none;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, background 0.3s;
  z-index: 998;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover   { background: var(--orange-dark); }

/* Section divider ornament */
.section-divider {
  text-align: center;
  padding: 10px 0;
  color: var(--orange);
  font-size: 18px;
  letter-spacing: 8px;
  opacity: 0.4;
}

/* Tooltip base */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  background: var(--dark); color: #fff;
  font-size: 11px; padding: 5px 10px;
  white-space: nowrap; opacity: 0;
  pointer-events: none; transition: opacity 0.2s;
}
[data-tooltip]:hover::after { opacity: 1; }

/* Lazy image placeholder */
img[loading='lazy'] { background: var(--gray-light); }
img.loaded { background: transparent; }