@charset "UTF-8";

/*
 * Version : 1.0
 * Date : 2024-07
 */


@font-face {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-weight: 400;
    font-style: normal;
}

:root {
    --font-color: #333;
    --sub-font-color: #516f67;
    --point-color: #20bf55;
    --color: pink;
    --blur-1-size: clamp(400px, 60vw, 60vw);
    --blur-2-size: clamp(300px, 40vw, 40vw);
    --blur-3-size: clamp(100px, 10vw, 10vw);
    --blur-amount: clamp(40px, 5vw, 90px);
    --size: clamp(10rem, 1rem + 40vmin, 30rem);
    --gap: calc(var(--size) / 14);
    --duration: 60s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
}

::selection {
    background: #20bf55;
    color: #e9e8fa !important;
}

::-moz-selection {
    background: #9891f9;
    color: #e9e8fa !important;
}

* {box-sizing: border-box;}

html, body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    line-height: 1.3;
    font-size: 62.5%;
    color: var( --font-color);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* 이미지 리사이징 화질 개선 이미지 렌더링 */
img[src$=".gif"], img[src$=".png"] {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:  -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

div {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

.fs-h1 {font-size: 4.8rem;}
.fs-h2 {font-size: 4rem;}
.fs-h3 {font-size: 3rem;}
.fs-h4 {font-size: 2rem;}
.fs-18 {font-size: 1.8rem;}
.fs-16 {font-size: 1.6rem;}
.fs-15 {font-size: 1.5rem;}
.fs-14 {font-size: 1.4rem;}
.fs-13 {font-size: 1.3rem;}

.mt40 {margin-top: 4rem !important;}
.mb20 {margin-bottom: 2rem !important;}
.mb40 {margin-bottom: 4rem !important;}
.mb60 {margin-bottom: 6rem !important;}
.mb80 {margin-bottom: 8rem !important;}


.container-md{
    width: 90%;
    /*max-width: 1300px;*/
    margin: 0 auto;
}


/* =====================================================
   UNDERWATER CAUSTICS EFFECT
   Deep Water + Soft Light + Subtle Sparkles
===================================================== */


/* 메인 영역 기본 설정 */

.main__wrap {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}


/* 배경 효과 전체 영역 */

.caustics-effect {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(22, 71, 116, 0.38) 0%,
            rgba(5, 19, 38, 0.7) 42%,
            #020914 100%
        );
}


/* 물속 빛의 굴절 패턴 */

.caustics-layer {
    position: absolute;
    inset: -25%;
    opacity: 0.48;
    mix-blend-mode: screen;
    filter: blur(1px);
    will-change: transform, background-position;
}


/* 첫 번째 빛 패턴 */

.caustics-layer--one {
    background:
        radial-gradient(
            ellipse at 20% 30%,
            transparent 0%,
            rgba(103, 190, 255, 0.12) 12%,
            transparent 28%
        ),
        radial-gradient(
            ellipse at 70% 20%,
            transparent 0%,
            rgba(113, 202, 255, 0.18) 10%,
            transparent 25%
        ),
        radial-gradient(
            ellipse at 45% 80%,
            transparent 0%,
            rgba(60, 154, 226, 0.15) 12%,
            transparent 30%
        );

    background-size:
        55% 65%,
        70% 75%,
        60% 60%;

    animation:
        causticsFlowOne 24s ease-in-out infinite alternate;
}


/* 두 번째 빛 패턴 */

.caustics-layer--two {
    opacity: 0.35;
    transform: rotate(18deg) scale(1.15);

    background:
        radial-gradient(
            ellipse at 30% 45%,
            transparent 0%,
            rgba(147, 220, 255, 0.18) 8%,
            transparent 24%
        ),
        radial-gradient(
            ellipse at 80% 65%,
            transparent 0%,
            rgba(81, 163, 235, 0.2) 10%,
            transparent 28%
        ),
        radial-gradient(
            ellipse at 55% 10%,
            transparent 0%,
            rgba(161, 226, 255, 0.12) 8%,
            transparent 22%
        );

    background-size:
        65% 80%,
        75% 65%,
        50% 70%;

    animation:
        causticsFlowTwo 31s ease-in-out infinite alternate;
}


/* 세 번째 빛 패턴 */

.caustics-layer--three {
    opacity: 0.22;
    transform: rotate(-15deg) scale(1.3);
    filter: blur(4px);

    background:
        radial-gradient(
            ellipse at 15% 75%,
            rgba(77, 166, 240, 0.22) 0%,
            transparent 32%
        ),
        radial-gradient(
            ellipse at 90% 30%,
            rgba(93, 184, 255, 0.18) 0%,
            transparent 35%
        );

    animation:
        causticsFlowThree 38s ease-in-out infinite alternate;
}


/* 중앙의 은은한 빛 */

.caustics-glow {
    position: absolute;
    width: 75%;
    height: 60%;
    top: -25%;
    left: 12.5%;

    background:
        radial-gradient(
            ellipse,
            rgba(107, 197, 255, 0.17) 0%,
            rgba(38, 104, 166, 0.08) 35%,
            transparent 72%
        );

    filter: blur(35px);
    opacity: 0.75;

    animation:
        causticsGlowMove 18s ease-in-out infinite alternate;
}


/* 반짝임 영역 */

.caustics-sparkles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}


/* 반짝임 입자 기본 */

.caustics-sparkle {
    position: absolute;
    display: block;

    width: var(--sparkle-size);
    height: var(--sparkle-size);

    border-radius: 50%;

    background: rgba(220, 245, 255, 0.95);

    box-shadow:
        0 0 5px rgba(150, 220, 255, 0.85),
        0 0 12px rgba(100, 190, 255, 0.5);

    opacity: 0;

    animation:
        sparkleFloat var(--sparkle-duration) ease-in-out
        var(--sparkle-delay) infinite;
}


/* 일부 입자는 십자형 빛으로 표현 */

.caustics-sparkle::before,
.caustics-sparkle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;

    width: 1px;
    height: 0;

    background: rgba(210, 242, 255, 0.8);

    transform: translate(-50%, -50%);
    transition: height 0.3s ease;
}

.caustics-sparkle::after {
    width: 0;
    height: 1px;
}


/* 애니메이션 */

@keyframes causticsFlowOne {

    0% {
        transform: translate3d(-3%, -2%, 0) scale(1);
        background-position:
            0% 0%,
            50% 20%,
            20% 60%;
    }

    100% {
        transform: translate3d(4%, 3%, 0) scale(1.08);
        background-position:
            40% 30%,
            10% 50%,
            70% 20%;
    }

}


@keyframes causticsFlowTwo {

    0% {
        transform: rotate(18deg) translate3d(2%, -3%, 0) scale(1.15);
        background-position:
            20% 10%,
            80% 40%,
            40% 70%;
    }

    100% {
        transform: rotate(22deg) translate3d(-4%, 4%, 0) scale(1.25);
        background-position:
            60% 50%,
            20% 80%,
            70% 10%;
    }

}


@keyframes causticsFlowThree {

    0% {
        transform: rotate(-15deg) translate3d(-3%, 2%, 0) scale(1.3);
    }

    100% {
        transform: rotate(-8deg) translate3d(5%, -4%, 0) scale(1.4);
    }

}


@keyframes causticsGlowMove {

    0% {
        transform: translate3d(-8%, -5%, 0) scale(0.9);
        opacity: 0.4;
    }

    100% {
        transform: translate3d(12%, 12%, 0) scale(1.15);
        opacity: 0.85;
    }

}


@keyframes sparkleFloat {

    0% {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(0.4);
    }

    25% {
        opacity: 0.35;
    }

    50% {
        opacity: 0.9;
        transform: translate3d(0, -5px, 0) scale(1);
    }

    70% {
        opacity: 0.25;
    }

    100% {
        opacity: 0;
        transform: translate3d(8px, -24px, 0) scale(0.35);
    }

}


/* 모바일 성능 및 효과 조정 */

@media (max-width: 768px) {

    .caustics-layer {
        opacity: 0.35;
    }

    .caustics-layer--two {
        opacity: 0.22;
    }

    .caustics-layer--three {
        opacity: 0.15;
    }

    .caustics-glow {
        filter: blur(25px);
    }

    .caustics-sparkle {
        box-shadow:
            0 0 4px rgba(150, 220, 255, 0.7),
            0 0 8px rgba(100, 190, 255, 0.35);
    }

}


/* 모션 감소 설정을 사용하는 방문자 배려 */

@media (prefers-reduced-motion: reduce) {

    .caustics-layer,
    .caustics-glow,
    .caustics-sparkle {
        animation: none;
    }

}



/* =====================================================
   UNDERWATER CAUSTICS
   KMFIX PORTFOLIO - MAIN BACKGROUND
===================================================== */


/* 메인 영역 */

section.main__wrap {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #020914;
}


/* 메인 텍스트가 빛 효과 위에 표시되도록 설정 */

section.main__wrap h1,
section.main__wrap p {
    position: relative;
    z-index: 2;
	color:#fff;
}


/* 전체 Caustics 배경 */

.caustics-effect {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(33, 103, 160, 0.45) 0%,
            rgba(8, 35, 63, 0.55) 38%,
            #020914 100%
        );
}


/* 물속 빛의 굴절 패턴 공통 */

.caustics-layer {
    position: absolute;
    inset: -30%;

    opacity: 0.65;
    mix-blend-mode: screen;

    filter: blur(2px);

    will-change: transform, background-position;
}


/* 첫 번째 Caustics */

.caustics-layer--one {
    background:
        radial-gradient(
            ellipse at 20% 30%,
            transparent 0%,
            rgba(104, 199, 255, 0.45) 5%,
            transparent 20%
        ),
        radial-gradient(
            ellipse at 75% 25%,
            transparent 0%,
            rgba(96, 190, 255, 0.38) 6%,
            transparent 23%
        ),
        radial-gradient(
            ellipse at 45% 80%,
            transparent 0%,
            rgba(61, 150, 235, 0.4) 5%,
            transparent 22%
        );

    background-size:
        45% 55%,
        55% 65%,
        50% 60%;

    animation: causticsMoveOne 24s ease-in-out infinite alternate;
}


/* 두 번째 Caustics */

.caustics-layer--two {
    opacity: 0.42;
    transform: rotate(20deg) scale(1.2);

    background:
        radial-gradient(
            ellipse at 30% 45%,
            transparent 0%,
            rgba(170, 226, 255, 0.4) 5%,
            transparent 20%
        ),
        radial-gradient(
            ellipse at 80% 65%,
            transparent 0%,
            rgba(72, 167, 244, 0.4) 6%,
            transparent 24%
        ),
        radial-gradient(
            ellipse at 55% 10%,
            transparent 0%,
            rgba(125, 213, 255, 0.3) 5%,
            transparent 20%
        );

    background-size:
        60% 70%,
        65% 60%,
        50% 60%;

    animation: causticsMoveTwo 32s ease-in-out infinite alternate;
}


/* 세 번째 부드러운 빛 */

.caustics-layer--three {
    opacity: 0.28;
    transform: rotate(-15deg) scale(1.35);
    filter: blur(8px);

    background:
        radial-gradient(
            ellipse at 15% 75%,
            rgba(71, 168, 245, 0.45) 0%,
            transparent 30%
        ),
        radial-gradient(
            ellipse at 90% 30%,
            rgba(92, 190, 255, 0.4) 0%,
            transparent 32%
        );

    animation: causticsMoveThree 40s ease-in-out infinite alternate;
}


/* 중앙 광원 */

.caustics-glow {
    position: absolute;

    width: 80%;
    height: 70%;

    top: -25%;
    left: 10%;

    background:
        radial-gradient(
            ellipse,
            rgba(126, 211, 255, 0.28) 0%,
            rgba(42, 120, 189, 0.12) 35%,
            transparent 72%
        );

    filter: blur(45px);
    opacity: 0.8;

    animation: causticsGlowMove 20s ease-in-out infinite alternate;
}


/* 반짝임 영역 */

.caustics-sparkles {
    position: absolute;
    inset: 0;

    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}


/* 반짝임 입자 */

.caustics-sparkle {
    position: absolute;

    display: block;

    width: var(--sparkle-size);
    height: var(--sparkle-size);

    border-radius: 50%;

    background: rgba(220, 246, 255, 0.95);

    box-shadow:
        0 0 5px rgba(175, 225, 255, 0.9),
        0 0 14px rgba(105, 190, 255, 0.6);

    opacity: 0;

    animation:
        sparkleFloat var(--sparkle-duration)
        ease-in-out var(--sparkle-delay)
        infinite;
}


/* 강조 반짝임 */

.caustics-sparkle--bright::before,
.caustics-sparkle--bright::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background: rgba(220, 246, 255, 0.8);
}


/* 세로 빛 */

.caustics-sparkle--bright::before {
    width: 1px;
    height: 18px;
}


/* 가로 빛 */

.caustics-sparkle--bright::after {
    width: 18px;
    height: 1px;
}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes causticsMoveOne {

    0% {
        transform: translate3d(-4%, -3%, 0) scale(1);
        background-position:
            0% 0%,
            50% 20%,
            20% 60%;
    }

    100% {
        transform: translate3d(4%, 3%, 0) scale(1.12);
        background-position:
            40% 30%,
            10% 50%,
            70% 20%;
    }

}


@keyframes causticsMoveTwo {

    0% {
        transform: rotate(20deg) translate3d(2%, -3%, 0) scale(1.2);
        background-position:
            20% 10%,
            80% 40%,
            40% 70%;
    }

    100% {
        transform: rotate(25deg) translate3d(-4%, 4%, 0) scale(1.3);
        background-position:
            60% 50%,
            20% 80%,
            70% 10%;
    }

}


@keyframes causticsMoveThree {

    0% {
        transform: rotate(-15deg) translate3d(-3%, 2%, 0) scale(1.35);
    }

    100% {
        transform: rotate(-8deg) translate3d(5%, -4%, 0) scale(1.45);
    }

}


@keyframes causticsGlowMove {

    0% {
        transform: translate3d(-8%, -5%, 0) scale(0.9);
        opacity: 0.4;
    }

    100% {
        transform: translate3d(12%, 12%, 0) scale(1.15);
        opacity: 0.85;
    }

}


@keyframes sparkleFloat {

    0% {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(0.4);
    }

    25% {
        opacity: 0.35;
    }

    50% {
        opacity: 0.9;
        transform: translate3d(0, -5px, 0) scale(1);
    }

    70% {
        opacity: 0.25;
    }

    100% {
        opacity: 0;
        transform: translate3d(8px, -24px, 0) scale(0.35);
    }

}


/* 모바일 */

@media screen and (max-width: 768px) {

    .caustics-layer {
        opacity: 0.42;
    }

    .caustics-layer--two {
        opacity: 0.28;
    }

    .caustics-layer--three {
        opacity: 0.18;
    }

    .caustics-glow {
        filter: blur(30px);
    }

}


/* 모션 감소 환경 */

@media (prefers-reduced-motion: reduce) {

    .caustics-layer,
    .caustics-glow,
    .caustics-sparkle {
        animation: none;
    }

}