/* ===== Bold Editorial — Above Infinity =====
   Custom styles complementing the Tailwind CDN. */

/* Font stack — Bahnschrift first (Microsoft DIN, available on Windows),
   then self-hosted Saira (DIN-inspired, similar industrial geometric sans) as
   the cross-platform fallback. Plus Space Mono for monospace labels. */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/saira-variable.woff2') format('woff2-variations'),
         url('/assets/fonts/saira-variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/spacemono-variable.woff2') format('woff2-variations'),
         url('/assets/fonts/spacemono-variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --carbon: #070B1F;
    --azure:  #2D5AE0;
    --cyan:   #3FBED8;
    --bone:   #F4F1EA;
}

/* Pretty default selection in case Tailwind class is missed */
::selection { background: var(--azure); color: var(--carbon); }

html { color-scheme: dark; }
body { background-color: var(--carbon); }

/* Header dressing — sticky has translucent backdrop only after scrolling */
#siteHeader.is-scrolled {
    background-color: rgba(7, 11, 31, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(244, 241, 234, 0.06);
}

/* ===== Logo scales smoothly with scroll position =====
   --scroll-progress is updated by JS from 0 (at top) to 1 (past --scroll-end).
   CSS calc() interpolates logo height + header padding linearly across that range.
   This gives a continuous, frame-accurate shrink rather than a binary toggle. */
:root {
    --scroll-progress: 0;       /* 0 at top, 1 fully scrolled past threshold */
}
.site-logo {
    /* mobile: 5rem -> 2.25rem  (80 -> 36 px) */
    height: calc(5rem - (5rem - 2.25rem) * var(--scroll-progress));
    width: auto;
    will-change: height;
}
@media (min-width: 768px) {
    /* desktop: 8rem -> 2.75rem  (128 -> 44 px) */
    .site-logo {
        height: calc(8rem - (8rem - 2.75rem) * var(--scroll-progress));
    }
}

/* Header bar grows/shrinks to fit the logo */
.site-header-bar {
    /* mobile padding: 1.25rem -> 0.75rem */
    padding-top:    calc(1.25rem - (1.25rem - 0.75rem) * var(--scroll-progress));
    padding-bottom: calc(1.25rem - (1.25rem - 0.75rem) * var(--scroll-progress));
}
@media (min-width: 768px) {
    /* desktop padding: 1.5rem -> 0.75rem */
    .site-header-bar {
        padding-top:    calc(1.5rem - (1.5rem - 0.75rem) * var(--scroll-progress));
        padding-bottom: calc(1.5rem - (1.5rem - 0.75rem) * var(--scroll-progress));
    }
}

/* ===== Hero verb rotator (move / ship / source / qualify) =====
   CSS-only word cycling. Uses inline-grid so the container auto-sizes
   to the widest word (qualify) with no layout shift. */
.hero-rotator {
    display: inline-grid;
    grid-template-areas: "rotator";
    vertical-align: baseline;
    color: var(--cyan);
}
.hero-rotator__word {
    grid-area: rotator;
    opacity: 0;
    animation: hero-rotator-word 16s infinite cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.hero-rotator__word:nth-child(1) { animation-delay: 0s; }
.hero-rotator__word:nth-child(2) { animation-delay: 4s; }
.hero-rotator__word:nth-child(3) { animation-delay: 8s; }
.hero-rotator__word:nth-child(4) { animation-delay: 12s; }
@keyframes hero-rotator-word {
    0%   { opacity: 0; transform: translateY(0.18em); }
    3%   { opacity: 1; transform: translateY(0); }
    22%  { opacity: 1; transform: translateY(0); }
    25%  { opacity: 0; transform: translateY(-0.18em); }
    100% { opacity: 0; transform: translateY(-0.18em); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-rotator__word { animation: none; opacity: 0; }
    .hero-rotator__word:nth-child(1) { opacity: 1; }
}

/* ===== Word-by-word reveal (signature motion) =====
   data-reveal-words on an h1/h2 splits text into per-word spans.
   On scroll into view, words translate up + fade in with stagger. */
[data-reveal-words] .word {
    display: inline-flex;
    overflow: hidden;
    vertical-align: baseline;
    /* room for the slide-up + descenders, eaten back with negative margin
       so it doesn't add visual height to the line */
    padding: 0.16em 0 0.20em;
    margin: -0.16em 0 -0.20em;
    line-height: 1;
}
[data-reveal-words] .word > span {
    display: inline-block;
    transform: translateY(120%);
    opacity: 0;
    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 600ms ease-out;
    transition-delay: calc(var(--i, 0) * 55ms);
    will-change: transform, opacity;
}
[data-reveal-words].is-visible .word > span {
    transform: translateY(0);
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal-words] .word > span {
        transform: none; opacity: 1; transition: none;
    }
}

/* ===== Marquee (CSS-only seamless loop) ===== */
.marquee {
    overflow: hidden;
    --gap: 3rem;
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee-track {
    display: flex;
    gap: var(--gap);
    width: max-content;
    animation: marqueeScroll 36s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

/* ===== Soft grid background ===== */
.bg-grid {
    background-image:
        linear-gradient(rgba(244,241,234,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244,241,234,0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: -1px -1px;
}

/* ===== Scroll reveal ===== */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }

/* ===== Category cards — image treatment (no recolouring; gentle zoom on hover) ===== */
.card-image {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .card-image {
    transform: scale(1.04);
}

.card-overlay {
    background: linear-gradient(180deg,
        rgba(0,0,0,0.10) 0%,
        rgba(0,0,0,0.40) 50%,
        rgba(0,0,0,0.92) 100%);
}

/* Duotone classes intentionally neutralised — images render with original colours.
   Class names retained so existing HTML keeps working. */
.duotone-warm,
.duotone-cool { filter: none; }

/* ===== Hero stats — extra horizontal breathing room on mobile so
   "countries" and "spec" labels don't collide. */
.hero-stats { column-gap: 1.5rem; }
@media (min-width: 640px) { .hero-stats { column-gap: 2.5rem; } }

/* ===== Product-page bottom image grid — cap width on desktop so single
   trailing images don't sprawl across the full 1600px container. */
.product-image-grid--single {
    max-width: 48rem;          /* ~768px */
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1024px) {
    .product-image-grid--single { max-width: 42rem; }
}
.product-image-grid--double {
    max-width: 64rem;          /* ~1024px */
    margin-left: auto;
    margin-right: auto;
}

/* ===== Number animations (counters) ===== */
.counter {
    font-variant-numeric: tabular-nums;
}

/* ===== Subtle hover-arrow that nudges right ===== */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.arrow-link svg {
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.arrow-link:hover svg { transform: translateX(4px); }

/* ===== Asia supplier map ===== */
.asia-map {
    background: radial-gradient(ellipse at 60% 50%, rgba(15, 20, 40, 0.6) 0%, rgba(7, 11, 31, 1) 80%);
}

/* Mobile map: full-bleed to the viewport edges and use the SVG's natural
   10:7 ratio so there's no letterboxing. Pin geometry itself is set in
   asia-map.php — we don't try to scale via CSS (browser quirks). */
@media (max-width: 767px) {
    .asia-map {
        aspect-ratio: 10 / 7;
        margin-left:  -1.5rem;
        margin-right: -1.5rem;
        border-radius: 0;
        border-left:  0;
        border-right: 0;
    }
    .asia-map text { font-size: 14px; }
}

/* Make source countries look clickable; whole-country hit area handled by JS. */
.asia-map .country--source { cursor: pointer; }
.asia-map .country--source:hover {
    fill: rgba(63, 190, 216, 0.18);
    stroke: rgba(63, 190, 216, 0.55);
}

/* Country shapes — accurate paths from world-atlas */
.asia-map .country {
    fill: rgba(63, 190, 216, 0.05);
    stroke: rgba(63, 190, 216, 0.18);
    stroke-width: 0.6;
    transition: fill 250ms ease, stroke 250ms ease;
}
.asia-map .country.country--source {
    fill: rgba(63, 190, 216, 0.10);
    stroke: rgba(63, 190, 216, 0.32);
}
.asia-map .country.is-active {
    fill: rgba(45, 90, 224, 0.18) !important;
    stroke: rgba(63, 190, 216, 0.85) !important;
    stroke-width: 1.2;
}

/* Connection arcs draw in once map is visible */
.asia-map .connection {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.asia-map.is-visible .connection {
    stroke-dashoffset: 0;
}
.asia-map.is-visible .connection:nth-child(2) { transition-delay: 100ms; }
.asia-map.is-visible .connection:nth-child(3) { transition-delay: 200ms; }
.asia-map.is-visible .connection:nth-child(4) { transition-delay: 300ms; }
.asia-map.is-visible .connection:nth-child(5) { transition-delay: 400ms; }
.asia-map.is-visible .connection:nth-child(6) { transition-delay: 500ms; }
.asia-map.is-visible .connection:nth-child(7) { transition-delay: 600ms; }

/* Pulsing rings — staggered by data-country for organic feel */
.asia-map .pin .pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: pinPulse 2600ms infinite cubic-bezier(0.16, 1, 0.3, 1);
}
.asia-map .pin--hq .pulse { animation-duration: 2200ms; }
.asia-map .pin[data-country="indonesia"]   .pulse { animation-delay: 200ms; }
.asia-map .pin[data-country="thailand"]    .pulse { animation-delay: 400ms; }
.asia-map .pin[data-country="vietnam"]     .pulse { animation-delay: 600ms; }
.asia-map .pin[data-country="india"]       .pulse { animation-delay: 800ms; }
.asia-map .pin[data-country="bangladesh"]  .pulse { animation-delay: 1000ms; }
.asia-map .pin[data-country="china"]       .pulse { animation-delay: 1200ms; }

@keyframes pinPulse {
    0%   { r: 0;  opacity: 0.85; }
    70%  { r: 38; opacity: 0;    }
    100% { r: 38; opacity: 0;    }
}

/* Hover / active styling */
.asia-map .pin {
    cursor: pointer;
    transition: filter 250ms ease;
}
.asia-map .pin:hover,
.asia-map .pin.is-active {
    filter: drop-shadow(0 0 12px rgba(63, 190, 216, 0.7));
}
/* No browser default focus indicator on any clickable map element — we already
   give cyan glow/fill via .is-active. Also kill the iOS tap-highlight square. */
.asia-map .pin,
.asia-map .country--source {
    -webkit-tap-highlight-color: transparent;
}
.asia-map .pin:focus,
.asia-map .pin:focus-visible,
.asia-map .country--source:focus,
.asia-map .country--source:focus-visible {
    outline: none;
}

/* Map info panel transitions */
.map-info { transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease; }
.map-info.is-hidden { opacity: 0; transform: translateY(8px); }

/* Reduced motion: stop pulse + draw connections instantly */
@media (prefers-reduced-motion: reduce) {
    .asia-map .pin .pulse { animation: none !important; }
    .asia-map .connection { transition: none !important; stroke-dashoffset: 0 !important; }
}

/* line-clamp utility for card descriptions */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Accent underline for inline emphasis */
.ink-underline {
    background-image: linear-gradient(var(--azure), var(--azure));
    background-size: 100% 6px;
    background-repeat: no-repeat;
    background-position: 0 88%;
    padding-bottom: 2px;
}

/* Diagonal accent corner */
.corner-accent::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 36px; height: 36px;
    background: var(--azure);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

/* Print-friendly link state */
a:focus-visible {
    outline: 2px solid var(--azure);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
    .hero-rotator,
    .hero-rotator__word,
    .marquee-track,
    [data-reveal],
    .site-logo,
    .site-header-bar {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    html { scroll-behavior: auto; }
}