/* ==================================================
   ANIMATION
   All @keyframes definitions live here. Components in
   style.css reference these by name. Reduced-motion
   handling is centralized in utilities.css.
   ================================================== */

/* ---------- Preloader crate bob ---------- */
@keyframes bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ---------- Trade route dashed line flow ---------- */
@keyframes dash-flow {
    to {
        stroke-dashoffset: -28;
    }
}

/* ---------- Hero typed-line caret ---------- */
@keyframes caret-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ---------- Hero scroll cue ---------- */
@keyframes scroll-cue {
    0% {
        opacity: 0;
        top: 6px;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        top: 22px;
    }
}

/* ---------- Ambient float for glass cards / icons ---------- */
@keyframes float-soft {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.industry-card i,
.why-card i {
    animation: float-soft 4.5s ease-in-out infinite;
}

.industry-card:nth-child(2) i {
    animation-delay: 0.4s;
}

.industry-card:nth-child(3) i {
    animation-delay: 0.8s;
}

/* ---------- Port dot pulse (map signature detail) ---------- */
@keyframes port-pulse {
    0% {
        opacity: 0.5;
        r: 4;
    }

    50% {
        opacity: 1;
        r: 6;
    }

    100% {
        opacity: 0.5;
        r: 4;
    }
}

.port-dot {
    animation: port-pulse 2.8s ease-in-out infinite;
}

.port-dot:nth-of-type(2) {
    animation-delay: 0.5s;
}

.port-dot:nth-of-type(3) {
    animation-delay: 1s;
}

.port-dot:nth-of-type(4) {
    animation-delay: 1.5s;
}

.port-dot:nth-of-type(5) {
    animation-delay: 2s;
}

.port-dot:nth-of-type(6) {
    animation-delay: 2.5s;
}

/* ---------- Fade-in-up (fallback for elements without JS observer) ---------- */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Gradient shimmer, used sparingly on CTA banner ---------- */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.cta-banner {
    background-size: 200% 200%;
    animation: gradient-shift 12s ease-in-out infinite;
}

/* ---------- Mobile menu slide-in ---------- */
@keyframes menu-slide-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Toast / form feedback pop (used on contact & quote pages) ---------- */
@keyframes pop-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==================================================
   ANIMATION
   All @keyframes definitions live here. Components in
   style.css reference these by name. Reduced-motion
   handling is centralized in utilities.css.
   ================================================== */

/* ---------- Preloader crate bob ---------- */
@keyframes bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* ---------- Trade route dashed line flow ---------- */
@keyframes dash-flow {
    to {
        stroke-dashoffset: -28;
    }
}

/* ---------- Hero typed-line caret ---------- */
@keyframes caret-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ---------- Hero scroll cue ---------- */
@keyframes scroll-cue {
    0% {
        opacity: 0;
        top: 6px;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        top: 22px;
    }
}

/* ---------- Ambient float for glass cards / icons ---------- */
@keyframes float-soft {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.industry-card i,
.why-card i {
    animation: float-soft 4.5s ease-in-out infinite;
}

.industry-card:nth-child(2) i {
    animation-delay: 0.4s;
}

.industry-card:nth-child(3) i {
    animation-delay: 0.8s;
}

/* ---------- Port dot pulse (map signature detail) ---------- */
@keyframes port-pulse {
    0% {
        opacity: 0.5;
        r: 4;
    }

    50% {
        opacity: 1;
        r: 6;
    }

    100% {
        opacity: 0.5;
        r: 4;
    }
}

.port-dot {
    animation: port-pulse 2.8s ease-in-out infinite;
}

.port-dot:nth-of-type(2) {
    animation-delay: 0.5s;
}

.port-dot:nth-of-type(3) {
    animation-delay: 1s;
}

.port-dot:nth-of-type(4) {
    animation-delay: 1.5s;
}

.port-dot:nth-of-type(5) {
    animation-delay: 2s;
}

.port-dot:nth-of-type(6) {
    animation-delay: 2.5s;
}

/* ---------- Fade-in-up (fallback for elements without JS observer) ---------- */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Gradient shimmer, used sparingly on CTA banner ---------- */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.cta-banner {
    background-size: 200% 200%;
    animation: gradient-shift 12s ease-in-out infinite;
}

/* ---------- Mobile menu slide-in ---------- */
@keyframes menu-slide-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Toast / form feedback pop (used on contact & quote pages) ---------- */
@keyframes pop-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---------- Product image reveal (scale-down + fade on scroll into view) ---------- */
.product-detail__media img,
.product-grid-card__media img {
    transform: scale(1.18);
    opacity: 0.6;
    transition: transform 1.1s var(--ease-out), opacity 1.1s var(--ease-out);
}

[data-reveal].is-visible .product-detail__media img,
[data-reveal].is-visible .product-grid-card__media img {
    transform: scale(1);
    opacity: 1;
}

.product-detail__media:hover img,
.product-grid-card:hover .product-grid-card__media img {
    transform: scale(1.08);
}