@charset "utf-8";

/* ---------- 로딩 커튼 ---------- */
html::before {content:'';position:fixed;inset:0;z-index:9999;background:linear-gradient(160deg, #0E1626 0%, #1B2B4B 60%, #16325C 100%);transform:translateY(-101%);pointer-events:none}
html::after {content:'IN-MOBILITY DRIVING SERVICE';position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding-top:196px;font-family:'montserrat', sans-serif;font-size:12px;font-weight:700;letter-spacing:.42em;text-indent:.42em;color:rgba(255,255,255,.45);background:
    url('../img/logo.png') center calc(50% - 34px) / 88px 88px no-repeat,
    linear-gradient(90deg, #3384FE, #F5D63D) calc(50% - 80px) calc(50% + 52px) / 60px 3px no-repeat;
    opacity:0;visibility:hidden;pointer-events:none}
html.is-loading::before {transform:translateY(0);pointer-events:auto}
html.is-loading::after {opacity:1;visibility:visible;animation:loader-line 1.1s ease-in-out infinite}
html.is-loading {overflow:hidden}
html.is-loading.is-loaded::before {transform:translateY(-101%);transition:transform .8s cubic-bezier(.83,0,.17,1) .1s}
html.is-loading.is-loaded::after {opacity:0;visibility:hidden;transition:opacity .35s, visibility .35s;animation:none}
/* JS 미동작 대비 자동 해제 */
html.is-loading:not(.is-loaded)::before {animation:loader-safety .6s 5s forwards}
html.is-loading:not(.is-loaded)::after {animation:loader-line 1.1s ease-in-out infinite, loader-safety .6s 5s forwards}
/* 페이지 이탈 커튼 */
html.page-exit::before {transform:translateY(0);transition:transform .38s cubic-bezier(.65,0,.35,1);pointer-events:auto}
@keyframes loader-line {
    0% {background-position:center calc(50% - 34px), calc(50% - 80px) calc(50% + 52px)}
    50% {background-position:center calc(50% - 34px), calc(50% + 20px) calc(50% + 52px)}
    100% {background-position:center calc(50% - 34px), calc(50% + 80px) calc(50% + 52px)}
}
@keyframes loader-safety {
    to {opacity:0;visibility:hidden;transform:translateY(-101%)}
}

/* ---------- 스크롤 도로 진행바 ---------- */
.scroll-road {position:fixed;top:0;left:0;width:100%;height:0;z-index:98;pointer-events:none;opacity:0;transition:opacity .3s}
.scroll-road.show {opacity:1}
.scroll-road .bar {position:absolute;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg, #3384FE, #5DBDE4 70%, #F5D63D);border-radius:0 3px 3px 0;box-shadow:0 0 12px rgba(51,132,254,.5)}
.scroll-road .car {position:absolute;top:-13px;left:0;width:15px;height:30px;object-fit:contain;transform:translateX(-50%) rotate(-90deg);filter:drop-shadow(0 2px 4px rgba(27,43,75,.35))}

/* ---------- 맨 위로 (자동차) ---------- */
.to-top {position:fixed;left:30px;bottom:30px;z-index:90;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--white);box-shadow:0 8px 26px rgba(27,43,75,.2);border:solid 1px var(--line);opacity:0;visibility:hidden;transform:translateY(14px);transition:all .3s;cursor:pointer}
.to-top.show {opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover {transform:translateY(-4px);box-shadow:0 12px 30px rgba(51,132,254,.3)}
.to-top img {width:16px;transform:rotate(180deg)}
.to-top.driving img {animation:drive-up .7s ease-in forwards}
@keyframes drive-up {
    0% {transform:rotate(180deg) translateY(0);opacity:1}
    100% {transform:rotate(180deg) translateY(52px);opacity:0}
}

/* ---------- 마퀴 밴드 ---------- */
.marquee_clip {overflow:hidden;padding:18px 0;margin:-18px 0;position:relative;z-index:2}
.marquee {background:var(--secondary);padding:clamp(18px,2.4vw,30px) 0;overflow:hidden;transform:rotate(-1.1deg) scale(1.02);position:relative;z-index:2;box-shadow:0 14px 40px rgba(245,214,61,.35)}
.marquee .marquee_track {display:inline-flex;align-items:center;gap:0 clamp(26px,3.4vw,54px);white-space:nowrap;will-change:transform;animation:marquee-move 26s linear infinite;padding-left:clamp(26px,3.4vw,54px)}
.marquee:hover .marquee_track {animation-play-state:paused}
.marquee span {font-family:'godo', sans-serif;font-size:clamp(19px,2.6vw,32px);font-weight:700;color:#1B2B4B;flex:0 0 auto}
.marquee span.eng {font-family:'montserrat', sans-serif;font-weight:800;letter-spacing:.06em}
.marquee i {flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#1B2B4B;opacity:.75}
@keyframes marquee-move {
    0% {transform:translateX(0)}
    100% {transform:translateX(-50%)}
}

/* ---------- 타이틀 글자 스태거 ---------- */
.fx-chars .fx-w {display:inline-block;white-space:nowrap}
.fx-chars .fx-c {display:inline-block;opacity:0;transform:translateY(1em) rotate(4deg);transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 26ms);will-change:transform}
.fx-chars.fx-in .fx-c {opacity:1;transform:translateY(0) rotate(0)}

/* ---------- 워드마크 배기 연기 ---------- */
.wordmark .mark {position:relative}
.wordmark .mark::before,
.wordmark .mark::after {content:'';position:absolute;border-radius:50%;background:#D3DEEE;filter:blur(1px);opacity:0;pointer-events:none;animation:exhaust-puff 3.4s ease-out infinite}
.wordmark .mark::before {width:clamp(24px,3.6vw,48px);height:clamp(24px,3.6vw,48px);top:30%;left:calc(-1 * clamp(40px,6vw,86px));box-shadow:
    clamp(15px,2.4vw,32px) calc(-1 * clamp(7px,1.2vw,15px)) 0 clamp(3px,.7vw,9px) #DCE6F3,
    clamp(30px,4.6vw,60px) clamp(3px,.6vw,8px) 0 calc(-1 * clamp(2px,.3vw,4px)) #D3DEEE,
    clamp(11px,1.8vw,24px) clamp(9px,1.5vw,19px) 0 clamp(1px,.2vw,3px) #E4ECF7}
.wordmark .mark::after {width:clamp(16px,2.6vw,34px);height:clamp(16px,2.6vw,34px);top:58%;left:calc(-1 * clamp(28px,4.4vw,64px));box-shadow:
    clamp(8px,1.3vw,16px) calc(-1 * clamp(4px,.6vw,8px)) 0 clamp(1px,.3vw,4px) #DCE6F3,
    clamp(5px,.9vw,11px) clamp(5px,.8vw,10px) 0 0 #E4ECF7;animation-delay:1.7s}
@keyframes exhaust-puff {
    0% {transform:translate(10px,4px) scale(.3);opacity:0}
    12% {opacity:1}
    60% {opacity:.55}
    100% {transform:translate(calc(-1 * clamp(40px,7vw,90px)), calc(-1 * clamp(10px,2vw,26px))) scale(1.6);opacity:0}
}

/* ---------- 히어로 앰비언트 글로우 ---------- */
.main_hero::before {content:'';position:absolute;width:min(56vw,760px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side, rgba(51,132,254,.14), transparent 70%);top:-12%;right:-14%;filter:blur(10px);animation:orb-float 9s ease-in-out infinite alternate;pointer-events:none}
.main_hero::after {content:'';position:absolute;width:min(44vw,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side, rgba(245,214,61,.16), transparent 70%);bottom:6%;left:-12%;filter:blur(10px);animation:orb-float 11s 1s ease-in-out infinite alternate-reverse;pointer-events:none}
@keyframes orb-float {
    0% {transform:translate3d(0,0,0) scale(1)}
    100% {transform:translate3d(3vw,4vh,0) scale(1.08)}
}
/* 문의 배너 오브 부유 */
.inquiry::before {animation:orb-float 10s ease-in-out infinite alternate}
.inquiry::after {animation:orb-float 13s 1.4s ease-in-out infinite alternate-reverse}

/* ---------- 카드 3D 틸트 ---------- */
@media (hover:hover) and (pointer:fine) {
    .fx-tilt {transform-style:preserve-3d;transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s}
    .fx-tilt.tilting {transition:box-shadow .35s}
}

/* ---------- 버튼 샤인 ---------- */
.btn_primary, .btn_secondary, .inquiry .btn_wrap .tel_big, .call_sec .btns .tel_call, .header .util .btn_contract, .header .util .btn_driver {position:relative;overflow:hidden}
.btn_primary::after, .btn_secondary::after, .inquiry .btn_wrap .tel_big::after, .call_sec .btns .tel_call::after, .header .util .btn_contract::after, .header .util .btn_driver::after {content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.4) 50%, transparent 80%);transform:skewX(-22deg);transition:none;pointer-events:none}
.btn_primary:hover::after, .btn_secondary:hover::after, .inquiry .btn_wrap .tel_big:hover::after, .call_sec .btns .tel_call:hover::after, .header .util .btn_contract:hover::after, .header .util .btn_driver:hover::after {left:130%;transition:left .65s ease}

/* ---------- 헤더 숨김/등장 ---------- */
.header {transition:background .25s, box-shadow .25s, transform .35s cubic-bezier(.22,1,.36,1)}
.header.hide {transform:translateY(-100%)}

/* ---------- 감속 모션 대응 ---------- */
@media (prefers-reduced-motion: reduce) {
    html::before, html::after {display:none !important}
    html.is-loading {overflow:auto}
    .marquee .marquee_track {animation:none}
    .fx-chars .fx-c {opacity:1 !important;transform:none !important;transition:none !important}
    .main_hero::before, .main_hero::after {animation:none}
    .scroll-road {display:none}
}
@media screen and (max-width: 768px) {
    .to-top {left:16px;bottom:16px;width:48px;height:48px}
    .to-top img {width:26px}
    html::after {background-size:72px 72px, 60px 3px;padding-top:168px;font-size:10px}
}