@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ============================================
   디자인 토큰 — 최대값 변수
   - 각 클래스의 clamp() 최대값을 한 곳에서 관리
============================================ */
:root {
 --vw-min: 360;
  --vw-max: 1920;

  --fs-h1: clamp(44px, 31.2px + 4vw, 108px);
  --fs-h2: clamp(28px, calc(28px + (56 - 28) * ((100vw - 360px) / (1920 - 360))), 56px);
  --fs-h3: clamp(24px, calc(24px + (48 - 24) * ((100vw - 360px) / (1920 - 360))), 48px);
  --fs-h4: clamp(20px, calc(20px + (40 - 20) * ((100vw - 360px) / (1920 - 360))), 40px);
  --fs-h5: clamp(18px, calc(18px + (24 - 18) * ((100vw - 360px) / (1920 - 360))), 24px);
  --fs-h6: clamp(16px, calc(16px + (20 - 16) * ((100vw - 360px) / (1920 - 360))), 20px);
  --fs-large: clamp(16px, calc(16px + (18 - 16) * ((100vw - 360px) / (1920 - 360))), 18px);
  --fs-small: clamp(14px, calc(14px + (14 - 14) * ((100vw - 360px) / (1920 - 360))), 14px);

  --pad-section: clamp(42px, calc(42px + (160 - 42) * ((100vw - 360px) / (1920 - 360))), 160px);
  --pad-section-sm: clamp(64px, calc(64px + (120 - 64) * ((100vw - 360px) / (1920 - 360))), 120px);
  --pad-section-xs: clamp(48px, calc(48px + (80 - 48) * ((100vw - 360px) / (1920 - 360))), 80px);
  /* space */
  --space-10: clamp(7px, calc(10 / var(--screen-w) * 100vw), 10px);
  --space-12: clamp(8px, calc(12 / var(--screen-w) * 100vw), 12px);
  --space-14: clamp(9px, calc(14 / var(--screen-w) * 100vw), 14px);
  --space-16: clamp(12px, calc(16 / var(--screen-w) * 100vw), 16px);
  --space-18: clamp(14px, calc(18 / var(--screen-w) * 100vw), 18px);
  --space-20: clamp(16px, calc(20 / var(--screen-w) * 100vw), 20px);
  --space-24: clamp(20px, calc(24 / var(--screen-w) * 100vw), 24px);
  --space-28: clamp(18px, calc(28 / var(--screen-w) * 100vw), 28px);
  --space-32: clamp(20px, calc(32 / var(--screen-w) * 100vw), 32px);
  --space-36: clamp(24px, calc(36 / var(--screen-w) * 100vw), 36px);
  --space-40: clamp(26px, calc(40 / var(--screen-w) * 100vw), 40px);
  --space-48: clamp(32px, calc(48 / var(--screen-w) * 100vw), 48px);
  --space-56: clamp(36px, calc(56 / var(--screen-w) * 100vw), 56px);
  --space-64: clamp(40px, calc(64 / var(--screen-w) * 100vw), 64px);
}
/* =========================
   Typography
========================= */

.rolling-text {
  font-size: clamp(
    36px,
    calc(var(--fs-h2-max) / var(--screen-w) * 100vw),
    calc(var(--fs-h2-max) * 1px)
  );
}
.heading-1 {
  font-size: var(--fs-h1);
  line-height: 0.95;
}

.heading-2 {
  font-size: var(--fs-h2);
  line-height: 1;
}

.heading-3 {
  font-size: var(--fs-h3);
  line-height: 1.08;
}

.heading-4 {
  font-size: var(--fs-h4);
  line-height: 1.15;
}

.heading-5 {
  font-size: var(--fs-h5);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.heading-6 {
  font-size: var(--fs-h6);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.large {
  font-size: var(--fs-large);
  line-height: 1.4;
}

.small {
  font-size: var(--fs-small);
  line-height: 1.5;
}
/* .heading-1 {
  font-size: clamp(
    var(--fs-h1-min),
    calc(var(--fs-h1-max) / var(--screen-w) * 100vw),
    calc(var(--fs-h1-max) * 1px)
  );
  line-height: 0.95;
 
}

.heading-2 {
  font-size: clamp(
    var(--fs-h2-min),
    calc(var(--fs-h2-max) / var(--screen-w) * 100vw),
    calc(var(--fs-h2-max) * 1px)
  );
  line-height: 1;

}

.heading-3 {
  font-size: clamp(
    var(--fs-h3-min),
    calc(var(--fs-h3-max) / var(--screen-w) * 100vw),
    calc(var(--fs-h3-max) * 1px)
  );
  line-height: 1.08;

}

.heading-4 {
  font-size: clamp(
    var(--fs-h4-min),
    calc(var(--fs-h4-max) / var(--screen-w) * 100vw),
    calc(var(--fs-h4-max) * 1px)
  );
  line-height: 1.15;

}

.heading-5 {
  font-size: clamp(
    var(--fs-h5-min),
    calc(var(--fs-h5-max) / var(--screen-w) * 100vw),
    calc(var(--fs-h5-max) * 1px)
  );
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.heading-6 {
  font-size: clamp(
    var(--fs-h6-min),
    calc(var(--fs-h6-max) / var(--screen-w) * 100vw),
    calc(var(--fs-h6-max) * 1px)
  );
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.large {
  font-size: clamp(
    var(--fs-large-min),
    calc(var(--fs-large-max) / var(--screen-w) * 100vw),
    calc(var(--fs-large-max) * 1px)
  );
  line-height: 1.4;
}

.small {
  font-size: clamp(
    var(--fs-small-min),
    calc(var(--fs-small-max) / var(--screen-w) * 100vw),
    calc(var(--fs-small-max) * 1px)
  );
  line-height: 1.5;
} */

/* =========================
   Section Space
========================= */

/* board 스킨 등 외부에서도 쓰므로 클래스 유지 — 통합 토큰을 그대로 사용 */
.space-section    { padding-block: var(--pad-section); }
.space-section-sm { padding-block: var(--pad-section-sm); }
.space-section-xs { padding-block: var(--pad-section-xs); }
/* ============================================
   엘리먼트 간격 — 별도 유틸 클래스 정의 없음
   - HTML 에서 Tailwind arbitrary 문법으로 직접 사용
   - 예: gap-[var(--space-20)] / mt-[var(--space-40)]
============================================ */


.logo_main {
    fill: var(--logo-main);
}

.inter {
    font-family: 'Inter', sans-serif;
}

.intro {
    --logo-main: #fff;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
}

.intro .logo_svg {
    overflow: hidden;
    width: 100%;
    height: auto;
    max-width: 500px;
}

.intro .logo_path {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

/* 메인 */
.hero {
    position: relative;
    height: var(--full-h);
    overflow: hidden;
}

.hero .hero_text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}


.hero .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */
}

/*  */

.vision-title {
  transform: translateX(-50%);
}

.vision-title-top {
  top: calc(50% - clamp(40px, 1vw , 72px));
  transform: translate(-50%, -100%);
}

.vision-title-bottom {
   top: calc(50% + clamp(40px, 1vw, 72px));
}

/* 비전 타이틀 — 밝은 글자는 .vision-title-fill, 글자 단위 clip은 index.js */
.vision-title-base .line {
    background: linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(37, 37, 37) 50%);
    background-size: 200% 100%;
    background-position-x: 100%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.vision-reveal {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;

  transform-origin: center center;
  will-change: transform, clip-path;

  transform: scale(0.92);
  clip-path: inset(calc(50% - 1px) 0px calc(50% - 1px) 0px );
}
.vision-content .fade-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-40px);
}

/* 스크롤 인디케이터 — 레이아웃·타이포는 index.php Tailwind, 애니메이션만 유지 */
.scroll_motion {
    animation: scrollMouse 1.25s linear infinite;
}

.scroll_motion::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0.1rem;
    height: 0.3rem;
    border-radius: 999px;
    background-color: #000;
    transform: translateX(-50%);
    top: 0.3rem;
    opacity: 1;
    animation: scrollBall 1.25s linear infinite;
}

.scroll_text {
    animation: scrollTxt 1.25s linear infinite;
}

@keyframes scrollMouse {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10%);
    }
}

@keyframes scrollBall {

    0%,
    100% {
        top: 0.3rem;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    80% {
        top: 65%;
        opacity: 0;
    }
}

@keyframes scrollTxt {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10%);
    }
}

/* company */
.company-hero.scale-animate img {
  animation: scale-animate 5s ease-in-out;
}
@keyframes scale-animate {
  0% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.scroll-wrapper {
    position: relative;
    width: 100%;
    background: #fff;
    z-index: 0;
}

.video-intro {
    position: relative;
    width: 100%;
    height: var(--full-h);
    overflow: hidden;
    background: #fff;
}

.video-intro .media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    -webkit-mask-image: url('../img/main/terris_outline_2.svg');
            mask-image: url('../img/main/terris_outline_2.svg');
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center center;
            mask-position: center center;
    -webkit-mask-size: 120vw;
            mask-size: 120vw;
    opacity: 0;
    visibility: hidden;
    will-change: mask-size, opacity, transform;
}

.video-intro .media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/*  */

.vision-title {
  transform: translateX(-50%);
}

.vision-title-top {
  top: calc(50% - clamp(40px, 1vw , 72px));
  transform: translate(-50%, -100%);
}

.vision-title-bottom {
   top: calc(50% + clamp(40px, 1vw, 72px));
}

/* 비전 타이틀 — 밝은 글자는 .vision-title-fill, 글자 단위 clip은 index.js */
.vision-title-base .line {
    background: linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(37, 37, 37) 50%);
    background-size: 200% 100%;
    background-position-x: 100%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.vision-reveal {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;

  transform-origin: center center;
  will-change: transform, clip-path;

  transform: scale(0.92);
  clip-path: inset(calc(50% - 1px) 0px calc(50% - 1px) 0px );
}
.vision-content .fade-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-40px);
}

.vision-counter {
  font-family: 'Inter', sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  display: inline-block;
  min-width: 2.2ch;
}

.visual-title {
  font-size: clamp(96px, 78.2px + 5.563vw, 185px);
}