* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: "Bahnschrift",sans-serif;
}
:root {
    --bg-color: #111111;
    --second-bg-color: #151515;
    --text-color: white;
    --main-color: #F26722;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
}
body{
    background: var(--bg-color);
    color: var(--text-color);
}
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 9%;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10000;
    opacity: 0.5;
   
}
.logo{
    font-size: 3rem;
    opacity: 0.8; 
    color: var(--text-color);
    font-weight:  800;
    cursor: pointer;
    transition: 0.3s ease-in-out;

}
.logo:hover{
    transform: scale(1.1);
    opacity: 1; /* 투명도 복구 */
}
.navber a{
    font-family: "Bahnschrift",sans-serif;
    font-size: 1.7rem;
    color: white;
    margin-left: 4rem;
    font-weight: 500;
    transition: 0.3s ease-in-out;
    border-bottom: 3px solid transparent;
    opacity: 0.3;
}

.navber a:hover, 
.navber a.active{
    color: var(--main-color);
    border-bottom: 3px solid var(--main-color);
    opacity: 0.7; 
}
#menu-icon{
    font-size: 5.6rem;
    color: var(--main-color);
    display: none;
}
section{
    min-height: 100vh;
    padding: 10rem 9% 10rem;

}
.home{
    padding-top: 0; /* 영상은 천장부터 나와야 하므로 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    z-index: -100;
}
/* 비디오 배경 스타일 */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 콘텐츠 뒤로 보내기 */
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 영상을 꽉 차게 조절 */
}

/* 영상이 너무 밝아 글자가 안 보일 때를 대비한 틴트 효과 */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 0.4를 조절해 밝기 조절 */
/* 애니메이션 적용: 10초 동안 실행, 마지막 상태(투명) 유지 */
    animation: reveal-video 15s forwards; 
    z-index: 1; 
}

/* 2. 특정 초 이후에 투명해지는 키프레임 */
@keyframes reveal-video {
    0%, 70% { 
        background: rgba(0, 0, 0, 0.4); 
    }
    100% { 
        background: rgba(0, 0, 0, 0); /* 완전 투명 (데모릴 선명하게) */
    }

}

.home-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-top: 3rem;
    z-index: 10;
}
span{
    color: var(--main-color);
}
.logo span{
    color: var(--main-color);
}
.home-content h3{
    margin-bottom: 2rem;
    margin-top: 1rem;
    font-size: 3.5rem;
}
.home-content h1{
    font-size: 15rem;
    font-weight: 700;
    margin-top: 6.05rem;
    line-height: 1;
    /* [핵심] 윗글자의 높이를 강제로 고정하고 아래 여백을 박제합니다 */
    display: block; 
    height: 15rem;   /* font-size와 동일하게 맞춰서 박스 크기 고정 */
    margin-bottom: 3rem !important;
    letter-spacing: -10x; /* 마이너스 값을 주면 자간이 좁아집니다 */
    color: var(--text-color);
    cursor: pointer;


    
    /* 핵심: 평소 투명도와 부드러운 전환 효과 */
    opacity: 0.3; 
    transition: 0.5s ease-in-out; 
    
    /* 은은한 기본 쉐도우 (선택사항) */
    text-shadow: 0 0 10px rgba(247, 149, 106, 0.1);
/* [핵심 추가] 10초 동안 실행 후 마지막 투명도(0) 유지 */
    animation: fade-out-title 7s forwards;
}

/* 이름이 사라지는 타이밍 설정 */
@keyframes fade-out-title {
    0%, 90% { 
        opacity: 0.3; /* 처음부터 7초까지는 은은하게 유지 */
    }
    100% { 
        opacity: 0;   /* 10초가 되면 완전히 실종 */
        /*visibility: hidden;*/ /* 마우스 클릭 등이 걸리지 않게 완전히 숨김 */
    }

}

/* 2. 마우스를 올렸을 때 (Hover) */
.home-content h1:hover {
/* [필수] 애니메이션이 마지막 프레임에 고정된 것을 일시적으로 해제 */
    animation: none;
    opacity: 0.5; /* 투명도 복구 */
    
    /* 강한 빛 번짐(Glow) 효과 추가 */
    /* 가로 세로 번짐정도 색상 순서입니다 */
    text-shadow: 0 0 10px var(rgba(0, 0, 0, 0.4)), 
                 0 0 20px var(rgba(0, 0, 0, 0.4)); 
    
    transform: scale(1.001); /* 아주 살짝 커지는 효과로 입체감 부여 */
    transition: opacity 0.5s ease; /* 마우스가 떠날 때는 0.5초 동안 스르륵 사라짐 */
}

.home-img{
    border-radius: 50%;
}
.home-img img{
    position: relative;
    top: 0rem;
    width: 23vW;
    border-radius: 50%;
    box-shadow: 0 0 25px var(--main-color);
    cursor: pointer;
    transition: 0.4s ease-in-out;
    opacity: 0.2;
}

.home-content p{
    font-size: 1.5rem;
    font-weight: 500;
    max-width: 1000px 
}
.social-icons a{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4.5rem;
    height: 4.5rem;
    background: transparent;
    border: 0.2rem solid var(--main-color);
    font-size: 2.5rem;
    border-radius: 50%;
    color: var(--main-color);
    margin: 3rem 1.5rem 3rem 0;
    transition: 0.3s ease-in-out;
    opacity: 0.3;
}
.social-icons a:hover{
    color: white;
    transform: scale(1.3)translateY(-5px);
    box-shadow: 0 0 25px var(--main-color);
    background-color: var(--main-color);
    opacity: 0.7;
}
.btn{
    display: inline-block;
    padding: 1rem 2.8rem;
    background: var(--main-color);
    border-radius: 4rem;
    font-size: 1.6rem;
    color: white;
    border: 2px solid transparent;
    letter-spacing: 0.1rem;
    font-weight: 600;
    transition: 0.3s ease-in-out;
    cursor: pointer
    ;
}
.btn:hover{
    transform: scale(1.05);
    box-shadow: 0 0 25px var(--main-color);
}
.text-animation {
    font-size: 90px;
    font-weight: 600;
    /*min-width: 10px;*/
    display: flex; /* 부모를 flex로 바꿔서 자식(span)이 중앙에 오게 조절 */
    /*justify-content: center;*/
    margin-left: -400px; /* 여기서 원하는 만큼 딱 한 칸 띄우기 */
    opacity: 0.5;
    align-items: baseline; /* 글자의 바닥 라인을 기준으로 정렬 */
}

.text-animation span {
    position: relative;
    color: var(--main-color);
    white-space: nowrap;
    display: inline-flex; /* inline-block 대신 이걸 쓰면 글자 길이에 딱 맞게 줄어듭니다 */
    width: 0;            /* 시작은 0 */
    overflow: hidden;      /* 핵심: 너비가 줄어들면 글자가 안 보임 */
    vertical-align: bottom; /* 커서와 글자 높이 맞춤 */
        /* [핵심 2] 위치 고정 (h1을 밀지 않도록) */
    position: relative; 
    margin-top: -3rem;     /* h1과의 간격 고정 */
    
    /* 여기서 직접 너비를 조절하는 애니메이션을 겁니다 */
    animation: typing-width 150s steps(14) infinite; 
}

.text-animation span::before {
    content: 'FX_Artist'; /* 원하는 문구로 유지 */
    color: var(--main-color);
    font-size: 88px;
    height: 100%;
    margin-left: 10px; /* 여기서 원하는 만큼 딱 한 칸 띄우기 */
    animation: words 150s infinite;
    opacity: 0.8;
}

/* ::after는 이제 '박스'가 아니라 '커서(선)' 역할만 합니다 */
.text-animation span::after {
    content: "";
    position: absolute;
    right: 0;
    width: 3px;           /* 커서 두께 */
    height: 100%;
    background-color: var(--text-color); /* 커서 색상을 메인 컬러로 */
    animation: cursor 0.6s infinite;
    opacity: 0.2;
}

@keyframes typing-width {
    /* 0%부터 이미 꽉 찬 상태로 시작 */
    0%  { width: 0; } 
    0.5% { width: 100%; }
    3.75% { width: 100%; }    
    5% { width: 0; }           

    /* 이후 루프 동일 */
    5.5% { width: 100%; }        
    8.75% { width: 100%; }        
    10% { width: 0; }           

    10.5% { width: 100%; }
    13.75% { width: 100%; }
    15% { width: 0; }

    15.5% { width: 100%; }
    18.75% { width: 100%; }
    20% { width: 0; }

    20.5% { width: 100%; }
    23.75% { width: 100%; }
    25% {width: 0;  }
}

@keyframes words {
    /* 시작(0%)부터 20%까지 첫 단어를 확실히 할당 */
    0%, 5% { content: ' FX Artist '; }
    5.025%, 10% { content: " FX TD? "; }
    10.025%, 15% { content: " VFX Artist? "; }
    15.025%, 20% { content: " Enjoy!"; }
    20.025%, 25% { content: " "; }


}
    .about{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10rem;
        background: var(--second-bg-color);
        color: white;
    }
    .about-img{
        border-radius: 50%;
    }
    .about-img img{
        position: relative;
        width: 12vw;
        border-radius: 50%;
        box-shadow: 0 0 25px var(--main-color);
        top: 1rem;
        cursor: pointer;
        transition: 0.4s ease-in-out;
    }
    .about-img img:hover{
        box-shadow: 0 0 50px var(--main-color),
                    0 0 100px var(--main-color);
    }
    .heading{
        text-align: center;
        font-size: 8rem;
    }
    .about-content h2{
        text-align: left;
        line-height: 1.5;
    }
    .about-content h3{
        font-size: 2.6rem;
    }
    .about-content p{
        font-size: 1.6rem;
        margin: 2rem 0 3rem;
    }

    ::-webkit-scrollbar-thumb{
        background-color: var(--main-color);
    }
    ::-webkit-scrollbar-track{
        background-color: var(--bg-color);
        width: 50px;
    }
.services{
    background: var(--bg-color);
    color: white;
}
.services h2{
    margin-bottom: 5rem;
    color: white;
}
.services-container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: center;
    gap: 2.5rem;
}
.service-box{
    background-color: var(--main-color);
    color: black;
    height: 250px;
    border-radius: 3rem;
    cursor: pointer;
    transition: 0.3 ease-in-out
}
.service-box:hover{
    background: white;
    color: var(--main-color);
    transform: scale(1.03);
}
.service-box .service-info{
 display: flex;
 flex-direction: column;
 text-align: left;
 max-height: 200px;
 justify-content: center;
 align-items: baseline;
 padding: 5em;}
.service-info h4{
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.service-info p{
    font-size: 1.6rem;
    font-weight: 400;
    max-height: 100px;
    margin: auto;
}

/* 1. 전체 섹션을 중앙 정렬 기지로 만들기 */
.vex-cheatsheet {
    padding: 10rem 9%;
    background: var(--bg-color);
    display: flex;
    flex-direction: column;
    align-items: center; /* 가로 중앙 */
    text-align: center;
}

/* 2. iframe을 감싸는 컨테이너 굳히기 */
.doc-container {
    width: 100%;
    max-width: 1100px;  /* 너무 넓으면 가독성이 떨어지므로 가이드라인 설정 */
    margin-top: 4rem;
    border: 2px solid var(--main-color);
    border-radius: 15px;
    overflow: hidden;   /* 내부 iframe의 각진 모서리를 둥글게 깎음 */
    box-shadow: 0 0 25px rgba(242, 103, 34, 0.2);
    
    /* 중앙 정렬을 위한 안전장치 */
    margin-left: auto;
    margin-right: auto;
}

/* 3. iframe 내부 디테일 */
.doc-container iframe {
    display: block;     /* 하단 미세 공백 제거 */
    border: none;
    /* 만약 문서 위쪽 공백을 더 줄이고 싶다면 
       이전 답변의 transform 기법을 여기 섞어도 됩니다. */
}


.contact{
    background-color: var(--second-bg-color);
}
.contact h2{
    margin-bottom: 3rem;
    color: white;
}
.contact form{
    max-width: 70rem;
    margin: 1rem auto;
    text-align: center;
    margin-bottom: 3rem;
}
.contact form.input-box{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.contact form .input-box input,
.contact form textarea{
    width: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color: var(--text-color);
    background: var(--bg-color);
    border-radius: 0.8rem;
    border: 2px solid var(--main-color);
    margin: 1rem 0;
    resize: none;
}
.contact form .bt n{
    margin-top: 2rem;
}
.footer{
    position: relative;
    bottom: 0;
    width: 100%;
    padding: 40px;
    background-color: var(--bg-color);
}
.footer .social{
    text-align: center;
    padding-bottom: 25px;
    color: var(--main-color);
}
.footer .social a{
    font-size: 25px;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    width: 42px;
    height: 42px;
    line-height: 42px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    margin: 0 10px;
    transition: 0.3s ease-in-out;

}
.footer .social a:hover{
    color: white;
    transform: scale(1.3)translateY(-5px);
    box-shadow: 0 0 25px var(--main-color);
    background-color: var(--main-color);
}
.footer ul{
    margin-top: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}
.footer ul li a{
    color: white;
    border-bottom: 3px solid transparent;
    transition: 0.3s ease-in-out;
}
.footer ul li a:hover{
    color: var(--main-color);
    border-bottom: 3px solid var(--main-color);
}
.footer ul li{
    display: inline-block;
    padding: 0 15px;
}
.footer.copyright{
    margin-top: 50px;
    text-align: center;
    font-size: 16px;
    color: white;
}
@media(max-width:1285px){
    html{
        font-size: 55%;
    }
    .services-container{
        padding-bottom: 7rem;
        grid-template-columns: repeat(2,1fr);
        margin: 0 5rem;
}
}
@media(max-width:991px){
    header{
        padding: 2rem 3%
    }
    section{
        padding: 10rem 3% 2rem;
    }
    .services{
        padding-bottom: 7rem;
    }
    .footer{
        padding: 2rem 3%;
    }
}
@media(max-width:895px){
    #menu-icon{
        display: block;
    }
    .navber {
        position: absolute;
        top: 100%; /* 헤더 바로 아래부터 시작 */
        right: -100%; /* 일단 화면 오른쪽 바깥으로 숨김 */
        width: 60%; /* 적당한 너비 */
        height: 100vh; /* 화면 끝까지 내려오게 */
        background: rgba(0, 0, 0, 0.9); /* 불투명하게 */
        backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column; /* 메뉴를 세로로 나열 */
        align-items: flex-start;
        padding: 3rem 5%;
        transition: 0.4s ease; /* 나타날 때 부드럽게 */
        border-left: 2px solid var(--main-color);
    }
    .navber.active{
        right: 0;
    }
    .navber a {
        display: block;
        margin: 1.5rem 0;
        font-size: 2.5rem; /* 모바일에서 누르기 편하게 키움 */
        opacity: 0.7;
    }

    /* 소셜 미디어 아이콘이 헤더에 있다면 모바일에서는 숨기거나 메뉴 안으로 넣기 */
    .social-icons {
        display: none; /* 일단 혼선을 줄이기 위해 모바일 헤더에선 숨김 추천 */
    }

    @media (max-width: 895px) {
    .text-animation {
        margin-top: 0; /* 모바일에서는 겹치지 않게 여백 초기화 */
        /* 모바일에서는 더 작게 보이고 싶다면 아래 한 줄 추가 */
        font-size: clamp(2.5rem, 10vw, 4rem); 
    }
    
    .home-content h1 {
        /* 이름 크기도 모바일용으로 축소 (이미 있다면 패스) */
        font-size: clamp(4rem, 15vw, 8rem);
        height: auto;
        margin-bottom: 1rem !important;
    }
}
    .home{
        flex-direction: column;
        margin: 5rem 4rem;
    }
    .home-content h3{
        font-size: 2.6rem;
    }
    .home-content h1{
        font-size: 8rem;
        margin-top: 3rem;
    }
    .home-content p{
        max-width: 600px;
        margin: 0 auto;
    }
    .home-img img{
        width: 56vw;
        margin-top: -2rem;
    }
    .about{
flex-direction: column-reverse;}
.about-content{
    margin: 0 2rem 4rem;
}
.about img{
    width: 52vw;
    margin-top: 1rem;
    margin-bottom: 3rem;
}
.services h2{
    margin-bottom: 3rem;
}
.services-container{
    grid-template-columns: repeat(1,1fr);
}

}