/* ===== برنامج الشراكة: مشهد رمادي وضوء ذهبي يختار شخصاً ويلوّنه ===== */
.ts { --gold: #f2b45a; --gold2: #ffd98e; position: relative; padding: clamp(40px, 6vw, 90px) clamp(16px, 4vw, 56px) clamp(60px, 7vw, 110px); background: #050507; color: #fff; overflow: hidden; }

/* المسرح */
.ts-stage { --x: 44%; --y: 58%; --r: 150px; position: relative; height: min(92vh, 880px); min-height: 620px; border-radius: 40px; overflow: hidden; isolation: isolate;
  background: #08080b; box-shadow: 0 0 0 1px #ffffff12, 0 60px 120px -40px #000, 0 0 140px -60px #f2b45a55; }
.ts-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; user-select: none; -webkit-user-drag: none; }
.ts-gray { filter: grayscale(1) brightness(.42) contrast(1.1); }
.ts-color { filter: saturate(1.15) brightness(1.08);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, #000 45%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, #000 45%, transparent 100%); }

/* شعاع الضوء من فوق إلى الشخص المختار */
.ts-beam { position: absolute; z-index: 2; left: var(--x); top: -10%; width: calc(var(--r) * 2.2); height: calc(var(--y) + 10%); translate: -50% 0; pointer-events: none;
  background: linear-gradient(180deg, #ffd98e00 0%, #ffd98e14 40%, #ffd98e30 100%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); mix-blend-mode: screen; filter: blur(6px); }
.ts-ring { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: calc(var(--r) * 1.5); height: calc(var(--r) * 1.5); translate: -50% -50%; pointer-events: none; }
.ts-ring i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #ffd98e99; opacity: 0; animation: tsRing 3.2s ease-out infinite; }
.ts-ring i + i { animation-delay: 1.6s; }
@keyframes tsRing { 0% { opacity: .9; scale: .55; } 100% { opacity: 0; scale: 1.15; } }
.ts-tag { position: absolute; z-index: 4; left: var(--x); top: var(--y); translate: -50% calc(-1 * var(--r) - 18px); display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  border-radius: 999px; background: linear-gradient(180deg, #ffe2a6, #f0a93b); color: #1a1206; font-weight: 800; font-size: 14px; white-space: nowrap;
  box-shadow: 0 12px 30px #0009, 0 0 26px #f2b45a77; transition: opacity .35s, scale .35s; pointer-events: none; }
.ts-tag b { font-size: 13px; animation: tsSpin 4s linear infinite; display: inline-block; }
@keyframes tsSpin { to { rotate: 360deg; } }
.ts-scene.roaming .ts-tag { opacity: 0; scale: .85; }

/* تعتيم سينمائي ونسيج */
.ts-shade { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, #050507 0%, #050507e6 16%, #05050799 34%, #05050700 56%), linear-gradient(0deg, #050507cc 0%, #05050700 22%),
              radial-gradient(120% 90% at 50% 60%, transparent 55%, #000a 100%); }
.ts-grain { position: absolute; inset: -50%; z-index: 6; pointer-events: none; opacity: .07;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* النص فوق المشهد */
.ts-copy { position: absolute; z-index: 7; top: clamp(40px, 7vh, 80px); left: 50%; translate: -50% 0; width: min(900px, calc(100% - 40px)); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ts-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; border: 1px solid #f2b45a44; background: #f2b45a12; color: var(--gold2); font-size: 14px; font-weight: 700; }
.ts-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px #f2b45a33; animation: tsPulse 1.8s ease-in-out infinite; }
@keyframes tsPulse { 50% { box-shadow: 0 0 0 8px #f2b45a00; } }
.ts h2 { margin: 0; display: flex; flex-direction: column; gap: .05em; line-height: 1.12; letter-spacing: -.01em; font-weight: 800; }
.ts-l1 { font-size: clamp(26px, 3.2vw, 46px); color: #ffffffb3; }
.ts-l2 { font-size: clamp(40px, 6.4vw, 96px); background: linear-gradient(180deg, #fff 0%, #ffe7b3 40%, #f2b45a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 40px #f2b45a40); padding-bottom: .08em; }
.ts-copy p { margin: 0; max-width: 620px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.85; color: #c9c5d3; }
.ts-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; padding: 8px 8px 8px 22px; padding-inline: 24px 8px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, #ffe2a6, #f0a93b); color: #1a1206; font-weight: 800; font-size: 16px; box-shadow: 0 16px 40px -10px #f2b45aa0, inset 0 1px 0 #fff8;
  transition: translate .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.ts-cta i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1a1206; color: var(--gold2); transition: rotate .4s cubic-bezier(.3,1.6,.5,1); }
.ts-cta svg { width: 18px; height: 18px; }
.ts-cta:hover { translate: 0 -3px; box-shadow: 0 22px 50px -10px #f2b45acc, inset 0 1px 0 #fff8; }
.ts-cta:hover i { rotate: -45deg; }
.ts-hint { position: absolute; z-index: 7; bottom: 22px; left: 50%; translate: -50% 0; padding: 7px 14px; border-radius: 999px; background: #0008; border: 1px solid #ffffff14;
  color: #ffffffa0; font-size: 12.5px; backdrop-filter: blur(8px); transition: opacity .4s; }
.ts-scene.touched .ts-hint { opacity: 0; }
@media (hover: none) { .ts-hint { display: none; } }

/* الرحلة */
.ts-path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1180px; margin: clamp(40px, 5vw, 70px) auto 0; padding: 0; list-style: none; counter-reset: s; }
.ts-path::before { content: ""; position: absolute; top: 34px; right: 8%; left: 8%; height: 2px; background: #ffffff14; }
.ts-path::after { content: ""; position: absolute; top: 34px; right: 8%; height: 2px; width: 0; background: linear-gradient(270deg, #ffd98e, #f0a93b); box-shadow: 0 0 14px #f2b45a; transition: width 1.6s cubic-bezier(.65,0,.35,1) .2s; }
.ts.in .ts-path::after { width: 84%; }
.ts-path li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0 10px;
  opacity: 0; translate: 0 24px; transition: opacity .7s cubic-bezier(.2,.8,.2,1), translate .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.35s + var(--k) * .45s); }
.ts.in .ts-path li { opacity: 1; translate: 0 0; }
.ts-num { position: absolute; top: -6px; inset-inline-end: calc(50% - 64px); font-size: 12px; font-weight: 800; color: #f2b45a; letter-spacing: .08em; }
.ts-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 22px; font-size: 30px;
  background: linear-gradient(160deg, #1d1b24, #111016); box-shadow: 0 0 0 1px #ffffff14, 0 14px 30px #000a; transition: box-shadow .5s, scale .5s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.6s + var(--k) * .45s); }
.ts.in .ts-ico { box-shadow: 0 0 0 1.5px #f2b45a88, 0 14px 30px #000a, 0 0 30px -6px #f2b45a88; }
.ts-path li:hover .ts-ico { scale: 1.08; transition-delay: 0s; }
.ts-path h3 { margin: 6px 0 0; font-size: 22px; font-weight: 800; color: #fff; }
.ts-path p { margin: 0; max-width: 260px; font-size: 15px; line-height: 1.7; color: #a9a6b2; }
.ts-note { max-width: 760px; margin: 36px auto 0; text-align: center; font-size: 12.5px; line-height: 1.8; color: #6f6c78; }

@media (max-width: 760px) {
  .ts-stage { height: 86vh; min-height: 640px; border-radius: 28px; }
  .ts-stage img { object-position: 46% 70%; }
  .ts-path { grid-template-columns: 1fr; gap: 28px; }
  .ts-path::before, .ts-path::after { display: none; }
  .ts-num { inset-inline-end: calc(50% - 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .ts-ring i, .ts-tag b, .ts-kicker i { animation: none; }
  .ts-path li, .ts-path::after, .ts-ico { transition: none; opacity: 1; translate: none; }
}

/* الفصل: النص في الأعلى والمشهد في الأسفل حتى لا يغطّي النص الشخص المختار */
.ts-stage { height: auto; min-height: 0; aspect-ratio: auto; display: flex; flex-direction: column; }
.ts-copy { position: relative; z-index: 7; top: auto; left: auto; translate: none; margin: 0 auto; padding: clamp(46px, 6vw, 80px) 0 clamp(24px, 3vw, 40px); }
.ts-scene { position: relative; height: clamp(380px, 46vw, 620px); margin-top: -60px; }
.ts-stage img { top: 0; }
.ts-shade { background: linear-gradient(180deg, #08080b 0%, #08080bcc 14%, #08080b00 38%), linear-gradient(0deg, #08080bcc 0%, #08080b00 22%),
  radial-gradient(120% 100% at 50% 50%, transparent 55%, #000b 100%); }
.ts-l2 { font-size: clamp(38px, 5.4vw, 84px); white-space: nowrap; }
@media (max-width: 760px) { .ts-l2 { white-space: normal; } .ts-scene { height: 72vw; min-height: 340px; margin-top: -30px; } }
.ts-scene { --x: 44%; --y: 58%; --r: 150px; overflow: hidden; }
.ts-scene { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%); mask-image: linear-gradient(180deg, transparent 0%, #000 26%); }