@import url("./nft_variables.css");

/* ============================================================
   NFT 신뢰 스트립(블랙 라인) — 고급 라인 무드 + 미세 스윕 애니메이션
   - 레이아웃: 가운데 컨테이너 안에서 좌·중·우 3분할
   - 포인트: 얇은 헤어라인, 은은한 광택 스윕, 절제된 캡션
   ============================================================ */

/* 대표님이 조절할 수 있는 설정(속도/두께/색) */
:root{
  --tl-line-y: 18px;        /* 라인이 .tl-steps 안에서 떨어질 높이 */
  --tl-steps-gap: 14px;     /* 라인 아래 라벨과의 기본 간격 */
  --tl-line-h: 36px;                 /* 라인 두께 */
  --tl-sweep-duration: 1600ms;      /* 라인 위 스윕 시간 */
  --tl-node-size: 12px;             /* 노드 점 크기 */
  --tl-color: rgba(255,255,255,.82);/* 텍스트/아이콘 기본색 */
  --tl-line: rgba(188, 188, 188, 0.28); /* 기본 라인색 */
  --tl-gloss: linear-gradient(90deg,
     rgba(255,255,255,0)   0%,
     rgba(255,255,255,.10) 12%,
     rgba(255,255,255,.45) 28%,
     rgba(255,255,255,.92) 50%,
     rgba(255,255,255,.45) 72%,
     rgba(255,255,255,.10) 88%,
     rgba(255,255,255,0)  100%
     );
  --tl-sweep-offset: .45; /* 0.45=전체 시간의 45%만큼 앞서 시작(겹쳐 흐름) */
    
  /* 라인/노드의 수직 위치와 여백 */
  --tl-line-y: 18px;        /* 라인이 .tl-steps 안에서 떨어질 높이 */
  --tl-steps-gap: 14px;     /* 라인 아래 라벨과의 기본 간격 */

  /* CTA(문의) 축소 */
  --tl-cta-font: 12px;       /* 기존 14px → 절반 */
  --tl-cta-pad-y: 5px;      /* 기존 10px → 절반 정도 */
  --tl-cta-pad-x: 8px;      /* 기존 16px → 절반 정도 */

  /* 라인 스윕 반복 횟수 */
  --tl-sweep-iterations: 6; /* 요청: 6회 반복 */
}

#trustline{
  background:#0a0a0a;
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  color:#fff;
  max-width: var(--maxw);
  margin: 56px auto 68px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3.2vw, 40px) 24px; /* 상하 여백 확대 */
}
#trustline::after,
#trustline::before{
  /* 상/하 헤어라인 */
  content:""; position:absolute; left:14px; right:14px; height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,0));
  opacity:.28;
}
#trustline::before{ top:8px }
#trustline::after{ bottom:8px; transform: scaleX(-1) }

.tl-inner{
  display:grid;
  grid-template-columns: 1.1fr 2fr auto;
  align-items:center;
  gap: 16px 20px;
}

.tl-copy .eyebrow{
  margin:0 0 6px; font-family: var(--en-geo);
  letter-spacing:.12em; text-transform: uppercase;
  font-size: 15px; opacity:.72;
}
.tl-copy h2{
  margin:0; font-family: var(--serif-kr); font-weight:240;
  letter-spacing:.02em; font-size: clamp(15px, 2.2vw, 18px);
}

/* ─── 중앙 라인 + 노드들 ─── */
/* 중앙 라인 + 노드 컨테이너 */
.tl-steps{
    position: relative;
    display:grid;
    grid-template-columns: repeat(4,1fr);
    align-items:start;                /* ⬅︎ 라인 기준 위쪽부터 쌓이게 */
    gap: 12px;
    margin: 0;
    padding: clamp(10px, 1.4vw, 16px) 0 clamp(12px, 1.6vw, 18px);
    list-style: none;

    background-image: linear-gradient(0deg, var(--tl-line), var(--tl-line));
    background-repeat: no-repeat;
    background-size: 100% var(--tl-line-h);
    background-position: 0 var(--tl-line-y);
  }
  
  /* 기본 라인 / 글로스 라인 : 수직 위치를 변수로 통일 */
  .tl-steps::before,
  /* 중앙 라인의 '빛' (글로스) */
  .tl-steps::after{
  content:"";
  position:absolute; left:0; right:0;
  top: var(--tl-line-y);
  height: var(--tl-line-h);
  border-radius: 999px;

  /* ✨ 부드러운 빛 그라디언트 */
  background: var(--tl-gloss);
  background-repeat: no-repeat;
  background-size: 240% 100%;       /* 넉넉한 폭으로 좌·우 자연스러운 소멸 */
  background-position: -30% 0;      /* 왼쪽 바깥에서 진입 */
  opacity: 0;                       /* 페이드 인/아웃을 위해 0에서 시작 */

  transform-origin:left;
  transform: scaleX(0);
 
  background-repeat: no-repeat;
  background-size: 220% 100%;     /* 넉넉한 폭으로 만들어 양끝에서 부드럽게 사라지게 */
  background-position: -30% 0;    /* 시작: 살짝 왼쪽 밖에서 진입 */

  opacity:.9;
  will-change: background-position, opacity;
}

/* 섹션이 보이면 라이트 스윕 시작 */
#trustline.is-visible .tl-steps::after{
  animation: tlSweep var(--tl-sweep-duration) linear 0s var(--tl-sweep-iterations);
  /* ⚠ 'forwards' 제거 → 루프 사이 멈춤 없이 즉시 재시작 */
}

@keyframes tlSweep{
  /* 왼쪽에서 미리 '빛' 이 들어오도록 0~10% 구간에서 서서히 등장 */
  0%   { transform: scaleX(0); background-position: -30% 0; opacity: 0; }
  10%  { transform: scaleX(1); opacity: .92; }      /* 부드러운 페이드인 */
  80%  { transform: scaleX(1); opacity: .92; }      /* 본 구간 유지 */
  100% { transform: scaleX(1); background-position: 130% 0; opacity: 0; } /* 끝부분에서 자연스러운 페이드아웃 */
}

/* 좌 → 우로 끊김 없이 진행 후 바로 재시작 */


  .tl-steps::before{ background: var(--tl-line); }
 
  
  /* 노드(점) 위치: 라인 중앙에 정확히 앉힘 */
  .tl-steps li{
    position: relative;
    text-align:center;
    color:var(--tl-color);
    font-size: 12.5px;
    opacity:.92;
    padding-top: calc(var(--tl-line-y) + var(--tl-node-size)/2 + var(--tl-steps-gap));
  }

  .tl-steps li::before{
  content:"";
  position:absolute; left:50%;
  top: calc(var(--tl-line-y) - var(--tl-node-size)/2);
  transform:translateX(-50%);
  width: var(--tl-node-size); height: var(--tl-node-size);
  background:#0a0a0a; border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.08);
}
  /* 라벨(span)은 블록으로 아래쪽에 표시 */
  .tl-steps li > span{ display:block; }
  
  #trustline.is-visible .tl-steps::after{
    animation: tlSweep var(--tl-sweep-duration)
               cubic-bezier(.55,.06,.19,.97) .2s
               var(--tl-sweep-iterations) forwards;
  }
  
@keyframes tlSweep{
  0%   { transform: scaleX(0) }
  65%  { transform: scaleX(1) }
  100% { transform: scaleX(1) }
}

/* 노드(점) */


/* 우측 버튼 */
.tl-cta{
    justify-self:end; align-self:center;
    display:inline-block;
    padding: var(--tl-cta-pad-y) var(--tl-cta-pad-x); /* ⬅︎ 절반 패딩 */
    border-radius:999px;
    background:#fff; color:#111; text-decoration:none;
    font-weight:700;
    font-size: var(--tl-cta-font);                    /* ⬅︎ 절반 폰트 */
    border:1px solid rgba(255,255,255,.12);
    transition: transform .15s ease, box-shadow .2s ease;
  }
  
.tl-cta:hover{ transform: translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.28) }

/* 반응형 */
@media (max-width: 960px){
  .tl-inner{ grid-template-columns: 1fr; gap: 4px 0 }
  .tl-cta{ justify-self:center }
}