/* ==========================================================================
   BRAND v2 · 홈·소개·스튜디오가 함께 쓰는 재료 (uiux-audit §3-0)
   - 토큰(추가만), 유리 판 .glass, 빛 테두리 카드 .rim-card(포인터: rim.js),
     스크롤에 묶인 진행 표시 .fill-on-view, 섹션 머리 .v2-head, 굵은 꼬리말 낱말
   - 자동으로 움직이는 것은 여기 없다. 모두 사용자 행동(포인터·스크롤)에 답한다
   ========================================================================== */

:root {
  --aurora-1: rgb(var(--ether-rgb) / .16);   /* Ether */
  --aurora-2: rgb(var(--xync-rgb) / .12);  /* Xync */
  --aurora-3: rgba(46, 72, 128, .28);    /* 깊은 남색, 강조색 아님: 바탕의 깊이 */
  --glass-bg: color-mix(in srgb, var(--panel) 58%, transparent);
  --glass-bd: rgb(var(--tint-rgb) / .08);
  --glass-blur: 14px;
  --rim: rgb(var(--ether-rgb) / .55);        /* 포인터 테두리 빛 */
  --rim-xync: rgb(var(--xync-rgb) / .5);
  --sec-y: clamp(64px, 8vw, 120px);      /* 섹션 간격 (F4) */
}

/* 가로 넘침 안전망 (H1 재발 방지; 진짜 해결은 각 섹션 구조) */
html { overflow-x: clip; }

/* ---------- 유리 판 (한 화면에 3개 이하) ---------- */
.glass {
  background: var(--glass-bg); border: 1px solid var(--glass-bd); border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: color-mix(in srgb, var(--panel) 92%, transparent); } }

/* ---------- 빛 테두리 카드: 그림자 후광 대신 테두리 1px 이 포인터 쪽으로 밝아진다 ---------- */
.rim-card { position: relative; isolation: isolate; display: block; background: var(--card); border-radius: var(--r-lg); }
.rim-card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -20%), var(--rim), transparent 45%), linear-gradient(var(--line), var(--line));
  -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);
}
.rim-card.is-xync { --rim: var(--rim-xync); }
.rim-card.is-both { --rim: rgb(var(--text-rgb) / .5); }
a.rim-card { transition: background var(--d-3) var(--ease-out); }
a.rim-card:hover { background: var(--card-2); }
a.rim-card:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .rim-card::before { background: linear-gradient(var(--line-2), var(--line-2)); }
}

/* ---------- 스크롤에 묶인 진행 표시 (fade-up 대신 쓰는 유일한 스크롤 연출) ---------- */
.fill-on-view { transform-origin: left center; transform: scaleX(var(--to, 1)); }
.fill-on-view.is-y { transform-origin: center top; transform: scaleY(var(--to, 1)); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fill-on-view { animation: v2-fill linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .fill-on-view.is-y { animation-name: v2-fill-y; animation-range: entry 0% cover 60%; }
  }
}
/* 미지원 브라우저: rim.js 가 화면에 들어올 때 .is-armed → .is-in 을 붙인다 */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fill-on-view.is-armed { transform: scaleX(0); transition: transform var(--d-4) var(--ease-expo); }
    .fill-on-view.is-y.is-armed { transform: scaleY(0); }
    .fill-on-view.is-armed.is-in { transform: scaleX(var(--to, 1)); }
    .fill-on-view.is-y.is-armed.is-in { transform: scaleY(var(--to, 1)); }
  }
}
@keyframes v2-fill { from { transform: scaleX(0); } to { transform: scaleX(var(--to, 1)); } }
@keyframes v2-fill-y { from { transform: scaleY(0); } to { transform: scaleY(var(--to, 1)); } }
@media (prefers-reduced-motion: reduce) {
  .fill-on-view { animation: none; transform: scaleX(var(--to, 1)); }
  .fill-on-view.is-y { transform: scaleY(var(--to, 1)); }
}

/* ---------- 섹션 머리: 한국어 제목(Hahmlet) + 영어 표어는 따로 한 줄 ---------- */
.v2-head { display: grid; gap: 16px; max-width: 44rem; margin-bottom: clamp(32px, 4.4vw, 56px); }
.v2-title {
  font-family: var(--f-display); font-weight: var(--w-display);
  font-size: clamp(2rem, 3.6vw, 3.05rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance;
}
.v2-motto { font-family: var(--f-display-latin); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.15; color: var(--text-2); letter-spacing: -0.01em; }
.v2-lead { color: var(--text-2); font-size: clamp(1.02rem, 1.2vw, 1.1rem); line-height: 1.78; max-width: 36em; text-wrap: pretty; }
.v2-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--text); font-weight: 650; letter-spacing: -0.01em;
  background:
    linear-gradient(var(--ether), var(--ether)) left calc(100% - 9px) / 0 1px no-repeat,
    linear-gradient(var(--line-input), var(--line-input)) left calc(100% - 9px) / 100% 1px no-repeat;
  transition: background-size var(--d-3) var(--ease-expo), color var(--d-2);
}
.v2-link:hover, .v2-link:focus-visible { background-size: 100% 1px, 100% 1px; color: var(--ether-2); }
.v2-link svg { flex: none; transition: transform var(--d-3) var(--ease-expo); }
.v2-link:hover svg { transform: translateX(3px); }

/* 숫자는 진짜 데이터일 때만 JetBrains Mono */
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- 굵은 꼬리말: 폭 가득한 테두리 낱말 + 두 줄기가 X 에서 만나는 정적 그림 ----------
   xync.js 가 그리는 .xy-footer 뒤에 CSS 만으로 붙인다(공통 파일 수정 없음). 움직임 없음.
   Instrument Serif 실측(letter-spacing -0.035em, line-height .82): 낱말 폭 3.225em, X 의 교차점은
   낱말 가운데에서 오른쪽으로 .345em, 줄 상자 위에서 .3775em */
.xy-footer { padding-bottom: 0; }
.xy-footer::after {
  content: "EtherXync"; display: block; position: relative;
  margin: clamp(28px, 4vw, 52px) auto 0; width: min(100% - 32px, var(--wrap-wide));
  font-family: var(--f-display-latin); font-weight: 400; font-style: normal;
  font-size: clamp(84px, 26vw, 410px); line-height: .82; letter-spacing: -0.035em; text-align: center; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgb(var(--line-rgb) / .34);
  background:
    radial-gradient(circle at calc(50% + .345em) .3775em, var(--spark) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(50% + .345em) .3775em, rgb(var(--tint-rgb) / .22), rgb(var(--tint-rgb) / 0) .09em),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C500 40 500 260 1000 260' fill='none' stroke='%2363F2D2' stroke-opacity='.6' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 260 C500 260 500 40 1000 40' fill='none' stroke='%23FF8A66' stroke-opacity='.55' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 -.0725em / calc(100% + .69em) .9em no-repeat;
  -webkit-mask-image: linear-gradient(#000 45%, transparent 98%); mask-image: linear-gradient(#000 45%, transparent 98%);
  pointer-events: none; user-select: none;
}