/* ===================================
   Logo Motion — 로고 SVG 애니메이션
   =================================== */

/* --- 섹션 레이아웃 --- */
.logo-motion {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  overflow: hidden;
  transition: opacity 2s ease, visibility 2s ease;
}

.logo-motion-inner {
  width: 100%;
  max-width: 1100px;
  padding: 0 var(--container-padding, 24px);
  /* 영역 가운데에서 글자 높이만큼 아래로 */
  margin-top: 10vh;
}

.logo-motion-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Fill paths (#bc0008) — 초기 상태: 숨김 --- */
.reveal-fill {
  fill: #bc0008;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1),
    transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  /* 딜레이는 --i 기반으로 계산 (왼→오 순차) */
  transition-delay: calc(var(--i) * 0.18s);
}

/* --- Stroke paths — 초기 상태: 숨김 (dasharray/dashoffset은 JS에서 설정) --- */
.draw-stroke {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.88px;
}

/* --- 활성 상태: 섹션에 is-animated 클래스 부여 시 --- */
.logo-motion.is-animated .reveal-fill {
  opacity: 1;
  transform: translateY(0);
}

.logo-motion.is-animated .draw-stroke {
  animation: drawStrokeLine 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: calc(var(--i) * 0.12s);
}

@keyframes drawStrokeLine {
  to { stroke-dashoffset: 0; }
}

/* --- 핀 마크 — 대각선 직선 비행 → 꽂히는 애니메이션 --- */
.logo-motion-inner {
  position: relative;
}

.logo-motion-pin-wrap {
  position: absolute;
  /* 최종 위치: 텍스트 위쪽 가운데 (글자 높이의 20% 간격) */
  left: 50%;
  top: 0;
  transform: translateX(-50%) translateY(-107%);
  /* 높이: 글자 높이의 3배 */
  height: 300%;
  aspect-ratio: 79.56 / 140; /* 핀 이미지 고유 비율 */
  /* 꼭지(팁)를 회전 축으로 설정 — SVG 좌측 하단 = (0, 140) */
  transform-origin: 0% 100%;
  /* 초기 상태: 숨김 */
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  container-type: inline-size;
}

.logo-motion-pin-img {
  width: 100%;
  height: 100%;
  display: block;
}

.logo-motion.is-animated .logo-motion-pin-wrap {
  animation: pinFlyIn 0.7s linear forwards;
  /* 기존 애니메이션 완료(~2.62s) + 0.5s 후 시작 */
  animation-delay: 2.3s;
}

/* 핀에 맞춰 스케일링 되는 2026 연도 텍스트 */
.logo-motion-year {
  position: absolute;
  top: 0; /* 핀의 상단 둥근 부분 위치 */
  height: 73cqi; /* 핀의 가로 너비(둥근 부분 지름)와 같은 높이 */
  display: flex;
  align-items: center;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 133cqi; /* 둥근 부분에 맞게 폰트 크기 조절 */
  line-height: 1;
  opacity: 0;
}

.logo-motion-year.left-year {
  right: 100%; /* 핀 왼쪽 여백 */
  color: #ea1b2c; /* 포인트 컬러 (로고 레드) */
}

.logo-motion-year.right-year {
  left: 105%; /* 핀 오른쪽 여백 */
  color: #ffffff; /* 흰색 */
}

.logo-motion.is-animated .logo-motion-year {
  animation: yearFadeIn 0.8s ease forwards;
  animation-delay: 4.2s; /* 핀 모션이 다 끝난 후(3.42 + 0.7 = 4.12) */
}

@keyframes yearFadeIn {
  from { 
    opacity: 0; 
    filter: blur(200px); 
  }
  to { 
    opacity: 1; 
    filter: blur(0px); 
  }
}

@keyframes pinFlyIn {
  /* ── Phase 1: 등속 비행 (0%–29%, 약 0.2s) ── */
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(-107%)
               translate(20vw, -100vh)
               rotate(8deg);
  }
  /* 착지 — 바로 흔들림으로 연결 */
  29% {
    opacity: 1;
    transform: translateX(-50%) translateY(-107%)
               translate(0, 0)
               rotate(0deg);
  }

  /* ── Phase 2: 흔들림 (29%–100%, 약 0.5s) ── */
  38% { transform: translateX(-50%) translateY(-107%) rotate(5deg); }
  47% { transform: translateX(-50%) translateY(-107%) rotate(-5deg); }
  56% { transform: translateX(-50%) translateY(-107%) rotate(3deg); }
  65% { transform: translateX(-50%) translateY(-107%) rotate(-3deg); }
  74% { transform: translateX(-50%) translateY(-107%) rotate(1.5deg); }
  83% { transform: translateX(-50%) translateY(-107%) rotate(-1deg); }
  92% { transform: translateX(-50%) translateY(-107%) rotate(0.5deg); }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-107%) rotate(0deg);
  }
}

/* --- 반응형 --- */


/* --- 페이드아웃 및 리버스 애니메이션 --- */
.logo-motion.is-fading-out {
  opacity: 0;
  visibility: hidden;
}

.logo-motion.is-fading-out .reveal-fill {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1), transform 0.5s cubic-bezier(0.33, 1, 0.68, 1) !important;
  transition-delay: calc((4 - var(--i)) * 0.1s) !important;
}

.logo-motion.is-fading-out .draw-stroke {
  animation: drawStrokeLine 1s cubic-bezier(0.65, 0, 0.35, 1) reverse forwards !important;
  animation-delay: calc((11 - var(--i)) * 0.08s) !important;
}

.logo-motion.is-fading-out .logo-motion-pin-wrap {
  animation: pinFlyOut 1.5s ease-in forwards !important;
}

.logo-motion.is-fading-out .logo-motion-year {
  animation: yearFadeOut 1s ease forwards !important;
}

@keyframes pinFlyOut {
  0% { transform: translateX(-50%) translateY(-107%) translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-107%) translate(20vw, -100vh) rotate(8deg); opacity: 0; }
}

@keyframes yearFadeOut {
  0% { opacity: 1; filter: blur(0px); }
  100% { opacity: 0; filter: blur(100px); }
}

/* ===================================
   Main Page — Hero Slider
   =================================== */

/* === Slider Container === */
.hero-slider {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}

/* === Track — 크로스페이드 컨테이너 === */
.hero-slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* === 개별 슬라이드 — 스택 구조 === */
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* ▼ 1s = 크로스페이드 전환 속도 */
  transition: opacity 1s ease-in-out;
  z-index: 0;
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === 디밍 오버레이 === */
.hero-slide-dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 1;
}

/* === 텍스트 오버레이 === */
.hero-slide-text {
    position: absolute;
    top: 27vh;
    left: 0;
    width: 100%;
    padding: 0 var(--container-padding);
    z-index: 2;
    color: #ffffff;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero-slider-track.is-playing .hero-slide.is-active .hero-slide-text {
  opacity: 1;
  transform: translateY(0);
}

.hero-slide-text>*{text-shadow: 1px 1px 3px #000;}

.hero-slide-text .txt-content-heading{
  margin: 0;
  font-size: 26px;
}

.hero-slide-text .txt-display{
  font-weight: 700;
  line-height: 1;
}
.hero-slide-text .txt-section-heading{
  margin:var(--space-4) 0;
  font-weight: 500;
}

/* === 프로그레스 바 === */
.hero-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 3;
}

.hero-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to top, var(--color-primary) 0%, rgba(234, 27, 44, 0.35) 5%, transparent 100%);
  transition: width 0.1s linear;
}

/* === 네비게이션 닷 === */
.hero-nav {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}

.hero-nav-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.hero-nav-dot.active {
  width: 56px; /* 14px × 4배 */
  background: var(--color-primary);
}

/* ===================================
   Section Base
   =================================== */
.main-section {
  padding: var(--space-10) 0;
}

/* ===================================
   Section 1 — 브랜드 로고 + 슬로건
   =================================== */
.main-brand {
  background: var(--color-bg-primary);
  text-align: center;
}

.main-brand-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-brand-logo {
  width: 100%;
  max-width: 480px;
  height: auto;
  margin-bottom: var(--space-7);
}

.main-brand-tagline {
  font-family: var(--font-secondary);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  color: var(--color-text-primary);
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
}

/* === 통합 섹션 설명 === */
.main-desc {
  word-break: keep-all;
  font-weight: 200;
  margin: var(--space-6) 0 0;
}

/* ===================================
   Section 2 — Features
   =================================== */
.main-features {
  background: var(--color-primary-hover);
}

/* === 통합 섹션 타이틀 === */
.main-title {
  font-family: var(--font-secondary);
  font-size: clamp(40px, 10vw, 56px);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  word-break: keep-all;
}
.main-features .main-title {
  color: #ffffff;
  text-align: center;
  margin-bottom: var(--space-8);
}

.main-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.main-feature-card {
  padding: var(--space-7) var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, transform 0.3s ease;
}

.main-feature-card:hover {
  background: rgba(0, 0, 0, 0.35);
  transform: translateY(-6px);
}

.main-feature-number {
  font-family: var(--font-secondary);
  font-size: var(--type-title-size);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: var(--space-4);
  line-height: 1;
}

.main-feature-heading {
  font-family: var(--font-secondary);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.main-features .main-desc {
  margin-bottom: var(--space-5);
  font-size: var(--type-content-subheading-size);
}

.main-feature-link {
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  transition: opacity 0.2s ease;
}

.main-feature-link:hover {
  opacity: 0.7;
}

/* ===================================
   Section 3 — CTA
   =================================== */
.main-cta {
  background:
    radial-gradient(circle at 50% 50%, rgba(234, 27, 44, 0.08) 0%, transparent 60%),
    var(--color-bg-primary);
  text-align: center;
}

.main-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-cta-label {
  font-family: var(--font-secondary);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.main-cta .main-title {
  text-align: center;
  margin-bottom: var(--space-5);
}

.main-cta .main-desc {
  margin-bottom: var(--space-7);
}

.main-cta-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

.main-cta-actions .btn-lg {
  padding: var(--space-3) var(--space-7);
  font-size: var(--type-body-size);
}
.section3 .txt-section-heading{
  font-size: 28px;
}
/* ===================================
   Responsive
   =================================== */
@media (max-width: 768px) {
  .hero-slider {
    height: 100vh;
    max-height:630px
  }
  .hero-slide-text {
    top: 15vh;
  }
  .hero-slide-text br{display:none;}

.hero-slide-img{
 opacity: 0.9; 
}

.hero-slide-text > *{
  word-break: keep-all;
}

.hero-slide-text .txt-display{
  font-weight: 700;
  text-align: left;
  line-height: 1;
  /* font-size: clamp(50px, 13vw, 70px); */
  font-size: 36px;
  word-break: keep-all;
  margin-top: var(--space-2);
}

.hero-slide-text .txt-section-heading{
  text-align: left;
  font-size: 32px;
  margin-top: var(--space-2);
}

.hero-slide-text .txt-content-heading{
  text-align: left;
  word-break: keep-all;
  font-size: 20px;
  font-weight: 500;
  margin-top: var(--space-1);
}

.main-feature-heading { 
  font-size: clamp(30px, 9vw, 50px); 
}
.main-cta .main-title{text-align: left;}
.main-cta-inner>h3{
  text-align:left;
  
        line-height: 1;
        font-size: clamp(18px, 6.5vw, 36px);
}
.main-brand-inner{
  align-items: flex-start;
}

.main-title, .main-desc,
.main-features .main-title{
  text-align: left;
}

.main-cta-inner{
  align-items: flex-start;
}

.main-title br{display:none;}

  .hero-nav {
    bottom: 50px;
  }

  .main-section {
    padding: var(--space-8) 0;
  }

  .main-brand-logo {
    max-width: 280px;
    margin-bottom: var(--space-5);
  }

  .main-brand-tagline {
    font-size: 1.25rem;
  }

  .main-desc br {
    display: none;
  }

  .main-features-grid {
    grid-template-columns: 1fr;
  }

  .main-cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .main-cta-actions .btn-lg {
    width: 100%;
    text-align: center;
  }
  .main-feature-card br{display:none;}
  .main-features .main-desc{margin: var(--space-4) 0;}
}
@media (max-width: 767px) {

  .main-title{
    font-size: 36px;

  }
  
.hero-slide-text .txt-display{
  font-size: 36px;
}

.main-feature-heading { 
  font-size: 24px;
}
}