/* RecrutaMatch motion layer: orbiting candidates, scroll choreography, 3D depth,
   chaos-to-pipeline stage, transcript scan loop, dossier loop, directional reveals.
   Loaded after studio.css. Every loop pauses offscreen, on user pause, and under reduced motion. */
:root { --spring: cubic-bezier(.34, 1.36, .64, 1); }
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* ---------- Hero: depth layers + scroll-driven mockup ---------- */
.hero-in { z-index: 2; }
.hero-in::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -40px; width: min(1100px, 120%); height: calc(100% + 90px); transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 48%, #050e22e6 0%, #050e22b8 45%, #050e2200 75%); }

/* Hero fades into the next section: no hard divider, the ring dissolves like smoke. */
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(104px, 12vh, 158px); z-index: 3; pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 104%, #040b1b 30%, rgba(4,11,27,.70) 58%, rgba(4,11,27,0) 100%),
    linear-gradient(180deg, rgba(4,11,27,0) 0%, rgba(4,11,27,.30) 42%, rgba(4,11,27,.78) 78%, #040b1b 100%);
}
.hero-caption, .motion-toggle { z-index: 4; }
.hero-orbit { -webkit-mask-image: linear-gradient(180deg, #000 78%, rgba(0,0,0,.45) 93%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, rgba(0,0,0,.45) 93%, transparent 100%); }
@media (max-width: 600px) { .hero::after { height: clamp(92px, 11vh, 128px); } }
.stage { z-index: 2; }
.orbiters { position: absolute; inset: 60px 0 0; pointer-events: none; }
.orb { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; will-change: transform, opacity; transition: filter .4s; }
.orb i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--text); font-style: normal; color: #fff; letter-spacing: .02em;
  background: radial-gradient(circle at 30% 25%, #6f9dff, #1f4fc2 70%); border: 1px solid #c9dcff80; box-shadow: 0 10px 24px -8px #000c, inset 0 1px 0 #ffffff60; }
.orb b { font: 700 11px/1 var(--text); color: #e2edff; padding: 6px 9px; border-radius: 999px; background: #0b1c3dcc; border: 1px solid #8fb8ff55;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 18px -10px #000; white-space: nowrap; }
.orb.back { filter: blur(1.2px) saturate(.75); }
.tilt, .stage:hover .tilt {
  transform: rotateX(calc(9deg - var(--hp, 0) * 9deg)) rotateY(calc(-3deg + var(--hp, 0) * 3deg)) scale(calc(1 + var(--hp, 0) * .14)) translateY(calc(var(--hp, 0) * -18px));
  transition: transform .12s linear;
}
@media (max-width: 600px) { .orbiters { inset: 150px -50px 0; } .orb i { width: 34px; height: 34px; font-size: 11px; } .orb b { font-size: 10px; padding: 5px 7px; } }

/* ---------- Para quem: pinned horizontal rail with coverflow depth ---------- */
.who { position: relative; background: linear-gradient(180deg, #040b1b, #071229 40%, #071229); color: var(--on); }
.who-track { display: flex; align-items: center; gap: 24px; will-change: transform; }
.who-intro { flex: 0 0 min(430px, 34vw); padding-right: 24px; }
.who-intro .h2 { font-size: clamp(36px, 4vw, 56px); text-align: left; }
.who-intro .lead { margin: 18px 0 0; text-align: left; color: var(--muted); }
.who-hint .m { display: none; }
@media (max-width: 820px) { .who-hint .d { display: none; } .who-hint .m { display: inline; } }
.who-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-size: 13px; color: #9fb4d6; }
.who-hint .ico { width: 16px; height: 16px; animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 50% { translate: 6px 0; } }
.who-card { position: relative; flex: 0 0 clamp(290px, 26vw, 370px); height: min(540px, 70vh); border-radius: 18px; overflow: hidden; border: 1px solid #ffffff24;
  transform: perspective(1400px) rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); transform-origin: 50% 50%; box-shadow: 0 40px 70px -40px #000; background: #0b1730; }
.who-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12) translateX(var(--par, 0px)); }
.who-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #040b1bf2 0%, #040b1bb0 34%, #040b1b00 62%); }
.who-copy { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 26px; }
.who-k { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #d8e6ff; padding: 6px 11px; border-radius: 999px; background: #ffffff14; border: 1px solid #ffffff2a; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.who-k .ico { width: 15px; height: 15px; }
.who-copy h3 { font: 700 26px/1.12 var(--display); letter-spacing: -.02em; margin: 14px 0 0; color: #fff; }
.who-copy p { font-size: 14px; line-height: 1.6; color: #c2d0e6; margin: 10px 0 0; }
.who-outro { flex: 0 0 min(360px, 30vw); padding: 32px; }
.who-outro h3 { font: 700 30px/1.1 var(--display); margin: 0; }
.who-outro p { font-size: 15px; color: var(--muted); margin: 12px 0 22px; }
@media (min-width: 821px) {
  .who { height: var(--who-h, 280vh); }
  .who-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
  .who-track { padding: 40px max(var(--pad), calc((100vw - 1160px) / 2)) 0; }
}
@media (max-width: 820px) {
  .who { height: var(--who-h, auto); }
  .who-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; }
  .who-track { padding: 0 22px; align-items: center; }
  .who-intro { flex-basis: 72vw; align-self: center; }
  .who-card { flex-basis: 78vw; height: min(540px, 66svh); }
  .who-outro { flex-basis: 78vw; align-self: center; }
  .who-hint { display: inline-flex; }
}

/* ---------- Dor: chaos becomes a pipeline ---------- */
.switch { position: relative; }
.switch .tick { position: absolute; left: 14px; right: 14px; bottom: -10px; height: 2px; border-radius: 2px; background: #e3e9f2; overflow: hidden; z-index: 0; }
.switch .tick::after { content: ''; position: absolute; inset: 0; background: #2860db; transform: scaleX(0); transform-origin: 0 50%; }
.switch .tick.run::after { animation: tickrun var(--dur, 4s) linear forwards; }
@keyframes tickrun { to { transform: scaleX(1); } }
.mess { position: relative; container-type: inline-size; max-width: 1000px; margin: 46px auto 8px; aspect-ratio: 100 / 35; }
.mess-cols { position: absolute; left: 0; top: 0; width: 100%; display: grid; grid-template-columns: repeat(3, 28cqw); column-gap: 5cqw; padding-left: 3cqw; }
.mess-cols span { height: 25cqw; border-radius: 1.6cqw; background: #f3f6fb; border: 1px solid #e3e9f2; padding: 1.4cqw 1.6cqw; font: 700 clamp(11px, 1.3cqw, 14px)/1 var(--text); color: #55647c;
  opacity: 0; transform: translateY(2cqw) scale(.97); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.mess[data-state=after] .mess-cols span { opacity: 1; transform: none; }
.mess[data-state=after] .mess-cols span:nth-child(2) { transition-delay: .06s; }
.mess[data-state=after] .mess-cols span:nth-child(3) { transition-delay: .12s; }
.tk { position: absolute; left: 0; top: 0; width: 28cqw; z-index: 1;
  transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqw)) rotate(var(--r)); transition: transform 1.05s var(--spring); transition-delay: calc(var(--i) * 55ms); }
.tk:nth-child(2) { --x: 4;  --y: 5;  --r: -7deg; }
.tk:nth-child(3) { --x: 63; --y: 2;  --r: 6deg; }
.tk:nth-child(4) { --x: 34; --y: 12; --r: -2deg; }
.tk:nth-child(5) { --x: 67; --y: 17; --r: 8deg; }
.tk:nth-child(6) { --x: 9;  --y: 19; --r: 4deg; }
.tk:nth-child(7) { --x: 37; --y: 1;  --r: -11deg; }
.mess[data-state=after] .tk { --r: 0deg; }
.mess[data-state=after] .tk:nth-child(2) { --x: 3;  --y: 7; }
.mess[data-state=after] .tk:nth-child(5) { --x: 3;  --y: 15.5; }
.mess[data-state=after] .tk:nth-child(3) { --x: 36; --y: 7; }
.mess[data-state=after] .tk:nth-child(4) { --x: 36; --y: 15.5; }
.mess[data-state=after] .tk:nth-child(6) { --x: 69; --y: 7; }
.mess[data-state=after] .tk:nth-child(7) { --x: 69; --y: 15.5; }
.tk-in { display: flex; align-items: center; gap: 1.1cqw; padding: 1.1cqw 1.3cqw; border-radius: 1.3cqw; background: #fff; border: 1px solid #dfe5ee;
  box-shadow: 0 2.2cqw 3.6cqw -2cqw #1b2f5566; animation: bob 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); transition: box-shadow .6s, border-color .6s; }
.mess[data-state=after] .tk-in { animation-play-state: paused; box-shadow: 0 1.2cqw 2.4cqw -1.6cqw #1b2f5540; border-color: #cfdcf3; }
@keyframes bob { 50% { translate: 0 -0.9cqw; } }
.tk-ic { flex: none; width: 3.6cqw; height: 3.6cqw; border-radius: .9cqw; display: grid; place-items: center; background: #f1f3f7; color: #6b778c; transition: background-color .6s, color .6s; }
.tk-ic .ico { width: 55%; height: 55%; }
.mess[data-state=after] .tk-ic { background: #2860db; color: #fff; }
.tk-t { display: grid; min-width: 0; }
.tk-b, .tk-a { grid-area: 1 / 1; display: grid; min-width: 0; transition: opacity .45s, transform .6s var(--ease), filter .45s; }
.tk-t b { font-size: clamp(11px, 1.35cqw, 14px); font-weight: 700; color: #0b1730; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.tk-t small { font-size: clamp(10px, 1.15cqw, 12px); color: #6b778c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.tk-a { opacity: 0; transform: translateY(6px); filter: blur(3px); }
.tk-a small { color: #2856b8; font-weight: 500; }
.mess[data-state=after] .tk-b { opacity: 0; transform: translateY(-6px); filter: blur(3px); }
.mess[data-state=after] .tk-a { opacity: 1; transform: none; filter: none; transition-delay: .25s; }
.mess-cap { position: absolute; left: 0; right: 0; top: 29.5cqw; margin: 0; display: grid; text-align: center; font: 500 clamp(15px, 2cqw, 21px)/1.35 var(--display); color: #0b1730; }
.mess-cap span { grid-area: 1 / 1; transition: opacity .5s, transform .6s var(--ease); }
.mc-a { opacity: 0; transform: translateY(8px); color: #2156c4; }
.mess[data-state=after] .mc-b { opacity: 0; transform: translateY(-8px); }
.mess[data-state=after] .mc-a { opacity: 1; transform: none; }
.pains { margin-top: 26px; }
@media (max-width: 600px) {
  .mess { aspect-ratio: 100 / 160; margin-top: 30px; }
  .mess-cols { display: none; }
  .tk { width: 84cqw; }
  .tk-in { gap: 10px; padding: 10px 12px; border-radius: 12px; box-shadow: 0 10px 22px -14px #1b2f5580; }
  .tk-ic { width: 36px; height: 36px; border-radius: 9px; }
  .tk-t b { font-size: 13.5px; } .tk-t small { font-size: 12px; }
  @keyframes bob { 50% { translate: 0 -4px; } }
  .tk:nth-child(2) { --x: 2;  --y: 3;   --r: -5deg; }
  .tk:nth-child(3) { --x: 14; --y: 25;  --r: 4deg; }
  .tk:nth-child(4) { --x: 4;  --y: 47;  --r: -3deg; }
  .tk:nth-child(5) { --x: 15; --y: 69;  --r: 6deg; }
  .tk:nth-child(6) { --x: 3;  --y: 91;  --r: 3deg; }
  .tk:nth-child(7) { --x: 11; --y: 113; --r: -6deg; }
  .mess[data-state=after] .tk:nth-child(2) { --x: 8; --y: 3; }
  .mess[data-state=after] .tk:nth-child(5) { --x: 8; --y: 25; }
  .mess[data-state=after] .tk:nth-child(3) { --x: 8; --y: 47; }
  .mess[data-state=after] .tk:nth-child(4) { --x: 8; --y: 69; }
  .mess[data-state=after] .tk:nth-child(6) { --x: 8; --y: 91; }
  .mess[data-state=after] .tk:nth-child(7) { --x: 8; --y: 113; }
  .mess-cap { top: 138cqw; font-size: 17px; padding: 0 4px; }
}

/* ---------- IA: transcript scan loop ---------- */
.scan { display: grid; gap: 14px; margin-top: 22px; }
.scan-doc { position: relative; display: grid; gap: 9px; padding: 16px 18px; border-radius: 12px; background: #081630; border: 1px solid #ffffff1c; overflow: hidden; font-size: 13px; line-height: 1.5; color: #8ea2c3; box-shadow: inset 0 1px 0 #ffffff10; }
.sl { position: relative; transition: color .5s; }
.sl em { font-style: normal; font-weight: 700; color: #c5d4ec; margin-right: 4px; }
.sl::before { content: ''; position: absolute; inset: -2px -6px; border-radius: 5px; background: #3b78ff2e; box-shadow: inset 0 0 0 1px #6f9dff55; transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); z-index: -1; }
.scan-doc { isolation: isolate; }
.sl.hit { color: #fff; }
.sl.hit::before { transform: scaleX(1); }
.beam-line { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, transparent 0 42%, #7fb0ff26 49%, #a9caff55 50%, #7fb0ff26 51%, transparent 58% 100%); background-size: 100% 260%; animation: scanbeam 3.6s linear infinite; }
@keyframes scanbeam { from { background-position: 0 100%; } to { background-position: 0 0; } }
.scan-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.scan-tags span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #d6e5ff; padding: 7px 11px; border-radius: 999px; background: #12284d; border: 1px solid #8fb8ff45;
  opacity: .0; transform: translateY(10px) scale(.88); transition: opacity .4s, transform .7s var(--spring); }
.scan-tags span .ico { width: 14px; height: 14px; color: #8fc0ff; }
.scan-tags span.on { opacity: 1; transform: none; }

/* ---------- IA: dossier loop ---------- */
.pdf { perspective: 800px; }
.stamp { position: absolute; right: -16px; bottom: 16px; font: 700 10px/1 var(--text); color: #fff; background: #2860db; padding: 6px 8px; border-radius: 5px; white-space: nowrap; box-shadow: 0 8px 18px -8px #0a2a6b; transform: rotate(-8deg) scale(0); opacity: 0; }
.c-pdf.loop .p1 { animation: fanL 5.2s var(--ease) infinite; }
.c-pdf.loop .p2 { animation: fanR 5.2s var(--ease) infinite; }
.c-pdf.loop .p3 { animation: lift 5.2s var(--ease) infinite; }
.c-pdf.loop .stamp { animation: stampIn 5.2s var(--spring) infinite; }
@keyframes fanL { 0%, 12%, 100% { transform: translateX(-50%) rotate(0deg) translateY(6px); } 34%, 82% { transform: translateX(-98%) rotate(-14deg) rotateY(18deg) translateY(4px); } }
@keyframes fanR { 0%, 12%, 100% { transform: translateX(-50%) rotate(0deg) translateY(6px); } 34%, 82% { transform: translateX(-2%) rotate(13deg) rotateY(-18deg) translateY(4px); } }
@keyframes lift { 0%, 12%, 100% { transform: translateX(-50%) translateY(8px) rotateX(0deg); } 34%, 82% { transform: translateX(-50%) translateY(-10px) rotateX(10deg); box-shadow: 0 30px 40px -20px #000; } }
@keyframes stampIn { 0%, 38% { opacity: 0; transform: rotate(-8deg) scale(0); } 46% { opacity: 1; transform: rotate(-8deg) scale(1.18); } 52%, 82% { opacity: 1; transform: rotate(-8deg) scale(1); } 92%, 100% { opacity: 0; transform: rotate(-8deg) scale(.9); } }

/* ---------- Floating 3D depth ---------- */
[data-tilt] { transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .6s var(--ease); transform-style: preserve-3d; }
.phone-col, .c-cv .cv { animation: floaty 6.5s ease-in-out infinite; }
.tests .test { animation: floaty 7.5s ease-in-out infinite; }
.tests .tcol .test:nth-child(2) { animation-delay: -2.4s; }
.tests .tcol .test:nth-child(3) { animation-delay: -4.8s; }
.tests .tcol:last-child .test { animation-duration: 8.5s; }
@keyframes floaty { 50% { translate: 0 -12px; } }
.tests .tcol .test { animation-name: floatsm; }
@keyframes floatsm { 50% { translate: 0 -5px; } }

/* ---------- Directional scroll reveals ---------- */
.rv { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .rv, .js [data-rv-group] > * {
    opacity: 0; filter: blur(6px);
    transition: opacity .9s var(--ease), transform 1.15s var(--ease), filter .9s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .js .rv { transform: translateY(44px); }
  .js .rv[data-rv=left], .js [data-rv-group=left] > * { transform: translateX(-80px) rotate(-1.5deg); }
  .js .rv[data-rv=right], .js [data-rv-group=right] > * { transform: translateX(80px) rotate(1.5deg); }
  .js .rv[data-rv=zoom] { transform: scale(.84); }
  .js .rv[data-rv=flip] { transform: perspective(1400px) rotateX(26deg) translateY(60px) scale(.96); transform-origin: 50% 100%; }
  .js [data-rv-group=up] > * { transform: translateY(36px); }
  .js .rv.in, .js [data-rv-group] > .in { opacity: 1; transform: none; filter: none; }
}

/* ---------- Pause controls ---------- */
html[data-motion-paused=true] *, html[data-motion-paused=true] *::before, html[data-motion-paused=true] *::after { animation-play-state: paused !important; }
.mess:not(.inview) .tk-in, .scan:not(.inview) .beam-line, .tests:not(.inview) .test, .tests:not(.inview) .phone-col { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tk, .tk-in, .who-card, [data-tilt], .tilt { transition: none !important; animation: none !important; }
  .who-card { transform: none; }
}