/* ========================================================================== 
   JOB CONNECT — Opening Sequence v6.9.17 — Natural Silk Mist
   2장 구성. 이동감은 줄이고 장면이 서로 겹치며 호흡하듯 나타났다 위로 증발하는 자연스러운 안개 오프닝.
   ========================================================================== */

html.jc-opening-pending,
html.jc-opening-pending body{
  overflow:hidden;
  overscroll-behavior:none;
}

.jc-opening{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  color:#fff;
  background:#071c38;
  overflow:hidden;
  transform:translate3d(0,0,0);
  opacity:1;
  will-change:transform,opacity,filter;
  isolation:isolate;
}
html.jc-opening-pending .jc-opening{display:block}

.jc-opening::before{
  content:"";
  position:absolute;
  inset:-18%;
  z-index:-3;
  background:
    radial-gradient(circle at 73% 28%,rgba(31,117,255,.30),transparent 27%),
    radial-gradient(circle at 29% 76%,rgba(0,193,255,.12),transparent 30%),
    linear-gradient(135deg,#06172f 0%,#0b2c57 55%,#071a34 100%);
  transform:scale(1.02);
  animation:jcOpeningDrift 4.6s ease-in-out both;
}

.jc-opening::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent 0%,#2d88ff 20%,#7ed8ff 50%,#2d88ff 80%,transparent 100%);
  opacity:.9;
  transform:scaleX(.05);
  transform-origin:left center;
  box-shadow:0 -8px 34px rgba(52,146,255,.28);
}
.jc-opening.is-ready::after{
  transition:transform 3.65s cubic-bezier(.2,.72,.2,1);
  transform:scaleX(1);
}

.jc-opening-grid{
  position:absolute;inset:0;z-index:-2;opacity:.15;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(90deg,transparent 3%,#000 35%,#000 72%,transparent 98%);
  mask-image:linear-gradient(90deg,transparent 3%,#000 35%,#000 72%,transparent 98%);
}

.jc-opening-glow{
  position:absolute;width:min(62vw,900px);aspect-ratio:1;right:-16vw;top:-34vw;z-index:-1;
  border:1px solid rgba(121,187,255,.14);border-radius:50%;
  box-shadow:0 0 0 70px rgba(76,154,255,.028),0 0 0 145px rgba(76,154,255,.018),0 0 120px rgba(39,132,255,.08);
  animation:jcOpeningRing 4.5s cubic-bezier(.2,.7,.2,1) both;
}

.jc-opening-top{
  position:absolute;left:clamp(24px,5vw,76px);right:clamp(24px,5vw,76px);top:clamp(24px,4vw,52px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:11px;font-weight:700;letter-spacing:.16em;color:rgba(221,237,255,.58);text-transform:uppercase;
  opacity:0;transform:translateY(-5px);
}
.jc-opening.is-ready .jc-opening-top{
  opacity:1;transform:none;
  transition:opacity .72s ease .05s,transform .8s cubic-bezier(.22,1,.36,1) .05s;
}
.jc-opening-top strong{color:#fff;font-size:12px;letter-spacing:.12em}

.jc-opening-stage{position:absolute;inset:0;display:grid;place-items:center;padding:90px clamp(24px,6vw,96px) 100px}

/* 처음에는 아주 얕은 안개 속에 있다가 위치 변화 없이 천천히 초점이 잡힌다. */
.jc-opening-scene{
  position:absolute;
  width:min(1360px,92vw);
  left:50%;top:50%;
  opacity:0;
  filter:blur(13px);
  transform:translate3d(-50%,calc(-50% + 4px),0);
  pointer-events:none;
  transition:
    opacity 1.12s cubic-bezier(.25,.46,.45,.94),
    filter 1.28s cubic-bezier(.16,1,.3,1),
    transform 1.32s cubic-bezier(.16,1,.3,1);
  will-change:opacity,filter,transform;
}
.jc-opening-scene.is-active{
  opacity:1;
  filter:blur(0);
  transform:translate3d(-50%,-50%,0);
}

/* 사라질 때는 급하게 날아가지 않고, 위로 아주 조금 떠오르며 초점부터 풀린다. */
.jc-opening-scene.is-past{
  opacity:0;
  filter:blur(15px);
  transform:translate3d(-50%,calc(-50% - 22px),0);
  transition:
    opacity 1.18s cubic-bezier(.4,0,.2,1),
    filter 1.32s cubic-bezier(.4,0,.2,1),
    transform 1.34s cubic-bezier(.22,.61,.36,1);
}

.jc-opening-kicker,
.jc-opening-copy,
.jc-opening-final-brand{
  opacity:0;
  transform:translateY(2px);
  transition:opacity .96s cubic-bezier(.25,.46,.45,.94),transform 1.05s cubic-bezier(.16,1,.3,1);
}
.jc-opening-scene.is-active .jc-opening-kicker,
.jc-opening-scene.is-active .jc-opening-copy,
.jc-opening-scene.is-active .jc-opening-final-brand{
  opacity:1;transform:none;
}
.jc-opening-scene.is-active .jc-opening-copy{transition-delay:.035s}
.jc-opening-scene.is-active .jc-opening-final-brand{transition-delay:.12s}
.jc-opening-scene.is-past .jc-opening-kicker,
.jc-opening-scene.is-past .jc-opening-copy,
.jc-opening-scene.is-past .jc-opening-final-brand{
  opacity:0;
  transform:translateY(-7px);
  transition-duration:1.02s,1.14s;
  transition-delay:0s;
}

.jc-opening-kicker{
  display:flex;align-items:center;gap:14px;margin:0 0 34px;
  color:#8fc8ff;font-size:clamp(12px,1.05vw,15px);font-weight:800;letter-spacing:.075em;
}
.jc-opening-kicker::before{
  content:"";width:38px;height:2px;background:#2888ff;border-radius:99px;box-shadow:0 0 18px rgba(47,142,255,.8);
}

.jc-opening-copy{
  margin:0;max-width:1180px;color:#fff;
  font-size:clamp(31px,2.75vw,48px);line-height:1.42;font-weight:850;
  letter-spacing:.026em;word-spacing:.23em;word-break:keep-all;text-wrap:pretty;
}
.jc-opening-copy .quiet{color:rgba(230,240,252,.72);font-weight:680}
.jc-opening-copy .focus{color:#fff;position:relative;white-space:nowrap}
.jc-opening-copy .focus::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,#1a78ff,#40c9ff);transform:scaleX(0);transform-origin:left center;
  box-shadow:0 0 20px rgba(52,166,255,.3);
}
.jc-opening-scene.is-active .focus::after{
  transform:scaleX(1);transition:transform .9s cubic-bezier(.16,1,.3,1) .24s;
}

.jc-opening-final-brand{
  margin-top:42px;padding-top:24px;border-top:1px solid rgba(137,190,255,.16);
  display:flex;align-items:center;gap:16px;width:max-content;max-width:100%;
}
.jc-opening-mini-mark{
  width:45px;height:45px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,#1e7cff,#0b4cc6);box-shadow:0 14px 34px rgba(0,105,255,.25);
  color:#fff;font-size:24px;font-weight:950;letter-spacing:-.06em;
}
.jc-opening-final-brand strong{display:block;font-size:17px;letter-spacing:.075em;color:#fff}
.jc-opening-final-brand p{margin:5px 0 0;color:rgba(225,239,255,.68);font-size:14px;letter-spacing:.045em;word-spacing:.14em}
.jc-opening-final-brand em{font-style:normal;color:#8dc9ff;font-weight:800}

.jc-opening-bottom{
  position:absolute;left:clamp(24px,5vw,76px);right:clamp(24px,5vw,76px);bottom:clamp(26px,4vw,50px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;opacity:0;
}
.jc-opening.is-ready .jc-opening-bottom{opacity:1;transition:opacity .72s ease .14s}
.jc-opening-progress{display:flex;align-items:center;gap:10px;color:rgba(217,234,254,.56);font-size:11px;font-weight:700;letter-spacing:.08em}
.jc-opening-progress-track{width:clamp(90px,11vw,160px);height:1px;background:rgba(255,255,255,.16);overflow:hidden}
.jc-opening-progress-track span{display:block;height:100%;background:#75beff;transform:scaleX(0);transform-origin:left center}
.jc-opening.is-ready .jc-opening-progress-track span{transform:scaleX(1);transition:transform 3.65s linear}
.jc-opening-skip{
  appearance:none;border:0;background:transparent;color:rgba(229,241,255,.72);font:inherit;font-size:12px;font-weight:700;
  letter-spacing:-.015em;padding:9px 0 9px 18px;cursor:pointer;transition:color .25s ease,transform .25s ease;
}
.jc-opening-skip:hover{color:#fff;transform:translateX(3px)}
.jc-opening-skip:focus-visible{outline:2px solid #77bcff;outline-offset:6px;border-radius:4px}

/* 마지막 장면 뒤에는 배경까지 위로 미세하게 떠오르며 공기처럼 녹아든다. */
.jc-opening.is-dissolving .jc-opening-top,
.jc-opening.is-dissolving .jc-opening-bottom{
  opacity:0;
  filter:blur(5px);
  transform:translateY(-5px);
  transition:opacity .72s ease,filter .82s ease,transform .86s cubic-bezier(.22,.61,.36,1);
}
.jc-opening.is-leaving{
  transform:translate3d(0,-2.5%,0);
  opacity:0;
  filter:blur(11px);
  transition:
    transform .92s cubic-bezier(.22,.61,.36,1),
    opacity .88s cubic-bezier(.4,0,.2,1),
    filter .96s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.jc-opening.is-leaving::after{opacity:0;transition:opacity .58s ease}

@keyframes jcOpeningDrift{
  from{transform:scale(1.03) translate3d(-.7%,.3%,0)}
  to{transform:scale(1.068) translate3d(.7%,-.55%,0)}
}
@keyframes jcOpeningRing{from{transform:scale(.94);opacity:.28}to{transform:scale(1.035);opacity:.58}}

@media(min-width:1101px){.jc-opening-copy{white-space:nowrap}}
@media(max-width:1100px){
  .jc-opening-scene{width:min(940px,90vw)}
  .jc-opening-copy{font-size:clamp(30px,4.2vw,42px);line-height:1.5;white-space:normal}
}
@media(max-width:700px){
  .jc-opening-top span:last-child{display:none}
  .jc-opening-stage{padding:90px 24px 108px}
  .jc-opening-scene{width:calc(100vw - 48px)}
  .jc-opening-copy{font-size:clamp(27px,7.1vw,38px);line-height:1.55;letter-spacing:.018em;word-spacing:.15em}
  .jc-opening-copy .focus{white-space:normal}
  .jc-opening-final-brand{margin-top:34px;padding-top:20px;gap:13px}
  .jc-opening-mini-mark{width:40px;height:40px;border-radius:11px;font-size:22px}
  .jc-opening-final-brand strong{font-size:15px}
  .jc-opening-final-brand p{font-size:12px;line-height:1.55}
  .jc-opening-bottom{align-items:flex-end}
  .jc-opening-progress{display:none}
  .jc-opening-skip{margin-left:auto}
  .jc-opening-scene.is-past{transform:translate3d(-50%,calc(-50% - 18px),0) scale(1.006)}
}
@media(prefers-reduced-motion:reduce){
  .jc-opening::before,.jc-opening-glow{animation:none!important}
  .jc-opening-scene{transition:opacity .35s ease!important;filter:none!important;transform:translate3d(-50%,-50%,0)!important}
  .jc-opening-kicker,.jc-opening-copy,.jc-opening-final-brand{transition:none!important;opacity:1!important;transform:none!important}
  .jc-opening.is-leaving{transition:opacity .3s ease!important;transform:none!important;filter:none!important;opacity:0}
  .jc-opening-progress-track span,.jc-opening::after{transition:none!important;transform:scaleX(1)!important}
}