/* =====================================================================
   GLOBAL MERIDIEN TRADING - trade.css
   "Our Trade" - a cinematic story of how supply, sourcing, products and
   buyers connect.  Loads after style.css + responsive.css + about.css +
   products.css and reuses their components wholesale:
     .hero .about-progress .story .tradestory (sticky journey)
     .global-sourcing / .global-map  .work-grid  .principles  .people
     .dubai-section  .final-cta  .feedwall (interactive trade walls)
     .feed-transition / .feed-hero  [data-magnetic]  .gm-cursor
   This file only adds what none of those provide.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. HERO EXTRAS  (structure reuses .hero + .hero-* from style.css)
   --------------------------------------------------------------------- */
.trade-line {
    display: block;
    width: 0;
    height: 1px;
    margin-top: 2.25rem;
    background: linear-gradient(90deg, var(--color-gold), transparent);
    animation: tradeLine 1.1s var(--ease-out) 1s forwards;
}
@keyframes tradeLine { to { width: min(340px, 62%); } }

.trade-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 2rem;
    margin-top: 2.25rem;
    opacity: 0;
    animation: fadeUp 1s var(--ease-out) 1.2s forwards;
}
.trade-meta span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ivory-55);
}
.trade-meta span.is-gold { color: var(--color-gold); }

/* the shared .hero-scroll line already pulses (style.css) */

/* secondary link under the final-cta options */
.enquiry-more { margin-top: 2.5rem; }

/* ---------------------------------------------------------------------
   3. CINEMATIC WORD FILM   SOURCE. -> CONNECT. -> TRADE. -> GROW.
   --------------------------------------------------------------------- */
.wordfilm {
    position: relative;
    background: var(--color-charcoal);
    color: var(--color-ivory);
}
.wordfilm.wf--active { height: 320vh; }

.wf-pin {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 80vh;
    padding-block: var(--section-y);
    overflow: hidden;
    text-align: center;
}
.wordfilm.wf--active .wf-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    padding: 0;
}
.wf-tex {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}
.wf-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 50%, rgba(7, 26, 48, 0.55), rgba(7, 26, 48, 0.92) 78%);
    pointer-events: none;
}
.wf-track { position: relative; z-index: 2; }
.wordfilm.wf--active .wf-track { position: absolute; inset: 0; }
.wf-word {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3rem, 16vw, 11rem);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--color-ivory);
}
.wordfilm.wf--active .wf-word {
    position: absolute;
    inset: auto 0 auto 0;
    top: 50%;
    transform: translateY(-50%) scale(0.86);
    opacity: 0;
    transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out), filter 0.6s var(--ease-out);
    filter: blur(6px);
}
.wordfilm.wf--active .wf-word.is-active {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    filter: blur(0);
}
.wf-word .wf-dot { color: var(--color-gold); }

/* no-JS / reduced motion: quiet vertical stack, all visible */
.wordfilm.wf--static .wf-pin,
.wordfilm:not(.wf--active):not(.wf--static) .wf-pin { position: relative; height: auto; }
.wordfilm:not(.wf--active) .wf-track { display: flex; flex-direction: column; gap: 0.4rem; }
.wordfilm:not(.wf--active) .wf-word { position: static; opacity: 1; transform: none; filter: none; }

/* ---------------------------------------------------------------------
   4. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .wf-pin { min-height: 60vh; }
}

/* ---------------------------------------------------------------------
   5. REDUCED MOTION
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .trade-line { width: min(340px, 62%) !important; animation: none !important; }
    .trade-meta { opacity: 1 !important; animation: none !important; }
    .wordfilm.wf--active { height: auto !important; }
    .wordfilm.wf--active .wf-pin { position: static !important; height: auto !important; padding-block: var(--section-y) !important; }
    .wordfilm .wf-track { display: flex !important; flex-direction: column; gap: 0.4rem; }
    .wordfilm .wf-word {
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}