/* Block: Services */

.services__grid {
    --grid-min: 260px;
}

.service {
    display:  flex;
    flex-direction: column;
    overflow: hidden;
    color:    var(--color-snow);
}

.service__thumb {
    position:     relative;
    aspect-ratio: 16 / 10;
    overflow:     hidden;
    background:   linear-gradient(135deg, #1a0030, #3d0070);

    img {
        transition: transform var(--transition-slow), filter var(--transition-slow);
        filter:     saturate(.85) brightness(.8);
    }

    /* scanline sheen over the image */
    &::after {
        content:    '';
        position:   absolute;
        inset:      0;
        background: repeating-linear-gradient(0deg, rgb(0 0 0 / 25%) 0 1px, transparent 1px 3px);
        mix-blend-mode: multiply;
    }
}

.service:hover .service__thumb img {
    transform: scale(1.05);
    filter:    saturate(1.1) brightness(1);
}

.service__body {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-md);
    padding:         18px 20px 20px;
}

.service__title {
    margin: 0;
    font:   var(--text-20ob);
}

.service__arrow {
    display:     inline-flex;
    font-size:   14px;   /* the icon is 1em */
    color:      var(--color-violet);
    transition: transform var(--transition-base), color var(--transition-base);

    .service:hover & {
        color:     var(--color-cyan);
        transform: translateX(4px);
    }
}

/* ── Retro scene (replaces the stock photos) ──────────────────
   A violet sky, a striped sun, a perspective grid that scrolls on hover and
   the service's pixel sprite glowing in front – all CSS and inline SVG.
   --tint (set per card) colours the sun's glow and the grid. */
.service__art {
    --tint: var(--color-violet);
    position:     relative;
    aspect-ratio: 16 / 10;
    overflow:     hidden;
    isolation:    isolate;
    background:
        radial-gradient(ellipse 60% 55% at 50% 62%, color-mix(in srgb, var(--tint) 35%, transparent), transparent 70%),
        linear-gradient(180deg, #07000f 0%, #1a0533 55%, #2b0b4d 100%);

    /* scanlines */
    &::after {
        content:    '';
        position:   absolute;
        inset:      0;
        z-index:    3;
        background: repeating-linear-gradient(0deg, rgb(0 0 0 / 28%) 0 1px, transparent 1px 3px);
        pointer-events: none;
    }
}

/* Striped synthwave sun on the horizon */
.service__sun {
    position:      absolute;
    left:          50%;
    top:           18%;
    width:         40%;
    aspect-ratio:  1;
    border-radius: 50%;
    transform:     translateX(-50%);
    background:    linear-gradient(180deg, var(--color-magenta), var(--color-violet) 55%, var(--tint));
    opacity:       .3;   /* kept low so the sprite in front reads clearly */
    box-shadow:    0 0 40px -6px var(--tint);
    /* bands cut out of the lower half, thickening downwards */
    mask: linear-gradient(180deg, #000 52%, transparent 52% 56%, #000 56% 63%, transparent 63% 68%, #000 68% 74%, transparent 74% 81%, #000 81% 86%, transparent 86%);
}

/* Perspective grid floor */
.service__floor {
    position:   absolute;
    left:       -50%;
    right:      -50%;
    top:        58%;
    bottom:     -40%;
    z-index:    1;
    background:
        linear-gradient(180deg, #2b0b4d 0%, transparent 30%),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--tint) 70%, transparent) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--tint) 60%, transparent) 0 1px, transparent 1px 22px);
    transform:        perspective(240px) rotateX(58deg);
    transform-origin: top center;
}

.service:hover .service__floor {
    animation: service-grid 1.2s linear infinite;
}

@keyframes service-grid {
    to { background-position: 0 0, 0 0, 0 22px; }
}

/* The sprite, glowing */
.service__sprite {
    position:  absolute;
    left:      50%;
    top:       44%;
    z-index:   2;
    width:     33%;
    height:    auto;
    transform: translate(-50%, -50%);
    filter:    brightness(1.35) saturate(1.1) drop-shadow(0 0 1px #fff) drop-shadow(0 0 8px var(--tint)) drop-shadow(0 0 20px rgb(196 94 255 / 55%));
    transition: transform var(--transition-base);

    .service:hover & {
        animation: service-bob .7s steps(2) infinite;
    }
}

@keyframes service-bob {
    50% { transform: translate(-50%, calc(-50% - 6px)); }
}

@media (prefers-reduced-motion: reduce) {
    .service:hover .service__floor,
    .service:hover .service__sprite {
        animation: none;
    }
}