/* Scapex FX — 3D hero scenes, photography, motion. Loaded after styles.css. */

/* ---------- Hero: photo + blue overlay + 3D scene (replaces the old near-black fade) ---------- */
.hero::after{background:linear-gradient(100deg,rgba(30,63,155,.97) 0%,rgba(38,77,186,.92) 38%,rgba(48,90,212,.72) 68%,rgba(48,90,212,.5) 100%)}
.hero__photo{position:absolute;inset:0;z-index:-2;display:block;overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.hero .container{z-index:1}
.hero__scene{position:absolute;z-index:0;top:0;right:0;width:min(46%,720px);height:100%;opacity:0;transition:opacity .9s ease;cursor:grab}
.hero__scene.is-live{opacity:1}
.hero__scene:active{cursor:grabbing}
.hero--page .hero__inner{max-width:min(760px,56%)}
.hero:not(.hero--page) .hero__inner{max-width:min(720px,54%)}
.hero__scene[data-scene="stack"]{width:min(50%,780px)}
@media (max-width:900px){
  .hero__scene{width:100%;opacity:0;pointer-events:none}
  .hero__scene.is-live{opacity:.32}
  .hero--page .hero__inner,.hero:not(.hero--page) .hero__inner{max-width:none}
}
/* subtle light sweep across every hero */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 80% at 80% 30%,rgba(140,180,255,.28),transparent 70%)}

/* ---------- Scroll reveal (only applied by JS to elements below the fold) ---------- */
.fx-reveal{opacity:0;transform:perspective(900px) rotateX(10deg) translate3d(0,34px,0);transform-origin:50% 100%;
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.fx-reveal.is-in{opacity:1;transform:none}

/* ---------- 3D tilt with a moving glare ---------- */
.fx-tilt{transition:transform .25s ease,box-shadow .25s ease;transform-style:preserve-3d;position:relative;will-change:transform}
.fx-tilt:hover{box-shadow:0 18px 40px -18px rgba(30,63,155,.45);z-index:2}
.fx-tilt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.35),transparent 45%)}
.fx-tilt:hover::after{opacity:1}

/* ---------- Full-bleed parallax photo strip ---------- */
.fx-photo{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(260px,34vw,440px);display:grid;align-items:end;background:var(--ground)}
.fx-photo__img{position:absolute;inset:-6% 0;z-index:-2;display:block}
.fx-photo__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.fx-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,63,155,.05) 20%,rgba(30,63,155,.82) 100%)}
.fx-photo__cap{max-width:640px;padding-block:var(--sp-7);color:#fff}
.fx-photo__cap p{color:#fff;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.3;margin:var(--sp-3) 0 0;font-weight:500;letter-spacing:-.01em}

/* ---------- Homepage photo mosaic (mode cards) ---------- */
.fx-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
@media (max-width:1100px){.fx-mosaic{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.fx-mosaic{grid-template-columns:1fr}}
.fx-mosaic__item{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;color:#fff;text-decoration:none;background:var(--ground)}
@media (max-width:560px){.fx-mosaic__item{aspect-ratio:16/10}}
.fx-mosaic__item picture{position:absolute;inset:0;z-index:-2}
.fx-mosaic__item img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fx-mosaic__item:hover img{transform:scale(1.07)}
.fx-mosaic__item::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,63,155,0) 35%,rgba(22,48,125,.9) 100%)}
.fx-mosaic__body{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-5);transform:translateZ(30px)}
.fx-mosaic__body h3{color:#fff;font-size:1.375rem;margin:0 0 6px}
.fx-mosaic__body p{color:rgba(255,255,255,.85);font-size:.9375rem;margin:0;line-height:1.45}
.fx-mosaic__item:hover{text-decoration:none;color:#fff}
.fx-mosaic__go{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-3);font-size:.875rem;font-weight:600;color:#fff}
.fx-mosaic__go::after{content:"\2192";transition:transform .2s ease}
.fx-mosaic__item:hover .fx-mosaic__go::after{transform:translateX(4px)}

/* ---------- Service page: photo beside the sidebar card ---------- */
.fx-aside-photo{border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--sp-5);aspect-ratio:4/3}
.fx-aside-photo img{width:100%;height:100%;object-fit:cover;display:block}

@media (prefers-reduced-motion:reduce){
  .fx-reveal{opacity:1;transform:none;transition:none}
  .hero__photo img,.fx-photo__img img{transform:none}
  .fx-tilt{transition:none}
}

/* ---------- World map: legibility, motion and a usable mobile render ---------- */
/* Continents were drawn at rgba(255,255,255,.14) on navy — about 1.1:1 against the
   background, so they barely registered. Ports, lanes and labels are sized in
   viewBox units, so at a 360px viewport they rendered at roughly 1px. */
.worldmap{overflow:visible}
.section--navy .worldmap .land,.section--ink .worldmap .land{
  fill:rgba(255,255,255,.2);stroke:rgba(255,255,255,.34);stroke-width:.7;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.section--navy .worldmap .lane,.section--ink .worldmap .lane{
  stroke:rgba(255,255,255,.72);stroke-width:1.4;stroke-dasharray:5 7;stroke-linecap:round}
.worldmap .lane{animation:fx-lane 34s linear infinite}
@keyframes fx-lane{from{stroke-dashoffset:0}to{stroke-dashoffset:-240}}
.section--navy .worldmap .node,.section--ink .worldmap .node{
  fill:#fff;r:4px;stroke:rgba(255,255,255,.35);stroke-width:2.4}
.section--navy .worldmap .node--hub,.section--ink .worldmap .node--hub{
  r:7px;stroke:rgba(255,255,255,.45);stroke-width:4;
  filter:drop-shadow(0 0 7px rgba(255,255,255,.75))}

/* Below 900px the map collapsed to a ~167px strip with ~4px country names.
   Hold it at a readable size and let the section scroll sideways instead. */
@media (max-width:900px){
  .container:has(> .worldmap){overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;overscroll-behavior-x:contain}
  .worldmap{min-width:940px}
  .worldmap__labels .cname{font-size:15px}
  .section--navy .worldmap__labels .cname,.section--ink .worldmap__labels .cname{font-size:15px}
  .section--navy .worldmap .lane,.section--ink .worldmap .lane{stroke-width:2;stroke-dasharray:7 9}
  .section--navy .worldmap .node,.section--ink .worldmap .node{r:5px;stroke-width:3}
  .section--navy .worldmap .node--hub,.section--ink .worldmap .node--hub{r:9px;stroke-width:5}
}

@media (prefers-reduced-motion:reduce){
  .worldmap .lane{animation:none}
}

/* ---------- Service cards: real cards with photography, not a bare icon and a wall of text ---------- */
/* The cards already carry the service URL, so each photo is matched on href and no template
   markup had to change. The grid used a 1px gap over a grey background to fake hairline rules;
   that is replaced with real spacing and a border per card, so the grid background must be
   cleared. Used only on / and /services/ — checked before changing it. */
.rule-grid{background:transparent;gap:20px}
.rule-grid .rule-cell{position:relative;padding:0;gap:0;background:#fff;overflow:hidden;
  border:1px solid #E3E9F6;border-radius:16px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease}
.rule-grid .rule-cell:hover{transform:translateY(-4px);border-color:#CFDAF3;
  box-shadow:0 26px 50px -30px rgba(30,63,155,.55)}
.rule-grid .rule-cell::before{content:"";display:block;margin:0;height:184px;
  border-bottom:1px solid #E3E9F6;background-size:cover;background-position:center;background-repeat:no-repeat;
  transform:scale(1.02);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.rule-grid .rule-cell:hover::before{transform:scale(1.07)}
/* icon as a glass chip on the photo rather than a sticker floating over the card edge */
.rule-grid .rule-cell__icon{position:absolute;top:14px;left:14px;margin:0;width:38px;height:38px;
  display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 4px 14px -6px rgba(11,12,24,.5)}
.rule-grid .rule-cell__icon svg{width:19px;height:19px}
.rule-grid .rule-cell__title{margin:20px 22px 0;font-size:1.25rem;letter-spacing:-.015em;color:#0B1533}
.rule-grid .rule-cell__lede{margin:8px 22px 0;font-size:.9375rem;line-height:1.55;color:#4A5570}
/* the spec list was the heaviest thing on the card: 13px grey on white with no structure */
.rule-grid .rule-spec{margin:18px 0 0;padding:0 22px;gap:0;font-size:.8125rem}
.rule-grid .rule-spec dt{padding:9px 14px 9px 0;border-top:1px solid #EDF1FA;color:#6B7590;
  font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.rule-grid .rule-spec dd{padding:9px 0;border-top:1px solid #EDF1FA;color:#28334D;font-size:.8125rem;line-height:1.5}
/* margin-top:auto pins the CTA to the bottom so every card in a row lines up */
.rule-grid .rule-cell__more{margin:auto 0 0;padding:15px 22px;border-top:1px solid #E3E9F6;
  background:#FAFCFF;color:#305AD4;font-weight:600;transition:background .25s ease}
.rule-grid .rule-cell:hover .rule-cell__more{background:#F2F6FE}
@media (max-width:640px){.rule-grid{gap:16px}.rule-grid .rule-cell::before{height:150px}}
@media (prefers-reduced-motion:reduce){
  .rule-grid .rule-cell,.rule-grid .rule-cell::before,.rule-grid .rule-cell__more{transition:none}
  .rule-grid .rule-cell:hover{transform:none}
  .rule-grid .rule-cell:hover::before{transform:scale(1.02)}
}
.rule-grid .rule-cell[href*="/ocean-freight/"]::before{background-image:linear-gradient(180deg,rgba(30,63,155,.10),rgba(30,63,155,.55)),url(/wp/wp-content/uploads/scapex-photos/ship-aerial-wake-800.webp)}
.rule-grid .rule-cell[href*="/air-freight/"]::before{background-image:linear-gradient(180deg,rgba(30,63,155,.10),rgba(30,63,155,.55)),url(/wp/wp-content/uploads/scapex-photos/air-takeoff-dusk-800.webp)}
.rule-grid .rule-cell[href*="/road-rail-freight/"]::before{background-image:linear-gradient(180deg,rgba(30,63,155,.10),rgba(30,63,155,.55)),url(/wp/wp-content/uploads/scapex-photos/road-highway-trailer-800.webp)}
.rule-grid .rule-cell[href*="/multimodal-transport/"]::before{background-image:linear-gradient(180deg,rgba(30,63,155,.10),rgba(30,63,155,.55)),url(/wp/wp-content/uploads/scapex-photos/port-cranes-aerial-800.webp)}
.rule-grid .rule-cell[href*="/customs-clearance/"]::before{background-image:linear-gradient(180deg,rgba(30,63,155,.10),rgba(30,63,155,.55)),url(/wp/wp-content/uploads/scapex-photos/customs-documents-800.webp)}
.rule-grid .rule-cell[href*="/warehousing/"]::before{background-image:linear-gradient(180deg,rgba(30,63,155,.10),rgba(30,63,155,.55)),url(/wp/wp-content/uploads/scapex-photos/warehouse-racking-800.webp)}
.rule-grid .rule-cell[href*="/project-cargo/"]::before{background-image:linear-gradient(180deg,rgba(30,63,155,.10),rgba(30,63,155,.55)),url(/wp/wp-content/uploads/scapex-photos/project-cargo-lift-800.webp)}
.rule-grid .rule-cell[href*="/3pl-logistics/"]::before{background-image:linear-gradient(180deg,rgba(30,63,155,.10),rgba(30,63,155,.55)),url(/wp/wp-content/uploads/scapex-photos/warehouse-docks-800.webp)}

/* ---------- Hero action card and the stats band ---------- */
/* Both were structurally fine but visually flat: the tab bar gave no sense of which
   tab was live, and the stats were 72px hairline-weight near-black numerals on a bare
   grey rule, which read as placeholder text rather than proof. */
.actioncard{border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(11,12,24,.38),0 2px 6px rgba(11,12,24,.05)}
.actioncard__tabs{background:#F4F7FD;border-bottom:1px solid #E3E9F6;gap:2px;padding:0 8px}
.actioncard__tab{position:relative;font-weight:600;font-size:.9375rem;color:#4A5570;padding:18px 22px;
  border-radius:0;transition:color .2s ease,background .2s ease}
.actioncard__tab:hover{color:#305AD4;background:rgba(48,90,212,.05)}
.actioncard__tab[aria-selected="true"]{color:#1E3F9B;background:#fff}
.actioncard__tab[aria-selected="true"]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;
  height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#305AD4,#EB6F0A)}

.stats{gap:0;border-top:1px solid #E3E9F6}
.stats .stat{border-top:0;position:relative;padding:30px 28px 26px 0;transition:background .25s ease}
.stats .stat + .stat{border-left:1px solid #E3E9F6;padding-left:30px}
.stats .stat::before{content:"";position:absolute;top:-1px;left:0;width:44px;height:3px;
  background:linear-gradient(90deg,#305AD4,#EB6F0A);border-radius:0 0 3px 0}
.stats .stat + .stat::before{left:30px}
.stats .stat:hover{background:#F7F9FE}
.stats .stat__num{display:block;font-size:clamp(2.6rem,1.6rem + 2.4vw,3.6rem);font-weight:500;
  line-height:1;letter-spacing:-.035em;color:#1E3F9B}
.stats .stat__label{margin-top:12px;font-size:.9375rem;line-height:1.5;color:#4A5570;max-width:26ch}
@media (max-width:900px){
  .stats .stat + .stat{border-left:0;border-top:1px solid #E3E9F6;padding-left:0}
  .stats .stat + .stat::before{left:0}
  .stats .stat{padding:24px 0 22px}
}
@media (prefers-reduced-motion:reduce){.actioncard__tab,.stats .stat{transition:none}}