/* =====================================================================
   Industries — honeycomb cards with per-industry animated icons
   ===================================================================== */

/* The card itself: subtle honeycomb background pattern that brightens
   into focus on hover. The SVG comb is generated below as a CSS gradient
   trick using two layered radial gradients on a hex grid background. */
.ind-card{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.9,.3,1),
              box-shadow .35s ease,
              border-color .35s ease;
}
.ind-card::before,
.ind-card::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity .5s ease;
}
/* Layer 1: a tiled honeycomb of soft amber outlines (very faint at rest) */
.ind-card::before{
  background-image:
    radial-gradient(circle at 50% 0%,   transparent 14px, rgba(253,184,19,.10) 14px 15px, transparent 16px),
    radial-gradient(circle at 0%  50%,  transparent 14px, rgba(253,184,19,.10) 14px 15px, transparent 16px),
    radial-gradient(circle at 100% 50%, transparent 14px, rgba(253,184,19,.10) 14px 15px, transparent 16px),
    radial-gradient(circle at 50% 100%, transparent 14px, rgba(253,184,19,.10) 14px 15px, transparent 16px);
  background-size: 56px 64px;
  opacity: .55;
}
/* Layer 2: a warm amber wash bleeding from the icon corner — invisible at rest */
.ind-card::after{
  background:
    radial-gradient(360px 280px at 8% 16%, rgba(253,184,19,.22), transparent 70%),
    radial-gradient(420px 320px at 100% 100%, rgba(242,103,34,.10), transparent 70%);
  opacity: 0;
}
.ind-card:hover{
  transform: translateY(-4px);
  border-color: rgba(253,184,19,.45);
  box-shadow:
    0 18px 44px -18px rgba(238,144,2,.45),
    0 6px 18px -8px rgba(193,38,140,.18);
}
.ind-card:hover::before{ opacity: 1; }
.ind-card:hover::after{ opacity: 1; }

/* The icon tile is a true hexagon, not a rounded square. */
.ind-card__ico{
  /* Override pages.css: same size, but hex-clipped + animated. */
  width: 64px !important;
  height: 72px !important;
  border-radius: 0 !important;
  background: var(--grad-brand-diag) !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: relative;
  overflow: visible;
  transition: transform .5s cubic-bezier(.2,.9,.3,1.3), filter .35s ease;
  filter: drop-shadow(0 6px 14px rgba(238,144,2,.30));
}
.ind-card:hover .ind-card__ico{
  transform: rotate(-6deg) scale(1.08);
  filter: drop-shadow(0 10px 22px rgba(238,144,2,.55));
}
/* Inner highlight gloss on the hex */
.ind-card__ico::before{
  content: "";
  position: absolute;
  inset: 4px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  pointer-events: none;
}

/* The animated SVG sits on top, centered. */
.ind-icon{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
  z-index: 1;
}

/* A small pollen burst shoots from the hex on hover */
.ind-card__ico::after{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253,184,19,.55), transparent 65%);
  opacity: 0;
  transform: scale(.6);
  pointer-events: none;
}
.ind-card:hover .ind-card__ico::after{
  animation: ind-card-burst .9s ease-out;
}
@keyframes ind-card-burst{
  0%   { opacity: 0;  transform: scale(.6); }
  40%  { opacity: .7; transform: scale(1.2); }
  100% { opacity: 0;  transform: scale(1.8); }
}

/* Heading nudges into accent colour on hover */
.ind-card h3{
  transition: color .3s ease;
}
.ind-card:hover h3{
  background: var(--grad-brand-diag);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Chips lift slightly on hover */
.ind-card ul li{
  transition: background .3s ease, transform .3s ease, color .3s ease;
}
.ind-card:hover ul li{
  background: rgba(253,184,19,.14);
  color: var(--fg-heading);
}

/* =====================================================================
   Per-industry icon animations
   Each .ind-icon[data-industry="..."] has named child elements that
   animate on .ind-card:hover.
   ===================================================================== */

/* All icons: keep parts at rest; animate on hover. */
.ind-icon *{ transform-box: fill-box; transform-origin: center; }

/* ---- 1. Manufacturing & Industrial: stacked boxes assemble ---- */
.ind-icon--mfg .box{ opacity: 0; transform: translateY(-8px); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.9,.3,1.3); }
.ind-icon--mfg .box-1{ transition-delay: 0s; }
.ind-icon--mfg .box-2{ transition-delay: .08s; }
.ind-icon--mfg .box-3{ transition-delay: .16s; }
.ind-card:not(:hover) .ind-icon--mfg .box{ opacity: 1; transform: translateY(0); } /* visible at rest */
.ind-card:hover .ind-icon--mfg .box{
  animation: mfg-stack .9s ease-in-out infinite;
}
.ind-card:hover .ind-icon--mfg .box-1{ animation-delay: 0s; }
.ind-card:hover .ind-icon--mfg .box-2{ animation-delay: .15s; }
.ind-card:hover .ind-icon--mfg .box-3{ animation-delay: .30s; }
@keyframes mfg-stack{
  0%, 100%{ transform: translateY(0); opacity: 1; }
  50%     { transform: translateY(-3px); opacity: 1; }
}
.ind-card:hover .ind-icon--mfg .gear{
  animation: mfg-gear 2.4s linear infinite;
}
@keyframes mfg-gear{ to{ transform: rotate(360deg); } }

/* ---- 2. Retail & Consumer: cart rolls + items pop in ---- */
.ind-icon--retail .cart{ transition: transform .4s ease; }
.ind-card:hover .ind-icon--retail .cart{
  animation: retail-roll 1.4s ease-in-out infinite;
}
@keyframes retail-roll{
  0%, 100%{ transform: translateX(0); }
  50%     { transform: translateX(2px); }
}
.ind-icon--retail .wheel{ transition: transform .4s ease; }
.ind-card:hover .ind-icon--retail .wheel{
  animation: retail-wheel 1.2s linear infinite;
}
@keyframes retail-wheel{ to{ transform: rotate(360deg); } }
.ind-icon--retail .item{ opacity: 0; transform: translateY(-6px) scale(.6); }
.ind-card:hover .ind-icon--retail .item{
  animation: retail-drop 1.8s ease-in-out infinite;
}
.ind-card:hover .ind-icon--retail .item-1{ animation-delay: 0s; }
.ind-card:hover .ind-icon--retail .item-2{ animation-delay: .4s; }
.ind-card:hover .ind-icon--retail .item-3{ animation-delay: .8s; }
@keyframes retail-drop{
  0%   { opacity: 0; transform: translateY(-10px) scale(.4); }
  30%  { opacity: 1; transform: translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(2px) scale(.6); }
}

/* ---- 3. Logistics & Transport: truck drives + wheels spin + dust ---- */
.ind-icon--logi .truck{ transition: transform .4s ease; }
.ind-card:hover .ind-icon--logi .truck{
  animation: logi-bob 1.1s ease-in-out infinite;
}
@keyframes logi-bob{
  0%, 100%{ transform: translateY(0); }
  50%     { transform: translateY(-1.5px); }
}
.ind-icon--logi .wheel{ transform-origin: center; }
.ind-card:hover .ind-icon--logi .wheel{
  animation: logi-wheel .6s linear infinite;
}
@keyframes logi-wheel{ to{ transform: rotate(360deg); } }
.ind-icon--logi .dust{ opacity: 0; }
.ind-card:hover .ind-icon--logi .dust{
  animation: logi-dust 1.4s ease-out infinite;
}
.ind-card:hover .ind-icon--logi .dust-2{ animation-delay: .3s; }
.ind-card:hover .ind-icon--logi .dust-3{ animation-delay: .6s; }
@keyframes logi-dust{
  0%   { opacity: 0; transform: translateX(0)    scale(1); }
  40%  { opacity: .9; }
  100% { opacity: 0; transform: translateX(-10px) scale(.4); }
}

/* ---- 4. Life Sciences: capsule pulses + DNA helix rotates + sparkle ---- */
.ind-icon--life .capsule{ transition: transform .4s ease; }
.ind-card:hover .ind-icon--life .capsule{
  animation: life-pulse 1.4s ease-in-out infinite;
}
@keyframes life-pulse{
  0%, 100%{ transform: scale(1); }
  50%     { transform: scale(1.08); }
}
.ind-icon--life .pill-half{ transition: opacity .3s ease; }
.ind-card:hover .ind-icon--life .pill-half{
  animation: life-glow 1.4s ease-in-out infinite;
}
@keyframes life-glow{
  0%, 100%{ filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%     { filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
}
.ind-icon--life .spark{ opacity: 0; }
.ind-card:hover .ind-icon--life .spark{
  animation: life-spark 1.6s ease-in-out infinite;
}
.ind-card:hover .ind-icon--life .spark-2{ animation-delay: .5s; }
.ind-card:hover .ind-icon--life .spark-3{ animation-delay: 1.0s; }
@keyframes life-spark{
  0%, 100%{ opacity: 0; transform: scale(.4); }
  50%     { opacity: 1; transform: scale(1.2); }
}

/* ---- 5. Financial Services: bank columns rise + coin spins ---- */
.ind-icon--fin .col{ transform-origin: center bottom; transform: scaleY(.7); opacity: .85; }
.ind-card:hover .ind-icon--fin .col{
  animation: fin-rise 1.6s ease-in-out infinite;
}
.ind-card:hover .ind-icon--fin .col-1{ animation-delay: 0s;   }
.ind-card:hover .ind-icon--fin .col-2{ animation-delay: .15s; }
.ind-card:hover .ind-icon--fin .col-3{ animation-delay: .30s; }
.ind-card:hover .ind-icon--fin .col-4{ animation-delay: .45s; }
@keyframes fin-rise{
  0%, 100%{ transform: scaleY(.85); opacity: .85; }
  50%     { transform: scaleY(1.05); opacity: 1; }
}
.ind-icon--fin .coin{ opacity: 0; }
.ind-card:hover .ind-icon--fin .coin{
  animation: fin-coin 2s ease-in-out infinite;
}
@keyframes fin-coin{
  0%   { opacity: 0; transform: translateY(-6px) rotateY(0); }
  30%  { opacity: 1; }
  60%  { opacity: 1; transform: translateY(0) rotateY(360deg); }
  100% { opacity: 0; transform: translateY(0) rotateY(720deg); }
}

/* ---- 6. Public Sector & Utilities: building windows light up ---- */
.ind-icon--pub .win{ opacity: .35; }
.ind-card:hover .ind-icon--pub .win{
  animation: pub-light 1.8s ease-in-out infinite;
}
.ind-card:hover .ind-icon--pub .win-1{ animation-delay: 0s;   }
.ind-card:hover .ind-icon--pub .win-2{ animation-delay: .25s; }
.ind-card:hover .ind-icon--pub .win-3{ animation-delay: .50s; }
.ind-card:hover .ind-icon--pub .win-4{ animation-delay: .75s; }
.ind-card:hover .ind-icon--pub .win-5{ animation-delay: 1.0s; }
.ind-card:hover .ind-icon--pub .win-6{ animation-delay: 1.25s; }
@keyframes pub-light{
  0%, 100%{ opacity: .35; }
  50%     { opacity: 1;  filter: drop-shadow(0 0 3px rgba(255,255,255,.9)); }
}
.ind-icon--pub .antenna-blip{ opacity: 0; transform-origin: 32px 14px; }
.ind-card:hover .ind-icon--pub .antenna-blip{
  animation: pub-blip 1.4s ease-out infinite;
}
@keyframes pub-blip{
  0%   { opacity: 0; transform: scale(.4); }
  50%  { opacity: .8; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(2);   }
}

/* Reduced motion: disable hover animations */
@media (prefers-reduced-motion: reduce){
  .ind-icon *,
  .ind-card__ico,
  .ind-card{
    animation: none !important;
    transition: none !important;
  }
}