/*
 * FROMYOU 리디자인 레이어 (wow.css) — 2026.10
 * ------------------------------------------------------------
 * 컨셉: "CREATE THE NEXT SCENE" — 영화 타이틀 시퀀스처럼.
 *   - 페이지 대표 제목(첫 화면 · CREATOR · WORKS)만 넓고 굵은 디스플레이 글꼴(Unbounded)
 *     그 밖의 글자는 모두 기존 Pretendard 그대로
 *   - 대표 제목이 한 줄씩 아래에서 올라오는 등장, 마지막 줄은 무지갯빛
 *   - 첫 화면 아래 '함께한 브랜드' 로고가 저절로 흐르는 띠
 *
 * 되돌리기: 각 HTML 의 아래 두 줄을 지우면 이전 디자인으로 돌아갑니다.
 *   <link rel="stylesheet" href="css/wow.css">
 *   <script src="js/wow.js" defer></script>
 *
 * 목차
 *   0. 글꼴 · 색
 *   1. 대표 제목 글꼴
 *   2. 대표 제목 등장 (첫 화면 · CREATOR · WORKS)
 *   3. 함께한 브랜드 로고 띠
 *   4. ABOUT · WHAT WE DO
 *   5. CONTACT 여백
 *   6. 크리에이터 · 웍스 페이지
 *   7. 움직임 줄이기 설정
 * ------------------------------------------------------------
 */

/* 0. 글꼴 · 색 --------------------------------------------- */
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Unbounded";
  src: url("../fonts/unbounded-latin-900-normal.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  --font-display: "Unbounded", Pretendard, Arial, sans-serif;
  --ink: #16111d;
  --iris: linear-gradient(100deg, #7ea6ea 0%, #a98fe0 38%, #d59ad0 68%, #f0c6d8 100%);
}

/* 1. 큰 제목 글꼴 (페이지 대표 제목에만 적용) ------------------ */
.hero-text h1,
.creator-hero h1,
.works-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
}

/* 2. 대표 제목 등장 ------------------------------------------ */
/* 첫 화면 배경: 천천히 떠다니는 빛 */
.hero {
  isolation: isolate;
  grid-template-columns: 50% 50%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(28% 34% at 22% 30%, rgba(126, 166, 234, .45), transparent 70%),
    radial-gradient(30% 36% at 78% 62%, rgba(213, 154, 208, .5), transparent 70%),
    radial-gradient(22% 26% at 60% 18%, rgba(169, 143, 224, .4), transparent 70%);
  filter: blur(10px);
  animation: wow-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes wow-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(3%, -2%, 0) rotate(4deg); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-3deg); }
}
.hero-text {
  padding-left: 12.5vw; /* 메뉴(ABOUT)와 왼쪽 줄 맞춤 */
  padding-right: 0;
}
.hero-text h1 {
  margin-bottom: 34px;
  font-size: clamp(42px, 4.5vw, 80px);
  line-height: 1.02;
  letter-spacing: -.045em;
  color: var(--ink);
}
.hero-text p {
  max-width: 34em;
}
@media (max-width: 1200px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-text {
    padding-left: 25px;
    padding-right: 25px;
  }
  .hero-text h1 {
    font-size: clamp(34px, 10vw, 72px);
  }
  .hero-text p {
    margin-left: auto;
    margin-right: auto;
  }
}

/* CREATOR · WORKS 대표 제목 크기 */
.creator-hero h1,
.works-hero h1 {
  font-size: clamp(40px, 7.4vw, 120px) !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
  color: var(--ink) !important;
}

/* 한 줄씩 올라오기 (js/wow.js 가 줄을 나눠 줍니다) */
h1.wow-split {
  animation: none !important; /* effects.css 의 흐릿하게 떠오르기 대신 */
}
.wow-line {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}
.wow-line > span {
  display: block;
  transform: translateY(105%);
  animation: wow-line-up 1.1s cubic-bezier(.19, 1, .22, 1) forwards;
  animation-delay: calc(var(--i, 0) * .14s + .1s);
}
@keyframes wow-line-up {
  to { transform: translateY(0); }
}
/* 마지막 줄은 무지갯빛 */
.wow-line:last-child > span {
  background: var(--iris);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 3. 함께한 브랜드 로고 띠 -------------------------------------
 *    로고가 저절로 천천히 흐르고, 마우스를 올리면 멈춥니다. 양 끝은 부드럽게 사라짐. */
.brand-ticker {
  position: relative;
  z-index: 1;
  padding: 80px 0 clamp(20px, 2.6vw, 34px);
  text-align: center;
}
.brand-ticker__label {
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: #6b6380;
  font-size: 13px;
  font-weight: 600;
}
.brand-ticker__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.brand-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: brand-ticker 36s linear infinite;
}
.brand-ticker__track li {
  flex: none;
  padding: 0 clamp(32px, 4.4vw, 64px);
}
.brand-ticker__track img {
  display: block;
  height: clamp(20px, 2vw, 28px);
  width: auto;
  filter: grayscale(1);
  opacity: .55;
  mix-blend-mode: multiply;
  transition: filter .3s ease, opacity .3s ease;
}
.brand-ticker__track img:hover {
  filter: none;
  opacity: 1;
}
.brand-ticker__viewport:hover .brand-ticker__track {
  animation-play-state: paused;
}
@keyframes brand-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* 로고 묶음 절반만큼 이동 → 끊김 없이 반복 */
}

/* 4. ABOUT · WHAT WE DO ------------------------------------ */
/* 가치 영역 사진: 화면에 들어올 때 옆으로 닦아내듯 나타남 */
.value-row .value-image {
  clip-path: inset(0 100% 0 0 round 30px);
  transition: clip-path 1.1s cubic-bezier(.19, 1, .22, 1) .1s;
}
.value-row .value-text-right + .value-image {
  clip-path: inset(0 0 0 100% round 30px);
}
.value-row.is-visible .value-image {
  clip-path: inset(0 0 0 0 round 30px);
}
.value-row .value-image img {
  transform: scale(1.12);
  transition: transform 1.6s cubic-bezier(.19, 1, .22, 1);
}
.value-row.is-visible .value-image img {
  transform: scale(1);
}
/* WHAT WE DO: 마우스를 올리면 아이콘 원이 무지갯빛으로 */
.service-icon {
  transition: background .35s ease, transform .35s ease;
}
.service-icon img {
  transition: filter .35s ease;
}
@media (hover: hover) {
  .service-item:hover .service-icon {
    background: var(--iris);
    transform: translateY(-4px);
  }
  .service-item:hover .service-icon img {
    filter: brightness(0) invert(1);
  }
}

/* 5. CONTACT (색은 원래대로, 여백만 조정) ------------------- */
.contact {
  min-height: 0;
  /* 좌우 여백을 WHAT WE DO 와 똑같이 → 두 카드의 양옆 끝이 일직선 */
  padding: clamp(20px, 2.4vw, 36px) 12.5% clamp(60px, 7vw, 100px);
}
.business {
  min-height: 0; /* 카드 아래 남던 빈 공간 제거 → WHAT WE DO 와 CONTACT 간격 정리 */
}
@media (max-width: 1200px) {
  .business {
    padding-bottom: 40px;
  }
}
.contact-layout {
  width: 100%;
  max-width: none;
}
@media (max-width: 1200px) {
  .contact {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 6. 크리에이터 · 웍스 페이지 ------------------------------- */
/* 크리에이터 목록: 한 명에 마우스를 올리면 나머지는 살짝 흐리게 */
@media (hover: hover) and (pointer: fine) {
  .creator-card {
    transition: opacity .35s ease;
  }
  .creator-grid:has(.creator-card:hover) .creator-card:not(:hover) {
    opacity: .5;
  }
}

/* 7. 움직임 줄이기 설정을 켠 사용자에게는 정지 화면으로 ------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .brand-ticker__track {
    animation: none;
  }
  .brand-ticker__track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
  .brand-ticker__track li[aria-hidden="true"] {
    display: none;
  }
  .wow-line > span {
    animation: none;
    transform: none;
  }
  .value-row .value-image,
  .value-row .value-text-right + .value-image {
    clip-path: inset(0 0 0 0 round 30px);
    transition: none;
  }
  .value-row .value-image img {
    transform: none;
    transition: none;
  }
}

/* 기영이 로고만 크고 진하게 */
.brand-ticker__track img[src*="logo-Giyoung-i"] {
  height: clamp(30px, 3vw, 42px);
  filter: grayscale(1) brightness(.35);
  opacity: .8;
}
.brand-ticker__track img[src*="logo-Giyoung-i"]:hover {
  filter: none;
  opacity: 1;
}