.reveal,
.reveal-up,
.reveal-left,
.reveal-right {
    will-change: transform, opacity;
}

.strand {
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.strand svg {
    width: 100%;
    height: 100%;
}

.strand path {
    fill: none;
    stroke: var(--alfa-orange);
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: 0.85;
}

.orange-orbit {
    position: absolute;
    border: 1px solid rgba(249,169,22,0.28);
    border-radius: 50%;
    pointer-events: none;
}

.product-card {
    display: grid;
    gap: 18px;
}

.product-card .media {
    aspect-ratio: 1;
    border-radius: 18px;
    overflow: hidden;
    background: #0d0f11;
    position: relative;
}

.product-card h3 {
    font-size: 1.28rem;
}

.product-card img,
.product-card svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-smooth);
}

.product-card:hover img,
.product-card:hover .media svg {
    transform: scale(1.04);
}

.product-card h3 {
    font-size: 1.5rem;
}

.journey-line {
    stroke-dasharray: 12 10;
}

.page-transition.is-entering {
    animation: wipe-in 0.55s var(--ease-smooth) forwards;
}

.page-transition.is-leaving {
    animation: wipe-out 0.55s var(--ease-smooth) forwards;
}

@keyframes wipe-in {
    from { transform: scaleX(0); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}

@keyframes wipe-out {
    from { transform: scaleX(1); transform-origin: right; }
    to { transform: scaleX(0); transform-origin: right; }
}

@media (prefers-reduced-motion: reduce) {
    .product-card:hover img,
    .product-card:hover .media svg {
        transform: none;
    }
}