/* ==========================================================================
   ARKS International — Micro-interactions & Reveal Animations
   AOS handles most scroll reveals; these cover bespoke effects.
   ========================================================================== */

/* ---- Hover image reveal (category / gallery cards) ---- */
.img-reveal { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.img-reveal img { transition: transform 1.1s var(--ease-premium); width: 100%; }
.img-reveal:hover img { transform: scale(1.08); }
.img-reveal__overlay {
  position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,20,32,0) 30%, rgba(4,20,32,.85) 100%);
  opacity: .75; transition: opacity var(--dur-med) var(--ease-soft);
}
.img-reveal:hover .img-reveal__overlay { opacity: .9; }

/* ---- Card stagger (driven via AOS data-aos-delay, defined inline per item) ---- */

/* ---- Number counter helper ---- */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ---- Underline link hover ---- */
.link-underline { position: relative; font-weight: 600; }
.link-underline::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-med) var(--ease-premium); }
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- Rotating badge ---- */
.rotate-badge { animation: rotate-slow 16s linear infinite; }
@keyframes rotate-slow { to { transform: rotate(360deg); } }

/* ---- Pulse dot (live/status) ---- */
.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--color-emerald); display: inline-block; }
.pulse-dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--color-emerald); animation: pulse-ring 2s ease-out infinite; }
@keyframes pulse-ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---- Fade-in helper classes (for JS-driven, non-AOS elements) ---- */
.js-fade { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-premium), transform .8s var(--ease-premium); }
.js-fade.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Timeline (manufacturing) ---- */
.process-timeline { position: relative; }
.process-timeline::before {
  content: ''; position: absolute; left: 34px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(10,61,98,.15), rgba(0,168,168,.4));
}
@media (min-width: 992px) {
  .process-timeline::before { left: 50%; transform: translateX(-50%); }
}
.process-step { position: relative; padding-left: 90px; margin-bottom: 3rem; }
.process-step__num {
  position: absolute; left: 0; top: 0; width: 68px; height: 68px; border-radius: 50%;
  background: #fff; border: 2px solid var(--color-teal); color: var(--color-navy);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem;
  box-shadow: var(--shadow-md); z-index: 2;
}
@media (min-width: 992px) {
  .process-step { width: 46%; padding-left: 0; padding-right: 2.5rem; text-align: right; }
  .process-step__num { left: auto; right: -34px; }
  .process-step:nth-child(even) { margin-left: 54%; padding-right: 0; padding-left: 2.5rem; text-align: left; }
  .process-step:nth-child(even) .process-step__num { right: auto; left: -34px; }
}

/* ---- Magnetic cursor helper (JS toggles transform via inline style; base transition here) ---- */
.magnetic-btn { transition: transform .25s var(--ease-soft); }

/* ---- Lightbox ---- */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 3000; background: rgba(4,20,32,.94);
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-soft), visibility var(--dur-med) var(--ease-soft);
}
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.lightbox-overlay img { max-width: 88vw; max-height: 82vh; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; color: #fff; width: 50px; height: 50px; border-radius: 50%; background: var(--surface-glass);
  border: 1px solid var(--surface-glass-border); display: flex; align-items: center; justify-content: center;
}
.lightbox-close { top: 2rem; right: 2rem; }
.lightbox-prev { left: 2rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 2rem; top: 50%; transform: translateY(-50%); }

/* ---- Filter buttons (products/gallery) ---- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; }
.filter-btn {
  padding: .6rem 1.3rem; border-radius: var(--radius-pill); font-size: .88rem; font-weight: 600;
  border: 1.5px solid rgba(10,61,98,0.12); background: #fff; color: var(--text-body);
  transition: all var(--dur-fast) var(--ease-soft);
}
.filter-btn:hover { border-color: var(--color-teal); color: var(--color-navy); }
.filter-btn.active { background: var(--gradient-primary); color: #fff; border-color: transparent; }