/* =============================================================================
   Technologies Block — Frontend Stylesheet
   1-1 conversion of Technologies.tsx (Tailwind → plain CSS)
   No JS required — marquee is pure CSS @keyframes
   ============================================================================= */

/* --------------------------------------------------------------------------
   Section wrapper
   py-12 border-y border-white/5 bg-[#050505] overflow-hidden
   -------------------------------------------------------------------------- */
.technologies-block {
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background-color: #050505;
    overflow: hidden;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Label container — max-w-7xl mx-auto px-6 mb-8
   -------------------------------------------------------------------------- */
.technologies-label-wrap {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-bottom: 2rem;
}

/* text-center text-white/40 font-mono text-xs uppercase tracking-widest */
.technologies-label {
    text-align: center;
    color: rgba(255, 255, 255, 0.40);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Marquee strip container — relative w-full flex overflow-hidden
   -------------------------------------------------------------------------- */
.technologies-strip {
    position: relative;
    width: 100%;
    display: flex;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Edge gradient masks — absolute left/right top-0 bottom-0 w-24
   bg-gradient-to-r/l from-[#050505] to-transparent z-10
   -------------------------------------------------------------------------- */
.technologies-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6rem;
    /* w-24 */
    z-index: 10;
    pointer-events: none;
}

.technologies-mask--left {
    left: 0;
    background: linear-gradient(to right, #050505, transparent);
}

.technologies-mask--right {
    right: 0;
    background: linear-gradient(to left, #050505, transparent);
}

/* --------------------------------------------------------------------------
   Scrolling track
   flex whitespace-nowrap items-center
   animate x: 0% → -50%, 30s linear infinite
   
   The quadrupled list in PHP means -50% moves exactly one full copy width,
   creating a seamless loop identical to the React version.
   -------------------------------------------------------------------------- */
.technologies-track {
    display: flex;
    white-space: nowrap;
    align-items: center;
    animation: tech-marquee 50s linear infinite;
    will-change: transform;
}

@keyframes tech-marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* --------------------------------------------------------------------------
   Individual tech item
   mx-8 md:mx-12 text-xl md:text-2xl font-display font-bold
   text-white/20 hover:text-[#FF4E00] transition-colors duration-300
   -------------------------------------------------------------------------- */
.technologies-item {
    display: inline-block;
    margin-left: 2rem;
    margin-right: 2rem;
    font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.20);
    cursor: default;
    transition: color 0.3s ease;
    user-select: none;
}

.technologies-item:hover {
    color: #FF4E00;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (min-width: 48rem) {
    .technologies-item {
        margin-left: 3rem;
        margin-right: 3rem;
        font-size: 1.5rem;
    }
}