/* رحلة «نسمعك ← نرتّبه وياك ← نسوّيه حقيقة»: شرارة تمشي على الخط وتنوّر كل خطوة بالدور */
@property --tp { syntax: "<number>"; inherits: true; initial-value: 0; }

.ts-path { --tp: 0; transition: --tp .9s cubic-bezier(.65, 0, .35, 1); }
.ts-path::after { right: auto; left: auto; inset-inline-start: 8%; width: calc(84% * var(--tp)) !important; transition: none !important; }
.ts-path.done::after { background: linear-gradient(90deg, #f0a93b, #fff1c9, #f0a93b) 0 0 / 200% 100%; animation: ts-shine 3.2s linear infinite; }

/* الشرارة */
.ts-spark { position: absolute; top: 28px; inset-inline-start: calc(8% + 84% * var(--tp)); width: 14px; height: 14px; margin-inline-start: -7px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, #fff 0 30%, #ffd98e 45%, #f0a93b00 70%); box-shadow: 0 0 18px 6px #f2b45a99, 0 0 40px 10px #f2b45a44; opacity: 0; transition: opacity .4s; }
.ts.in .ts-spark { opacity: 1; }
.ts-path.done .ts-spark { animation: ts-flicker 1.8s ease-in-out infinite; }

/* الخطوة قبل ما تنوّر: باهتة، وبعدها تطلع بالدور */
.ts.in .ts-path li { opacity: .22; translate: 0 14px; filter: saturate(.3); transition: opacity .7s ease, translate .7s cubic-bezier(.2, .9, .3, 1.2), filter .7s; transition-delay: 0s; }
.ts.in .ts-path li.lit { opacity: 1; translate: 0 0; filter: none; }
.ts-path li .ts-ico::after { content: ""; position: absolute; inset: -2px; border-radius: 24px; border: 2px solid #f2b45a; opacity: 0; pointer-events: none; }
.ts-path li.lit .ts-ico { animation: ts-pop .8s cubic-bezier(.2, 1.6, .4, 1) both; box-shadow: 0 0 0 1.5px #f2b45a, 0 14px 30px #000a, 0 0 46px -4px #f2b45acc; }
.ts-path li.lit .ts-ico::after { animation: ts-ripple 1.3s ease-out .1s both; }
.ts-path li.lit .ts-num { text-shadow: 0 0 12px #f2b45a; animation: ts-fade .5s .15s both; }
.ts-path li.lit h3 { animation: ts-rise .6s .2s both; }
.ts-path li.lit p { animation: ts-rise .6s .4s both; }

/* بعد ما الرحلة تخلص: الأيقونات تتنفّس بنور هادي، بالتتابع */
.ts-path.done li .ts-ico { animation: ts-breathe 3.6s ease-in-out infinite; animation-delay: calc(var(--k) * .5s); }

/* جملة الاهتمام في الآخر */
.ts-care { margin: clamp(26px, 3vw, 40px) auto 0; max-width: 640px; text-align: center; font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; color: #f6e7c8; opacity: 0; translate: 0 12px; transition: opacity .9s ease, translate .9s ease; }
.ts-care b { background: linear-gradient(90deg, #ffd98e, #f0a93b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-path.done + .ts-care { opacity: 1; translate: 0 0; }

@keyframes ts-pop { 0% { scale: .7; } 60% { scale: 1.14; } 100% { scale: 1; } }
@keyframes ts-ripple { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1.9; } }
@keyframes ts-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes ts-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ts-breathe { 0%, 100% { box-shadow: 0 0 0 1.5px #f2b45a88, 0 14px 30px #000a, 0 0 24px -8px #f2b45a88; } 50% { box-shadow: 0 0 0 1.5px #f2b45a, 0 14px 30px #000a, 0 0 54px -2px #f2b45add; } }
@keyframes ts-shine { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes ts-flicker { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .65; scale: .8; } }

@media (max-width: 760px) { .ts-spark { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ts-path { transition: none; }
  .ts.in .ts-path li { opacity: 1; translate: none; filter: none; }
  .ts-path li.lit .ts-ico, .ts-path li.lit .ts-ico::after, .ts-path li.lit h3, .ts-path li.lit p, .ts-path.done li .ts-ico, .ts-path.done::after, .ts-path.done .ts-spark { animation: none; }
  .ts-care { transition: none; }
}

/* «أنت مميز»: كبيرة جداً من غير إطار، ذهب بلمعة، والكلمات تطلع بالدور */
.tx .ts-kicker.ts-big { position: relative; gap: .22em; padding: 0; border: 0; border-radius: 0; background: none; font-size: clamp(54px, 8.5vw, 124px); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }
.ts-big b { display: inline-block; background: linear-gradient(100deg, #e8992e 0%, #ffe7b0 22%, #f6c46a 40%, #e8992e 58%, #fff4d6 78%, #e8992e 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px #f2b45a55); opacity: 0; }
.ts-big.go b { animation: big-in 1.1s cubic-bezier(.2, 1, .3, 1) both, big-shine 4.5s linear 1.2s infinite; }
.ts-big.go b:nth-child(2) { animation-delay: .22s, 1.4s; } .ts-big.go b:nth-child(3) { animation-delay: .44s, 1.6s; }
.ts-big::after { content: "✦"; position: absolute; top: -.05em; inset-inline-end: -.55em; font-size: .32em; color: #ffe7b0; text-shadow: 0 0 16px #f2b45a; opacity: 0; }
.ts-big.go::after { animation: big-star 2.6s ease-in-out 1.1s infinite; }
@keyframes big-in { from { opacity: 0; translate: 0 .35em; scale: .85; filter: blur(14px) drop-shadow(0 0 0 #f2b45a00); } to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0) drop-shadow(0 0 26px #f2b45a55); } }
@keyframes big-shine { from { background-position: 100% 0; } to { background-position: -160% 0; } }
@keyframes big-star { 0%, 100% { opacity: 0; scale: .4; rotate: 0deg; } 45% { opacity: 1; scale: 1.15; rotate: 90deg; } 70% { opacity: .7; scale: .9; rotate: 140deg; } }
@media (prefers-reduced-motion: reduce) { .ts-big b { opacity: 1; animation: none !important; } .ts-big.go::after { animation: none; opacity: 1; } }