@font-face {
    font-family: "ReadexPro";
    src: url("../../font/ReadexPro.ttf");
}

html, body {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif ;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 自定义滚动条 */
.scroll-custom {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #f4f7fb white; /* Firefox */
}

/* Chrome/Safari */
.scroll-custom::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scroll-custom::-webkit-scrollbar-track {
    background: white; /* track */
}

.scroll-custom::-webkit-scrollbar-thumb {
    background: white; /* thumb */
    border-radius: 4px;
}

.scroll-custom::-webkit-scrollbar-thumb:hover {
    background: #f4f7fb; /* hover 状态 */
}

.h5-semibold {
    font-weight: 600;
}

.h4-semibold {
    font-weight: 600;
}

.h3-semibold {
    font-weight: 600;
}

.h2-semibold {
    font-weight: 600;
}

.h1-semibold {
    font-weight: 600;
}

.body4-medium {
    font-weight: 500;
}

.body3-medium {
    font-weight: 500;
}

.body2-medium {
    font-weight: 500;
}

.body1-medium {
    font-weight: 500;
}

/* ---------------------------
 * Eye 模块：基于 figma.json 还原（圆圈与箭头）
 * 对应：Frame 18 / Group 72 / Polygon 7
 * --------------------------- */
.kom-eye-pc {
    position: relative;
    overflow: hidden;
}

/* PC：右侧露脸图层（替代背景图方式） */
.kom-eye-pc-img-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.kom-eye-pc-img {
    position: absolute;
    right: -6%;
    top: 0;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: cover;
}

.kom-eye-pc-content {
    position: relative;
    z-index: 2;
}

/* 图片切换动画 */
.kom-eye-main-img {
    transition: opacity 220ms ease;
    will-change: opacity;
}

.kom-eye-main-img--fadeout {
    opacity: 0;
}

/* 基础容器：不拦截其它区域点击，但子元素可点击 */
.kom-eye-deco {
    position: absolute;
    z-index: 60;
    pointer-events: none;
    user-select: none;
    --center-border-color: rgba(175, 217, 250, 1);
}

/* 静态中心底座：位置绝对不动 */
.kom-eye-deco__center-frame {
    position: absolute;
    left: 0%;
    top: 41.35%;
    width: 64.94%;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    border: clamp(3px, 0.35vw, 8px) solid var(--center-border-color);
    pointer-events: none;
    z-index: 5;
    transition: border-color 0.4s ease;
    overflow: hidden;
}

.kom-eye-deco__center-img {
    position: absolute;
    inset: 0;
    background-image: var(--kom-eye-img);
    background-repeat: no-repeat;
    transition: opacity 0.3s ease;
    will-change: opacity;
}

.kom-eye-deco--pc .kom-eye-deco__center-img {
    background-size: 180%;
    background-position: 70% 35%;
}

.kom-eye-deco--mobile .kom-eye-deco__center-img {
    background-size: 200%;
    background-position: 65% 35%;
}

.kom-eye-deco--mobile .kom-eye-deco__center-frame {
    left: 0%;
    top: 41.8%;
    width: 64.9%;
}

.kom-eye-deco button {
    pointer-events: auto;
    cursor: pointer;
    border: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

/* PC：位置/尺寸使用 Figma 相对比例（基于 Frame 18） */
.kom-eye-deco--pc {
    left: 42.72%;
    top: 4.36%;
    width: 13.71%;
    height: 91.42%;
}

/* 移动：根据 Figma (Group 2053140228 / Group 72) 比例还原 */
.kom-eye-deco--mobile {
    left: 6.39%;
    top: 3.10%;
    width: 26.88%;
    height: 82.04%;
}

.kom-eye-deco__dot {
    position: absolute;
    width: 34.6%;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
}

.kom-eye-deco__dot--pink {
    background: rgba(250, 195, 175, 1);
    opacity: 0.8;
    --dot-color: rgba(250, 195, 175, 1);
}

.kom-eye-deco__dot--green {
    background: rgba(158, 214, 167, 1);
    opacity: 0.8;
    --dot-color: rgba(158, 214, 167, 1);
}

.kom-eye-deco__dot--yellow {
    background: rgba(250, 225, 175, 1);
    opacity: 0.8;
    --dot-color: rgba(250, 225, 175, 1);
}

.kom-eye-deco__dot--blue {
    background: rgba(175, 217, 250, 1);
    opacity: 0.8;
    --dot-color: rgba(175, 217, 250, 1);
}

.kom-eye-deco__dot--purple {
    background: rgba(214, 158, 214, 1);
    opacity: 0.8;
    --dot-color: rgba(214, 158, 214, 1);
}

.kom-eye-deco__zoom {
    position: absolute;
    width: 64.9%;
    aspect-ratio: 1 / 1;
    border-radius: 9999px;
    background-repeat: no-repeat;
    /* transition 由 GSAP 接管 */
}

.kom-eye-deco__item[data-pos="2"] {
    opacity: 0 !important;
    visibility: hidden;
    cursor: default !important;
}

/* PC Slots */
.kom-eye-deco--pc [data-pos="0"] { left: 65.37%; top: 0%; width: 34.63%; }
.kom-eye-deco--pc [data-pos="1"] { left: 30.74%; top: 20.39%; width: 34.63%; }
.kom-eye-deco--pc [data-pos="2"] { left: 0%; top: 41.35%; width: 64.94%; }
.kom-eye-deco--pc [data-pos="3"] { left: 30.74%; top: 70.39%; width: 34.63%; }
.kom-eye-deco--pc [data-pos="4"] { left: 65.37%; top: 90.79%; width: 34.63%; }

/* Mobile Slots: 基于 Figma Group 72 子节点相对比例 */
.kom-eye-deco--mobile [data-pos="0"] { left: 65.4%; top: 0%; width: 34.6%; }
.kom-eye-deco--mobile [data-pos="1"] { left: 30.7%; top: 20.6%; width: 34.6%; }
.kom-eye-deco--mobile [data-pos="2"] { left: 0%; top: 41.8%; width: 64.9%; }
.kom-eye-deco--mobile [data-pos="3"] { left: 30.7%; top: 70.6%; width: 34.6%; }
.kom-eye-deco--mobile [data-pos="4"] { left: 65.4%; top: 91.3%; width: 34.6%; }

.kom-eye-deco__zoom--pc {
    background-size: 180%;
    background-position: 70% 35%;
}

.kom-eye-deco__zoom--mobile {
    width: 64.9%;
    border-width: clamp(2px, 0.5vw, 6px);
    background-size: 200%;
    background-position: 65% 35%;
}

.kom-eye-deco__arrow {
    position: absolute;
    width: 14.72%;
    aspect-ratio: 45.333 / 57.333;
    background: var(--center-border-color, rgba(175, 217, 250, 1));
    transform: rotate(90deg);
    transform-origin: center;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    transition: background-color 0.4s ease;
}

.kom-eye-deco__arrow--pc {
    left: 75.04%;
    top: 47.54%;
}

.kom-eye-deco__arrow--mobile {
    left: 75%;
    top: 47.6%;
}

.kom-eye-deco__item {
    will-change: left, top, width, height;
}

/* 下载按钮图标颜色控制 */
.group:hover img {
    filter: brightness(0) invert(1) !important;
}
.group img {
    transition: none !important;
}