/* ==========================================================================
   STYLE ICON — PREMIUM FEATURE CARD
   Pure CSS. No animation library, no JS for the loops themselves.

   Palette note: the spec's rgba(212,175,55) IS #D4AF37 — Style Icon's gold —
   so there was almost nothing to swap. The highlight arc is mapped onto the
   brand's own gold-hover (#E5C158) instead of an off-brand #F4D77A, and
   --si-gold-deep is a derived shade for the icon gradient's shadow end, not a
   new brand colour.

   Performance contract, held throughout:
     · only transform / opacity / filter are animated — never layout properties
     · every decoration is aria-hidden and absolutely positioned, so it can
       never enter content flow or the accessibility tree
     · will-change is on the blurred blobs ONLY. It is a scarce hint: put it on
       everything and the compositor runs out of layers and gets slower.
   ========================================================================== */

:root {
  --si-gold-deep: #8C6A16;   /* derived shade — icon gradient shadow end */
}

/* ---------- Grid ----------------------------------------------------------
   Explicit column counts, not auto-fit. `auto-fit` with minmax(15rem,1fr) fits
   FIVE cards at 1440px, which strands the sixth alone on its own row. Six items
   want 3x2 or 2x3 — never 5+1. Explicit breakpoints make the row count a
   decision instead of an accident of the viewport width. */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px)  { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Section aurora ------------------------------------------------
   Lives on the SECTION, not the card: blur(90px) inside a ~300px card would be
   a flat wash with no discernible movement. At section scale it reads as slow
   light drifting behind the grid. */
.feature-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora-blob {
  position: absolute;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;          /* only the blobs get this — see contract */
  animation: aurora 22s ease-in-out infinite;
}
.aurora-blob:nth-child(1) {
  top: -12rem; left: -8rem;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.30), transparent 70%);
}
.aurora-blob:nth-child(2) {
  bottom: -14rem; right: -6rem;
  background: radial-gradient(circle, rgba(229, 193, 88, 0.22), transparent 70%);
  animation-duration: 28s;
  animation-direction: reverse;     /* desync #1 */
}
.aurora-blob:nth-child(3) {
  top: 30%; left: 45%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.16), transparent 70%);
  animation-duration: 32s;
  animation-delay: -9s;             /* desync #2: negative = starts mid-cycle,
                                       so the three never sync on load */
}
@keyframes aurora {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(50px, -40px) scale(1.10); }
}

/* ---------- Card ---------------------------------------------------------- */
.feature-card {
  position: relative;
  overflow: hidden;                 /* clips the ring — this IS the effect */
  isolation: isolate;               /* keeps icon-glow's z-index:-1 contained */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 2.5rem 1.75rem 2.25rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.14);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.8);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.5s ease;
}
.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-8px) perspective(1000px) rotateX(2deg);
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9),
              0 0 42px -12px rgba(212, 175, 55, 0.45);
}

/* ---------- The signature: rotating conic ring ---------------------------- */
/* inset:0 + rotate means the square's corners swing outside the card and are
   clipped, so the two gold arcs read as bars sweeping diagonally across it. */
.card-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;                     /* = ring thickness */
  background: conic-gradient(from 0deg,
      rgba(212, 175, 55, 0.05)   0deg,
      rgba(229, 193, 88, 0.70)  90deg,   /* gold arc #1 */
      rgba(212, 175, 55, 0.05) 180deg,
      rgba(229, 193, 88, 0.70) 270deg,   /* gold arc #2 */
      rgba(212, 175, 55, 0.05) 360deg);
  /* Hollow it to a 1px ring: paint the padding-box, subtract the content-box. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: borderSpin 14s linear infinite;   /* linear + infinite = never stalls */
}
@keyframes borderSpin { to { transform: rotate(1turn); } }

/* ---------- Hover shimmer (transition, not a keyframe) -------------------- */
.card-shimmer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
      transparent 38%, rgba(229, 193, 88, 0.18) 50%, transparent 62%);
  transform: translateX(-110%);
  transition: transform 0.9s ease;
}
.feature-card:hover .card-shimmer,
.feature-card:focus-within .card-shimmer { transform: translateX(110%); }

/* ---------- Icon ---------------------------------------------------------- */
.feature-icon {
  position: relative;
  isolation: isolate;               /* contains .icon-glow's z-index:-1 */
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  color: #000;
  background: linear-gradient(160deg, var(--si-gold-hover), var(--si-gold) 55%, var(--si-gold-deep));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55),
              inset 0 -2px 6px rgba(0, 0, 0, 0.28),
              0 10px 28px -10px rgba(212, 175, 55, 0.5);
  animation: iconFloat 6s ease-in-out infinite;
}
/* Paused on hover, so the ring/glow keep breathing while the icon holds still —
   motion that stops on approach reads as responsiveness. */
.feature-card:hover .feature-icon,
.feature-card:focus-within .feature-icon { animation-play-state: paused; }
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.icon-glyph { display: grid; place-items: center; line-height: 0; }
.icon-glyph svg { width: 1.5rem; height: 1.5rem; }

.icon-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, 0.45);
  pointer-events: none;
  animation: ringSpin 24s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(1turn); } }

.icon-glow {
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.55), transparent 70%);
  filter: blur(8px);
  animation: glowPulse 3.4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.10); }
}

/* ---------- Copy ---------------------------------------------------------- */
.feature-title {
  position: relative;
  font-family: "Playfair Display", serif;
  font-size: 1.35rem;
  line-height: 1.25;
  text-align: center;
  color: #fff;
}
.feature-desc {
  position: relative;
  margin-top: 0.75rem;
  font-size: 13.5px;
  line-height: 1.7;
  text-align: center;
  color: var(--si-grey);
}

/* ---------- Corner brackets ---------------------------------------------- */
.card-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  border-color: rgba(212, 175, 55, 0.35);
  border-style: solid;
  border-width: 0;
  transition: width 0.35s ease, height 0.35s ease, border-color 0.35s ease;
}
.card-corner-tl {
  top: 14px; left: 14px;
  border-top-width: 1px; border-left-width: 1px;
  border-top-left-radius: 6px;
}
.card-corner-br {
  bottom: 14px; right: 14px;
  border-bottom-width: 1px; border-right-width: 1px;
  border-bottom-right-radius: 6px;
}
.feature-card:hover .card-corner,
.feature-card:focus-within .card-corner {
  width: 34px;
  height: 34px;
  border-color: var(--si-gold-hover);
}

/* ---------- Reduced motion ------------------------------------------------
   REQUIRED. Every auto-running loop stops. The cards keep their full resting
   appearance — the ring still paints its gold arcs, it simply does not turn —
   so nothing is lost but the movement. */
@media (prefers-reduced-motion: reduce) {
  .card-border,
  .aurora-blob,
  .feature-icon,
  .icon-ring,
  .icon-glow {
    animation: none !important;
  }
  .feature-card,
  .card-shimmer,
  .card-corner { transition: none; }
  .feature-card:hover { transform: none; }
}