/* Justify.pk — Animations & Transitions */

/* ── FADE IN VARIANTS ─────────────────────────────── */
.fade-in-up    { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.fade-in-left  { opacity:0; transform:translateX(-24px); transition:opacity .6s ease, transform .6s ease; }
.fade-in-right { opacity:0; transform:translateX(24px);  transition:opacity .6s ease, transform .6s ease; }
.fade-in-scale { opacity:0; transform:scale(0.94);        transition:opacity .6s ease, transform .6s ease; }

.fade-in-up.visible, .fade-in-left.visible,
.fade-in-right.visible, .fade-in-scale.visible { opacity:1; transform:none; }

/* ── KEYFRAMES ────────────────────────────────────── */
@keyframes slideDown   { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:none} }
@keyframes slideUp     { from{opacity:0;transform:translateY(12px)}  to{opacity:1;transform:none} }
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes scaleIn     { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes shimmer     { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes float       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes rotateSlow  { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes glowGold    { 0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.3)} 50%{box-shadow:0 0 0 12px rgba(212,175,55,0)} }
@keyframes borderPulse { 0%,100%{border-color:var(--justify-green-bright)} 50%{border-color:var(--justify-gold)} }

/* ── APPLIED ANIMATIONS ───────────────────────────── */
.animate-float    { animation:float 4s ease-in-out infinite; }
.animate-fadeIn   { animation:fadeIn .5s ease forwards; }
.animate-scaleIn  { animation:scaleIn .4s ease forwards; }
.animate-glowGold { animation:glowGold 2.5s ease-in-out infinite; }

/* ── HERO ENTRANCE ────────────────────────────────── */
.hero-content { animation:slideUp .8s ease forwards; }
.hero-eyebrow { animation:fadeIn .6s .1s ease both; }
.hero-title   { animation:slideUp .7s .15s ease both; }
.hero-subtitle{ animation:fadeIn .7s .3s ease both; }
.hero-actions { animation:fadeIn .7s .45s ease both; }
.hero-stats   { animation:fadeIn .7s .6s ease both; }

/* ── CARD HOVERS ──────────────────────────────────── */
.practice-card, .blog-card, .team-card, .testimonial-card {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
  will-change: transform;
}

/* ── SKELETON LOADING ─────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* ── PAGE TRANSITION ──────────────────────────────── */
.page-transition-overlay {
  position:fixed; inset:0; background:var(--justify-green-deep);
  z-index:99999; opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.page-transition-overlay.active { opacity:1; pointer-events:all; }

/* ── STAGGER CHILDREN ─────────────────────────────── */
.stagger-children > *:nth-child(1)  { animation-delay:.05s; }
.stagger-children > *:nth-child(2)  { animation-delay:.10s; }
.stagger-children > *:nth-child(3)  { animation-delay:.15s; }
.stagger-children > *:nth-child(4)  { animation-delay:.20s; }
.stagger-children > *:nth-child(5)  { animation-delay:.25s; }
.stagger-children > *:nth-child(6)  { animation-delay:.30s; }
.stagger-children > *:nth-child(7)  { animation-delay:.35s; }
.stagger-children > *:nth-child(8)  { animation-delay:.40s; }
.stagger-children > *:nth-child(9)  { animation-delay:.45s; }
.stagger-children > *:nth-child(10) { animation-delay:.50s; }
.stagger-children > *:nth-child(n+11) { animation-delay:.55s; }

/* ── PROGRESS BAR ─────────────────────────────────── */
.reading-progress-bar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--justify-green-bright), var(--justify-gold));
  z-index:9999; transition:width .1s linear;
}

/* ── TOOLTIP ──────────────────────────────────────── */
[data-tooltip] { position:relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:#1a1a1a; color:white; font-size:12px; white-space:nowrap;
  padding:5px 10px; border-radius:4px; pointer-events:none;
  opacity:0; transition:opacity .2s;
}
[data-tooltip]:hover::after { opacity:1; }

/* ── BACK TO TOP ──────────────────────────────────── */
#back-to-top {
  position:fixed; bottom:100px; right:24px; z-index:8000;
  width:44px; height:44px; background:var(--justify-green-deep);
  color:white; border:none; border-radius:50%; font-size:20px;
  cursor:pointer; display:none; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); transition:var(--transition);
}
#back-to-top.show  { display:flex; animation:fadeIn .3s ease; }
#back-to-top:hover { background:var(--justify-gold); color:var(--justify-text-dark); transform:translateY(-3px); }

/* ── NOTIFICATION TOAST ───────────────────────────── */
.toast {
  position:fixed; bottom:90px; right:24px; z-index:9001;
  background:var(--justify-green-deep); color:white;
  padding:14px 20px; border-radius:8px; font-size:14px;
  box-shadow:var(--shadow-lg); max-width:320px;
  animation:slideUp .4s ease forwards;
  border-left:4px solid var(--justify-gold);
}