/* 自定义 Tailwind 工具类 */
@layer utilities {
    .text-shadow {
        /* 轻微的阴影，确保在浅色背景视频上的可读性 */
        text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
}

/* 滚动评价墙样式 */
.scroller {
    /* 设置最大宽度，可以根据你的设计调整 */
    max-width: 100%;
}

.scroller-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem; /* 卡片之间的间距 */
    /* 关键：定义滚动动画 */
    animation: scroll 60s linear infinite;
}

/* 鼠标悬停时暂停动画 */
.scroller:hover .scroller-inner {
    animation-play-state: paused;
}

/* 定义单个卡片的样式 */
.testimonial-card {
    flex-shrink: 0; /* 防止卡片被压缩 */
    width: 380px; /* 定义卡片的固定宽度 */
    background-color: #F7FAFC; /* 对应 Tailwind 的 bg-gray-50 */
    border-radius: 0.75rem; /* 对应 Tailwind 的 rounded-xl */
    padding: 1.5rem; /* 对应 Tailwind 的 p-6 */
    transition: box-shadow 0.3s ease;
}
.testimonial-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 对应 Tailwind 的 shadow-lg */
}


/* 定义滚动的关键帧动画 */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        /*
         * 关键点: 移动的距离是内容宽度的一半
         * 因为我们在HTML中复制了一份内容
         */
        transform: translateX(-50%);
    }
}

/* style.css */

/*
  用于平滑展开/折叠动画的样式。
  我们使用 grid-template-rows 属性来实现一个从 0 到自适应高度的平滑过渡。
*/
.process-image-container {
    display: grid;
    grid-template-rows: 0fr; /* 默认行高为0，内容被隐藏 */
    transition: grid-template-rows 0.5s ease-in-out;
}

/*
  这是grid布局动画的辅助层。
  确保内容不会在过渡期间溢出。
*/
.process-image-container > div {
    overflow: hidden;
}

/*
  当容器拥有 .show 类时，将行高设为 1fr，
  使其平滑展开以适应内部内容的高度。
*/
.process-image-container.show {
    grid-template-rows: 1fr;
}

/*
  当按钮拥有 .active 类时，旋转其内部的 SVG 图标180度。
*/
.process-toggle-btn.active svg {
    transform: rotate(180deg);
}

/* --- "联系销售" 弹窗样式 --- */

/* 弹窗容器的默认状态：透明、不可见 */
.modal-container {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* 弹窗容器的激活状态：不透明、可见 */
.modal-container.modal-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* 弹窗内容区域在未激活时的状态：略微缩小 */
.modal-container .transform {
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

/* 弹窗内容区域在激活时的状态：恢复正常大小 */
.modal-container.modal-open .transform {
    transform: scale(1);
}

/* 通用弹出框的三角箭头样式 */
.tooltip-popup::after {
    content: '';
    position: absolute;
    top: 100%; /* 定位在弹出框的底部 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: white transparent transparent transparent; /* 顶部边框为白色，其余透明，形成向下的三角形 */
}

@media (max-width: 767px) {
    .testimonial-card {
        /* 在小屏幕上，让卡片宽度占屏幕的85%，避免溢出 */
        width: 85vw;
    }
}

#mobile-menu.menu-open {
    transform: scaleY(1); /* 在 Y 轴上恢复正常大小 */
    opacity: 1;         /* 完全不透明 */
}