/* 이펙트 — 빌더의 「이펙트」 탭이 붙이는 클래스들.
   손으로 고쳐도 되지만, 빌더가 같은 이름을 읽고 쓴다. */

/* ── 등장 (스크롤에 들어오면 나타난다) ── */
[class*="fx-"]{--fx-dur:.7s; --fx-ease:cubic-bezier(.22,.68,.28,1)}
.fx-up, .fx-down, .fx-left, .fx-right, .fx-zoom, .fx-fade, .fx-blur{
  opacity:0; will-change:opacity, transform, filter;
  transition:opacity var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease),
             filter var(--fx-dur) var(--fx-ease);
  transition-delay:var(--fx-delay, 0s)}
.fx-up{transform:translateY(34px)}
.fx-down{transform:translateY(-34px)}
.fx-left{transform:translateX(-40px)}
.fx-right{transform:translateX(40px)}
.fx-zoom{transform:scale(.93)}
.fx-blur{filter:blur(12px)}
.fx-in{opacity:1 !important; transform:none !important; filter:none !important}

/* 자식이 차례로 올라온다 */
.fx-stagger > *{opacity:0; transform:translateY(26px);
  transition:opacity .62s var(--fx-ease), transform .62s var(--fx-ease)}
.fx-stagger.fx-in > *{opacity:1; transform:none}

/* ── 마우스를 올렸을 때 ── */
.fxh-lift{transition:transform .22s var(--fx-ease), box-shadow .22s var(--fx-ease)}
.fxh-lift:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(14,42,71,.16)}
.fxh-zoom{overflow:hidden}
.fxh-zoom img{transition:transform .4s var(--fx-ease)}
.fxh-zoom:hover img{transform:scale(1.06)}
.fxh-glow{transition:box-shadow .22s var(--fx-ease), border-color .22s var(--fx-ease)}
.fxh-glow:hover{box-shadow:0 0 0 3px rgba(31,95,214,.16); border-color:var(--accent)}

/* ── 배경 ── */
.bg-soft{background:var(--soft)}
.bg-navy{background:var(--navy); color:#fff}
.bg-navy .h2, .bg-navy h1, .bg-navy h2, .bg-navy h3{color:#fff}
.bg-navy p, .bg-navy .lead{color:#b9c6d6}
.bg-dark{background:#0b0f14; color:#fff}
.bg-dark .h2, .bg-dark h1, .bg-dark h2, .bg-dark h3{color:#fff}
.bg-dark p, .bg-dark .lead{color:#9aa6b5}
.bg-grad{background:radial-gradient(120% 100% at 78% 18%,#1d4877 0%,#0e2846 46%,#081321 100%);
  color:#fff}
.bg-grad h1,.bg-grad h2,.bg-grad h3,.bg-grad .h2{color:#fff}
.bg-grad p,.bg-grad .lead{color:#aabace}

/* ── 문장 속 강조 ── */
.hl-blue{color:var(--accent)}
.hl-gold{color:#d4a55a}
.hl-line{background:linear-gradient(transparent 62%, rgba(31,95,214,.22) 62%)}
.hl-mark{background:var(--accent-soft); border-radius:5px; padding:1px 6px}
.hl-grad{background:linear-gradient(92deg,#2f7bec,#5b9bff);
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ── 영상 임베드 ── */
.embed{position:relative; width:100%; aspect-ratio:16/9; border-radius:16px;
  overflow:hidden; background:#0b0f14; border:1px solid var(--line)}
.embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* 움직임을 줄이는 설정이면 전부 즉시 표시 */
@media (prefers-reduced-motion:reduce){
  .fx-up,.fx-down,.fx-left,.fx-right,.fx-zoom,.fx-fade,.fx-blur,.fx-stagger > *{
    opacity:1 !important; transform:none !important; filter:none !important; transition:none !important}
  .fxh-lift:hover,.fxh-zoom:hover img{transform:none}
}