/* modern-hover-cards runtime — core base (from liquid-cards-core.css) */
/* ==========================================================================
   MODULE STUDIO FOR BEAVER BUILDER - CORE DESIGN SYSTEM & BASE STYLES
   ========================================================================== */
:root {
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Outfit', sans-serif;
}

.modern-card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.modern-card-wrapper.dark-canvas {
  background: #07090e;
  border-radius: 20px;
  padding: 40px 20px;
}

/* ==========================================================================
   LINK AND BASE RESETS FOR PREMIUM CARDS
   Prevents theme link underlines, default link colors, and text decoration
   ========================================================================== */
a.premium-card,
.modern-card-wrapper a.premium-card,
.fl-builder-content a.premium-card,
.fl-node a.premium-card,
a.premium-card:hover,
a.premium-card:focus,
a.premium-card:active {
  text-decoration: none !important;
  color: inherit !important;
  outline: none !important;
  box-shadow: var(--card-shadow, 0 18px 50px rgba(0, 0, 0, 0.09));
}

.premium-card,
.premium-card * {
  text-decoration: none !important;
  box-sizing: border-box;
}

.premium-card a {
  text-decoration: none !important;
  color: inherit !important;
}

/* ==========================================================================
   BASE STYLING FOR THE CARDS
   ========================================================================== */
.premium-card {
  --card-radius: 28px;
  --card-width: 320px;
  --card-padding-v: 34px;
  --card-padding-h: 34px;
  --card-bg: #ffffff;
  --card-shadow: 0 18px 50px rgba(0, 0, 0, 0.09);
  --card-text-head: #1a1a1a;
  --card-text-body: #666666;
  --card-accent: #6d28d9;
  --card-hover-text: #ffffff;
  --card-lift: -6px;
  --trans-duration: 0.6s;
  --trans-curve: cubic-bezier(0.16, 1, 0.3, 1);

  display: block;
  width: 100%;
  max-width: var(--card-width, 320px);
  background: var(--card-bg, #ffffff);
  border-radius: var(--card-radius, 28px);
  padding: var(--card-padding-v, 34px) var(--card-padding-h, 34px) 38px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  user-select: none;
  text-decoration: none !important;
  transition: transform var(--trans-duration) var(--trans-curve), 
              box-shadow var(--trans-duration) var(--trans-curve),
              background-color var(--trans-duration) var(--trans-curve);
}

.premium-card:hover {
  transform: translateY(var(--card-lift, -6px));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
}

/* ==========================================================================
   HEADER ROW (ICON & BADGE)
   Flexbox layout: Icon on left, Badge on right, strictly aligned
   ========================================================================== */
.premium-header,
.card-header-row {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 26px !important;
  pointer-events: auto !important;
}

.premium-icon-box {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--card-accent) 12%, var(--card-bg)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
  border: 1.5px solid color-mix(in srgb, var(--card-accent) 30%, transparent) !important;
  color: var(--card-accent) !important;
  transition: all 0.4s ease !important;
  flex-shrink: 0 !important;
}

.premium-icon-box.hidden {
  display: none !important;
}

.premium-card:hover .premium-icon-box {
  background: color-mix(in srgb, var(--card-accent) 22%, var(--card-bg)) !important;
  color: var(--card-accent) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--card-accent) 22%, transparent) !important;
  border-color: var(--card-accent) !important;
}

.premium-icon-box svg {
  width: 24px !important;
  height: 24px !important;
  color: var(--card-accent) !important;
  stroke: var(--card-accent) !important;
  transition: transform 0.4s ease !important;
}

.premium-card:hover .premium-icon-box svg {
  transform: scale(1.08) !important;
  color: var(--card-accent) !important;
  stroke: var(--card-accent) !important;
}

/* Badge (Compact pill aligned to top right) */
.premium-badge,
.badge-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: fit-content !important;
  margin-left: auto !important;
  /* no font-family: theme typography applies (K10) */
  font-size: var(--card-badge-size, 0.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  border: 1.5px solid color-mix(in srgb, var(--card-accent) 35%, transparent) !important;
  color: var(--card-accent) !important;
  background: color-mix(in srgb, var(--card-accent) 10%, rgba(255, 255, 255, 0.7)) !important;
  backdrop-filter: blur(4px) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.4s ease !important;
}

.premium-card:hover .premium-badge,
.premium-card:hover .badge-number {
  border-color: var(--card-hover-text, #ffffff) !important;
  color: var(--card-hover-text, #ffffff) !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

/* ==========================================================================
   CONTENT BLOCK & TYPOGRAPHY
   ========================================================================== */
.premium-content,
.premium-card-content,
.card-body-block {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

.premium-label {
  /* no font-family: theme typography applies (K10) */
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--card-accent) !important;
  margin-bottom: 8px !important;
  transition: color 0.4s ease !important;
  text-decoration: none !important;
  display: block !important;
}

.premium-card:hover .premium-label {
  color: var(--card-hover-text) !important;
}

.premium-headline {
  /* no font-family: theme typography applies (K10) */
  font-size: var(--card-title-size, 1.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--card-text-head) !important;
  letter-spacing: -0.02em !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  transition: color 0.4s ease !important;
  text-decoration: none !important;
}

.premium-card:hover .premium-headline {
  color: var(--card-hover-text) !important;
}

/* ==========================================================================
   TRENNER / ACCENT LINE
   ========================================================================== */
.premium-line,
.premium-accent-line,
.accent-line {
  display: block !important;
  width: 42px !important;
  height: 3.5px !important;
  border-radius: 2px !important;
  background: var(--card-accent, #6d28d9) !important;
  margin: 14px 0 18px 0 !important;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease !important;
}

.premium-card:hover .premium-line,
.premium-card:hover .premium-accent-line,
.premium-card:hover .accent-line {
  width: 76px !important;
  background: var(--card-hover-text, #ffffff) !important;
}

/* Text */
.premium-text {
  /* no font-family: theme typography applies (K10) */
  font-size: var(--card-desc-size, 0.88rem) !important;
  line-height: 1.6 !important;
  color: var(--card-text-body) !important;
  margin: 0 !important;
  transition: color 0.4s ease !important;
  text-decoration: none !important;
}

.premium-card:hover .premium-text {
  color: var(--card-hover-text) !important;
}

/* ==========================================================================
   FOOTER ROW & DOTS
   ========================================================================== */
.premium-footer,
.card-footer-row {
  position: relative !important;
  z-index: 10 !important;
  margin-top: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: auto !important;
}

.premium-dots,
.premium-dots-indicator,
.premium-dots-btn {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
}

.premium-dots span,
.premium-dots .dot-dash,
.premium-dots-indicator .dot-dash,
.premium-dots-btn .dot-dash {
  display: inline-block !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--card-accent) !important;
  opacity: 0.55 !important;
  transition: all 0.35s ease !important;
}

.premium-dots span:nth-child(2),
.premium-dots .dot-dash:nth-child(2),
.premium-dots-indicator .dot-dash:nth-child(2),
.premium-dots-btn .dot-dash:nth-child(2) {
  opacity: 0.8 !important;
}

.premium-dots span:nth-child(3),
.premium-dots .dot-dash:nth-child(3),
.premium-dots-indicator .dot-dash:nth-child(3),
.premium-dots-btn .dot-dash:nth-child(3) {
  opacity: 1 !important;
}

.premium-card:hover .premium-dots span,
.premium-card:hover .premium-dots .dot-dash,
.premium-card:hover .premium-dots-indicator .dot-dash,
.premium-card:hover .premium-dots-btn .dot-dash {
  background: var(--card-hover-text) !important;
  opacity: 1 !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--card-hover-text) 60%, transparent) !important;
}

.premium-card:hover .premium-dots span:nth-child(2),
.premium-card:hover .premium-dots .dot-dash:nth-child(2),
.premium-card:hover .premium-dots-indicator .dot-dash:nth-child(2),
.premium-card:hover .premium-dots-btn .dot-dash:nth-child(2) {
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   THEME SPECIFICITY BOOST (PREVENTS THEME/BB FROM BREAKING CARD TEXT)
   ========================================================================== */
.fl-builder-content .premium-card .premium-headline,
.premium-card .premium-headline {
  /* no font-family: theme typography applies (K10) */
  font-size: var(--card-title-size, 1.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--card-text-head) !important;
  letter-spacing: -0.02em !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  transition: color 0.4s ease !important;
  text-decoration: none !important;
}

.fl-builder-content .premium-card:hover .premium-headline,
.premium-card:hover .premium-headline {
  color: var(--card-hover-text) !important;
}

.fl-builder-content .premium-card .premium-label,
.premium-card .premium-label {
  /* no font-family: theme typography applies (K10) */
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--card-accent) !important;
  margin-bottom: 8px !important;
  transition: color 0.4s ease !important;
  text-decoration: none !important;
}

.fl-builder-content .premium-card:hover .premium-label,
.premium-card:hover .premium-label {
  color: var(--card-hover-text) !important;
}

.fl-builder-content .premium-card .premium-text,
.premium-card .premium-text {
  /* no font-family: theme typography applies (K10) */
  font-size: var(--card-desc-size, 0.88rem) !important;
  line-height: 1.6 !important;
  color: var(--card-text-body) !important;
  margin: 0 !important;
  transition: color 0.4s ease !important;
  text-decoration: none !important;
}

.fl-builder-content .premium-card:hover .premium-text,
.premium-card:hover .premium-text {
  color: var(--card-hover-text) !important;
}

.fl-builder-content .premium-card .premium-badge,
.premium-card .premium-badge,
.fl-builder-content .premium-card .badge-number,
.premium-card .badge-number {
  /* no font-family: theme typography applies (K10) */
  font-size: var(--card-badge-size, 0.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  border: 1.5px solid color-mix(in srgb, var(--card-accent) 35%, transparent) !important;
  color: var(--card-accent) !important;
  background: color-mix(in srgb, var(--card-accent) 10%, rgba(255, 255, 255, 0.7)) !important;
  backdrop-filter: blur(4px) !important;
  transition: all 0.4s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: fit-content !important;
  margin-left: auto !important;
  text-decoration: none !important;
}

.fl-builder-content .premium-card:hover .premium-badge,
.premium-card:hover .premium-badge,
.fl-builder-content .premium-card:hover .badge-number,
.premium-card:hover .badge-number {
  border-color: var(--card-hover-text) !important;
  color: var(--card-hover-text) !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

/* ==========================================================================
   EFFECT LAYERS (from liquid-cards-effects.css)
   ========================================================================== */
/* ==========================================================================
   MODULE STUDIO FOR BEAVER BUILDER - 22 HIGH-END INTERACTIVE EFFECTS
   ========================================================================== */
/* ==========================================================================
       3. THE 22 HOVER EFFECTS (CSS DEFINITIONS)
       ========================================================================== */

    /* ----------------------------------------------------
       GROUP 1: LIQUID & FLUID (01 – 06)
       ---------------------------------------------------- */

    /* EFFECT 01: Liquid Wave Scale */
    .card-effect-1 {
      --wave-scale: 8.5;
      --wave-expand-speed: 0.95s;
      --wave-retreat-speed: 0.95s;
      --wave-color: #6d28d9;
      --wave-color-2: #8b5cf6;
      --wave-opacity-2: 0.5;
    }

    .card-effect-1 .premium-liquid-container {
      position: absolute;
      width: 170px;
      height: 170px;
      pointer-events: none;
      z-index: 2;
      transition: transform var(--wave-retreat-speed, 0.95s) cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .card-effect-1:hover .premium-liquid-container {
      transition: transform var(--wave-expand-speed, 0.95s) cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .card-effect-1 .premium-liquid-svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .card-effect-1 .wave-corner { display: block; }
    .card-effect-1 .wave-center { display: none; }

    .card-effect-1 .wave-layer-bg {
      fill: var(--wave-color-2);
      opacity: var(--wave-opacity-2);
      transition: fill 0.3s ease, opacity 0.3s ease;
    }

    .card-effect-1 .wave-layer-main {
      fill: var(--wave-color);
      transition: fill 0.3s ease;
    }

    /* Direction Top-Right */
    .card-effect-1[data-direction="top-right"] .premium-liquid-container,
    .card-effect-1:not([data-direction]) .premium-liquid-container {
      top: -10px; right: -10px; left: auto; bottom: auto;
      transform-origin: top right; transform: scale(1);
    }
    .card-effect-1[data-direction="top-right"] .wave-corner,
    .card-effect-1:not([data-direction]) .wave-corner { transform: none; }
    .card-effect-1[data-direction="top-right"]:hover .premium-liquid-container,
    .card-effect-1:not([data-direction]):hover .premium-liquid-container { transform: scale(var(--wave-scale)); }

    /* Direction Top-Left */
    .card-effect-1[data-direction="top-left"] .premium-liquid-container {
      top: -10px; left: -10px; right: auto; bottom: auto;
      transform-origin: top left; transform: scale(1);
    }
    .card-effect-1[data-direction="top-left"] .wave-corner { transform: scaleX(-1); transform-origin: 50% 50%; }
    .card-effect-1[data-direction="top-left"]:hover .premium-liquid-container { transform: scale(var(--wave-scale)); }

    /* Direction Bottom-Right */
    .card-effect-1[data-direction="bottom-right"] .premium-liquid-container {
      bottom: -10px; right: -10px; top: auto; left: auto;
      transform-origin: bottom right; transform: scale(1);
    }
    .card-effect-1[data-direction="bottom-right"] .wave-corner { transform: scaleY(-1); transform-origin: 50% 50%; }
    .card-effect-1[data-direction="bottom-right"]:hover .premium-liquid-container { transform: scale(var(--wave-scale)); }

    /* Direction Bottom-Left */
    .card-effect-1[data-direction="bottom-left"] .premium-liquid-container {
      bottom: -10px; left: -10px; top: auto; right: auto;
      transform-origin: bottom left; transform: scale(1);
    }
    .card-effect-1[data-direction="bottom-left"] .wave-corner { transform: scale(-1); transform-origin: 50% 50%; }
    .card-effect-1[data-direction="bottom-left"]:hover .premium-liquid-container { transform: scale(var(--wave-scale)); }

    /* Direction Top-Center */
    .card-effect-1[data-direction="top-center"] .premium-liquid-container {
      top: -6px; left: -20%; right: auto; bottom: auto;
      width: 140%; height: 160px; margin-left: 0;
      transform-origin: top center; transform: scale(1);
    }
    .card-effect-1[data-direction="top-center"] .wave-corner { display: none; }
    .card-effect-1[data-direction="top-center"] .wave-center { display: block; transform: none; width: 100%; height: 100%; }
    .card-effect-1[data-direction="top-center"]:hover .premium-liquid-container { transform: scale(var(--wave-scale)); }

    /* Direction Bottom-Center */
    .card-effect-1[data-direction="bottom-center"] .premium-liquid-container {
      bottom: -6px; left: -20%; top: auto; right: auto;
      width: 140%; height: 160px; margin-left: 0;
      transform-origin: bottom center; transform: scale(1);
    }
    .card-effect-1[data-direction="bottom-center"] .wave-corner { display: none; }
    .card-effect-1[data-direction="bottom-center"] .wave-center { display: block; transform: scaleY(-1); transform-origin: 50% 50%; width: 100%; height: 100%; }
    .card-effect-1[data-direction="bottom-center"]:hover .premium-liquid-container { transform: scale(var(--wave-scale)); }

    /* EFFECT 02: Dynamic Aurora Mesh */
    .card-effect-2 {
      --mesh-color-1: #ec4899;
      --mesh-color-2: #8b5cf6;
      --mesh-color-3: #06b6d4;
      --mesh-blur: 42px;
      --mesh-scale: 2.3;
      --mesh-speed: 0.9s;
    }
    .card-effect-2 .aurora-mesh {
      position: absolute;
      inset: -40px;
      background: radial-gradient(circle at 80% 20%, var(--mesh-color-1) 0%, transparent 50%),
                  radial-gradient(circle at 20% 80%, var(--mesh-color-2) 0%, transparent 55%),
                  radial-gradient(circle at 50% 50%, var(--mesh-color-3) 0%, transparent 60%);
      filter: blur(var(--mesh-blur));
      opacity: 0;
      transform: scale(0.6) rotate(0deg);
      transition: opacity 0.5s ease, transform var(--mesh-speed) cubic-bezier(0.2, 0.9, 0.3, 1);
      pointer-events: none;
      z-index: 2;
    }
    .card-effect-2:hover .aurora-mesh {
      opacity: 1;
      transform: scale(var(--mesh-scale)) rotate(45deg);
    }

    /* EFFECT 03: Water Droplet Ripple */
    .card-effect-3 {
      --ripple-color: #0284c7;
      --ripple-speed: 1.2s;
      --ripple-scale: 4.5;
    }
    .card-effect-3 .ripple-emitter {
      position: absolute;
      top: 25%;
      right: 20%;
      width: 100px;
      height: 100px;
      transform: translate(50%, -50%);
      pointer-events: none;
      z-index: 2;
    }
    .card-effect-3 .ripple-circle {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, var(--ripple-color) 0%, rgba(2, 132, 199, 0.25) 55%, transparent 75%);
      border: 1.5px solid var(--ripple-color);
      transform: scale(0.3);
      opacity: 0;
      transition: transform var(--ripple-speed) cubic-bezier(0.1, 0.8, 0.2, 1), opacity var(--ripple-speed) ease;
    }
    .card-effect-3 .ripple-circle:nth-child(1) { transition-delay: 0s; }
    .card-effect-3 .ripple-circle:nth-child(2) { border-color: rgba(56, 189, 248, 0.7); background: rgba(2, 132, 199, 0.3); transition-delay: 0.12s; }
    .card-effect-3 .ripple-circle:nth-child(3) { border-color: rgba(56, 189, 248, 0.45); background: rgba(14, 165, 233, 0.18); transition-delay: 0.24s; }
    .card-effect-3:hover .ripple-circle { transform: scale(var(--ripple-scale)); opacity: 1; }

    /* EFFECT 04: Liquid Mercury Metaball (Botanical Fusion - Restored Original) */
    .card-effect-4 {
      --blob-color: #576238;
      --blob-speed: 1.2s;
      --blob-scale: 4.2;
    }
    .card-effect-4 .metaball-container {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 2;
    }
    .card-effect-4 .liquid-blob {
      position: absolute;
      border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
      background: var(--blob-color);
      transition: all var(--blob-speed) cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .card-effect-4 .liquid-blob.b1 {
      top: -60px;
      right: -60px;
      width: 130px;
      height: 130px;
      opacity: 0.75;
    }
    .card-effect-4 .liquid-blob.b2 {
      bottom: -60px;
      left: -60px;
      width: 110px;
      height: 110px;
      opacity: 0.6;
    }
    .card-effect-4:hover .liquid-blob.b1 {
      transform: scale(var(--blob-scale, 4.2)) rotate(80deg);
      opacity: 1;
    }
    .card-effect-4:hover .liquid-blob.b2 {
      transform: scale(calc(var(--blob-scale, 4.2) * 0.85)) rotate(-60deg);
      opacity: 0.95;
    }
    .card-effect-4:hover .premium-icon-box {
      background: color-mix(in srgb, var(--card-hover-text) 12%, transparent);
      border-color: var(--card-hover-text);
    }
    .card-effect-4:hover .premium-icon-box svg {
      color: var(--card-hover-text) !important;
      stroke: var(--card-hover-text) !important;
    }

    /* EFFECT 05: Plasma Smoke Nebula */
    .card-effect-5 {
      --smoke-color: #c99fcd;
      --smoke-speed: 1s;
      --smoke-opacity: 0.85;
    }
    .card-effect-5 .smoke-cloud {
      position: absolute;
      inset: -50%;
      background: radial-gradient(ellipse at center, var(--smoke-color) 0%, rgba(201, 159, 205, 0.35) 45%, transparent 70%);
      filter: blur(48px);
      opacity: 0;
      transform: scale(0.4) rotate(-25deg);
      transition: all var(--smoke-speed) cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      z-index: 2;
    }
    .card-effect-5:hover .smoke-cloud {
      opacity: var(--smoke-opacity);
      transform: scale(2.2) rotate(15deg);
    }

    /* EFFECT 06: Molten Magma Flow */
    .card-effect-6 {
      --magma-1: #ff5722;
      --magma-2: #ff9800;
      --magma-speed: 0.8s;
      --magma-glow: 0.9;
    }
    .card-effect-6 .magma-flood {
      position: absolute;
      bottom: -40px;
      left: -20px;
      right: -20px;
      height: 120%;
      background: linear-gradient(0deg, var(--magma-1) 0%, var(--magma-2) 65%, transparent 100%);
      filter: blur(28px);
      opacity: 0;
      transform: translateY(60%);
      transition: transform var(--magma-speed) cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
      pointer-events: none;
      z-index: 2;
    }
    .card-effect-6:hover .magma-flood {
      opacity: var(--magma-glow);
      transform: translateY(0%);
    }

    /* ----------------------------------------------------
       GROUP 2: 3D, TILT & PHYSICS DYNAMICS (07 – 14)
       ---------------------------------------------------- */

    /* EFFECT 07: 3D Tilt & Holo Glare (With Selectable Prism Presets) */
    .card-effect-7 {
      --tilt-depth: 30px;
      --glare-opacity: 0.55;
      --prism-gradient: linear-gradient(135deg, rgba(255,0,80,0) 0%, rgba(255,0,80,0.8) 12%, rgba(255,120,0,0.85) 24%, rgba(255,225,0,0.9) 36%, rgba(255,255,255,0.95) 50%, rgba(0,230,130,0.85) 60%, rgba(0,180,255,0.88) 72%, rgba(160,50,255,0.85) 86%, rgba(160,50,255,0) 100%);
      transform-style: preserve-3d;
      transition: transform 0.15s ease-out, box-shadow 0.3s ease;
    }
    .card-effect-7 .holo-glare {
      position: absolute;
      inset: -30%;
      border-radius: var(--card-radius);
      background: var(--prism-gradient);
      -webkit-mask-image: linear-gradient(
        135deg,
        transparent 15%,
        rgba(0, 0, 0, 0.25) 30%,
        rgba(0, 0, 0, 0.9) 45%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.95) 55%,
        rgba(0, 0, 0, 0.3) 62%,
        transparent 75%
      );
      mask-image: linear-gradient(
        135deg,
        transparent 15%,
        rgba(0, 0, 0, 0.25) 30%,
        rgba(0, 0, 0, 0.9) 45%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.95) 55%,
        rgba(0, 0, 0, 0.3) 62%,
        transparent 75%
      );
      opacity: 0;
      mix-blend-mode: screen;
      pointer-events: none;
      z-index: 6;
      transition: opacity 0.35s ease;
      transform: translate(calc((var(--glare-x, 50%) - 50%) * 0.6), calc((var(--glare-y, 50%) - 50%) * 0.6)) rotate(calc((var(--glare-x, 50%) - 50%) * 0.2deg));
    }
    .card-effect-7:hover .holo-glare { opacity: var(--glare-opacity, 0.55); }
    .card-effect-7 .premium-header,
    .card-effect-7 .premium-content,
    .card-effect-7 .premium-footer {
      transform: translateZ(var(--tilt-depth, 30px));
      transition: transform 0.2s ease;
    }

    /* EFFECT 08: Bento Spotlight & Border Beam */
    .card-effect-8 {
      --border-beam-color: #38bdf8;
      --spot-color: color-mix(in srgb, var(--border-beam-color, #38bdf8) 32%, transparent);
      --spot-size: 260px;
      --mouse-x: 50%;
      --mouse-y: 50%;
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .card-effect-8 .spotlight-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(var(--spot-size) circle at var(--mouse-x) var(--mouse-y), var(--spot-color), transparent 80%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
      z-index: 2;
    }
    .card-effect-8 .border-beam {
      position: absolute;
      inset: -1px;
      border-radius: var(--card-radius);
      padding: 1.5px;
      background: radial-gradient(180px circle at var(--mouse-x) var(--mouse-y), var(--border-beam-color), transparent 80%);
      -webkit-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;
      pointer-events: none;
      z-index: 3;
    }
    .card-effect-8:hover .spotlight-glow,
    .card-effect-8:hover .border-beam { opacity: 1; }

    /* EFFECT 09: Elastic Jelly Spring (Matcha Bounce) */
    .card-effect-9 {
      --jelly-scale: 1.04;
      --float-lift: -16px;
      --spring-speed: 0.52s;
      --card-accent: #405538;
      transition: transform var(--spring-speed) cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow var(--spring-speed) ease;
    }
    .card-effect-9:hover {
      transform: translateY(var(--float-lift, -16px)) scale(var(--jelly-scale, 1.04));
      box-shadow: 0 24px 55px rgba(64, 85, 56, 0.22), 0 10px 20px rgba(0, 0, 0, 0.06);
    }
    .card-effect-9 .premium-icon-box {
      transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
    }
    .card-effect-9:hover .premium-icon-box {
      transform: translateY(-8px) scale(1.15) rotate(6deg);
      background: #fef3c7;
      color: #405538;
      border-color: #fde68a;
    }
    .card-effect-9 .jelly-accent-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(254, 243, 199, 0.45), rgba(253, 230, 138, 0.28));
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 1;
      pointer-events: none;
    }
    .card-effect-9:hover .jelly-accent-bg {
      opacity: 1;
    }


    /* EFFECT 10: Retro Cyber Grid 3D Horizon */
    .card-effect-10 {
      --grid-color: #c89947;
      --grid-height: 180px;
      --grid-size: 24px;
    }
    .card-effect-10 .cyber-grid {
      position: absolute;
      bottom: -40px;
      left: -20%;
      width: 140%;
      height: var(--grid-height, 180px);
      background-image: linear-gradient(var(--grid-color) 1px, transparent 1px),
                        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
      background-size: var(--grid-size, 24px) var(--grid-size, 24px);
      transform: perspective(250px) rotateX(65deg);
      opacity: 0.15;
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 2;
      pointer-events: none;
    }
    .card-effect-10:hover .cyber-grid {
      opacity: 0.7;
      transform: perspective(250px) rotateX(55deg) translateY(-15px);
      filter: drop-shadow(0 0 10px var(--grid-color));
    }

    /* EFFECT 11: Solar Eclipse Halo */
    .card-effect-11 {
      --halo-color: #e1c68f;
      --halo-size: 160px;
      --halo-opacity: 0.8;
    }
    .card-effect-11 .eclipse-halo {
      position: absolute;
      top: 30%;
      left: 50%;
      width: var(--halo-size);
      height: var(--halo-size);
      transform: translate(-50%, -50%) scale(0.2);
      border-radius: 50%;
      box-shadow: 0 0 50px var(--halo-color), inset 0 0 40px var(--halo-color);
      opacity: 0;
      transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 1;
      pointer-events: none;
    }
    .card-effect-11:hover .eclipse-halo {
      opacity: var(--halo-opacity, 0.8);
      transform: translate(-50%, -50%) scale(2.2);
    }

    /* EFFECT 12: Geometric Origami 3D Slice */
    .card-effect-12 {
      --origami-color: #2563eb;
      --origami-speed: 0.65s;
      --origami-cut: 35%;
    }
    .card-effect-12 .origami-slice {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: var(--origami-color);
      clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
      transition: clip-path var(--origami-speed) cubic-bezier(0.2, 0.9, 0.2, 1);
      z-index: 2;
      pointer-events: none;
    }
    .card-effect-12:hover .origami-slice {
      clip-path: polygon(0 0, 100% 0, 100% 100%, var(--origami-cut, 35%) 100%);
    }

    /* EFFECT 13: Magnetic Parallax Spring Tilt (Refined & Clamped) */
    .card-effect-13 {
      --spring-depth: 25px;
      --tilt-depth: 25px;
      --magnetic-aura: #38bdf8;
      transform-style: preserve-3d;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    }
    .card-effect-13:hover {
      box-shadow: 0 26px 65px rgba(0, 0, 0, 0.4), 0 0 28px color-mix(in srgb, var(--magnetic-aura) 30%, transparent);
    }
    .card-effect-13 .magnetic-lens-flare {
      position: absolute;
      inset: -20%;
      background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), color-mix(in srgb, var(--magnetic-aura) 32%, transparent) 0%, transparent 60%);
      opacity: 0;
      mix-blend-mode: screen;
      pointer-events: none;
      z-index: 2;
      transition: opacity 0.3s ease;
    }
    .card-effect-13:hover .magnetic-lens-flare {
      opacity: 1;
    }
    .card-effect-13 .premium-header,
    .card-effect-13 .premium-content,
    .card-effect-13 .premium-footer {
      transform: translateZ(var(--tilt-depth));
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-effect-13 .premium-icon-box {
      transform: translateZ(calc(var(--tilt-depth) + 12px));
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .card-effect-13:hover .premium-icon-box {
      transform: translateZ(calc(var(--tilt-depth) + 18px)) scale(1.08);
    }

    /* EFFECT 14: Laser Perimeter Sweep & Controlled Elevation (Stable & Agency-Grade) */
    .card-effect-14 {
      --laser-speed: 2.5s;
      --laser-glow-opacity: 0.85;
      --laser-color: #06b6d4;
      position: relative;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    }
    .card-effect-14:hover {
      transform: translateY(-8px) scale(1.015);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 30px color-mix(in srgb, var(--laser-color) 25%, transparent);
    }
    /* Rotating Laser Perimeter Beam */
    .card-effect-14 .laser-track-border {
      position: absolute;
      inset: -2px;
      border-radius: calc(var(--card-radius) + 2px);
      background: conic-gradient(from 0deg, var(--laser-color), transparent 30%, transparent 70%, var(--laser-color));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      padding: 2px;
      opacity: 0.35;
      transition: opacity 0.4s ease;
      animation: laserSweepAnim var(--laser-speed, 2.5s) linear infinite;
      z-index: 3;
      pointer-events: none;
    }
    .card-effect-14:hover .laser-track-border {
      opacity: var(--laser-glow-opacity, 0.85);
      filter: drop-shadow(0 0 8px var(--laser-color));
    }
    /* Top Laser Edge Flare */
    .card-effect-14 .laser-horizon-flare {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, var(--laser-color), #ffffff, var(--laser-color), transparent);
      box-shadow: 0 0 16px var(--laser-color), 0 0 30px var(--laser-color);
      opacity: 0;
      transform: scaleX(0.4);
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 4;
      pointer-events: none;
    }
    .card-effect-14:hover .laser-horizon-flare {
      opacity: 1;
      transform: scaleX(1);
    }
    /* Soft ambient laser gradient inside */
    .card-effect-14 .laser-ambient-aura {
      position: absolute;
      top: -30%;
      left: 50%;
      transform: translateX(-50%);
      width: 140%;
      height: 65%;
      background: radial-gradient(ellipse at top center, color-mix(in srgb, var(--laser-color) 25%, transparent) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 2;
      pointer-events: none;
    }
    .card-effect-14:hover .laser-ambient-aura {
      opacity: 1;
    }
    @keyframes laserSweepAnim {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* ----------------------------------------------------
       GROUP 3: CYBER, NEON & HUD (15 – 18)
       ---------------------------------------------------- */

    /* EFFECT 15: Cyber Neon Laser Border */
    .card-effect-15 {
      --neon-1: #e59a26;
      --neon-2: #38bdf8;
      --laser-speed: 3s;
      --plasma-glow: 24px;
      position: relative;
    }
    .card-effect-15 .laser-border {
      position: absolute;
      inset: -2px;
      border-radius: calc(var(--card-radius) + 2px);
      background: conic-gradient(from 0deg, var(--neon-1), var(--neon-2), transparent 45%, var(--neon-1));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      padding: 2px;
      opacity: 0.3;
      animation: laserRotate var(--laser-speed) linear infinite;
      z-index: 3;
    }
    .card-effect-15 .plasma-core {
      position: absolute;
      bottom: -60px;
      right: -60px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--neon-1) 0%, var(--neon-2) 60%, transparent 80%);
      filter: blur(var(--plasma-glow));
      opacity: 0;
      transform: scale(0.5);
      transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 1;
      pointer-events: none;
    }
    .card-effect-15:hover .laser-border { opacity: 1; filter: drop-shadow(0 0 8px var(--neon-1)); }
    .card-effect-15:hover .plasma-core { opacity: 0.75; transform: scale(2.6); }
    @keyframes laserRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

    /* EFFECT 16: Stardust Particle Flow */
    .card-effect-16 {
      --particle-color: #d49a55;
    }
    .card-effect-16 .particle-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
      opacity: 0.25;
      transition: opacity 0.5s ease;
    }
    .card-effect-16:hover .particle-canvas { opacity: 1; }
    .card-effect-16 .particle-glow-orb {
      position: absolute;
      top: -30px;
      right: -30px;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--particle-color) 0%, transparent 70%);
      filter: blur(28px);
      opacity: 0.3;
      transition: all 0.6s ease;
      z-index: 1;
    }
    .card-effect-16:hover .particle-glow-orb { opacity: 0.8; transform: scale(2); }

    /* EFFECT 17: Digital HUD Scanline */
    .card-effect-17 {
      --glitch-color: #cf8852;
      --scan-speed: 1.4s;
      --scan-opacity: 0.85;
    }
    .card-effect-17 .scanline-beam {
      position: absolute;
      top: -30%;
      left: 0;
      width: 100%;
      height: 25%;
      background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--glitch-color) 40%, transparent), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 3;
      pointer-events: none;
    }
    .card-effect-17:hover .scanline-beam {
      opacity: var(--scan-opacity, 0.85);
      animation: scanAnim var(--scan-speed, 1.4s) linear infinite;
    }
    @keyframes scanAnim {
      0% { top: -25%; }
      100% { top: 110%; }
    }

    /* EFFECT 18: Soundwave Equalizer Pulse */
    .card-effect-18 {
      --wave-bar-color: #f43f5e;
      --wave-pulse-speed: 0.6s;
      --wave-max-height: 55px;
    }
    .card-effect-18 .soundwave-bars {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70px;
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      padding: 0 20px 10px;
      gap: 5px;
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 2;
      pointer-events: none;
    }
    .card-effect-18 .wave-bar {
      flex: 1;
      background: var(--wave-bar-color);
      border-radius: 4px;
      height: 10px;
      transition: height 0.2s ease;
    }
    .card-effect-18:hover .soundwave-bars { opacity: 0.45; }
    .card-effect-18:hover .wave-bar:nth-child(odd) { animation: wavePulse var(--wave-pulse-speed, 0.6s) ease-in-out infinite alternate; }
    .card-effect-18:hover .wave-bar:nth-child(even) { animation: wavePulse var(--wave-pulse-speed, 0.6s) ease-in-out 0.3s infinite alternate; }
    @keyframes wavePulse { 0% { height: 8px; } 100% { height: var(--wave-max-height, 55px); } }

    /* ----------------------------------------------------
       GROUP 4: GLASS & MODERN DESIGN (19 – 22)
       ---------------------------------------------------- */

    /* EFFECT 19: Frosted Glass & Specular Beam */
    .card-effect-19 {
      --glass-blur: 24px;
      --glass-bg: rgba(255, 255, 255, 0.5);
      --glass-border: rgba(255, 255, 255, 0.6);
      --specular-speed: 0.75s;
      background: var(--glass-bg);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid var(--glass-border);
    }
    .card-effect-19 .specular-beam {
      position: absolute;
      top: -60%;
      left: -60%;
      width: 220%;
      height: 220%;
      background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.7) 50%, transparent 60%);
      transform: rotate(25deg) translateY(-100%);
      transition: transform var(--specular-speed, 0.75s) cubic-bezier(0.2, 0.9, 0.3, 1);
      pointer-events: none;
      z-index: 2;
    }
    .card-effect-19:hover .specular-beam {
      transform: rotate(25deg) translateY(100%);
    }

    /* EFFECT 20: Diagonal Silk Unfurl */
    .card-effect-20 {
      --silk-color: #7c1f31;
      --silk-speed: 0.7s;
      --silk-radius: 150%;
    }
    .card-effect-20 .silk-curtain {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--silk-color);
      clip-path: circle(0% at 0% 0%);
      transition: clip-path var(--silk-speed) cubic-bezier(0.22, 1, 0.36, 1);
      z-index: 2;
      pointer-events: none;
    }
    .card-effect-20:hover .silk-curtain {
      clip-path: circle(var(--silk-radius, 150%) at 0% 0%);
    }

    /* EFFECT 21: Prismatic Rainbow Refraction */
    .card-effect-21 {
      --prism-gradient: linear-gradient(135deg, rgba(255,0,80,0) 0%, rgba(255,0,80,0.8) 12%, rgba(255,120,0,0.85) 24%, rgba(255,225,0,0.9) 36%, rgba(255,255,255,0.95) 50%, rgba(0,230,130,0.85) 60%, rgba(0,180,255,0.88) 72%, rgba(160,50,255,0.85) 86%, rgba(160,50,255,0) 100%);
      --prism-speed: 0.85s;
      --prism-intensity: 0.85;
    }
    .card-effect-21 .prism-layer {
      position: absolute;
      inset: 0;
      border-radius: var(--card-radius);
      background: var(--prism-gradient);
      background-size: 250% 250%;
      background-position: 0% 0%;
      opacity: 0;
      mix-blend-mode: color-dodge;
      transition: opacity 0.35s ease, background-position var(--prism-speed, 0.85s) ease;
      pointer-events: none;
      z-index: 3;
    }
    .card-effect-21:hover .prism-layer {
      opacity: var(--prism-intensity, 0.85);
      background-position: 100% 100%;
    }

    /* EFFECT 22: Neo-Brutalism Sticker Pop */
    .card-effect-22 {
      --brutal-offset: 12px;
      --brutal-deg: -1deg;
      --brutal-shadow: #0f172a;
      box-shadow: var(--brutal-offset) var(--brutal-offset) 0px var(--brutal-shadow);
      border: 2px solid var(--brutal-shadow);
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .card-effect-22:hover {
      transform: translate(calc(var(--brutal-offset) * -0.5), calc(var(--brutal-offset) * -0.5)) rotate(var(--brutal-deg));
      box-shadow: calc(var(--brutal-offset) * 1.5) calc(var(--brutal-offset) * 1.5) 0px var(--brutal-shadow);
    }

    

/* ==========================================================================
   RUNTIME WRAPPER
   ========================================================================== */
.ms-modern-hover-cards { display: block; width: 100%; }
.ms-modern-hover-cards.reduced-motion *, .ms-modern-hover-cards.reduced-motion *::before, .ms-modern-hover-cards.reduced-motion *::after { transition: none !important; animation: none !important; }
.premium-card .mm-card-icon-font { font-size: 1.4em; line-height: 1; display: inline-flex; }