/* css/visual.css */
.visual {
    padding-top: 80px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow-x: clip; /* 모바일/PC 내부 세로 스크롤 생성 방지 */
}

@keyframes slide-police {
    0% { background-position: 0 0; }
    100% { background-position: calc(0px - var(--visual-line-tile-width)) 0; }
}

.visual__line {
    --visual-line-tile-width: 2000px;
    position: absolute;
    z-index: calc(var(--z-decoration) + 1);
    width: 200%;
    height: 110px;
    left: -50%;
    background-repeat: repeat-x;
    background-size: var(--visual-line-tile-width) 100%; /* 2000:110 원본 비율과 반복 주기를 함께 유지 */
}

.visual__line--main {
    bottom: 8%;
    transform: rotate(4deg);
    background-image: url('../images/hero/line_police_main.png');
    animation: slide-police 35s linear infinite;
}

.visual__line--sub {
    bottom: 6%;
    transform: rotate(-1deg);
    background-image: url('../images/hero/line_police_sub.png');
    animation: slide-police 40s linear infinite reverse;
}

.visual__inner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.visual__object {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-top: 30px;
}

.visual__folder {
    width: 100%;
    position: relative;
    z-index: var(--z-paper);
}

.visual__paper-note {
    position: absolute;
    top: -6%;
    right: 4%;
    width: 67%;
    transform: rotate(2deg);
    z-index: calc(var(--z-paper) - 1);
}

.visual__text {
    position: absolute;
    top: 53%;
    left: 30%;
    transform: translateY(-50%);
    z-index: var(--z-content);
    text-align: left;
    width: 45%;
}

.visual__title {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-visual-title);
    margin-bottom: 8px;
    letter-spacing: 0px;
    background-image: url('../images/hero/texture_title_navy.png');
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.visual__divider {
    width: 450px;
    max-width: 100%;
    height: 1px;
    background-color: var(--color-line-blue-soft);
    margin: 0 auto 28px;
}

.visual__copy-en {
    font-family: var(--font-typewriter);
    font-size: var(--font-size-visual-copy-en);
    color: var(--color-text-strong);
    margin-bottom: 45px;
}

.visual__copy-ko {
    font-family: var(--font-display-ko), var(--font-sans);
    font-size: var(--font-size-visual-copy-ko);
    color: var(--color-text-lead);
    line-height: 1.8;
}

.visual__decoration {
    position: absolute;
    z-index: var(--z-decoration);
}

.visual__decoration--portfolio-label {
    top: 6%;
    left: 4%;
    width: 22%;
    transform: rotate(-1deg);
}

.visual__decoration--stamp-secret {
    top: 11%;
    left: 17%;
    width: 25%;
    transform: rotate(0deg);
}

.visual__decoration--polaroid {
    top: 17%;
    left: -5%;
    width: 29%;
    transform: rotate(-9deg);
}

.visual__decoration--case-label {
    bottom: 17%;
    left: -4%;
    width: 18%;
    transform: rotate(-8deg);
}

.visual__decoration--memo {
    top: 6%;
    right: -3%;
    width: 24%;
    transform: rotate(0deg);
}

.visual__decoration--stamp-evidence {
    bottom: 5%;
    right: 6%;
    width: 18%;
    transform: rotate(-15deg);
    opacity: 0.88;
}