/* [nw_icon_row] — icon + heading + CTA cards on Bootstrap grid */

.nws-icon-row {
  --nws-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nws-ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --nws-line-color: rgba(49, 62, 92, 0.2);
  --nws-line-bg: #F9F9F6;
  --nws-line-gap: 26px;
  --nws-line-top: 109px; /* icon container vertical center on desktop */
  background: transparent;
  color: inherit;
  padding: 0;
}

/* Default: standard pointer as the click indicator. Glass cursor only when enabled. */
.nws-icon-row .nws-icon-card__link { cursor: pointer; }
.nws-icon-row.nws-has-cursor { cursor: none; }
.nws-icon-row.nws-has-cursor .nws-icon-card__link { cursor: none; }

/* The .row needs relative positioning for the spotlight + custom cursor */
.nws-icon-row .row {
  position: relative;
}

/* ---------- connecting line (SVG, links consecutive icon centres) ---------- */
/* Straight horizontal on desktop (1 row); zigzag on tablet/mobile (wrapped
   grid → consecutive centres stair-step). Segments are trimmed by the gap
   radius in JS, so the line never touches an icon — clean negative space and
   nothing to clash with the blue spotlight. */

.nws-icon-row__svg {
  margin: 0 !important; /* cancel Bootstrap's .row > * gutter margin */
  /* Start fully clipped; reveal left-to-right on draw. */
  clip-path: inset(0 100% 0 0);
}

.nws-icon-row__svg.is-drawn {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1100ms var(--nws-ease);
}

.nws-has-line .nws-icon-card__icon { z-index: 2; }

/* ---------- #4: liquid glass magnifying cursor ---------- */

.nws-icon-row__cursor {
  position: fixed;
  width: 42px;
  height: 42px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 300ms ease, transform 300ms var(--nws-ease);
}

.nws-icon-row__cursor.is-visible { opacity: 1; }
.nws-icon-row__cursor.is-over-card { transform: translate(-50%, -50%) scale(1.15); }

/* Glass lens — the circular area with backdrop blur + SVG distortion */
.nws-cursor__lens {
  position: absolute;
  top: 6px; left: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(0.3px) saturate(100%);
          backdrop-filter: blur(0.3px) saturate(100%);
  filter: url(#nws-glass-lens);
  overflow: hidden;
  isolation: isolate;
  transform: scale(1.35);
  transform-origin: center center;
  clip-path: circle(50%);
}

/* Inner glow ring on top of the lens */
.nws-cursor__glow {
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid #34AA94;
  box-shadow:
    inset 1px 1px 0px -1px rgba(255, 255, 255, 0.6),
    inset 0 0 3px 1px rgba(255, 255, 255, 0.25),
    0 0 6px 1px rgba(52, 170, 148, 0.3);
  box-sizing: border-box;
}

/* Handle */
.nws-cursor__handle {
  position: absolute;
  top: 23px;
  left: 23px;
  width: 14px;
  height: 3px;
  background: #34AA94;
  border-radius: 2px;
  transform: rotate(45deg);
  transform-origin: left center;
}

/* ---------- #1: soft glow behind the spotlight ---------- */

.nws-icon-row__spot {
  position: absolute;
  margin: 0 !important; /* cancel Bootstrap's .row > * gutter margin */
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  background: #345D9D;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition:
    left 600ms var(--nws-ease),
    top 600ms var(--nws-ease),
    width 600ms var(--nws-ease),
    height 600ms var(--nws-ease),
    opacity 400ms ease,
    box-shadow 600ms ease;
  box-shadow: 0 0 0 0 rgba(52, 93, 157, 0);
}

.nws-icon-row__spot.is-on {
  opacity: 1;
  box-shadow:
    0 0 40px 8px rgba(52, 93, 157, 0.35),
    0 0 80px 20px rgba(52, 93, 157, 0.15);
}

/* ---------- card entrance (center-out stagger via JS) ---------- */

.nws-icon-card {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms var(--nws-ease),
    transform 600ms var(--nws-ease);
  background: transparent !important;
  border-radius: 0;
  will-change: transform;
}

.nws-icon-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.nws-icon-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
  padding: 64px 16px 32px;
  transition: color 400ms var(--nws-ease);
}

.nws-icon-card__link:hover,
.nws-icon-card__link:focus-visible {
  text-decoration: none;
}

/* #3 + #5: staggered white — title first, then arrow 80ms later.
   On exit (.was-lit), text lingers white 150ms before fading back. */

.nws-icon-card.is-lit .nws-icon-card__link {
  color: #fff;
  transition: color 300ms var(--nws-ease);
}

.nws-icon-card.is-lit .nws-icon-card__title {
  color: #fff;
  transition: color 300ms var(--nws-ease);
}

/* #5: exit trail — text lingers white briefly after spotlight leaves */
.nws-icon-card.was-lit .nws-icon-card__link,
.nws-icon-card.was-lit .nws-icon-card__title {
  transition: color 600ms var(--nws-ease) 150ms;
}

/* ---------- #2: icon micro-drift on hover ---------- */

.nws-icon-card__icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 20px;
  position: relative;
  flex: 0 0 auto;
  transition: transform 800ms var(--nws-ease-overshoot);
}

.nws-icon-card.is-lit .nws-icon-card__icon {
  transform: translateY(-4px);
}

.nws-icon-card__icon img {
  display: block;
  object-fit: contain;
}

.nws-icon-card__icon-dark,
.nws-icon-card__icon-light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 400ms var(--nws-ease);
}

.nws-icon-card__icon-dark  { opacity: 1; }
.nws-icon-card__icon-light { opacity: 0; }

.nws-icon-card.is-lit .nws-icon-card__icon-dark  { opacity: 0; }
.nws-icon-card.is-lit .nws-icon-card__icon-light { opacity: 1; }

.nws-icon-card__title {
  font-family: "DM Serif Display", Georgia, serif !important;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  color: inherit;
  text-align: center;
  transition: color 400ms var(--nws-ease);
}

/* ---------- arrow ---------- */

.nws-icon-card__arrow {
  display: block;
  width: 40px;
  height: 40px;
  margin: 24px auto 0;
  transform: translateX(0);
  opacity: 0; /* hidden until the card is lit (hover / active) */
  transition:
    transform 600ms var(--nws-ease) 80ms,
    filter 400ms var(--nws-ease) 80ms,
    opacity 320ms var(--nws-ease);
}

/* Reveal the arrow when the card is lit (hover or current page). */
.nws-icon-card.is-lit .nws-icon-card__arrow {
  opacity: 1;
}

@keyframes nws-arrow-nudge {
  0%, 100% { transform: translateX(10px); }
  50%      { transform: translateX(18px); }
}

/* Lit state always swaps the arrow to white. */
.nws-icon-card.is-lit .nws-icon-card__arrow {
  filter: brightness(0) invert(1) !important;
}

/* Movement/pulse only when arrow animation is enabled via shortcode. */
.nws-has-arrow-anim .nws-icon-card.is-lit .nws-icon-card__arrow {
  transform: translateX(14px);
  animation: nws-arrow-nudge 1.2s ease-in-out infinite;
  animation-fill-mode: both;
}

/* When animation stops, the fill-mode holds the last keyframe value (translateX(10px)
   at 0%/100%), then the .was-lit transition eases it back to translateX(0). */

.nws-icon-card:not(.is-lit) .nws-icon-card__arrow {
  transform: translateX(0);
  transition:
    transform 600ms var(--nws-ease),
    filter 600ms var(--nws-ease) 100ms;
}

.nws-icon-card.was-lit .nws-icon-card__arrow {
  transition:
    transform 600ms var(--nws-ease),
    filter 600ms var(--nws-ease) 100ms;
}

/* ---------- "You're here" badge ---------- */

.nws-icon-card__here {
  display: block;
  margin-top: 24px;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  transition: color 400ms var(--nws-ease);
}

.nws-icon-card__here .fas {
  margin-right: 5px;
  font-size: 0.75rem;
}

.nws-icon-card.is-active:not(.is-lit) .nws-icon-card__here {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .nws-icon-card {
    transition-duration: 1ms !important;
    opacity: 1;
    transform: none;
  }
  .nws-icon-card__arrow {
    transition-duration: 1ms !important;
  }
  .nws-icon-row__spot {
    transition-duration: 1ms !important;
  }
  .nws-icon-row {
    cursor: auto;
  }
  .nws-icon-row__cursor {
    display: none;
  }
}

@media (max-width: 767px) {
  .nws-icon-row {
    padding: 0;
    cursor: auto;
  }
  .nws-icon-card__icon,
  .nws-icon-card__icon img {
    width: 72px;
    height: 72px;
  }
  .nws-icon-card__title {
    font-size: 1.15rem;
  }
  .nws-icon-card__link {
    padding: 48px 12px 24px;
    cursor: auto;
  }
  .nws-icon-row__cursor {
    display: none;
  }
  .nws-icon-row {
    --nws-line-top: 84px; /* mobile icon center: 48px pad + 36px half-icon */
  }
  .nws-has-line .nws-icon-card__link::before {
    width: calc(72px + var(--nws-line-gap) * 2);
  }
}