/* ======================================================
   OVER ONS PAGE — custom styles
   ======================================================= */

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Image cards (zoom on hover) ---------- */
.image-card img {
    transition: transform .5s ease;
}

.image-card:hover img {
    transform: scale(1.04);
}

/* ---------- Hero overlay (dark gradient over the photo) ---------- */
.overons-hero-overlay {
    background:
        linear-gradient(to right, rgba(3, 18, 38, .96), rgba(3, 18, 38, .9) 45%, rgba(3, 18, 38, .25)),
        linear-gradient(to top, rgba(3, 18, 38, .88), transparent 60%);
}

.overons-rating {
    transition: background-color .3s ease, transform .3s ease;
}

.overons-rating:hover {
    background-color: rgba(255, 255, 255, .18);
    transform: translateY(-2px);
}

/* ---------- Timeline (Onze reis) ---------- */
.timeline-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.timeline-track::-webkit-scrollbar {
    display: none;
}

.timeline-item {
    flex: 1 1 170px;
    min-width: 170px;
    scroll-snap-align: start;
}

.timeline-item::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 27px;
    width: calc(100% + 24px);
    height: 2px;
    background: linear-gradient(to right, #2563eb, #bfdbfe);
    z-index: 0;
}

.timeline-item:last-child::after {
    display: none;
}

/* ---------- Horizontal scroll (werkplaats + reviews) ---------- */
.werkplaats-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.werkplaats-track::-webkit-scrollbar {
    display: none;
}

.werkplaats-card {
    flex: 0 0 85%;
    max-width: 340px;
    scroll-snap-align: start;
}

@media (min-width: 640px) {
    .werkplaats-card {
        flex-basis: calc(50% - 8px);
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .werkplaats-card {
        flex-basis: calc(22% - 12px);
        max-width: none;
    }
}

.review-card {
    flex: 0 0 85%;
    max-width: 400px;
}

@media (min-width: 640px) {
    .review-card {
        flex-basis: calc(50% - 8px);
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .review-card {
        flex-basis: calc(31% - 11px);
        max-width: none;
    }
}

.werkplaats-card-overlay {
    background: linear-gradient(to top, rgba(2, 6, 23, .92), transparent 55%);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .image-card img,
    .overons-rating {
        transition: none !important;
    }
}