/* =====================================================================
   Migrations cards — hover treatment using Ekonbee brand palette
   Each card gets a per-position gradient (palette ladder matches the
   platform hex cluster):
     01  gold → orange     #fdb813 → #f26722
     02  orange → red      #f26722 → #e53e3e
     03  magenta → violet  #c1268c → #7e3fbf
     04  violet → blue     #7e3fbf → #0492ce
   ===================================================================== */

.migrations__grid .mig{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform .35s cubic-bezier(.2,.9,.3,1.2),
    box-shadow .35s ease,
    background .35s ease;
  --mig-c1: #fdb813;
  --mig-c2: #f26722;
  --mig-glow: rgba(238,144,2,.18);
}
.migrations__grid > .mig:nth-child(1){ --mig-c1:#fdb813; --mig-c2:#f26722; --mig-glow: rgba(242,103,34,.22); }
.migrations__grid > .mig:nth-child(2){ --mig-c1:#f26722; --mig-c2:#e53e3e; --mig-glow: rgba(229,62,62,.22); }
.migrations__grid > .mig:nth-child(3){ --mig-c1:#c1268c; --mig-c2:#7e3fbf; --mig-glow: rgba(193,38,140,.22); }
.migrations__grid > .mig:nth-child(4){ --mig-c1:#7e3fbf; --mig-c2:#0492ce; --mig-glow: rgba(126,63,191,.22); }

/* Top accent bar — slides in from left on hover */
.migrations__grid .mig::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mig-c1), var(--mig-c2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.2,.9,.3,1.2);
  z-index: 2;
}

/* Soft radial wash in the top-right corner — fades up on hover */
.migrations__grid .mig::after{
  content: "";
  position: absolute;
  top: -40%; right: -25%;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--mig-c1) 0%, transparent 65%);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.9,.3,1.2);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

/* Make sure card content sits above the wash */
.migrations__grid .mig > *{
  position: relative;
  z-index: 1;
}

.migrations__grid .mig:hover{
  transform: translateY(-4px);
  background: #fff !important;          /* override refine.css :hover paper */
  box-shadow:
    0 18px 36px -18px var(--mig-glow),
    0 6px 14px -8px rgba(26,21,19,.08);
}
.migrations__grid .mig:hover::before{ transform: scaleX(1); }
.migrations__grid .mig:hover::after{
  opacity: .14;
  transform: scale(1);
}

/* Number — gradient fill on hover */
.migrations__grid .mig .mig__num{
  background: transparent;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  transition: color .35s ease, letter-spacing .35s ease;
}
.migrations__grid .mig:hover .mig__num{
  background: linear-gradient(90deg, var(--mig-c1), var(--mig-c2));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  letter-spacing: .22em;
}

/* Title — arrow nudges right on hover and the whole title gets a subtle accent */
.migrations__grid .mig h3{
  transition: color .35s ease;
}
.migrations__grid .mig h3 .arrow{
  display: inline-block;
  transition: transform .45s cubic-bezier(.2,.9,.3,1.5), color .35s ease;
  will-change: transform;
}
.migrations__grid .mig:hover h3 .arrow{
  transform: translateX(6px);
  color: var(--mig-c2);
}

/* Badge — re-skin on hover. Outlined badges fill with gradient.
   Alt (dark) badges keep ink but pick up a glow ring. */
.migrations__grid .mig .mig__badge{
  transition:
    background .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}
.migrations__grid .mig:hover .mig__badge{
  background: linear-gradient(90deg, var(--mig-c1), var(--mig-c2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px -4px var(--mig-glow);
  transform: translateY(-1px);
}
.migrations__grid .mig:hover .mig__badge--alt{
  /* alt badges already dark — give them a brand-coloured outer ring */
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
  box-shadow:
    0 0 0 3px var(--mig-glow),
    0 4px 12px -4px var(--mig-glow);
}

/* Meta list — divider warms to a faint gradient and bullets fill with gradient */
.migrations__grid .mig .mig__meta{
  position: relative;
  transition: border-color .35s ease;
}
.migrations__grid .mig .mig__meta::before{
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--mig-c1), var(--mig-c2));
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left center;
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.9,.3,1.2);
}
.migrations__grid .mig:hover .mig__meta::before{
  opacity: .55;
  transform: scaleX(1);
}

.migrations__grid .mig .mig__meta li::before{
  transition: background .35s ease, transform .35s ease;
}
.migrations__grid .mig:hover .mig__meta li::before{
  background: linear-gradient(135deg, var(--mig-c1), var(--mig-c2)) !important;
  transform: scale(1.4);
}

/* Reduced motion — keep the visual differences but cut the animation */
@media (prefers-reduced-motion: reduce){
  .migrations__grid .mig,
  .migrations__grid .mig::before,
  .migrations__grid .mig::after,
  .migrations__grid .mig h3 .arrow,
  .migrations__grid .mig .mig__meta::before{
    transition: none !important;
  }
  .migrations__grid .mig:hover{ transform: none; }
  .migrations__grid .mig:hover h3 .arrow{ transform: none; }
}