/* ========================================================================== 
   JOB CONNECT — Bold Agency Motion Layer v6.9.6
   시네마틱 메인 / 키워드 마키 / 진행 표시 / 카드 스포트라이트 / 미세 3D
   ========================================================================== */
:root{
  --bold-ease:cubic-bezier(.16,1,.3,1);
  --bold-blue:#0a57df;
  --bold-cyan:#3aa7ff;
  --bold-navy:#061f43;
}

/* 1) 페이지 스크롤 진행선 */
.agency-scroll-progress{
  position:fixed;left:0;top:0;width:100%;height:3px;z-index:9999;
  pointer-events:none;background:transparent;
}
.agency-scroll-progress > span{
  display:block;width:100%;height:100%;transform:scaleX(var(--scroll-progress,0));transform-origin:left center;
  background:linear-gradient(90deg,#0a57df 0%,#2687ff 55%,#78caff 100%);
  box-shadow:0 0 16px rgba(38,135,255,.34);
  will-change:transform;
}

/* 2) 히어로: 빛의 초점 + 시네마틱 그레인 */
body[data-page="home"] .hero{min-height:500px}
body[data-page="home"] .hero-agency-light{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(540px circle at var(--hero-x,70%) var(--hero-y,44%),rgba(87,170,255,.18),rgba(55,132,238,.07) 34%,transparent 68%),
    linear-gradient(115deg,transparent 32%,rgba(255,255,255,.055) 50%,transparent 66%);
  transition:background-position .2s linear;
  mix-blend-mode:screen;
}
body[data-page="home"] .hero-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  background-size:180px 180px;mix-blend-mode:soft-light;
}
body[data-page="home"] .hero-copy{padding-bottom:92px}
body[data-page="home"] .hero h1 .accent{
  position:relative;width:max-content;max-width:100%;
  text-shadow:0 6px 26px rgba(64,150,255,.18);
}
body[data-page="home"] .hero h1 .accent:after{
  content:"";display:block;width:0;height:3px;margin-top:12px;border-radius:99px;
  background:linear-gradient(90deg,#62b8ff,#fff 62%,rgba(255,255,255,.12));
  box-shadow:0 0 20px rgba(80,168,255,.34);
  transition:width 1.05s var(--bold-ease) .42s;
}
body[data-page="home"] .hero-copy.is-intro-visible h1 .accent:after{width:min(340px,62vw)}

/* 3) 히어로 슬라이드 진행 표시 */
.hero-progress-ui{
  position:absolute;right:max(4%,calc((100vw - 1240px)/2));bottom:28px;z-index:4;
  width:min(260px,30vw);color:#fff;display:flex;align-items:center;gap:14px;
  text-shadow:0 2px 12px rgba(0,0,0,.22);
}
.hero-progress-number{font-size:12px;font-weight:800;letter-spacing:.14em;white-space:nowrap;opacity:.88}
.hero-progress-track{display:grid;grid-template-columns:repeat(var(--hero-slide-count,3),1fr);gap:6px;flex:1}
.hero-progress-segment{height:2px;background:rgba(255,255,255,.28);overflow:hidden;border-radius:99px}
.hero-progress-segment i{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:left center}
.hero-progress-segment.is-done i{transform:scaleX(1)}
.hero-progress-segment.is-active i{animation:heroProgressFill var(--hero-duration,10000ms) linear forwards}
@keyframes heroProgressFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 4) 메인 바로 아래 흐르는 브랜드 키워드 띠 */
.agency-marquee{
  overflow:hidden;background:#071f43;color:#fff;border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(7,31,67,.18);position:relative;
}
.agency-marquee:before,.agency-marquee:after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.agency-marquee:before{left:0;background:linear-gradient(90deg,#071f43,transparent)}
.agency-marquee:after{right:0;background:linear-gradient(270deg,#071f43,transparent)}
.agency-marquee-track{
  display:flex;width:max-content;align-items:center;gap:0;padding:13px 0;
  animation:agencyTicker 28s linear infinite;will-change:transform;
}
.agency-marquee-group{display:flex;align-items:center;flex:none}
.agency-marquee-item{font-size:12px;font-weight:800;letter-spacing:.115em;white-space:nowrap;opacity:.82;display:flex;align-items:center}
.agency-marquee-item:after{content:"";width:4px;height:4px;border-radius:50%;background:#55adff;margin:0 22px;box-shadow:0 0 11px rgba(85,173,255,.75)}
@keyframes agencyTicker{to{transform:translateX(-50%)}}

/* 5) 홈 섹션: 큰 숫자와 은은한 공간감 */
body[data-page="home"] .section{position:relative;overflow:hidden;isolation:isolate}
body[data-page="home"] .section > .container{position:relative;z-index:1}
body[data-page="home"] .section:nth-of-type(odd):after{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-280px;top:8%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(39,124,255,.07),rgba(39,124,255,0) 68%);
}
body[data-page="home"] .section-head > div:first-child{position:relative;isolation:isolate}
body[data-page="home"] .section-head > div:first-child[data-agency-index]:before{
  content:attr(data-agency-index);position:absolute;z-index:-1;right:-72px;top:-48px;
  font-size:92px;line-height:1;font-weight:900;letter-spacing:-.08em;color:transparent;
  -webkit-text-stroke:1px rgba(10,87,223,.13);text-stroke:1px rgba(10,87,223,.13);
  opacity:0;transform:translate3d(18px,0,0);transition:opacity .8s var(--bold-ease),transform .8s var(--bold-ease);
}
body[data-page="home"] .section-head.is-revealed > div:first-child[data-agency-index]:before{opacity:1;transform:none}
body[data-page="home"] .section-head h2{position:relative}
body[data-page="home"] .section-head h2:after{
  content:"";display:block;width:0;height:2px;margin-top:13px;background:linear-gradient(90deg,var(--blue),rgba(10,87,223,0));
  transition:width .9s var(--bold-ease) .15s;
}
body[data-page="home"] .section-head.is-revealed h2:after{width:84px}

/* 6) 카드에 마우스 위치를 따라오는 스포트라이트 */
.agency-reactive{position:relative;isolation:isolate;overflow:hidden;--spot-x:50%;--spot-y:50%}
.agency-reactive:after{
  content:"";position:absolute;z-index:6;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--spot-x) var(--spot-y),rgba(78,156,255,.15),rgba(78,156,255,.055) 32%,transparent 69%);
  transition:opacity .28s ease;
}
@media (hover:hover) and (pointer:fine){
  .agency-reactive:hover:after{opacity:1}
  .agency-tilt{
    transform-style:preserve-3d;transform-origin:center center;
    transition:transform .34s var(--bold-ease),box-shadow .34s var(--bold-ease),border-color .3s ease!important;
  }
  .agency-tilt:hover{
    transform:perspective(950px) translateY(-5px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))!important;
    box-shadow:0 25px 58px rgba(8,38,88,.15)!important;
  }
}

/* 7) Bento 대표 카드: 천천히 지나가는 라이트 스윕 */
body[data-page="home"] .quick-grid.agency-bento .quick:nth-child(1):before,
body[data-page="home"] .quick-grid.agency-bento .quick:nth-child(4):before{
  content:"";position:absolute;z-index:0;top:-30%;bottom:-30%;width:38%;left:-55%;pointer-events:none;
  transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transition:left .85s var(--bold-ease);
}
@media (hover:hover) and (pointer:fine){
  body[data-page="home"] .quick-grid.agency-bento .quick:nth-child(1):hover:before,
  body[data-page="home"] .quick-grid.agency-bento .quick:nth-child(4):hover:before{left:120%}
}

/* 8) 메인 버튼: 조금 더 과감한 광택 이동 */
.btn.primary,.nav-cta{position:relative;overflow:hidden;isolation:isolate}
.btn.primary:before,.nav-cta:before{
  content:"";position:absolute;z-index:-1;top:-30%;bottom:-30%;left:-55%;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);
  transition:left .72s var(--bold-ease);pointer-events:none;
}
@media (hover:hover) and (pointer:fine){.btn.primary:hover:before,.nav-cta:hover:before{left:120%}}

/* 9) 서브 페이지: 타이틀 밑에 짧은 브랜드 라인 */
.page-hero h1{position:relative;display:inline-block}
.page-hero h1:after{
  content:"";position:absolute;left:0;bottom:-13px;height:3px;width:0;border-radius:99px;
  background:linear-gradient(90deg,#0a57df,#72b9ff);transition:width .8s var(--bold-ease) .18s;
}
.page-hero .inner.is-revealed h1:after{width:56px}

/* 10) 상세 페이지 sticky 카드에 살짝 더 또렷한 깊이 */
@media(min-width:900px){
  body[data-page="jobs"] .detail-side,
  body[data-page="roles"] .detail-side,
  body[data-page="guide"] .detail-side{
    filter:drop-shadow(0 18px 30px rgba(10,38,79,.06));
  }
}

/* 모바일에서는 강한 3D/포인터 효과를 제거하고 흐르는 띠와 진행선만 유지 */
@media(max-width:760px){
  .hero-progress-ui{right:4%;left:4%;bottom:18px;width:auto}
  .hero-progress-number{font-size:10px}
  .agency-marquee-track{padding:11px 0;animation-duration:34s}
  .agency-marquee-item{font-size:10.5px}
  .agency-marquee-item:after{margin:0 15px}
  body[data-page="home"] .section-head > div:first-child[data-agency-index]:before{right:-28px;top:-30px;font-size:62px}
  body[data-page="home"] .hero-copy{padding-bottom:88px}
}

@media(prefers-reduced-motion:reduce){
  .agency-scroll-progress{display:none}
  .agency-marquee-track{animation:none!important;transform:none!important}
  .hero-progress-segment.is-active i{animation:none!important;transform:scaleX(1)}
  .agency-tilt:hover{transform:none!important}
  body[data-page="home"] .hero h1 .accent:after,
  body[data-page="home"] .section-head h2:after,
  .page-hero h1:after{transition:none!important}
}