/* ============ Pro Animations (CSS) ============
   Lightweight, production-friendly animation utilities.
   How to use:
   1) Include this CSS file.
   2) Add class "reveal" and data-anim attribute to sections/cards.
      e.g. <section class="reveal" data-anim="fade-up"></section>
   3) Optional attributes: data-delay="0.2s" data-stagger=".06s"
   4) Add data-nav to your navbar for auto shrink-on-scroll.
   5) Add #scroll-progress for a top progress bar (optional).
*/

/* --- Base --- */
:root {
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.12);
  --shadow-strong: 0 18px 50px rgba(0,0,0,.18);
}

* { -webkit-tap-highlight-color: transparent; }

/* --- Buttons --- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.1rem; border-radius:12px; text-decoration:none;
  background:#111; color:#fff; font-weight:600; letter-spacing:.2px;
  transition: transform .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(-1px) scale(.98); }

/* --- Cards --- */
.card {
  background:#fff; border-radius:16px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
  will-change: transform;
}
.card:hover { transform: translateY(-6px) rotateX(1deg) rotateY(-.6deg); box-shadow: var(--shadow-strong); }

/* Image zoom utility */
.img-zoom { overflow:hidden; border-radius:inherit; }
.img-zoom img { display:block; width:100%; height:auto; transition: transform .6s var(--ease-smooth); }
.img-zoom:hover img { transform: scale(1.05); }

/* --- Navbar shrink (attach data-nav on your navbar) --- */
[data-nav] {
  position: sticky; top: 0; z-index: 50;
  transition: backdrop-filter .3s var(--ease-smooth), background-color .3s var(--ease-smooth), transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
  will-change: transform;
}
[data-nav].is-scrolled {
  background-color: rgba(255,255,255,.8);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  transform: translateY(0);
}

/* --- Underline animation for nav links --- */
.nav a, [data-nav] a { position:relative; text-decoration:none; }
.nav a::after, [data-nav] a::after {
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background:currentColor; transition: width .25s var(--ease-smooth);
}
.nav a:hover::after, [data-nav] a:hover::after { width:100%; }

/* --- Scroll progress bar (optional) --- */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #4f46e5, #06b6d4);
  z-index: 100;
}

/* --- Reveal animations --- */
.reveal {
  opacity: 0;
  transition: opacity .7s var(--ease-smooth), transform .7s var(--ease-smooth), filter .7s var(--ease-smooth);
  will-change: opacity, transform, filter;
}
.reveal.in-view { opacity: 1; transform: none; filter: none; }

/* Variants via data-anim */
.reveal[data-anim="fade-up"]     { transform: translateY(16px); }
.reveal[data-anim="fade-down"]   { transform: translateY(-16px); }
.reveal[data-anim="fade-left"]   { transform: translateX(16px); }
.reveal[data-anim="fade-right"]  { transform: translateX(-16px); }
.reveal[data-anim="zoom-in"]     { transform: scale(.96); }
.reveal[data-anim="blur-up"]     { filter: blur(6px); transform: translateY(10px); }
.reveal[data-anim="tilt-up"]     { transform: perspective(600px) rotateX(6deg) translateY(10px); transform-origin: bottom; }

/* Stagger helper (child elements) */
.reveal[data-stagger] > * { opacity:0; transform: translateY(10px); }
.reveal.in-view[data-stagger] > * { opacity:1; transform:none; transition: opacity .6s var(--ease-smooth), transform .6s var(--ease-smooth); }
.reveal.in-view[data-stagger] > *:nth-child(1) { transition-delay: calc(var(--stagger, .06s) * 0); }
.reveal.in-view[data-stagger] > *:nth-child(2) { transition-delay: calc(var(--stagger, .06s) * 1); }
.reveal.in-view[data-stagger] > *:nth-child(3) { transition-delay: calc(var(--stagger, .06s) * 2); }
.reveal.in-view[data-stagger] > *:nth-child(4) { transition-delay: calc(var(--stagger, .06s) * 3); }
.reveal.in-view[data-stagger] > *:nth-child(5) { transition-delay: calc(var(--stagger, .06s) * 4); }
.reveal.in-view[data-stagger] > *:nth-child(6) { transition-delay: calc(var(--stagger, .06s) * 5); }

/* Hero entrance (optional utility) */
@keyframes fadeUp {
  from { opacity:0; transform: translateY(12px); }
  to   { opacity:1; transform: none; }
}
.hero .animate-in { opacity:0; animation: fadeUp .7s var(--ease-smooth) forwards; }
.hero .animate-in:nth-child(1) { animation-delay: .05s; }
.hero .animate-in:nth-child(2) { animation-delay: .18s; }
.hero .animate-in:nth-child(3) { animation-delay: .32s; }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal, .reveal > * { opacity:1 !important; transform: none !important; filter: none !important; }
  #scroll-progress { display:none; }
}