/* ============================================================
   Rework — LIVE FEED layer (loaded LAST, purely additive).
   Turns the static hero phone into a living, auto-playing
   TikTok-style vertical job-video feed. Remove this one <link>
   + <script> to fully revert to the static screen.
   All sizes in container-query units (cqw/cqh) so the feed
   scales to any phone width. Driven by rework-feed.js.
   ============================================================ */

/* the seeker hero slot becomes a sized container for the feed */
#heroSeeker.tf-host{container-type:size;position:absolute;inset:0;overflow:hidden;
  background:#0b0b0b;border-radius:inherit;}

/* viewport that clips the vertically-sliding track */
.tf-vp{position:absolute;inset:0;overflow:hidden;}
.tf-track{position:absolute;inset:0;display:flex;flex-direction:column;
  transform:translateY(calc(var(--i,0) * -100%));
  transition:transform .72s cubic-bezier(.7,.0,.18,1);}
.tf-track.tf-noanim{transition:none;}

/* one full-bleed job "video" */
.tf-card{position:relative;flex:0 0 100%;height:100%;overflow:hidden;color:#fff;
  font-family:Inter,system-ui,-apple-system,sans-serif;text-align:left;}

/* the "video" — drifting gradient + grain reads as motion */
.tf-bg{position:absolute;inset:0;z-index:0;}
.tf-bg::before{content:"";position:absolute;inset:-12%;
  background:
    radial-gradient(42% 38% at 28% 24%, rgba(254,214,10,.42), transparent 60%),
    radial-gradient(46% 40% at 78% 70%, rgba(255,120,90,.40), transparent 62%),
    radial-gradient(50% 44% at 60% 18%, rgba(108,122,255,.30), transparent 64%),
    linear-gradient(170deg,#1c1a16,#121212 46%,#070707);
  animation:tf-ken 13s var(--ease,ease-in-out) infinite alternate;}
.tf-card[data-tone="1"] .tf-bg::before{
  background:
    radial-gradient(44% 40% at 70% 26%, rgba(108,122,255,.46), transparent 60%),
    radial-gradient(46% 42% at 24% 74%, rgba(254,214,10,.34), transparent 62%),
    linear-gradient(160deg,#161824,#101014 48%,#070708);}
.tf-card[data-tone="2"] .tf-bg::before{
  background:
    radial-gradient(46% 40% at 30% 30%, rgba(61,220,132,.40), transparent 60%),
    radial-gradient(44% 42% at 80% 72%, rgba(254,214,10,.34), transparent 62%),
    linear-gradient(165deg,#13201a,#0c1410 48%,#060807);}
.tf-card[data-tone="3"] .tf-bg::before{
  background:
    radial-gradient(46% 42% at 72% 30%, rgba(255,120,90,.46), transparent 60%),
    radial-gradient(42% 40% at 26% 70%, rgba(255,170,70,.34), transparent 62%),
    linear-gradient(165deg,#231613,#140d0b 48%,#080605);}
@keyframes tf-ken{
  0%{transform:scale(1.04) translate(0,0);}
  100%{transform:scale(1.14) translate(-3%,-2%);}}
.tf-grain{position:absolute;inset:0;z-index:1;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  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)' opacity='.5'/%3E%3C/svg%3E");}
.tf-vig{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 22% 56%,rgba(0,0,0,.78) 100%);}

/* big translucent company wordmark behind */
.tf-wm{position:absolute;z-index:2;top:30cqw;left:0;right:0;text-align:center;
  font-family:Archivo,Inter,sans-serif;font-weight:900;font-size:13cqw;letter-spacing:.02em;
  color:rgba(255,255,255,.13);text-transform:uppercase;}

/* top bar: live tag + segmented progress */
.tf-top{position:absolute;z-index:6;top:5cqw;left:4cqw;right:4cqw;}
.tf-seg{display:flex;gap:1.4cqw;margin-bottom:3cqw;}
.tf-seg i{flex:1;height:1cqw;border-radius:1cqw;background:rgba(255,255,255,.28);overflow:hidden;position:relative;}
.tf-seg i b{position:absolute;inset:0;width:0;background:#fff;border-radius:1cqw;}
.tf-seg i.done b{width:100%;}
.tf-live{display:inline-flex;align-items:center;gap:1.6cqw;font-size:3.2cqw;font-weight:700;
  background:rgba(0,0,0,.32);backdrop-filter:blur(4px);padding:1.4cqw 2.6cqw;border-radius:6cqw;}
.tf-live .dot{width:2cqw;height:2cqw;border-radius:50%;background:#ff3b3b;
  box-shadow:0 0 0 0 rgba(255,59,59,.6);animation:tf-pulse 1.6s ease-out infinite;}
@keyframes tf-pulse{0%{box-shadow:0 0 0 0 rgba(255,59,59,.55);}70%{box-shadow:0 0 0 2.6cqw rgba(255,59,59,0);}100%{box-shadow:0 0 0 0 rgba(255,59,59,0);}}

/* right action rail (like / comment / share / sound disc) */
.tf-rail{position:absolute;z-index:6;right:4cqw;bottom:34cqw;display:flex;flex-direction:column;
  align-items:center;gap:5.2cqw;color:#fff;}
.tf-rb{display:flex;flex-direction:column;align-items:center;gap:1cqw;}
.tf-rb .ic{width:7.4cqw;height:7.4cqw;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1cqw 2cqw rgba(0,0,0,.5));}
.tf-rb .ic svg{width:100%;height:100%;}
.tf-rb span{font-size:2.9cqw;font-weight:700;}
.tf-rb.liked .ic{color:#ff3b5c;animation:tf-pop .5s var(--ease,ease) both;}
@keyframes tf-pop{0%{transform:scale(.6);}55%{transform:scale(1.28);}100%{transform:scale(1);}}
.tf-disc{width:9cqw;height:9cqw;border-radius:50%;border:1.2cqw solid rgba(255,255,255,.5);
  background:conic-gradient(from 0deg,#FED60A,#FF7A6B,#6C7AFF,#FED60A);animation:tf-spin 4s linear infinite;}

/* heart burst when auto-liked */
.tf-burst{position:absolute;z-index:7;left:50%;top:50%;width:26cqw;height:26cqw;margin:-13cqw 0 0 -13cqw;
  color:#ff3b5c;opacity:0;pointer-events:none;}
.tf-burst svg{width:100%;height:100%;filter:drop-shadow(0 0 6cqw rgba(255,59,92,.5));}
.tf-burst.go{animation:tf-heart 1s var(--ease,ease) both;}
@keyframes tf-heart{0%{opacity:0;transform:scale(.4) rotate(-8deg);}25%{opacity:1;transform:scale(1.1) rotate(4deg);}55%{opacity:1;transform:scale(1) rotate(0);}100%{opacity:0;transform:scale(1.15);}}

/* bottom caption block */
.tf-info{position:absolute;z-index:6;left:4cqw;right:20cqw;bottom:17cqw;}
.tf-handle{display:flex;align-items:center;gap:2cqw;font-size:3.7cqw;font-weight:700;margin-bottom:2.2cqw;}
.tf-handle .av{width:6.4cqw;height:6.4cqw;border-radius:50%;background:#FED60A;color:#0a0a0a;
  font-family:Archivo,sans-serif;font-weight:900;font-size:3.4cqw;display:flex;align-items:center;justify-content:center;flex:none;}
.tf-handle .vf{color:#3ad1ff;width:3.6cqw;height:3.6cqw;display:inline-flex;}
.tf-role{font-size:6.6cqw;font-weight:800;letter-spacing:-.02em;line-height:1.04;margin-bottom:2.6cqw;
  text-shadow:0 1cqw 3cqw rgba(0,0,0,.45);}
.tf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2cqw;font-size:3.3cqw;color:#e7e7e7;}
.tf-pay{background:#FED60A;color:#0a0a0a;font-weight:800;border-radius:2cqw;padding:1cqw 2.2cqw;}
.tf-tag{display:inline-flex;align-items:center;gap:1.4cqw;background:rgba(255,255,255,.16);
  backdrop-filter:blur(4px);border-radius:5cqw;padding:1cqw 2.4cqw;}

/* equalizer = "video has sound / is playing" */
.tf-eq{display:inline-flex;align-items:flex-end;gap:.8cqw;height:4cqw;}
.tf-eq i{width:1cqw;background:#FED60A;border-radius:1cqw;animation:tf-eq 1s ease-in-out infinite;}
.tf-eq i:nth-child(2){animation-delay:.2s;}
.tf-eq i:nth-child(3){animation-delay:.4s;}
.tf-eq i:nth-child(4){animation-delay:.1s;}
@keyframes tf-eq{0%,100%{height:1.4cqw;}50%{height:4cqw;}}

/* apply bar + swipe hint */
.tf-apply{position:absolute;z-index:6;left:4cqw;right:4cqw;bottom:4.5cqw;height:11cqw;border-radius:3.4cqw;
  background:#FED60A;color:#0a0a0a;font-weight:800;font-size:4.2cqw;
  display:flex;align-items:center;justify-content:center;gap:2cqw;
  box-shadow:0 0 0 0 rgba(254,214,10,.5);animation:tf-glow 2.6s ease-in-out infinite;}
@keyframes tf-glow{0%,100%{box-shadow:0 0 0 0 rgba(254,214,10,0);}50%{box-shadow:0 2cqw 7cqw -1cqw rgba(254,214,10,.55);}}
.tf-swipe{position:absolute;z-index:6;left:0;right:0;bottom:18.5cqw;text-align:center;
  font-size:2.9cqw;color:rgba(255,255,255,.82);letter-spacing:.04em;
  display:flex;flex-direction:column;align-items:center;gap:.6cqw;pointer-events:none;
  animation:tf-swipe 2.2s ease-in-out infinite;}
.tf-swipe .ch{width:4cqw;height:4cqw;display:inline-flex;}
@keyframes tf-swipe{0%,100%{transform:translateY(1.5cqw);opacity:.5;}50%{transform:translateY(-1.5cqw);opacity:1;}}

/* one-time coach-mark — the feed is interactive (swipe / tap). Shown once,
   then dismissed on first interaction (rw_feedhint in localStorage). */
.tf-hint{position:absolute;z-index:8;left:50%;bottom:19cqw;transform:translateX(-50%) translateY(2cqw);
  display:inline-flex;align-items:center;gap:1.8cqw;white-space:nowrap;
  padding:2cqw 3.6cqw;border-radius:6cqw;font-size:3.1cqw;font-weight:700;color:#fff;letter-spacing:.01em;
  background:rgba(12,12,14,.5);backdrop-filter:blur(7px) saturate(1.2);-webkit-backdrop-filter:blur(7px) saturate(1.2);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 2cqw 8cqw -2cqw rgba(0,0,0,.6);
  opacity:0;transition:opacity .5s ease,transform .5s ease;pointer-events:none;}
.tf-hint.show{opacity:1;transform:translateX(-50%) translateY(0);animation:tf-hintbob 2s ease-in-out 1s infinite;}
.tf-hint.hide{opacity:0;transform:translateX(-50%) translateY(2cqw);}
.tf-hint .ch{width:4.2cqw;height:4.2cqw;display:inline-flex;color:#FED60A;}
@keyframes tf-hintbob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-1.3cqw);}}
@media (prefers-reduced-motion: reduce){.tf-hint{display:none !important;}}

@keyframes tf-spin{to{transform:rotate(360deg);}}

/* reduced motion / paused: freeze the motion, keep it readable */
.tf-host.tf-paused .tf-bg::before,
.tf-host.tf-paused .tf-disc,
.tf-host.tf-paused .tf-eq i{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){
  .tf-bg::before,.tf-disc,.tf-eq i,.tf-live .dot,.tf-apply,.tf-swipe{animation:none !important;}
  .tf-track{transition:none !important;}
}

/* nav scroll-spy active state (paired with rework-feed.js) */
.nav-links a.active{color:#fff;background:rgba(255,255,255,.08);}
.nav-links a.active::after{content:"";display:block;}