/* 11 — Continuous athlete journey (Agent CLOSE)
   Layered team photo (blurred far plate / sharp players / stadium light flares)
   parallaxed at different speeds, a purple light sweep, and a hand-written script. */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&display=swap'); /* live's script font */

.jr { position: relative; overflow: hidden; overflow: clip; isolation: isolate; min-height: max(600px, calc(26vw + 150px)); display: flex; align-items: center;
  background: radial-gradient(ellipse at 5% 5%, rgba(65,16,132,.30), transparent 60%), #040b15;
  border-block: 1px solid rgba(153,44,255,.22); }
.jr::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent 10%, rgba(153,44,255,.9) 45%, rgba(208,250,0,.7) 60%, transparent 90%); }

/* ---- photo stack ---- */
.jr-photo { position: absolute; top: 0; bottom: 0; right: 0; width: 78%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); }
.jr-layer { position: absolute; inset: -9% 0; will-change: transform; }
/* sharp players + flares: the whole team, anchored to the bottom; the blurred plate fills above */
.jr-front, .jr-lights { inset: auto 0 -2% 0; }
.jr-fit { position: relative; width: 100%; aspect-ratio: 2172 / 724; }
.jr-fit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* far plate: night-stadium haze + floodlight bloom the photo fades into */
.jr-back { filter: blur(18px);
  background:
    radial-gradient(ellipse 16% 12% at 34% 58%, rgba(170,185,255,.30), transparent 70%),
    radial-gradient(ellipse 14% 11% at 60% 56%, rgba(170,185,255,.26), transparent 70%),
    radial-gradient(ellipse 12% 10% at 86% 44%, rgba(190,170,255,.28), transparent 70%),
    radial-gradient(ellipse 60% 40% at 55% 70%, rgba(60,50,150,.45), transparent 75%),
    linear-gradient(180deg, #050a17 0%, #0a1130 60%, #0b1336 100%); }
.jr-front { -webkit-mask-image: radial-gradient(ellipse 58% 80% at 50% 70%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 58% 80% at 50% 70%, #000 58%, transparent 100%); }
.jr-front img { filter: contrast(1.06) saturate(1.05); }
/* stadium lights: glowing flares pinned to the lamp positions of the photo */
.jr-lights { mix-blend-mode: screen; }
.jr-lights i { position: absolute; left: var(--x); top: var(--y); width: calc(150px * var(--s)); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.55) 0, rgba(190,160,255,.32) 12%, rgba(153,44,255,.14) 30%, transparent 62%); border-radius: 50%; }
.jr-lights i::after { content: ''; position: absolute; left: -15%; right: -15%; top: 50%; height: 1px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(220,200,255,.35), transparent); }
/* purple light sweep across the players (JS runs it once; static = parked off-frame) */
.jr-sweep { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(153,44,255,.18) 42%, rgba(186,120,255,.55) 49%, rgba(240,225,255,.75) 50%, rgba(186,120,255,.55) 51%, rgba(153,44,255,.18) 58%, transparent 70%); }
.jr-rim { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: .55;
  background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(153,44,255,.9), transparent 70%); }
/* live gradient treatment: dark on the copy side, fade at the edges */
.jr-shade { position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #040b15 0%, rgba(4,11,21,.88) 14%, rgba(4,11,21,.25) 38%, rgba(4,11,21,.05) 70%, rgba(4,11,21,.55) 100%),
    linear-gradient(180deg, rgba(4,11,21,.7) 0%, transparent 22%, transparent 72%, #040b15 100%); }

/* ---- copy ---- */
.jr-grid { position: relative; display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: 40px; align-items: center; padding-block: 80px; }
.jr-eyebrow { font-size: 13px; margin: 0 0 16px; }
.jr-title-row { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.jr-badge { flex: 0 0 66px; width: 66px; height: 74px; color: #a132f6; filter: drop-shadow(0 0 14px rgba(161,50,246,.55)); }
.jr-badge svg { width: 100%; height: 100%; }
.jr-title { font-size: clamp(38px, 3.9vw, 58px); }
.jr-line { display: block; overflow: hidden; padding-bottom: .03em; }
.jr-line > span { display: inline-block; }
.jr-sub { font: 400 clamp(16px, 1.3vw, 19px)/1.4 var(--f-ui); color: var(--text-2); max-width: 500px; margin: 0 0 28px; text-shadow: 0 2px 12px #040b15; }
.jr-cta { min-height: 48px; }

/* ---- script: "Same athlete. Bigger opportunities." ---- */
.jr-script { justify-self: end; align-self: start; margin: 0 1% 0 0; display: flex; flex-direction: column; align-items: flex-start; max-width: 260px;
  font: 400 34px/1.1 'Kalam', var(--f-script); text-transform: uppercase; color: #c3b6f2; transform: rotate(-10deg);
  text-shadow: 0 2px 8px #050913, 0 0 24px rgba(153,44,255,.45); }
.jr-ink { display: block; clip-path: inset(-20% 0 -20% 0); }
.jr-ink > span { display: inline; }
.jr-ink + .jr-ink { margin-top: 8px; }
.jr-crown { width: 58px; height: 40px; margin: 12px 0 0 90px; color: #a456ea; filter: drop-shadow(0 0 8px rgba(164,86,234,.7)); overflow: visible; }

/* ---- entrance (armed by JS only) ---- */
.jr.is-armed .jr-line > span { transform: translateY(105%); }
.jr.is-armed .jr-eyebrow, .jr.is-armed .jr-sub, .jr.is-armed .jr-cta { opacity: 0; transform: translateY(22px); }
.jr.is-armed .jr-badge svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.jr.is-armed .jr-ink { clip-path: inset(-20% 100% -20% 0); }
.jr.is-armed .jr-crown path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.jr.is-armed .jr-lights { opacity: 0; }
.jr.is-in .jr-line > span { transform: none; transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
.jr.is-in .jr-line + .jr-line > span { transition-delay: .1s; }
.jr.is-in .jr-eyebrow, .jr.is-in .jr-sub, .jr.is-in .jr-cta { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.jr.is-in .jr-sub { transition-delay: .2s; } .jr.is-in .jr-cta { transition-delay: .3s; }
.jr.is-in .jr-badge svg * { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .1s; }
.jr.is-in .jr-lights { opacity: 1; transition: opacity 1.8s ease .6s; }
/* the script "writes" left-to-right, line by line, then the crown is drawn */
/* (the script write-in + crown draw are driven by GSAP in 11-journey.js, main-thread, so every browser repaints it) */

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .jr-photo { width: 85%; }
  .jr-script { font-size: 28px; max-width: 210px; }
}
@media (max-width: 767px) {
  .jr { flex-direction: column; align-items: stretch; min-height: 0; }
  .jr-grid { display: block; position: static; padding: 56px 0 0; }
  .jr-text { position: relative; z-index: 2; }
  .jr-eyebrow { font-size: 11px; margin-bottom: 12px; }
  .jr-title-row { gap: 12px; margin-bottom: 14px; }
  .jr-badge { flex-basis: 52px; width: 52px; height: 58px; }
  .jr-title { font-size: 36px; }
  .jr-sub { font-size: 16px; margin-bottom: 22px; }
  .jr-photo { position: relative; order: 2; width: 100%; height: 270px; margin-top: 26px; z-index: 0; overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .jr-layer { inset: -6% 0; }
  .jr-front, .jr-lights { inset: auto -30% -2% -30%; }
  .jr-shade { background: linear-gradient(180deg, #040b15 0%, rgba(4,11,21,.2) 28%, transparent 60%, rgba(4,11,21,.85) 100%); }
  .jr-lights i { width: calc(90px * var(--s)); }
  .jr-script { position: absolute; right: 18px; bottom: 30px; z-index: 2; font-size: 18px; max-width: 150px; margin: 0; }
  .jr-crown { width: 40px; height: 28px; margin: 6px 0 0 60px; }
}