/* ── 히어로 워드마크 모션그래픽 (js/hero-motion.js 와 한 쌍) ──
   처음 열 때: 영문 → 브레인시티 → '한빛 부동산' 한 자씩 도장처럼 쾅 → 금빛이 훑고 금색 밑줄
              → 단지 배지가 튀어나오며 금빛 파동 2겹 → 단지명 한 자씩
   그 뒤: 배지에서 금빛 파동이 주기적으로 퍼지고, 테두리에 빛이 돌고, 이름 위로 금빛이 가끔 훑음 */
@property --fx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.lockup.fx > *, .lockup.fx .lockup-complex, .lockup.fx .lockup-sub .rule { animation: none; }
.lockup.fx .ch { display: inline-block; position: relative; }
.lockup.fx .lockup-main { display: inline-block; position: relative; }

/* ── 1) 등장 ───────────────────────────── */
.lockup.fx-name-in .lockup-latin { animation: fx-track 900ms cubic-bezier(.2,.7,.2,1) calc(0ms + var(--t)) both; }
.fx-name-in .lockup-city .ch { animation: fx-drop 700ms cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(120ms + var(--i) * 70ms + var(--t)); }
.fx-name-in .lockup-main .ch { animation: fx-stamp 720ms cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(420ms + var(--i) * 95ms + var(--t)); }
.fx-name-in .lockup-main .ch::after { animation: fx-glint 900ms ease-out both; animation-delay: calc(1150ms + var(--i) * 70ms + var(--t)); }
.fx-name-in .lockup-main::after { animation: fx-underline 700ms cubic-bezier(.65,0,.35,1) calc(1050ms + var(--t)) both; }
.lockup.fx-name-in .lockup-note { animation: rise var(--dur-slow) var(--ease-out) calc(1500ms + var(--t)) both; }

.lockup.fx-badge-in .lockup-complex { animation: fx-pop 820ms cubic-bezier(.2,.8,.2,1) var(--bd) both; }
.fx-badge-in .cx-text .ch { animation: fx-slide 520ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--bd) + 260ms + var(--i) * 55ms); }
.fx-badge-in .cx-ring { animation: fx-wave 1100ms cubic-bezier(.2,.7,.3,1) calc(var(--bd) + 300ms) both; }
.fx-badge-in .cx-ring.r2 { animation-delay: calc(var(--bd) + 520ms); }
.lockup.fx-badge-in .lockup-sub .rule { animation: fx-draw 700ms cubic-bezier(.65,0,.35,1) calc(var(--bd) + 250ms) both; }

@keyframes fx-track { from { opacity: 0; scale: 1.6 1; filter: blur(5px); } }
@keyframes fx-drop { from { opacity: 0; translate: 0 -.8em; filter: blur(6px); } }
@keyframes fx-stamp {
  0% { opacity: 0; scale: 2.6; filter: blur(14px); }
  55% { opacity: 1; scale: .92; filter: blur(0); }
  78% { scale: 1.04; }
  100% { scale: 1; }
}
@keyframes fx-glint { from { background-position: 100% 0; opacity: 1; } to { background-position: 0 0; opacity: 1; } }
@keyframes fx-underline { from { scale: 0 1; opacity: 0; } to { scale: 1 1; opacity: 1; } }
@keyframes fx-pop {
  0% { opacity: 0; scale: .2; filter: blur(6px); }
  55% { opacity: 1; scale: 1.14; filter: blur(0); }
  75% { scale: .96; }
  100% { scale: 1; }
}
@keyframes fx-slide { from { opacity: 0; translate: 0 .55em; } }
@keyframes fx-wave {
  0% { opacity: 1; scale: 1; }
  25% { opacity: 1; }
  100% { opacity: 0; scale: 1.28 2.1; }
}
@keyframes fx-draw { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }

/* ── 2) 장식 요소 ─────────────────────── */
/* 이름 위를 훑는 금빛 (글자마다 같은 글자를 금빛으로 겹쳐 그림) */
.lockup.fx .lockup-main .ch::after {
  content: attr(data-c); position: absolute; inset: 0; pointer-events: none;
  -webkit-text-stroke: 0; text-shadow: none; color: transparent; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, #FFF6D6 46%, #E9C77E 52%, transparent 68%) 0 0 / 320% 100%;
  -webkit-background-clip: text; background-clip: text;
}
/* 이름 아래 금색 밑줄: 가운데서 양옆으로 */
.lockup.fx .lockup-main::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -.12em; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(201,168,106,0), #C9A86A 20%, #F0D9A0 50%, #C9A86A 80%, rgba(201,168,106,0));
  box-shadow: 0 0 10px rgba(233,199,126,.6);
}
/* 배지: 금빛 파동 링 */
.lockup.fx .lockup-complex { position: relative; isolation: isolate; }
.lockup.fx .cx-ring {
  position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; z-index: -1;
  border: 3px solid #F0D9A0; box-shadow: 0 0 22px rgba(233,199,126,.9), inset 0 0 12px rgba(233,199,126,.5);
  opacity: 0;
}
/* 배지 테두리를 도는 빛 */
.lockup.fx .lockup-complex::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2.5px; pointer-events: none;
  background: conic-gradient(from var(--fx-ang), transparent 0 55%, rgba(255,246,214,.35) 68%, #FFF6D6 80%, rgba(255,246,214,.35) 90%, transparent 98%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .6s;
}

/* ── 3) 등장 뒤 계속 ───────────────────── */
.fx-idle .lockup-complex::before { opacity: 1; animation: fx-orbit 4s linear infinite; }
.fx-idle .cx-ring { animation: fx-wave-idle 3.5s cubic-bezier(.25,.6,.35,1) infinite; }
.fx-idle .cx-ring.r2 { animation-delay: .3s; }
.fx-idle .lockup-main .ch::after { animation: fx-glint-idle 7s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms); }
.fx-idle .cx-text {
  background: linear-gradient(105deg, #E3C98F 0%, #F0D9A0 40%, #FFFBEA 50%, #F0D9A0 60%, #E3C98F 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  animation: fx-foil 4s ease-in-out infinite;
}
.fx-idle .cx-text .ch { color: transparent; }

@keyframes fx-orbit { to { --fx-ang: 360deg; } }
@keyframes fx-wave-idle {
  0% { opacity: 0; scale: 1; }
  4% { opacity: 1; scale: 1.02 1.06; }
  45%, 100% { opacity: 0; scale: 1.22 1.9; }
}
@keyframes fx-glint-idle {
  0% { opacity: 1; background-position: 100% 0; }
  18% { opacity: 1; background-position: 0 0; }
  19%, 100% { opacity: 0; background-position: 0 0; }
}
@keyframes fx-foil { 0% { background-position: 100% 0; } 50%, 100% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .lockup.fx *, .lockup.fx *::before, .lockup.fx *::after { animation: none !important; }
  .lockup.fx .cx-ring { display: none; }
}