@layer utilities {
    .content-auto {
        content-visibility: auto;
    }

    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .hover-scale {
        transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

        .hover-scale:hover {
            transform: scale(1.03);
        }

    .card-hover {
        transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: theme('boxShadow.luxury-hover');
        }

    .section-divider {
        height: 1px;
        width: 40px;
        margin: 1.5rem auto;
        background-color: theme('colors.primary');
    }

    .nav-link {
        position: relative;
        font-weight: 300;
        letter-spacing: 0.5px;
    }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -4px;
            left: 0;
            background-color: theme('colors.primary');
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

    .product-bg-accent {
        position: absolute;
        background: linear-gradient(135deg, rgba(255, 58, 58, 0.05) 0%, rgba(255, 58, 58, 0) 60%);
        border-radius: 50%;
        z-index: 0;
    }

    .text-thin {
        font-weight: 300;
    }

    .text-medium-light {
        font-weight: 400;
    }

    .input-focus {
        @apply focus:outline-none focus:ring-1 focus:ring-primary focus:border-transparent;
    }

    .carousel-progress {
        height: 3px;
        background-color: rgba(255, 255, 255, 0.3);
        transition: width 0.5s ease;
        border-radius: 1px;
    }

        .carousel-progress.active {
            background-color: white;
            width: 100% !important;
        }
    /* 新增波纹效果样式 */
    .ripple-effect {
        position: relative;
        overflow: hidden;
        transform: translate3d(0, 0, 0);
    }

        .ripple-effect:after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, transparent 10.01%);
            background-repeat: no-repeat;
            background-position: 50%;
            transform: scale(10, 10);
            opacity: 0;
            transition: transform 0.5s, opacity 1s;
        }

        .ripple-effect:active:after {
            transform: scale(0, 0);
            opacity: 0.2;
            transition: 0s;
        }
    /* 粒子背景效果 */
    .particles-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -1;
    }

    .particle {
        position: absolute;
        background: rgba(255, 58, 58, 0.1);
        border-radius: 50%;
        animation: float 15s infinite linear;
    }
    /* 文字渐入效果 */
    .text-reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease-out;
    }

        .text-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
    /* 3D卡片效果 */
    .card-3d {
        transform-style: preserve-3d;
        perspective: 1000px;
    }

    .card-3d-inner {
        transition: transform 0.6s;
        transform-style: preserve-3d;
    }

    .card-3d:hover .card-3d-inner {
        transform: rotateY(10deg) rotateX(5deg);
    }
    /* 边框动画效果 */
    .border-animate {
        position: relative;
        overflow: hidden;
    }

        .border-animate:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, theme('colors.primary'), transparent);
            transition: left 0.5s;
        }

        .border-animate:hover:before {
            left: 100%;
        }
    /* 闪烁光标效果 */
    .typing-cursor {
        display: inline-block;
        width: 2px;
        height: 1em;
        background-color: theme('colors.primary');
        margin-left: 2px;
        animation: blink 1s infinite;
    }

    @keyframes blink {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }
    /* 新增条纹效果样式 */
    .stripe-pattern {
        background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255, 58, 58, 0.03) 10px, rgba(255, 58, 58, 0.03) 20px );
    }

    .stripe-pattern-dark {
        background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px );
    }

    .stripe-animated {
        position: relative;
        overflow: hidden;
    }

        .stripe-animated::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.1), transparent );
            animation: stripeMove 3s linear infinite;
        }

    .stripe-corner {
        position: absolute;
        width: 200px;
        height: 200px;
        background: linear-gradient( 45deg, transparent, transparent 40%, rgba(255, 58, 58, 0.05) 40%, rgba(255, 58, 58, 0.05) 60%, transparent 60% );
        transform: rotate(45deg);
        animation: stripeFlow 4s ease-in-out infinite;
    }

    .stripe-border {
        position: relative;
    }

        .stripe-border::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: repeating-linear-gradient( 90deg, theme('colors.primary'), theme('colors.primary') 10px, transparent 10px, transparent 20px );
            animation: stripeMove 2s linear infinite;
        }

    .stripe-card {
        position: relative;
        overflow: hidden;
    }

        .stripe-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient( from 0deg, transparent, rgba(255, 58, 58, 0.1), transparent );
            animation: rotate 10s linear infinite;
            z-index: 0;
        }

        .stripe-card > * {
            position: relative;
            z-index: 1;
        }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .stripe-hover:hover {
        background: repeating-linear-gradient( 45deg, rgba(255, 58, 58, 0.05), rgba(255, 58, 58, 0.05) 5px, transparent 5px, transparent 10px );
        transition: all 0.3s ease;
    }
}


html {
    scrollbar-width: none;
}

/* 针对 IE 和 Edge 的滚动条隐藏 */
body {
    -ms-overflow-style: none;
}