/* ==========================================================================
   HDM EXIM — Interaction layer
   Loaded after style.css and responsive.css.

   Hover, depth and motion refinements for the public site. Kept in its own
   file so the base layout stylesheet stays readable, and so the whole layer
   can be disabled in one line if it ever needs to be.

   Everything here degrades to the plain state under prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared primitives
   -------------------------------------------------------------------------- */

:root {
    --lift: cubic-bezier(.16, 1, .3, 1);
    --sheen: linear-gradient(105deg,
        transparent 30%,
        rgba(255, 255, 255, .42) 46%,
        rgba(255, 255, 255, .62) 50%,
        rgba(255, 255, 255, .42) 54%,
        transparent 70%);
}

/* A light sweep that crosses an element once on hover. Applied via
   .has-sheen so it can be attached to buttons, cards and tiles alike. */
.has-sheen {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.has-sheen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sheen);
    background-size: 220% 100%;
    background-position: 140% 0;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: background-position .85s var(--lift), opacity .3s ease;
}

.has-sheen:hover::before,
.has-sheen:focus-visible::before {
    background-position: -40% 0;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   2. Buttons — sheen, lift and a travelling arrow
   -------------------------------------------------------------------------- */

.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sheen);
    background-size: 220% 100%;
    background-position: 150% 0;
    opacity: 0;
    z-index: -1;
    transition: background-position .8s var(--lift), opacity .25s ease;
}

.btn:hover::after {
    background-position: -50% 0;
    opacity: .5;
}

.btn-green:hover,
.btn-gold:hover {
    box-shadow: 0 14px 30px -12px rgba(6, 29, 80, .55), 0 0 0 1px rgba(252, 196, 67, .35);
}

/* --------------------------------------------------------------------------
   2b. Hero parallax
   -------------------------------------------------------------------------- */

/* `translate` is its own property, so this composites alongside the existing
   heroPan keyframe animation on `transform` instead of fighting it. */
.hero-media img {
    translate: 0 var(--parallax, 0px);
    will-change: translate;
}

/* --------------------------------------------------------------------------
   3. Export-market cards — tilt, gold rim, caption reveal
   -------------------------------------------------------------------------- */

.market-card {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .5s var(--lift), box-shadow .5s var(--lift);
}

/* JS writes --tilt-x / --tilt-y while the pointer is over the card. */
.market-card.is-tilting {
    transform:
        perspective(900px)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg))
        translateY(-8px)
        scale(1.03);
}

/* Gold rim that fades in with the tilt */
.market-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    background: linear-gradient(140deg, rgba(252, 196, 67, .85), rgba(46, 107, 200, .5)) border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .4s var(--lift);
    pointer-events: none;
    z-index: 3;
}

.market-card:hover::after,
.market-card:focus-visible::after {
    opacity: 1;
}

/* Transit time revealed on hover, sliding up from the caption */
.market-thumb {
    position: relative;
}

.market-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .85rem .7rem .7rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(180deg, transparent, rgba(4, 21, 58, .92));
    color: #fff;
    transform: translateY(101%);
    opacity: 0;
    transition: transform .45s var(--lift), opacity .35s ease;
    z-index: 2;
}

.market-card:hover .market-meta,
.market-card:focus-visible .market-meta {
    transform: translateY(0);
    opacity: 1;
}

.market-meta strong {
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-400);
}

.market-meta span {
    font-size: .625rem;
    color: rgba(255, 255, 255, .82);
    line-height: 1.4;
}

.market-card .market-name {
    transition: color .3s var(--lift), background .3s var(--lift);
}

.market-card:hover .market-name {
    color: var(--navy-800);
    background: linear-gradient(180deg, #fff, #F1F5FC);
}

/* --------------------------------------------------------------------------
   4. Country flag strip — lift and gold ring
   -------------------------------------------------------------------------- */

.country-item {
    position: relative;
    transition: transform .4s var(--lift);
}

.country-flag {
    transition: transform .4s var(--lift), box-shadow .4s var(--lift);
    border-radius: 4px;
}

.country-item:hover .country-flag {
    transform: translateY(-4px) scale(1.12);
    box-shadow:
        0 10px 20px -8px rgba(0, 0, 0, .55),
        0 0 0 2px rgba(252, 196, 67, .75);
}

.country-item .country-name {
    transition: color .3s var(--lift), letter-spacing .3s var(--lift);
}

.country-item:hover .country-name {
    color: var(--gold-400);
    letter-spacing: .14em;
}

/* --------------------------------------------------------------------------
   5. Why-choose cards — gradient icon tile
   -------------------------------------------------------------------------- */

.why-card {
    position: relative;
    border-radius: var(--radius);
    padding-block: 1.75rem;
    transition: transform .45s var(--lift), background .45s var(--lift), box-shadow .45s var(--lift);
}

.why-card:hover {
    background: linear-gradient(180deg, #fff, var(--sand));
    box-shadow: 0 18px 40px -22px rgba(11, 26, 51, .35);
}

.why-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(145deg, var(--green-tint), #fff);
    border: 1px solid var(--line);
    color: var(--navy-700);
    transition:
        transform .55s var(--lift),
        background .45s var(--lift),
        color .35s var(--lift),
        box-shadow .45s var(--lift);
}

.why-card:hover .why-icon {
    transform: translateY(-4px) rotate(-6deg) scale(1.08);
    background: var(--grad-green);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 14px 28px -12px rgba(6, 29, 80, .6);
}

/* --------------------------------------------------------------------------
   6. Hero feature markers
   -------------------------------------------------------------------------- */

.hero-features li {
    border-radius: 14px;
    transition: transform .4s var(--lift), background .4s var(--lift), box-shadow .4s var(--lift);
}

.hero-features li:hover {
    transform: translateY(-4px);
    background: #fff;
    box-shadow: 0 14px 30px -18px rgba(11, 26, 51, .45);
}

.hero-features .icon {
    transition: transform .5s var(--lift), color .3s var(--lift);
}

.hero-features li:hover .icon {
    transform: scale(1.18) rotate(-8deg);
    color: var(--gold-500);
}

/* --------------------------------------------------------------------------
   7. Product and generic tiles
   -------------------------------------------------------------------------- */

.tile-media,
.showcase-gallery figure {
    position: relative;
    overflow: hidden;
}

.tile-media::after,
.showcase-gallery figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(6, 29, 80, .42));
    opacity: 0;
    transition: opacity .45s var(--lift);
    pointer-events: none;
}

.tile:hover .tile-media::after,
.showcase-gallery figure:hover::after {
    opacity: 1;
}

.tile:hover .tile-media img,
.showcase-gallery figure:hover img {
    transform: scale(1.08);
}

/* Arrow on tiles travels on hover */
.tile .link-arrow .icon,
.tile-body .link-arrow .icon {
    transition: transform .4s var(--lift);
}

.tile:hover .link-arrow .icon {
    transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   8. Certification credential cards
   -------------------------------------------------------------------------- */

.cert-card {
    position: relative;
    transition: transform .45s var(--lift), box-shadow .45s var(--lift), border-color .45s var(--lift);
}

.cert-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold-400);
    box-shadow: 0 20px 40px -20px rgba(11, 26, 51, .4);
}

.cert-thumb {
    position: relative;
    overflow: hidden;
}

.cert-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sheen);
    background-size: 220% 100%;
    background-position: 150% 0;
    opacity: 0;
    transition: background-position .9s var(--lift), opacity .3s ease;
}

.cert-card:hover .cert-thumb::after {
    background-position: -50% 0;
    opacity: .85;
}

/* --------------------------------------------------------------------------
   9. Statistics strip — gold underline sweep
   -------------------------------------------------------------------------- */

.stat {
    position: relative;
    transition: transform .45s var(--lift);
}

.stat:hover {
    transform: translateY(-4px);
}

.stat-icon {
    transition: transform .55s var(--lift);
}

.stat:hover .stat-icon {
    transform: scale(1.14) rotate(-8deg);
}

/* --------------------------------------------------------------------------
   10. Navigation underline and dropdown
   -------------------------------------------------------------------------- */

.nav-link {
    position: relative;
}

.dropdown a {
    position: relative;
    transition: background .25s var(--lift), padding-left .25s var(--lift), color .25s var(--lift);
}

.dropdown a:hover {
    padding-left: 1.15rem;
}

.dropdown a::before {
    content: "";
    position: absolute;
    left: .5rem;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold-500);
    transform: translateY(-50%) scale(0);
    transition: transform .25s var(--lift);
}

.dropdown a:hover::before {
    transform: translateY(-50%) scale(1);
}

/* --------------------------------------------------------------------------
   11. Section headings — animated gold rule
   -------------------------------------------------------------------------- */

.rule-gold {
    position: relative;
    overflow: hidden;
}

.rule-gold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    transform: translateX(-100%);
    animation: ruleSweep 3.4s var(--lift) infinite;
}

@keyframes ruleSweep {
    0%, 55% { transform: translateX(-100%); }
    85%, 100% { transform: translateX(100%); }
}

/* --------------------------------------------------------------------------
   12. Form polish
   -------------------------------------------------------------------------- */

.form-control {
    transition: border-color .25s var(--lift), box-shadow .25s var(--lift), transform .25s var(--lift);
}

.form-control:focus {
    transform: translateY(-1px);
}

.social-btn {
    transition: transform .4s var(--lift), filter .3s var(--lift), box-shadow .4s var(--lift);
}

.social-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .5);
}

/* --------------------------------------------------------------------------
   13. Reduced motion — strip everything back
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .has-sheen::before,
    .btn::after,
    .cert-thumb::after,
    .rule-gold::after {
        display: none;
    }

    .market-card.is-tilting {
        transform: translateY(-4px);
    }

    .why-card:hover .why-icon,
    .hero-features li:hover .icon,
    .stat:hover .stat-icon,
    .country-item:hover .country-flag {
        transform: none;
    }
}