@charset "UTF-8";

/* ==========================================================================
   Works Subpage (Portfolio/Works Dedicated Layout)
   ========================================================================== */
.works-hero {
    position: relative;
    width: 100%;
    min-height: 450px;
    background-color: #050505; /* 아주 어두운 차콜/블랙 */
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 120px 20px 60px;
}

/* 동적 배경 컨테이너 */
.works-hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden; /* 영역 밖으로 나가는 애니메이션 숨김 */
}

/* 오버레이 텍스트 (초대형 투명 윤곽선 글씨 - 무한 패럴랙스 느낌 애니메이션) */
.works-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-en);
    font-size: clamp(150px, 25vw, 400px); /* 텍스트 크기 대폭 확대 */
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.08); /* 선명도 증가 */
    white-space: nowrap;
    opacity: 0;
    animation: fadeScaleIn 2s forwards, bgTextSlide 30s linear infinite alternate;
}

/* 글로우 스피어(원형 그라데이션) 효과 - 더 눈에 띄게 */
.glow-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.8; /* 투명도 높임 */
    mix-blend-mode: screen; /* 색상을 더 밝게 합성 */
    animation: floatingGlow 12s infinite alternate ease-in-out;
}
.glow-1 {
    width: 800px; /* 크기 1.5배 이상 확대 */
    height: 800px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.4) 0%, transparent 60%);
    top: -300px;
    left: -200px;
}
.glow-2 {
    width: 700px; /* 크기 확대 */
    height: 700px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.35) 0%, transparent 60%);
    bottom: -250px;
    right: -150px;
    animation-delay: -6s; /* 교차 애니메이션 */
    animation-duration: 15s;
}

.works-hero-inner {
    position: relative;
    z-index: 10;
    max-width: 800px;
}

.works-title {
    font-family: var(--font-en);
    font-weight: 900;
    font-size: 72px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin-bottom: 25px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5); /* 텍스트 가독성 향상 */
}

/* 타이틀 내부 일부 색상 강조 (선택적) */
.works-title::after {
    content: '.';
    color: var(--electric-blue);
}

.works-desc {
    font-size: 20px;
    color: #a1a1aa;
    line-height: 1.6;
    font-weight: 500;
    max-width: 600px;
    margin: 0 auto;
}

/* 부드러운 등장 애니메이션 */
.reveal-fade-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.delay-1 { animation-delay: 0.2s; }

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeScaleIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 텍스트가 서서히 좌우로 움직이는 애니메이션 */
@keyframes bgTextSlide {
    0% { transform: translate(-55%, -50%); }
    100% { transform: translate(-45%, -50%); }
}

/* 글로우 스피어가 크게 숨쉬며 크게 이동하는 애니메이션 */
@keyframes floatingGlow {
    0% { transform: translate(0, 0) scale(0.9); }
    50% { transform: translate(80px, 120px) scale(1.1); }
    100% { transform: translate(-60px, 90px) scale(0.85); }
}

.works-content {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 80px 40px 120px;
    min-height: 500px;
}

@media (max-width: 991px) {
    .works-hero {
        min-height: 380px;
        padding: 100px 20px 40px;
    }
    .works-title { font-size: 42px; margin-bottom: 20px; }
    .works-desc { font-size: 16px; }
    .glow-sphere { filter: blur(50px); }
    .glow-1 { width: 300px; height: 300px; top: -100px; left: -50px; }
    .glow-2 { width: 250px; height: 250px; bottom: -50px; right: -50px; }
    .works-content { padding: 50px 20px 80px; }
}