/* ===========================================================
   KCAPITAL — dynamic enhancement layer
   Loaded AFTER styles.css so these rules win.
   Purely additive: targets existing classes, breaks nothing.
   =========================================================== */

/* ---------- Scroll progress bar ---------- */
#kc-progress {
  position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft), #efd89a);
  transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 14px rgba(201, 162, 75, 0.7);
  will-change: transform;
}
html[dir="rtl"] #kc-progress { transform-origin: 100% 50%; }

/* ---------- Cursor spotlight (hero + dark sections only) ---------- */
.hero, .section--dark, .section--contact { position: relative; }
.kc-spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
              rgba(201, 162, 75, 0.16), transparent 65%);
}
.hero:hover .kc-spot, .section--dark:hover .kc-spot, .section--contact:hover .kc-spot { opacity: 1; }
.hero .container, .section--dark .container, .section--contact .container { position: relative; z-index: 2; }

/* ---------- Hero: richer animated background ---------- */
.hero {
  background:
    radial-gradient(900px circle at 80% -10%, rgba(201,162,75,0.10), transparent 55%),
    radial-gradient(700px circle at 0% 110%, rgba(31,78,121,0.45), transparent 55%),
    linear-gradient(160deg, #0c2236, var(--navy) 55%, var(--navy-900));
}
.hero__glow { opacity: 0.6; }
.hero__glow--1 { animation: kcFloat1 16s ease-in-out infinite; }
.hero__glow--2 { animation: kcFloat2 20s ease-in-out infinite; }
@keyframes kcFloat1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-38px,46px) scale(1.14); } }
@keyframes kcFloat2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(46px,-34px) scale(1.12); } }

/* parallax targets (driven by JS via custom props) */
.hero__glow--1 { translate: var(--px1, 0) var(--py1, 0); }
.hero__glow--2 { translate: var(--px2, 0) var(--py2, 0); }
.hero__inner   { transform: translateY(var(--heroLift, 0)); }

/* ---------- Hero headline: animated gradient shimmer ---------- */
.hero__title em {
  background: linear-gradient(100deg, #d8b86a 0%, #f4e3b0 30%, #c9a24b 55%, #f4e3b0 80%, #d8b86a 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: kcShimmer 6s linear infinite;
}
@keyframes kcShimmer { to { background-position: -250% 0; } }

/* ---------- Hero stats: subtle glow + divider ---------- */
.hero__stats .stat { position: relative; padding-inline-end: 28px; }
.hero__stats .stat:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-end: 0; top: 8px; bottom: 8px;
  width: 1px; background: linear-gradient(rgba(255,255,255,0), rgba(201,162,75,0.5), rgba(255,255,255,0));
}
.stat__num { text-shadow: 0 0 26px rgba(201,162,75,0.35); }

/* ---------- Buttons: light sweep on hover ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease);
}
.btn--gold:hover::after { transform: translateX(120%); }
.btn--gold { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }

/* ---------- Section titles: gradient ink ---------- */
.section:not(.section--dark):not(.section--contact) .section__title {
  background: linear-gradient(120deg, var(--navy) 0%, #1f4e79 55%, var(--navy) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Cards / steps / metrics: 3D tilt + glow ---------- */
.card, .step, .criteria__metric { transform-style: preserve-3d; will-change: transform; }
.card, .step { transition: transform 0.3s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.card::after, .step::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(201,162,75,0.14), transparent 60%);
  opacity: 0; transition: opacity 0.4s ease;
}
.card { position: relative; }
.card:hover::after, .step:hover::after { opacity: 1; }
.card:hover { box-shadow: 0 26px 60px rgba(11,31,51,0.18), 0 0 0 1px rgba(201,162,75,0.25); }
.card__icon { transition: transform 0.4s var(--ease), background 0.4s ease; }
.card:hover .card__icon { transform: translateZ(30px) scale(1.08) rotate(-4deg); background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color: var(--navy-900); }
.card h3, .card p, .step h3, .step p { transform: translateZ(18px); }
.step__num { transition: transform 0.4s var(--ease); }
.step:hover .step__num { transform: translateZ(26px) scale(1.06); }

.criteria__metric { transition: transform 0.35s var(--ease), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; }
.criteria__metric:hover { box-shadow: 0 0 40px rgba(201,162,75,0.18); }
.criteria__range { transition: transform 0.35s var(--ease); display: inline-block; }
.criteria__metric:hover .criteria__range { transform: scale(1.06); }

/* ---------- About photo: animated gradient frame + float badge ---------- */
.about__photo { position: relative; }
.about__photo::before {
  content: ""; position: absolute; inset: -2px; z-index: 0; border-radius: inherit;
  background: linear-gradient(130deg, var(--gold), transparent 35%, transparent 65%, var(--gold-soft));
  background-size: 200% 200%; animation: kcFrame 8s ease infinite; opacity: 0.9;
}
.about__photo > * { position: relative; z-index: 1; }
.about__photo img { border-radius: inherit; }
@keyframes kcFrame { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.about__badge { animation: kcBadge 5s ease-in-out infinite; }
@keyframes kcBadge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- Timeline dots: pulse ---------- */
.tl__dot { animation: kcPulse 2.6s ease-in-out infinite; }
@keyframes kcPulse {
  0%,100% { box-shadow: 0 0 0 6px rgba(201,162,75,0.18); }
  50% { box-shadow: 0 0 0 11px rgba(201,162,75,0.06); }
}

/* ---------- Reveal: richer entrance variants ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.cards .reveal, .steps .reveal { transform: translateY(40px) scale(0.97); }
.cards .reveal.in, .steps .reveal.in { transform: none; }
/* staggered children */
.cards .reveal:nth-child(1), .steps .reveal:nth-child(1) { transition-delay: 0.05s; }
.cards .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: 0.13s; }
.cards .reveal:nth-child(3), .steps .reveal:nth-child(3) { transition-delay: 0.21s; }
.cards .reveal:nth-child(4), .steps .reveal:nth-child(4) { transition-delay: 0.29s; }

/* ---------- Nav: gold underline grow ---------- */
.nav__links > a:not(.btn) { position: relative; }
.nav__links > a:not(.btn)::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -4px; height: 2px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: inline-start;
  transition: transform 0.3s var(--ease);
}
.nav__links > a:not(.btn):hover::after { transform: scaleX(1); }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #kc-progress, .kc-spot, .hero__glow, .hero__title em, .about__photo::before,
  .about__badge, .tl__dot { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .card, .step, .criteria__metric { transform: none !important; }
}