/* ==========================================================================
   NetrAI — Mission / Vision / Values
   --------------------------------------------------------------------------
   Ported from the React <SkewCards> component. Every mechanic is kept:

     · a gradient panel skewed 15deg, half-width, offset left
     · a blurred twin of it behind, which is what makes the glow
     · two blobs that drift on a loop and expand out of the corners on hover
     · a glass content panel that slides left and grows its padding on hover

   TWO THINGS CHANGED, AND WHY

   1. THE PALETTE. The component ships #ffbc00 -> #ff0058, #4dff03 -> #00d0ff:
      hot pink, amber, lime. On a site whose entire colour rule is "exactly one
      chromatic interactive colour, and it has one job", three neon gradients
      would have been the loudest thing on the page and the only place a second
      colour system existed. The three pairs here are drawn from the palette the
      dark ambient mesh already uses — indigo, blue, teal, violet — so the cards
      still read as three distinct identities without importing a new world.
      Each card carries its own pair as --mv-a / --mv-b, so re-colouring one is
      a two-value edit in the markup.

   2. LEGIBILITY ON A LIGHT PAGE. The original is built for a dark background:
      the content sits in a 5%-white panel with white type, and where the card
      extends past the gradient the type falls on the dark page and still reads.
      On a near-white canvas that same type would vanish. So the gradient became
      a backdrop the content sits ON TOP of rather than IN — the content panel
      is the site's frosted glass at full strength with --ink type, and the
      gradient shows as a coloured aura around and behind it. The motion is
      identical; only what the text sits on changed.
   ========================================================================== */

.mvv-skew-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px 30px;
  justify-items: center;
  margin-top: 48px;
}
@media (min-width: 700px)  { .mvv-skew-grid { grid-template-columns: repeat(2, minmax(0, 340px)); } }
@media (min-width: 1040px) { .mvv-skew-grid { grid-template-columns: repeat(3, minmax(0, 340px)); } }

.mvv-skew {
  position: relative;
  width: 100%;
  max-width: 340px;
  min-height: 400px;
  display: flex;
  align-items: center;
  isolation: isolate;
}

/* ---- The skewed panel, and its blurred twin ----------------------------
   Both share the same geometry and transition; the twin adds blur and sits
   behind. Animating `left` and `width` is normally the wrong call, but these
   are two decorative spans with nothing laid out inside them — the layout
   cost is confined to the element itself and never touches the text. */
.mvv-skew-panel,
.mvv-skew-glow {
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  border-radius: var(--radius-lg);
  background: linear-gradient(315deg, var(--mv-a), var(--mv-b));
  transform: skewX(15deg);
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    left      520ms cubic-bezier(0.22, 1, 0.36, 1),
    width     520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mvv-skew-glow {
  filter: blur(30px);
  opacity: 0.55;
  z-index: -1;
}
[data-theme="dark"] .mvv-skew-glow { opacity: 0.75; }

.mvv-skew:hover .mvv-skew-panel,
.mvv-skew:hover .mvv-skew-glow,
.mvv-skew:focus-within .mvv-skew-panel,
.mvv-skew:focus-within .mvv-skew-glow {
  transform: skewX(0deg);
  left: 20px;
  width: calc(100% - 90px);
}

/* ---- The drifting blobs ------------------------------------------------
   Zero-sized and invisible until hover, then they expand out past the card's
   corners. The float keyframe runs the whole time so they arrive already in
   motion rather than popping into a static position. */
.mvv-skew-blobs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.mvv-skew-blobs i {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  animation: mvv-blob 2s ease-in-out infinite;
  transition:
    width   520ms cubic-bezier(0.22, 1, 0.36, 1),
    height  520ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 520ms ease,
    top     520ms cubic-bezier(0.22, 1, 0.36, 1),
    left    520ms cubic-bezier(0.22, 1, 0.36, 1),
    right   520ms cubic-bezier(0.22, 1, 0.36, 1),
    bottom  520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mvv-skew-blobs i:first-child { top: 0; left: 0; }
.mvv-skew-blobs i:last-child  { bottom: 0; right: 0; animation-delay: -1s; }

.mvv-skew:hover .mvv-skew-blobs i:first-child,
.mvv-skew:focus-within .mvv-skew-blobs i:first-child {
  top: -50px; left: 50px; width: 100px; height: 100px; opacity: 1;
}
.mvv-skew:hover .mvv-skew-blobs i:last-child,
.mvv-skew:focus-within .mvv-skew-blobs i:last-child {
  bottom: -50px; right: 50px; width: 100px; height: 100px; opacity: 1;
}

@keyframes mvv-blob {
  0%, 100% { transform: translateY(10px); }
  50%      { transform: translateY(-10px); }
}

/* ---- Content ----------------------------------------------------------- */
.mvv-skew-body {
  position: relative;
  z-index: 2;
  left: 0;
  width: 100%;
  padding: 26px 34px;
  border-radius: var(--radius-lg);

  /* Frosted glass at full strength. This is the departure from the original,
     which used a 5%-white panel and white type over a dark page — see the
     header note. The strong tint is what keeps --ink readable once the
     gradient expands underneath it on hover. */
  background: var(--glass-tint-strong, var(--surface-white));
  -webkit-backdrop-filter: blur(20px) saturate(var(--glass-sat, 165%));
  backdrop-filter: blur(20px) saturate(var(--glass-sat, 165%));
  border: 1px solid var(--glass-hairline, var(--line));
  box-shadow:
    inset 0 1px 0 0 var(--glass-edge),
    inset 0 -1px 0 0 var(--glass-edge-dim),
    var(--glass-drop);
  color: var(--ink);
  transition:
    left    520ms cubic-bezier(0.22, 1, 0.36, 1),
    padding 520ms cubic-bezier(0.22, 1, 0.36, 1),
    background var(--transition);
}
.mvv-skew:hover .mvv-skew-body,
.mvv-skew:focus-within .mvv-skew-body {
  left: -25px;
  padding: 46px 34px;
}

.mvv-skew-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  margin-bottom: 16px;
  color: #fff;
  background: linear-gradient(315deg, var(--mv-a), var(--mv-b));
}
.mvv-skew-icon svg { width: 21px; height: 21px; }

.mvv-skew-title {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  margin: 0 0 10px;
}

.mvv-skew-body p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--mist);
  text-align: left;
  text-wrap: pretty;
}

/* ---- Touch -------------------------------------------------------------
   There is no hover on a phone, so the card would sit in its resting state
   forever — a skewed slab half behind the text, which reads as a rendering
   fault rather than a design. On coarse pointers the cards ship in the
   hovered geometry and stay there. */
@media (hover: none), (pointer: coarse) {
  .mvv-skew-panel,
  .mvv-skew-glow { transform: skewX(0deg); left: 16px; width: calc(100% - 32px); }
  .mvv-skew-body { left: 0; padding: 32px 26px; }
  .mvv-skew-blobs { display: none; }
  .mvv-skew { min-height: 0; }
}

/* ---- Reduced motion ----------------------------------------------------
   The blobs stop drifting and the transitions collapse; the hover states
   still apply, they just arrive instantly. */
@media (prefers-reduced-motion: reduce) {
  .mvv-skew-panel,
  .mvv-skew-glow,
  .mvv-skew-body,
  .mvv-skew-blobs i {
    transition: none;
  }
  .mvv-skew-blobs i { animation: none; }
}

@media print {
  .mvv-skew-panel, .mvv-skew-glow, .mvv-skew-blobs { display: none; }
  .mvv-skew-body { left: 0; background: #fff; box-shadow: none; border: 1px solid #ccc; }
}