/* ============================================================
   fx-crate: interactive 3D crate band (home page, after What We Supply)
   All selectors scoped to .fx-crate / .fx-crate-*
   ============================================================ */
.fx-crate{position:relative;overflow:hidden;color:#c4d2e8;padding:88px 0;
  background:radial-gradient(1100px 520px at 28% 42%,#16386a 0%,rgba(14,39,71,0) 62%),linear-gradient(180deg,#0E2747 0%,#0B1F3A 100%)}
.fx-crate::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(61,139,242,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(61,139,242,.55) 1px,transparent 1px);background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 30% 50%,#000,transparent 62%);mask-image:radial-gradient(circle at 30% 50%,#000,transparent 62%)}
.fx-crate::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#B31942 0 34%,#fff 34% 66%,#0A3161 66% 100%);opacity:.9}
.fx-crate-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}

/* ---------- Stage ---------- */
.fx-crate-stage{position:relative;aspect-ratio:1/1;max-height:560px;width:100%;border-radius:22px;outline:none;
  background:radial-gradient(70% 62% at 50% 40%,rgba(61,139,242,.20),rgba(61,139,242,0) 70%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 30px 80px -30px rgba(0,0,0,.55);
  touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;isolation:isolate}
.fx-crate-stage:focus-visible{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 3px #3D8BF2,0 30px 80px -30px rgba(0,0,0,.55)}
.fx-crate--3d .fx-crate-stage{cursor:grab}
.fx-crate--3d .fx-crate-stage.is-dragging{cursor:grabbing}
.fx-crate-floor{position:absolute;left:8%;right:8%;bottom:9%;height:26%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(126,170,230,.16),rgba(126,170,230,0));z-index:0}
.fx-crate-canvas{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .7s ease}
.fx-crate-canvas canvas{display:block;width:100%!important;height:100%!important;touch-action:pan-y}
.fx-crate--3d .fx-crate-canvas{opacity:1}

/* Floating labels */
.fx-crate-labels{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .6s ease .35s}
.fx-crate--3d .fx-crate-labels{opacity:1}
.fx-crate-tag{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;will-change:transform;
  font-family:var(--font-head,"Archivo",sans-serif);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#eaf1fb;
  padding:7px 12px 7px 9px;border-radius:999px;background:rgba(11,31,58,.62);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.fx-crate-tag i{width:16px;height:16px;border-radius:50%;flex:0 0 auto;background:#4E9B34;box-shadow:0 0 0 3px rgba(126,217,87,.18);position:relative}
.fx-crate-tag i::after{content:"";position:absolute;left:5px;top:3.2px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

.fx-crate-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;display:none;align-items:center;gap:8px;pointer-events:none;
  font-size:.76rem;font-weight:600;letter-spacing:.06em;color:#9fb4d4;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:opacity .5s ease}
.fx-crate--3d .fx-crate-hint{display:inline-flex}
.fx-crate-stage.has-interacted .fx-crate-hint{opacity:0}

/* ---------- Static CSS 3D fallback (default until WebGL is live): plywood crate with cleat frame and one band ---------- */
.fx-crate-fallback{--s:clamp(140px,min(17vw,42vw),220px);position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;perspective:1100px;transition:opacity .6s ease}
.fx-crate--3d .fx-crate-fallback{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.fx-crate-cube{position:relative;width:var(--s);height:var(--s);flex:0 0 auto;transform-style:preserve-3d;transform:translateY(-4%) rotateX(-16deg) rotateY(-34deg);animation:fx-crate-sway 9s ease-in-out infinite alternate}
@keyframes fx-crate-sway{from{transform:translateY(-4%) rotateX(-16deg) rotateY(-42deg)}to{transform:translateY(-4%) rotateX(-16deg) rotateY(-22deg)}}
.fx-crate-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;padding:12% 12% 10%;overflow:hidden;
  border:calc(var(--s)*.07) solid #c59c62;border-image:linear-gradient(180deg,#d4ad76,#b98f57 60%,#a67c48) 1;backface-visibility:hidden;
  background:repeating-linear-gradient(176deg,rgba(120,80,40,.09) 0 2px,rgba(255,236,200,.05) 2px 5px,rgba(0,0,0,0) 5px 9px),linear-gradient(165deg,#dcc192 0%,#cdae7c 55%,#bf9c66 100%);
  box-shadow:inset 0 0 0 1px rgba(70,42,14,.45),inset 0 0 14px rgba(70,42,14,.28)}
.fx-crate-face::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.07),rgba(0,0,0,0) 60%),linear-gradient(0deg,rgba(60,45,30,.22),rgba(60,45,30,0) 30%)}
.fx-crate-face--front{transform:translateZ(calc(var(--s)/2))}
.fx-crate-face--right{transform:rotateY(90deg) translateZ(calc(var(--s)/2));filter:brightness(.82)}
.fx-crate-face--back{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.fx-crate-face--left{transform:rotateY(-90deg) translateZ(calc(var(--s)/2));filter:brightness(.9)}
.fx-crate-face--top{transform:rotateX(90deg) translateZ(calc(var(--s)/2));filter:brightness(1.08)}
.fx-crate-face img{width:30%;height:auto;padding:4%;background:#f4f1ea;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.3);position:relative}
.fx-crate-face b{position:relative;font-family:var(--font-head,"Archivo",sans-serif);font-weight:800;font-size:calc(var(--s)*.082);line-height:1.05;color:rgba(28,25,22,.9);letter-spacing:.03em;text-align:center;text-transform:uppercase}
.fx-crate-stripe{position:absolute;top:-10%;bottom:-10%;left:19%;width:4.5%;background:linear-gradient(90deg,#646b74,#c9cfd6 45%,#868d96);box-shadow:1px 0 2px rgba(0,0,0,.35)}
.fx-crate-face--top .fx-crate-stripe{top:-10%;bottom:-10%}
.fx-crate-pallet{position:absolute;left:-3%;right:-3%;bottom:-12%;height:11%;transform:translateZ(calc(var(--s)/2 + 2px));border-radius:2px;
  background:linear-gradient(90deg,#7a6a52 0 14%,transparent 14% 43%,#7a6a52 43% 57%,transparent 57% 86%,#7a6a52 86%),linear-gradient(#b3a287 0 32%,#4a3d2c 32%)}
.fx-crate-fallback-shadow{position:absolute;left:50%;top:50%;width:calc(var(--s)*1.7);height:calc(var(--s)*.34);transform:translate(-50%,calc(var(--s)*.62));border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));z-index:-1}

/* ---------- Copy ---------- */
.fx-crate-copy{position:relative;max-width:520px}
.fx-crate .fx-crate-eyebrow{color:#7ED957;margin-bottom:16px}
.fx-crate .fx-crate-h{color:#fff;font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:16px;text-wrap:balance}
.fx-crate-lead{font-size:1.12rem;line-height:1.65;color:#c4d2e8;margin-bottom:22px;max-width:46ch}
.fx-crate-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0}
.fx-crate-chips li{font-family:var(--font-head,"Archivo",sans-serif);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#dfe7f3;
  padding:7px 12px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.fx-crate-cta{display:flex;gap:14px;flex-wrap:wrap}
.fx-crate .btn--gov{color:#fff}
.fx-crate .btn--ghost{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.34)}
.fx-crate .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;transform:translateY(-2px)}
.fx-crate a:focus-visible{outline:3px solid #3D8BF2;outline-offset:3px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .fx-crate{padding:64px 0}
  .fx-crate-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .fx-crate-copy{max-width:none}
  .fx-crate-stage{max-height:none;max-width:560px;margin:0 auto}
}
@media (max-width:560px){
  .fx-crate{padding:52px 0 56px}
  .fx-crate .container.fx-crate-grid{padding:0 16px}
  .fx-crate-stage{border-radius:18px}
  .fx-crate-tag{font-size:.64rem;letter-spacing:.08em;padding:5px 9px 5px 7px;gap:6px}
  .fx-crate-tag i{width:13px;height:13px}
  .fx-crate-tag i::after{left:4px;top:2.4px;width:3.5px;height:6px}
  .fx-crate-hint{bottom:12px;left:12px;transform:none;font-size:.7rem}
  .fx-crate-cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .fx-crate-cube{animation:none}
  .fx-crate-canvas,.fx-crate-labels,.fx-crate-fallback{transition:none}
}