/* ================================================================
   AVINYA DIGITECH — VERSION 2 PREMIUM EFFECTS (CSS)
   Drop-in, dependency-free. Pairs with premium-v2-effects.js
   Adds: scroll-reveal, subtle grain texture, animated counters,
   sticky header shrink, hover-lift cards, optional icon line-draw.
   Everything here is pure CSS/inline-SVG — no image requests,
   no external fonts/libraries, safe for your PageSpeed score.
   ================================================================ */

:root {
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1); /* one easing curve, used everywhere */
  --reveal-duration: 700ms;
  --reveal-distance: 24px;
}

/* ---------------------------------------------------------------
   1. SCROLL-REVEAL
   Add class="reveal" to any section/card you want to fade+rise in
   on scroll. Add class="reveal-stagger" to a container whose direct
   children should animate in one-by-one (e.g. a services grid).
   --------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-premium),
              transform var(--reveal-duration) var(--ease-premium);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-premium),
              transform var(--reveal-duration) var(--ease-premium);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;   }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms;  }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }

/* Accessibility: never force motion on people who've asked for less */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
   2. SUBTLE GRAIN / NOISE TEXTURE
   Add class="texture-grain" to any section (e.g. the hero or a
   dark CTA band) for an agency-grade textured feel. Inline SVG
   filter, no image request, ~0.3KB.
   --------------------------------------------------------------- */
.texture-grain { position: relative; isolation: isolate; }
.texture-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035; /* keep between 0.02–0.05 — subtle is the point */
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   3. ANIMATED STAT COUNTERS
   Markup: <span class="counter" data-target="500" data-suffix="+">0</span>
   JS handles the count-up; this just keeps digits aligned while
   the number changes so the layout doesn't jitter.
   --------------------------------------------------------------- */
.counter { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   4. STICKY HEADER SHRINK
   Add class="site-header" to your <header>. JS toggles
   "is-scrolled" after ~40px of scroll.
   --------------------------------------------------------------- */
.site-header {
  transition: box-shadow 300ms var(--ease-premium),
              padding 300ms var(--ease-premium),
              background-color 300ms var(--ease-premium);
}
.site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding-block: 0.5rem; /* tune to taste against your current header height */
}

/* ---------------------------------------------------------------
   5. HOVER-LIFT CARDS
   Add class="card--hover-lift" to service/portfolio cards.
   --------------------------------------------------------------- */
.card--hover-lift {
  transition: transform 300ms var(--ease-premium),
              box-shadow 300ms var(--ease-premium);
}
.card--hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.10);
}

/* ---------------------------------------------------------------
   6. OPTIONAL — SVG ICON LINE-DRAW ON REVEAL
   For section icons drawn as inline <svg><path>. Set the CSS
   variable --path-length to each path's actual length (use
   path.getTotalLength() in devtools console once, hardcode it).
   --------------------------------------------------------------- */
.icon-draw path {
  stroke-dasharray: var(--path-length, 100);
  stroke-dashoffset: var(--path-length, 100);
  transition: stroke-dashoffset 900ms var(--ease-premium);
}
.reveal.is-visible .icon-draw path { stroke-dashoffset: 0; }

/* ---------------------------------------------------------------
   7. OPTIONAL — NATIVE PAGE TRANSITIONS
   Zero JS, zero KB. Chrome/Edge get a soft cross-fade between
   pages on your multi-page static site; every other browser just
   ignores this and navigates normally (no penalty, no fallback
   code needed).
   --------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}