/**
 * fuse-card background-gradient transition (.transition-background-from) and its
 * utilities (.transition-from-background-*, .transition-from-background-angle-*,
 * .card-transition-to-dark-background).
 *
 * The --Gradient-* tokens themselves come from the theme (carsbusiness
 * scss/_variables.scss). The theme uses literal angles so the block editor's
 * gradient picker can parse them, so the --gradient-*-angle vars the Astro app
 * defines don't exist here; the fallbacks below are the same defaults
 * (sky 180deg, twilight 90deg, midday 105deg).
 *
 * Keep identical with the Astro mirror (backend/src/styles/fuse-bg-gradients.css),
 * apart from those fallbacks.
 */

/* fuse-card paints [part=base] from --ep-card-color-background inside its shadow DOM, so set the token, not background. */

fuse-card.card-brand-gradient-sky {
  --ep-card-color-background: var(--Gradient-Brand-Sky) !important;
}
fuse-card.card-brand-gradient-sunrise {
  --ep-card-color-background: var(--Gradient-Brand-Sunrise) !important;
}
/*
 * Cross-fade between any two backgrounds (gradient types can't be interpolated).
 * The base paints nothing. A static ::before layer holds the resting
 * --transition-from-background and a ::after layer holds the hover/target
 * background (--card-transition-to-background), fading in on hover. The target is
 * never painted at rest, so it can't fringe through the antialiased rounded corners
 * under the resting layer. The base is an isolated stacking context and both layers
 * sit at z-index -1, so they stay behind the body/media content.
 */
fuse-card.card-brand-gradient-sky.transition-background-from {
  --card-transition-to-background: var(--Gradient-Brand-Sky);
}
fuse-card.card-brand-gradient-sunrise.transition-background-from {
  --card-transition-to-background: var(--Gradient-Brand-Sunrise);
}
fuse-card.transition-background-from {
  --ep-card-color-background: transparent !important;
}
fuse-card.transition-background-from::part(base) {
  --gradient-sunrise-shape: circle farthest-corner;
  position: relative;
  isolation: isolate;
}
fuse-card.transition-background-from::part(base)::before,
fuse-card.transition-background-from::part(base)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-clip: padding-box;
  pointer-events: none;
}
fuse-card.transition-background-from::part(base)::before {
  background: var(--transition-from-background, #ffffff);
}
fuse-card.transition-background-from::part(base)::after {
  background: var(--card-transition-to-background, transparent);
  opacity: 0;
  transition: opacity var(--transition-from-duration, 0.5s);
}
fuse-card.transition-background-from:hover::part(base)::after {
  opacity: 1;
}

/*
 * Utilities for the resting ("from") layer of .transition-background-from, instead of
 * setting --transition-from-background by hand. The hover layer is untouched.
 * The linear gradients are rebuilt here (same stops as the --Gradient-* tokens above)
 * so --transition-from-angle rotates only this layer; the shared --gradient-*-angle
 * vars would also rotate the hover layer, since both resolve on the card. Without an
 * angle utility they fall back to those shared vars. Keep stops in sync with the tokens.
 */
.transition-from-background-purple-sunrise {
  --transition-from-background: var(--Gradient-Purple-Sunrise);
}
.transition-from-background-blue-sunrise {
  --transition-from-background: var(--Gradient-Blue-Sunrise);
}
.transition-from-background-brand-sunrise {
  --transition-from-background: var(--Gradient-Brand-Sunrise);
}
.transition-from-background-purple-sky {
  --transition-from-background: linear-gradient(
    var(--transition-from-angle, var(--gradient-sky-angle, 180deg)),
    var(--White) 0%,
    var(--Purple-10) 100%
  );
}
.transition-from-background-blue-sky {
  --transition-from-background: linear-gradient(
    var(--transition-from-angle, var(--gradient-sky-angle, 180deg)),
    var(--White) 0%,
    var(--Sky-10) 100%
  );
}
.transition-from-background-brand-sky {
  --transition-from-background: linear-gradient(
    var(--transition-from-angle, var(--gradient-sky-angle, 180deg)),
    var(--White) 0%,
    var(--Brand-10) 100%
  );
}
.transition-from-background-twilight-sky {
  --transition-from-background: linear-gradient(
    var(--transition-from-angle, var(--gradient-twilight-angle, 90deg)),
    var(--Purple-90) 0%,
    var(--Sky-90) 100%
  );
}
.transition-from-background-midday-purple {
  --transition-from-background: linear-gradient(
    var(--transition-from-angle, var(--gradient-midday-angle, 105deg)),
    var(--Purple-60) 15%,
    var(--Sky-60) 97.5%
  );
}
.transition-from-background-midday-sky {
  --transition-from-background: linear-gradient(
    var(--transition-from-angle, var(--gradient-midday-angle, 105deg)),
    var(--Sky-60) 15%,
    var(--Teal-50) 97.5%
  );
}
.transition-from-background-midday-brand {
  --transition-from-background: linear-gradient(
    var(--transition-from-angle, var(--gradient-midday-angle, 105deg)),
    var(--Brand-60) 15%,
    var(--Brand-Contrast-60) 97.5%
  );
}

/* Angle for the resting layer: multiples of 30 and 45 degrees. Sunrise is radial, so it ignores these. */
.transition-from-background-angle-0 { --transition-from-angle: 0deg; }
.transition-from-background-angle-30 { --transition-from-angle: 30deg; }
.transition-from-background-angle-45 { --transition-from-angle: 45deg; }
.transition-from-background-angle-60 { --transition-from-angle: 60deg; }
.transition-from-background-angle-90 { --transition-from-angle: 90deg; }
.transition-from-background-angle-120 { --transition-from-angle: 120deg; }
.transition-from-background-angle-135 { --transition-from-angle: 135deg; }
.transition-from-background-angle-150 { --transition-from-angle: 150deg; }
.transition-from-background-angle-180 { --transition-from-angle: 180deg; }
.transition-from-background-angle-210 { --transition-from-angle: 210deg; }
.transition-from-background-angle-225 { --transition-from-angle: 225deg; }
.transition-from-background-angle-240 { --transition-from-angle: 240deg; }
.transition-from-background-angle-270 { --transition-from-angle: 270deg; }
.transition-from-background-angle-300 { --transition-from-angle: 300deg; }
.transition-from-background-angle-315 { --transition-from-angle: 315deg; }
.transition-from-background-angle-330 { --transition-from-angle: 330deg; }

/*
 * Pair with .transition-background-from when the hover background is dark: text
 * fades on the same timing as the background cross-fade. Uncolored text goes white;
 * colored text goes to a lighter step of its own hue: .subheading to 50, an editor text
 * color (.has-{hue}-NN-color) to 30. !important beats fuse-link's own link color and the
 * has-*-color utility classes.
 */
fuse-card.card-transition-to-dark-background :is(h1, h2, h3, h4, h5, h6, p, a, span, strong, sup, li) {
  transition: color var(--transition-from-duration, 0.5s);
}
fuse-card.card-transition-to-dark-background:hover :is(h1, h2, h3, h4, h5, h6, p, a, span, strong, sup, li):not(.subheading, .subheading *, .has-text-color, .has-text-color *) {
  color: var(--White, #fff) !important;
}
fuse-card.card-transition-to-dark-background:hover :is(.has-brand-60-color, .has-brand-60-color *) {
  color: var(--Brand-30) !important;
}
fuse-card.card-transition-to-dark-background:hover :is(.subheading, .subheading *) {
  color: var(--Brand-50) !important;
}
fuse-card.card-transition-to-dark-background:hover :is([class*="has-sky-"][class*="-color"], [class*="has-sky-"][class*="-color"] *) {
  color: var(--Sky-30) !important;
}
fuse-card.card-transition-to-dark-background:hover :is([class*="has-purple-"][class*="-color"], [class*="has-purple-"][class*="-color"] *) {
  color: var(--Purple-30) !important;
}
fuse-card.card-transition-to-dark-background:hover :is([class*="has-teal-"][class*="-color"], [class*="has-teal-"][class*="-color"] *) {
  color: var(--Teal-30) !important;
}

/*
 * Touch/mobile (below md, 768px): there is no hover, so cards rest in their hover state:
 * the target background shows, and dark-background cards use the light hover text colors.
 */
@media (width < 768px) {
  fuse-card.transition-background-from::part(base)::after {
    opacity: 1;
  }
  fuse-card.card-transition-to-dark-background :is(h1, h2, h3, h4, h5, h6, p, a, span, strong, sup, li):not(.subheading, .subheading *, .has-text-color, .has-text-color *) {
    color: var(--White, #fff) !important;
  }
  fuse-card.card-transition-to-dark-background :is(.has-brand-60-color, .has-brand-60-color *) {
    color: var(--Brand-30) !important;
  }
  fuse-card.card-transition-to-dark-background :is(.subheading, .subheading *) {
    color: var(--Brand-50) !important;
  }
  fuse-card.card-transition-to-dark-background :is([class*="has-sky-"][class*="-color"], [class*="has-sky-"][class*="-color"] *) {
    color: var(--Sky-30) !important;
  }
  fuse-card.card-transition-to-dark-background :is([class*="has-purple-"][class*="-color"], [class*="has-purple-"][class*="-color"] *) {
    color: var(--Purple-30) !important;
  }
  fuse-card.card-transition-to-dark-background :is([class*="has-teal-"][class*="-color"], [class*="has-teal-"][class*="-color"] *) {
    color: var(--Teal-30) !important;
  }
}