/* ============================================================
   wwu-hero.css — "Too busy to film?" opening hero (WorkWithUs)
   Gradient-framed stage + culture photo rail with parallax,
   breathing aurora, letter-by-letter title, mouse tilt.
   ============================================================ */
.tbf{position:relative;padding:26px 16px 40px;overflow:clip}
.tbf-frame{position:relative;max-width:1320px;margin:0 auto;border-radius:30px;padding:clamp(48px,7vw,104px) clamp(20px,4vw,64px) clamp(34px,4vw,56px);background:radial-gradient(120% 90% at 50% 0%,#151515 0%,#0B0B0B 62%);isolation:isolate}
[data-theme="light"] .tbf-frame{background:radial-gradient(120% 90% at 50% 0%,#fff 0%,#F6F4F1 70%)}
/* 1px gradient hairline border */
.tbf-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--grad-1),var(--grad-3) 38%,var(--grad-4) 58%,var(--grad-6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.55;pointer-events:none;z-index:3}
/* Aurora blooms — breathing */
.tbf-aurora{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:0;pointer-events:none}
.tbf-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform,opacity;animation:tbfBreathe 11s ease-in-out infinite}
.tbf-aurora i:nth-child(1){width:46%;height:70%;left:-12%;bottom:-18%;background:radial-gradient(circle,var(--grad-2),transparent 68%)}
.tbf-aurora i:nth-child(2){width:34%;height:52%;left:6%;bottom:-14%;background:radial-gradient(circle,var(--grad-3),transparent 66%);animation-delay:-3.5s}
.tbf-aurora i:nth-child(3){width:48%;height:74%;right:-14%;bottom:-20%;background:radial-gradient(circle,var(--grad-6),transparent 68%);animation-delay:-6s}
.tbf-aurora i:nth-child(4){width:32%;height:44%;right:-6%;top:-16%;background:radial-gradient(circle,var(--grad-5),transparent 70%);animation-delay:-8.5s;opacity:.32}
@keyframes tbfBreathe{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.42}50%{transform:translate3d(2%,-4%,0) scale(1.16);opacity:.62}}
.tbf-inner{position:relative;z-index:2;text-align:center}
.tbf-h1{margin:0;font-family:var(--font-sans);font-weight:700;font-size:clamp(2.6rem,7.2vw,5.6rem);line-height:.98;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
html[lang="ar"] .tbf-h1{font-family:var(--font-ar);letter-spacing:0;line-height:1.15}
.tbf-h1 .tbf-l2{display:block;margin-top:.12em;font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;background:linear-gradient(96deg,var(--grad-1),var(--grad-2) 18%,var(--grad-3) 42%,var(--grad-4) 60%,var(--grad-5) 80%,var(--grad-6));-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang="ar"] .tbf-h1 .tbf-l2{font-family:var(--font-ar);font-style:normal;font-weight:600}
/* letter-by-letter build (Latin only — Arabic must stay joined) */
.tbf-h1 .tbf-l1{display:block}
.tbf-h1 .ch{display:inline-block;opacity:0;transform:translateY(.42em) rotate(2deg);filter:blur(6px);animation:tbfChar .62s cubic-bezier(.16,.84,.3,1) forwards}
@keyframes tbfChar{to{opacity:1;transform:none;filter:blur(0)}}
/* whole-line lift — used for the gradient line, and for Arabic where per-letter splitting would break the script */
.tbf-h1 .tbf-l1.is-lit,
.tbf-h1 .tbf-l2.is-lit{opacity:0;animation:tbfLine .9s cubic-bezier(.16,.84,.3,1) forwards}
.tbf-h1 .tbf-l1.is-lit{animation-delay:.14s}
.tbf-h1 .tbf-l2.is-lit{animation-delay:.62s}
html[lang="ar"] .tbf-h1 .tbf-l2.is-lit{animation-delay:.44s}
@keyframes tbfLine{from{opacity:0;transform:translateY(.3em);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
.tbf-lede{margin:clamp(20px,2.4vw,30px) auto 0;max-width:64ch;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.68;color:var(--ink-2);text-wrap:pretty}
.tbf-pill{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:11px 20px;border-radius:999px;border:1px solid rgba(127,127,127,.32);font-size:clamp(.9rem,1.1vw,1.02rem);font-weight:500;background:rgba(127,127,127,.05)}
.tbf-pill .sp{color:var(--grad-1);font-size:1.05em}
.tbf-pill .tx{background:linear-gradient(96deg,var(--grad-1),var(--grad-3) 45%,var(--grad-5) 78%,var(--grad-6));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
.tbf-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(26px,3vw,38px)}
.tbf-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border-radius:999px;font-size:1.02rem;font-weight:600;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.tbf-btn .ar{transition:transform .22s ease}
.tbf-btn:hover{transform:translateY(-2px)}
.tbf-btn:hover .ar{transform:translateX(4px)}
html[dir="rtl"] .tbf-btn:hover .ar{transform:translateX(-4px)}
.tbf-btn-g{color:#0A0A0A;background:linear-gradient(96deg,var(--grad-1),var(--grad-2) 22%,var(--grad-3) 48%,var(--grad-4) 66%,var(--grad-6));box-shadow:0 10px 34px rgba(229,85,200,.26)}
.tbf-btn-g:hover{box-shadow:0 14px 44px rgba(229,85,200,.38)}
.tbf-btn-o{color:var(--ink);border:1px solid rgba(127,127,127,.34);background:rgba(127,127,127,.06)}
.tbf-btn-o:hover{background:rgba(127,127,127,.12)}
/* ---------- Human rail: culture photos ---------- */
.tbf-rail{position:relative;z-index:2;margin-top:clamp(34px,4.2vw,58px);will-change:transform}
.tbf-rail-cap{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;font-size:.86rem;letter-spacing:.02em;color:var(--ink-3)}
.tbf-rail-cap b{width:6px;height:6px;border-radius:50%;background:var(--grad-3);box-shadow:0 0 10px var(--grad-3)}
.tbf-viewport{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);perspective:1200px}
.tbf-track{display:flex;gap:14px;width:max-content;animation:tbfMarquee 52s linear infinite;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
html[dir="rtl"] .tbf-track{animation-name:tbfMarqueeRtl}
.tbf-viewport:hover .tbf-track{animation-play-state:paused}
@keyframes tbfMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes tbfMarqueeRtl{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}
.tbf-track figure{flex:0 0 auto;width:clamp(178px,20vw,260px);aspect-ratio:4/3;margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(127,127,127,.18);background:#101010}
.tbf-track img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block;opacity:0;filter:blur(14px) saturate(.7);transform:scale(1.1);transition:opacity 1s ease,filter 1.1s ease,transform 1.4s ease}
.tbf-track img.is-in{opacity:1;filter:blur(0) saturate(1);transform:scale(1)}
.tbf-track figure:nth-child(even){transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){
  .tbf-aurora i,.tbf-track{animation:none!important}
  .tbf-h1 .ch{opacity:1;transform:none;filter:none;animation:none}
  .tbf-h1 .tbf-l1.is-lit,.tbf-h1 .tbf-l2.is-lit{opacity:1;transform:none;animation:none}
  .tbf-track img{opacity:1;filter:none;transform:none}
}
@media (max-width:640px){
  .tbf{padding:14px 10px 26px}
  .tbf-frame{border-radius:22px}
  .tbf-track figure:nth-child(even){transform:translateY(8px)}
}