/* =========================================================
   HOME-ENGAGEMENT.CSS — index.html "Flexible Offshore Engagement
   Models" section only. A standalone, more elaborate card treatment
   than the site's standard .card-gradient: animated moving-gradient
   border on hover, a mouse-follow 3D tilt + cursor spotlight (driven
   by the .engage-card mousemove handler in home.js), a pulsing icon
   ring, and a large watermark index numeral. Kept in its own file
   rather than bloating home.css since it's specific to this one
   section, not a reusable cross-page primitive (yet).
   ========================================================= */

.engage-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:24px; margin-top:48px; perspective:1400px;
}
@media (max-width: 992px){ .engage-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .engage-grid{ grid-template-columns: 1fr; } }

.engage-card{
  position:relative; display:block; border-radius:22px; padding:2px; overflow:hidden;
  background: linear-gradient(115deg, var(--rule), var(--rule));
  background-size:220% 220%;
  transition: transform .25s var(--ease), box-shadow .4s var(--ease), background .5s var(--ease);
  will-change: transform;
}
.engage-card:hover{
  box-shadow: var(--shadow-lift);
  background: linear-gradient(115deg, var(--navy-brand), var(--teal), var(--teal-soft), var(--navy-brand));
  background-size: 320% 320%;
  animation: engageBorderMove 3.2s ease infinite;
}
@keyframes engageBorderMove{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .engage-card:hover{ animation:none; }
}

.engage-card-inner{
  position:relative; z-index:1; background: var(--white); border-radius:20px;
  padding:34px 26px 28px; height:100%; overflow:hidden;
  transition: background .4s var(--ease);
}
.engage-card:hover .engage-card-inner{ background: var(--paper-dim); }

/* cursor-follow spotlight, position driven by --mx/--my custom props set in home.js */
.engage-card-inner::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(10,154,144,.16), transparent 65%);
  transition: opacity .4s;
}
.engage-card:hover .engage-card-inner::before{ opacity:1; }

.engage-card-inner > *{ position:relative; z-index:1; }

/* large watermark index numeral */
.engage-num{
  position:absolute; top:8px; right:20px; z-index:0; font-family: var(--f-display); font-weight:600;
  font-size:4.4rem; line-height:1; color:transparent; -webkit-text-stroke: 1.5px var(--rule);
  transition: -webkit-text-stroke-color .4s;
}
.engage-card:hover .engage-num{ -webkit-text-stroke-color: rgba(10,154,144,.35); }

/* icon with continuous pulsing ring */
.engage-icon{
  width:58px; height:58px; border-radius:16px; display:grid; place-items:center; margin-bottom:22px;
  background: linear-gradient(135deg, var(--navy-brand), var(--teal)); color:#fff; font-size:1.35rem;
  position:relative; transition: transform .45s var(--ease);
}
.engage-card:hover .engage-icon{ transform: scale(1.12) rotate(-8deg); }
.engage-icon::before{
  content:""; position:absolute; inset:-6px; border-radius:inherit; border:2px solid var(--teal);
  opacity:0; animation: engagePulse 2.4s ease-out infinite;
}
.engage-grid a:nth-child(2) .engage-icon::before{ animation-delay:.5s; }
.engage-grid a:nth-child(3) .engage-icon::before{ animation-delay:1s; }
.engage-grid a:nth-child(4) .engage-icon::before{ animation-delay:1.5s; }
@keyframes engagePulse{
  0%{ transform:scale(.82); opacity:.55; }
  70%{ transform:scale(1.4); opacity:0; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .engage-icon::before{ animation:none; }
}

.engage-card h3{ font-size:1.08rem; margin:0 0 8px; }
.engage-card p{ color: var(--slate-soft); font-size:.9rem; margin:0; }

.engage-tag{
  display:inline-block; margin-top:16px; padding:5px 13px; border-radius:999px;
  font-family: var(--f-mono); font-size:.7rem; letter-spacing:.02em;
  background: rgba(10,154,144,.1); color: var(--teal-deep);
}

.engage-link{
  display:flex; align-items:center; gap:10px; margin-top:22px; font-size:.85rem; font-weight:600; color: var(--ink);
}
.engage-link i{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  border:1px solid var(--rule); font-size:.72rem; color: var(--ink);
  transition: all .4s var(--ease);
}
.engage-card:hover .engage-link{ color: var(--teal-deep); }
.engage-card:hover .engage-link i{ background: var(--teal-deep); border-color: var(--teal-deep); color:#fff; transform: translateX(5px); }