/* KS시스템에어컨 — 동적 연출 레이어 (히어로 영상 · 4way 바람 · 스크롤 모션) */

/* ── 스크롤 등장 ───────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.8,.3,1),transform .7s cubic-bezier(.22,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}

/* ── 히어로 위에 겹치는 투명 헤더 (index 전용) ── */
body.has-cine{padding-top:0}
body.has-cine .top-bar{position:fixed;top:0;left:0;right:0;z-index:51;background:transparent;color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.12);transition:.35s}
body.has-cine .top-bar strong{color:#fff}
body.has-cine header.site{position:fixed;top:36px;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:none;transition:.35s}
body.has-cine header.site .logo,
body.has-cine header.site nav.main a,
body.has-cine header.site .header-cta .tel,
body.has-cine header.site .menu-toggle{color:#fff}
body.has-cine header.site .logo small{color:rgba(255,255,255,.7)}
body.has-cine header.site .logo{--brand-blue:#7fc0ff}
body.has-cine header.site nav.main a:hover,
body.has-cine header.site nav.main a.active{color:#8fc7ff;border-color:#8fc7ff}

body.has-cine.scrolled .top-bar{transform:translateY(-100%);opacity:0}
body.has-cine.scrolled header.site{top:0;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom-color:var(--line);box-shadow:0 2px 16px rgba(15,31,61,.07)}
body.has-cine.scrolled header.site .logo,
body.has-cine.scrolled header.site nav.main a,
body.has-cine.scrolled header.site .header-cta .tel,
body.has-cine.scrolled header.site .menu-toggle{color:var(--navy)}
body.has-cine.scrolled header.site .logo small{color:var(--muted)}
body.has-cine.scrolled header.site .logo{color:#101d3d;--brand-blue:#4ea1ff}
body.has-cine.scrolled header.site nav.main a:hover,
body.has-cine.scrolled header.site nav.main a.active{color:var(--primary);border-color:var(--primary)}
@media (max-width:720px){
  body.has-cine header.site{top:0}
  body.has-cine nav.main{background:rgba(10,23,48,.97);border-bottom-color:rgba(255,255,255,.14)}
  body.has-cine nav.main a{border-bottom-color:rgba(255,255,255,.12)}
  body.has-cine.scrolled nav.main{background:#fff;border-bottom-color:var(--line)}
  body.has-cine.scrolled nav.main a{border-bottom-color:var(--line)}
}

/* ── 시네마틱 히어로 ───────────────────────── */
.hero-cine{position:relative;min-height:min(94vh,880px);display:flex;flex-direction:column;overflow:hidden;background:#0a1730;isolation:isolate}
.hero-cine .bg{position:absolute;inset:0;z-index:0}
.hero-cine .bg img,.hero-cine .bg video{width:100%;height:100%;object-fit:cover;display:block}
.hero-cine .bg video{opacity:0;transition:opacity 1.2s ease}
.hero-cine .bg video.ready{opacity:1}
.hero-cine .bg img{position:absolute;inset:0}
.hero-cine .scrim{position:absolute;inset:0;z-index:1;background:
  linear-gradient(100deg,rgba(6,16,36,.88) 0%,rgba(6,16,36,.66) 42%,rgba(6,16,36,.12) 72%,rgba(6,16,36,0) 100%),
  linear-gradient(180deg,rgba(6,16,36,.55) 0%,rgba(6,16,36,0) 30%,rgba(6,16,36,.5) 100%)}
.hero-cine .container{position:relative;z-index:3;flex:1 1 auto;display:flex;align-items:center;padding:132px 0 72px}
.hero-cine .inner{max-width:660px;color:#fff;width:100%}
.hero-cine h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3.3rem);letter-spacing:-.02em;line-height:1.2;margin-bottom:20px;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero-cine h1 em{font-style:normal;color:#8fd4ff}
.hero-cine .sub{font-size:clamp(1rem,1.4vw,1.18rem);color:#d3ddf0;margin-bottom:32px;max-width:560px;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.hero-cine .badge{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);border-radius:999px;padding:8px 16px;font-size:.88rem;font-weight:600;color:#e8f1ff;margin-bottom:22px}
.hero-cine .badge .dot{width:7px;height:7px;border-radius:50%;background:#4ade80}
.hero-cine .actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.hero-cine .btn-glass{background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.5);color:#fff;backdrop-filter:blur(10px)}
.hero-cine .btn-glass:hover{background:rgba(255,255,255,.22)}
.hero-cine .points{display:flex;gap:22px;flex-wrap:wrap;font-size:.94rem;color:#cfdcf2}
.hero-cine .points li{display:flex;gap:8px;align-items:center}
.hero-cine .points li::before{content:"";width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:rgba(122,205,255,.18);border:1px solid rgba(122,205,255,.6);background-image:linear-gradient(transparent,transparent)}
.hero-cine .points li b{font-weight:700;color:#fff}

/* 히어로 하단 라이브 스탯 */
.hero-stats{position:relative;z-index:3;flex:0 0 auto;border-top:1px solid rgba(255,255,255,.14);background:rgba(6,16,36,.42);backdrop-filter:blur(12px)}
.hero-stats ul{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:22px 0}
.hero-stats li{text-align:center;color:#cbd8ee;font-size:.85rem;padding:0 12px;border-right:1px solid rgba(255,255,255,.1)}
.hero-stats li:last-child{border-right:0}
.hero-stats b{display:block;color:#fff;font-size:clamp(1.15rem,2vw,1.6rem);font-weight:800;letter-spacing:-.01em}
.hero-stats b .u{font-size:max(11px,.62em);font-weight:700;margin-left:2px;color:#9fc4f5}

/* 스크롤 힌트 */
.scroll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;color:rgba(255,255,255,.6);font-size:.72rem;letter-spacing:.18em;display:grid;justify-items:center;gap:6px}
.scroll-hint span{display:block;width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));animation:drop 1.9s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── 4way 바람 인터랙티브 ──────────────────── */
.airflow{position:relative;background:#07142c;color:#fff;overflow:hidden}
.airflow::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,rgba(52,132,255,.28),transparent 62%)}
.airflow .container{position:relative;z-index:2}
.airflow h2{color:#fff}
.airflow .section-head p.lead{color:#a9bfe2}
.airflow-stage{position:relative;margin-top:34px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#050f22}
.airflow-stage .shot{position:relative;aspect-ratio:16/9}
.airflow-stage .shot img,.airflow-stage .shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.airflow-stage .shot video{opacity:0;transition:opacity 1s ease}
.airflow-stage .shot video.ready{opacity:1}
.airflow-stage .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,15,34,0) 45%,rgba(5,15,34,.92) 100%)}
.airflow-stage .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 28px;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap}
.airflow-stage .cap h3{color:#fff;font-size:1.2rem;margin-bottom:4px}
.airflow-stage .cap p{color:#9fb6da;font-size:.9rem;max-width:520px}
.vane{display:flex;gap:8px}
.vane button{padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#dbe7fa;font-family:inherit;font-weight:600;font-size:.85rem;cursor:pointer;backdrop-filter:blur(6px);transition:.18s}
.vane button.on,.vane button:hover{background:#1a5fd6;border-color:#1a5fd6;color:#fff}

.flow-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.flow-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:20px}
.flow-card .n{font-size:.74rem;letter-spacing:.12em;color:#6f92c9;font-weight:700;margin-bottom:8px}
.flow-card h3{color:#fff;font-size:1.12rem;margin-bottom:6px;font-weight:700}
.flow-card p{color:#9fb6da;font-size:.88rem;line-height:1.6}

/* ── 카운트업 숫자 띠 ──────────────────────── */
.counter-band{background:var(--navy);color:#fff;padding:40px 0}
.counter-band ul{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.counter-band b{display:block;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;color:#fff;letter-spacing:-.02em}
.counter-band b .u{font-size:.5em;margin-left:3px;color:#8fb4f0;font-weight:700}
.counter-band span{font-size:.9rem;color:#a8bbd8}

/* ── 제품 키비주얼 ─────────────────────────── */
.kv{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.kv .shot{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#eaf2ff,#d6e6fb)}
.kv .shot img{width:100%;display:block}
.kv .badge-float{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:12px;padding:12px 16px;font-size:.85rem;font-weight:700;color:var(--navy);box-shadow:var(--shadow)}

/* ── 마퀴 (취급 브랜드/지역) ───────────────── */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:14px 16px;position:relative}
.marquee-track{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.marquee-track span{font-weight:700;color:#8393ab;font-size:.95rem;white-space:nowrap;display:flex;align-items:center;gap:10px}
.marquee-track span::after{content:"·";color:#c7d2e2}
.marquee-track span:last-child::after{content:none}

/* ── 프로세스 타임라인 ─────────────────────── */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:34px}
.timeline::before{content:"";position:absolute;left:6%;right:6%;top:26px;height:2px;background:var(--line)}
.timeline .fill{position:absolute;left:6%;top:26px;height:2px;width:88%;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.22,.8,.3,1)}
.timeline.in .fill{transform:scaleX(1)}
.timeline li{position:relative;text-align:center;padding:0 10px}
.timeline .dot{width:54px;height:54px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;margin:0 auto 16px;font-weight:800;color:var(--muted);position:relative;z-index:2;transition:.4s}
.timeline.in li:nth-child(1) .dot{transition-delay:.1s}
.timeline.in li:nth-child(2) .dot{transition-delay:.35s}
.timeline.in li:nth-child(3) .dot{transition-delay:.6s}
.timeline.in li:nth-child(4) .dot{transition-delay:.85s}
.timeline.in li:nth-child(5) .dot{transition-delay:1.1s}
.timeline.in .dot{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(26,95,214,.3)}
.timeline h3{font-size:1.02rem;margin-bottom:6px}
.timeline p{font-size:.87rem;color:var(--muted)}

/* ── 카드 호버 리프트 ──────────────────────── */
.lift{transition:transform .3s cubic-bezier(.22,.8,.3,1),box-shadow .3s}
.lift:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,31,61,.14)}
.case .thumb img{transition:transform .6s cubic-bezier(.22,.8,.3,1)}
.case:hover .thumb img{transform:scale(1.06)}
.case .thumb{overflow:hidden}

/* ── 반응형 ───────────────────────────────── */
@media (max-width:980px){
  .flow-cards{grid-template-columns:repeat(2,1fr)}
  .kv{grid-template-columns:1fr;gap:26px}
  .timeline{grid-template-columns:repeat(2,1fr);gap:26px 0}
  .timeline::before,.timeline .fill{display:none}
}
@media (max-width:720px){
  .hero-cine{min-height:auto}
  .hero-cine .container{padding:104px 0 34px}
  .hero-cine .scrim{background:
    linear-gradient(180deg,rgba(6,16,36,.86) 0%,rgba(6,16,36,.62) 46%,rgba(6,16,36,.34) 66%,rgba(6,16,36,.78) 100%)}
  .hero-cine h1{margin-bottom:14px}
  .hero-cine .sub{margin-bottom:22px;font-size:1rem}
  .hero-cine .actions{margin-bottom:22px}
  .hero-cine .points{gap:8px;flex-direction:column;font-size:.9rem}
  .hero-stats ul{grid-template-columns:repeat(2,1fr);gap:14px 8px;padding:16px 0}
  .hero-stats li:nth-child(2){border-right:0}
  .hero-stats li{font-size:.8rem}
  .counter-band ul{grid-template-columns:repeat(2,1fr);gap:22px}
  .flow-cards,.timeline{grid-template-columns:1fr}
  .airflow-stage .cap{padding:18px}
  .airflow-stage .cap p{display:none}
  .scroll-hint{display:none}
}

/* 모션 최소화 선호 사용자 */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .scroll-hint span{animation:none}
  .hero-cine .badge .dot{animation:none}
}