/* ============================================================
   DATA LOGISTICS GROUP, 3D effects (home page)
   1. .fx-flip  : 3D flip cards in "Supplying the whole installation"
   2. .fx-coin  : 3D SBA-certified SDVOSB / VOSB coin in Federal Supply
   Layers on css/styles.css and css/home.css. Every selector is scoped
   to .fx-flip or .fx-coin, so nothing else on the site changes.
   ============================================================ */

/* ---------- 1. Flip cards ---------- */
.fx-flip .fx-flip-grid{grid-auto-rows:1fr}
.fx-flip-card{position:relative;height:100%;min-height:240px;perspective:1600px;border-radius:16px;-webkit-tap-highlight-color:transparent}
.fx-flip-inner{--fx-lift:0px;--fx-ry:0deg;position:relative;display:grid;height:100%;transform-style:preserve-3d;transform:translateY(var(--fx-lift)) rotateY(var(--fx-ry));transition:transform .8s cubic-bezier(.2,.75,.25,1)}
.fx-flip-card.is-hover .fx-flip-inner{--fx-lift:-6px}
.fx-flip-card.is-flipped .fx-flip-inner{--fx-ry:180deg}
/* No script: hover and keyboard focus still flip */
.fx-flip:not(.fx-flip--ready) .fx-flip-card:hover .fx-flip-inner,
.fx-flip:not(.fx-flip--ready) .fx-flip-card:focus-within .fx-flip-inner{--fx-lift:-6px;--fx-ry:180deg}

.fx-flip-face{grid-area:1/1;position:relative;display:flex;flex-direction:column;min-width:0;border-radius:16px;padding:26px 26px 22px;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition:box-shadow .4s ease,opacity .35s ease}
.fx-flip--ready .fx-flip-card:not(.is-flipped) .fx-flip-back,
.fx-flip--ready .fx-flip-card.is-flipped .fx-flip-front{pointer-events:none}

/* Front: icon and title */
.fx-flip-front{background:linear-gradient(165deg,#fff 0%,#fff 52%,#F2F5FA 100%);border:1px solid #D6DEEA;box-shadow:0 1px 1px rgba(11,31,58,.04),0 2px 5px rgba(11,31,58,.05),0 9px 18px rgba(11,31,58,.06),0 20px 40px rgba(11,31,58,.07)}
.fx-flip-front::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--red,#B31942),var(--blue,#1E6FD9))}
.fx-flip-front::after{content:"";position:absolute;right:0;top:0;width:200px;height:160px;pointer-events:none;background-image:linear-gradient(rgba(30,111,217,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(30,111,217,.11) 1px,transparent 1px);background-size:18px 18px;background-position:right -1px top -1px;-webkit-mask-image:radial-gradient(circle at 100% 0,#000,transparent 72%);mask-image:radial-gradient(circle at 100% 0,#000,transparent 72%)}
.fx-flip-card.is-hover .fx-flip-front{box-shadow:0 2px 3px rgba(11,31,58,.05),0 6px 12px rgba(11,31,58,.07),0 16px 30px rgba(11,31,58,.10),0 30px 56px rgba(11,31,58,.12)}
.fx-flip-top{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between}
.fx-flip-ico{width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(145deg,#2B7FE8 0%,#0A3161 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.14),0 6px 12px rgba(10,49,97,.22),0 14px 26px rgba(10,49,97,.14)}
.fx-flip-ico svg{width:28px;height:28px}
.fx-flip-num{font-family:var(--font-head);font-weight:800;font-size:.78rem;letter-spacing:.16em;color:#8C9BB4;padding:3px 0 0;background:transparent}
.fx-flip-title{position:static;margin:22px 0 0;font-size:1.26rem;line-height:1.2;color:var(--navy,#0B1F3A)}
.fx-flip-btn{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;cursor:pointer}
.fx-flip-btn::after{content:"";position:absolute;inset:0;z-index:2;border-radius:16px}
.fx-flip-hint{position:relative;display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:20px;font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue,#1E6FD9)}
.fx-flip-hint::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(30,111,217,.28),rgba(30,111,217,0))}
.fx-flip-hint i{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid rgba(30,111,217,.32);transition:transform .6s cubic-bezier(.2,.75,.25,1),background-color .2s ease,color .2s ease,border-color .2s ease}
.fx-flip-hint svg{width:14px;height:14px}
.fx-flip-card.is-hover .fx-flip-hint i{transform:rotate(180deg);background:var(--blue,#1E6FD9);border-color:var(--blue,#1E6FD9);color:#fff}

/* Back: the sentence and a requirement link */
.fx-flip-back{transform:rotateY(180deg);padding-bottom:26px;color:#dfe7f3;background:radial-gradient(120% 90% at 100% 0%,rgba(30,111,217,.34),rgba(30,111,217,0) 55%),linear-gradient(155deg,#0A3161 0%,#0B1F3A 72%);border:1px solid rgba(255,255,255,.08);box-shadow:0 2px 4px rgba(11,31,58,.10),0 12px 24px rgba(11,31,58,.16),0 28px 52px rgba(11,31,58,.16)}
.fx-flip-back::before{content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;background-image:linear-gradient(rgba(61,139,242,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(61,139,242,.9) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 70%);mask-image:linear-gradient(200deg,#000,transparent 70%)}
.fx-flip-back::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--red,#B31942) 0 34%,#fff 34% 66%,#3D8BF2 66% 100%)}
.fx-flip-back>*{position:relative;z-index:1}
.fx-flip-label{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-family:var(--font-head);font-weight:800;font-size:.74rem;line-height:1.35;letter-spacing:.13em;text-transform:uppercase;color:#7ED957}
.fx-flip-label::before{content:"";width:7px;height:7px;border-radius:50%;background:#7ED957;box-shadow:0 0 0 3px rgba(126,217,87,.2);flex:0 0 auto}
.fx-flip-back p{color:#dfe7f3;font-size:.97rem;line-height:1.58;margin:0 0 18px}
.fx-flip-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.88rem;line-height:1.2;color:#fff;background:var(--red,#B31942);border:1px solid var(--red,#B31942);border-radius:8px;padding:9px 14px;box-shadow:0 6px 14px rgba(179,25,66,.32);transition:background-color .18s ease,border-color .18s ease}
.fx-flip-link svg{width:15px;height:15px;flex:0 0 auto;transition:transform .18s ease}
.fx-flip-link:hover{background:#8f1435;border-color:#8f1435;color:#fff}
.fx-flip-link:hover svg{transform:translateX(3px)}

/* Keyboard focus: ring on the card itself, so it stays visible on either face */
.fx-flip .fx-flip-btn:focus-visible{outline:none}
.fx-flip-card:has(.fx-flip-btn:focus-visible),.fx-flip-card.is-kbd{outline:3px solid var(--blue-light,#3D8BF2);outline-offset:5px}
.fx-flip .fx-flip-link:focus-visible{outline:3px solid #7ED957;outline-offset:3px}

@media(max-width:760px){
  .fx-flip-card{min-height:0}
  .fx-flip-face{padding:24px 22px 20px}
  .fx-flip-back{padding-bottom:24px}
  .fx-flip-title{margin-top:18px;font-size:1.2rem}
}

/* Reduced motion: crossfade between faces, no rotation and no lift */
@media(prefers-reduced-motion:reduce){
  .fx-flip-inner,.fx-flip-card.is-hover .fx-flip-inner,.fx-flip-card.is-flipped .fx-flip-inner,
  .fx-flip:not(.fx-flip--ready) .fx-flip-card:hover .fx-flip-inner,
  .fx-flip:not(.fx-flip--ready) .fx-flip-card:focus-within .fx-flip-inner{transform:none;transition:none}
  .fx-flip-back{transform:none;opacity:0}
  .fx-flip-card.is-flipped .fx-flip-back,
  .fx-flip:not(.fx-flip--ready) .fx-flip-card:hover .fx-flip-back,
  .fx-flip:not(.fx-flip--ready) .fx-flip-card:focus-within .fx-flip-back{opacity:1}
  .fx-flip-card.is-flipped .fx-flip-front,
  .fx-flip:not(.fx-flip--ready) .fx-flip-card:hover .fx-flip-front,
  .fx-flip:not(.fx-flip--ready) .fx-flip-card:focus-within .fx-flip-front{opacity:0}
  .fx-flip-hint i,.fx-flip-card.is-hover .fx-flip-hint i{transition:none;transform:none}
}

/* ---------- 2. Coin ---------- */
.seal-wrap.fx-coin{margin-bottom:12px}
.fx-coin-stage{position:relative;width:120px;height:120px;margin-bottom:22px;perspective:640px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.fx-coin-coin{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.fx-coin-rim{position:absolute;inset:0;transform-style:preserve-3d}
.fx-coin-rim i{position:absolute;left:50%;top:50%;width:8.6px;height:10px;margin:-5px 0 0 -4.3px;transform:rotateZ(var(--a)) translateY(-59.4px) rotateX(90deg);background:linear-gradient(rgba(3,10,24,var(--s)),rgba(3,10,24,var(--s))),repeating-linear-gradient(90deg,#5B8BCB 0 1.4px,#143B70 1.4px 2.9px)}
.fx-coin-face{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#0A3161;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.fx-coin-front{transform:translateZ(5px)}
.fx-coin-back{transform:rotateY(180deg) translateZ(5px)}
.fx-coin-face svg{display:block;width:100%;height:100%}
/* Convex shading, then the moving light, then the darkening as a face turns away */
.fx-coin-face::before{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.26),rgba(255,255,255,0) 44%),radial-gradient(circle,rgba(10,30,60,0) 58%,rgba(10,30,60,.10) 86%,rgba(10,30,60,.22) 100%)}
.fx-coin-sheen{position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;background:linear-gradient(104deg,rgba(255,255,255,0) 41%,rgba(255,255,255,.34) 47%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.34) 53%,rgba(255,255,255,0) 59%);background-size:300% 100%;background-repeat:no-repeat;background-position:var(--fx-sheen-f,38%) 0}
.fx-coin-back .fx-coin-sheen{background-position:var(--fx-sheen-b,38%) 0}
.fx-coin-face::after{content:"";position:absolute;inset:0;z-index:3;border-radius:50%;pointer-events:none;background:#04122a;opacity:var(--fx-dim,0)}
.fx-coin-shadow{position:absolute;left:50%;top:100%;width:100px;height:16px;margin:4px 0 0 -50px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(11,31,58,.30),rgba(11,31,58,0));transform:scaleX(var(--fx-shadow,1))}
/* Reduced motion (set by the script): static front, flips only on click */
.fx-coin--still .fx-coin-coin{transform:none}
.fx-coin--still.is-back .fx-coin-coin{transform:rotateY(180deg)}