/* remini landing page - stylesheets concatenated at build time */

/* ---- 010-showcase.css ---- */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            background: #000;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* 所有图片按钮基类 */
        .clickable-img {
            display: block;
            cursor: pointer;
            transition: transform 0.2s ease, opacity 0.2s ease;
            text-decoration: none;
            border: none;
            outline: none;
        }

        .clickable-img:hover {
            opacity: 0.9;
            transform: scale(1.01);
        }

        .clickable-img:active {
            transform: scale(0.99);
        }

        /* ===== 顶部固定横幅 ===== */
        .top-fixed-banner {
            flex-shrink: 0;
            width: 100%;
            background: #000;
            line-height: 0;
            z-index: 300;
            text-align: center;
        }

        .top-fixed-banner img {
            width: 100%;
            display: block;
            object-fit: cover;
        }

        /* ===== 中间可滑动轮播容器 ===== */
        .scrollable-carousel {
            flex: 1 1 auto;
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            background: #000;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: #555 #222;
            position: relative;
            padding-top: 0;
            margin-top: 0;
        }

        .scrollable-carousel::-webkit-scrollbar {
            width: 6px;
        }
        .scrollable-carousel::-webkit-scrollbar-track {
            background: #222;
        }
        .scrollable-carousel::-webkit-scrollbar-thumb {
            background: #666;
            border-radius: 4px;
        }

        .carousel-section {
            width: 100%;
            background: #000;
            padding: 0;
            margin: 0;
            position: relative;
        }

        /* ===== 悬浮 PNG 按钮：呼吸放大 + 背发光，去掉巡边（无border-radius和box-shadow） ===== */
        .floating-png-btn {
            position: fixed;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            z-index: 400;
            cursor: pointer;
            border: none;
            background: transparent;
            padding: 0;
            display: block;
            text-decoration: none;
            outline: none;
            /* 呼吸动画 + 发光滤镜，无圆角边框 */
            animation: breatheGlow 2.2s ease-in-out infinite;
            filter: drop-shadow(0 0 8px rgba(255, 80, 40, 0.7));
            transition: filter 0.2s ease, transform 0.1s ease;
        }

/* ---- 015-keyframes.css ---- */
/* 呼吸+背光关键帧：大小变化 + 光晕强度变化 */
        @keyframes breatheGlow {
            0% {
                transform: translateX(-50%) scale(0.96);
                filter: drop-shadow(0 0 6px rgba(255, 80, 40, 0.6)) drop-shadow(0 0 12px rgba(255, 60, 30, 0.4));
            }
            50% {
                transform: translateX(-50%) scale(1.06);
                filter: drop-shadow(0 0 18px rgba(255, 100, 50, 0.95)) drop-shadow(0 0 28px rgba(255, 70, 30, 0.7));
            }
            100% {
                transform: translateX(-50%) scale(0.96);
                filter: drop-shadow(0 0 6px rgba(255, 80, 40, 0.6)) drop-shadow(0 0 12px rgba(255, 60, 30, 0.4));
            }
        }

        /* 按钮内图片样式：无圆角、无阴影、无边框，完全保留原始形状 */
        .floating-png-btn img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 0;
            box-shadow: none;
            border: none;
        }

        /* 悬浮时加强光晕 */
        .floating-png-btn:hover {
            animation: breatheGlowHover 1.2s ease-in-out infinite;
            filter: drop-shadow(0 0 22px rgba(255, 120, 60, 1)) drop-shadow(0 0 32px rgba(255, 90, 40, 0.9));
        }

        @keyframes breatheGlowHover {
            0% {
                transform: translateX(-50%) scale(1.02);
                filter: drop-shadow(0 0 14px rgba(255, 100, 50, 0.9)) drop-shadow(0 0 24px rgba(255, 70, 30, 0.7));
            }
            50% {
                transform: translateX(-50%) scale(1.1);
                filter: drop-shadow(0 0 28px rgba(255, 130, 70, 1)) drop-shadow(0 0 40px rgba(255, 100, 40, 0.9));
            }
            100% {
                transform: translateX(-50%) scale(1.02);
                filter: drop-shadow(0 0 14px rgba(255, 100, 50, 0.9)) drop-shadow(0 0 24px rgba(255, 70, 30, 0.7));
            }
        }

        /* 点击瞬间微反馈 */
        .floating-png-btn:active {
            transform: translateX(-50%) scale(0.97);
            transition: transform 0.05s;
            filter: drop-shadow(0 0 8px rgba(255, 60, 20, 0.8));
        }

        /* 轮播容器样式 */
        .carousel-container {
            position: relative;
            width: 100%;
            background: #000;
            height: auto;
            display: flex;
            flex-direction: column;
        }

/* ---- 020-showcase-2.css ---- */
.carousel-wrapper {
            display: flex;
            width: 100%;
            transition: transform 0.4s ease-in-out;
            will-change: transform;
            height: auto;
            align-items: flex-start;
        }

        .carousel-slide {
            flex: 0 0 100%;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            line-height: 0;
            height: auto;
        }

        .carousel-slide img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
        }

        /* 指示器 */
        .carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 12px;
            padding: 15px 0 20px 0;
            background-color: transparent;
            z-index: 250;
            flex-wrap: wrap;
        }

        .indicator {
            width: 40px;
            height: 5px;
            background-color: rgba(255,255,255,0.4);
            border: none;
            cursor: pointer;
            transition: background-color 0.3s;
            padding: 0;
            border-radius: 3px;
        }

        .indicator.active {
            background-color: #ffffff;
        }

        .carousel-slide.clickable-img {
            width: 100%;
        }