/* ============================================
   PREMIUM UPGRADES — home-v2.css additions
   ============================================ */

/* --- Hero Gradient Animation --- */
@keyframes heroGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.v2-hero {
  background-size: 120% 120% !important;
  animation: heroGradientShift 20s ease infinite;
}

/* --- Metallic Shimmer on Hero Title --- */
@keyframes metallicShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.home-v2 .v2-hero h1 {
  background: linear-gradient(
    90deg,
    #fff 0%,
    #9cadd4 25%,
    #fff 50%,
    #9cadd4 75%,
    #fff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: metallicShimmer 6s linear infinite;
}

/* --- Animated Border on Cards --- */
@keyframes borderRotate {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.v2-feature, .v2-panel {
  position: relative;
  z-index: 1;
}
.v2-feature::before, .v2-panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 60%,
    rgba(74, 123, 196, 0.4) 80%,
    rgba(123, 169, 232, 0.6) 90%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  animation: borderRotate 4s linear infinite;
}
.v2-feature:hover::before, .v2-panel:hover::before {
  opacity: 1;
}

/* --- Glass Morphism Upgrade --- */
.v2-feature, .v2-panel {
  background: linear-gradient(
    145deg,
    rgba(8, 18, 43, 0.91),
    rgba(1, 7, 19, 0.92)
  ) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 35px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(74, 123, 196, 0.1) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.v2-feature:hover, .v2-panel:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(74, 123, 196, 0.12) !important;
}

/* --- Hero CTA Button Glow Ring --- */
.v2-btn-primary {
  position: relative;
}
.v2-btn-primary::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, #145ee8, #4a9bff, #145ee8);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  filter: blur(8px);
}
.v2-btn-primary:hover::before {
  opacity: 0.5;
}

/* --- Feature Icons Pulse --- */
@keyframes iconPulse {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(47, 112, 255, 0.8)); }
  50% { filter: drop-shadow(0 0 15px rgba(77, 143, 255, 1)); }
}
.v2-feature:hover .v2-icon {
  animation: iconPulse 1.5s ease-in-out infinite;
}

/* --- Step Numbers Gradient --- */
.v2-steps article b {
  font-family: 'Montserrat', Georgia, serif;
  font-size: 48px;
  font-weight: 800;
  background: linear-gradient(135deg, #4a7bc4, #7ba9e8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* --- Community Section Glow --- */
.v2-community {
  position: relative;
  overflow: hidden;
}
.v2-community::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(74, 123, 196, 0.08),
    transparent 50%
  );
  animation: communityGlow 8s ease-in-out infinite;
}
@keyframes communityGlow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(5%, -5%); }
}

/* --- Live Status Dot Glow --- */
@keyframes liveDotPulse {
  0%, 100% { box-shadow: 0 0 8px #3ee894; }
  50% { box-shadow: 0 0 20px #3ee894, 0 0 40px rgba(62, 232, 148, 0.3); }
}
.v2-live-dot {
  animation: liveDotPulse 2s ease-in-out infinite;
}

/* --- News Cards Hover --- */
.v2-news-grid a {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.v2-news-grid a:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  border-color: rgba(74, 123, 196, 0.5);
}

/* --- Stat Grid Shine --- */
.v2-stat-grid div {
  transition: background 0.3s ease;
}
.v2-stat-grid div:hover {
  background: rgba(74, 123, 196, 0.08);
}