/* src/styles/components/pages/home/section-cred.css */
/* Credibility section (tokenized, mobile-first) */

.section-cred {
    padding: var(--padding-xl) 0;
}

.section-cred__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
}

.section-cred__logo {
    width: 96px;
    height: 96px;
    display: block;
}

.section-cred__lead {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    line-height: var(--line-height-md);
    text-align: center;
    margin: 0;
}

/* Screenshot marquee inside .section-cred */
.section-cred {
    padding: var(--padding-xl) 0;
    overflow: hidden;
}

.section-cred__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
    margin-bottom: var(--margin-lg);
}

.section-cred__logo {
    width: 96px;
    height: 96px;
    display: block;
}

.section-cred__lead {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    line-height: var(--line-height-md);
    text-align: center;
    margin: 0;
    max-width: 650px;
}

/* Marquee track */
.scatter-track {
    width: 100%;
    overflow: hidden;
    /* fade edges */
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%
    );
}

.scatter-strip {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: scatter-scroll 45s linear infinite;
}

.scatter-strip:hover {
    animation-play-state: paused;
}

@keyframes scatter-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Larger screenshot cards */
.scatter-item {
    flex-shrink: 0;
    width: clamp(300px, 40vw, 520px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 12px 28px rgba(0, 0, 0, 0.12);
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 10%, transparent);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Rotation per slot */
.scatter-item--1 { transform: rotate(-1.8deg); }
.scatter-item--2 { transform: rotate(0.7deg); }
.scatter-item--3 { transform: rotate(-0.8deg); }
.scatter-item--4 { transform: rotate(1.3deg); }
.scatter-item--5 { transform: rotate(-1.2deg); }
.scatter-item--6 { transform: rotate(0.5deg); }
.scatter-item--7 { transform: rotate(-0.6deg); }

.scatter-item:hover {
    transform: translateY(-6px) scale(1.02) rotate(0deg) !important;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 20px 40px rgba(0, 0, 0, 0.16);
    z-index: 2;
}

.scatter-item img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scatter-strip {
        animation: none;
    }
}

/* Smaller screens – keep them big but not overflowing */
@media (max-width: 768px) {
    .scatter-item {
        width: 280px;
    }
    .scatter-strip {
        gap: 16px;
        animation-duration: 30s;
    }
}