/* ==========================================================
   Titan service card - crimson wipe on hover
   ----------------------------------------------------------
   WHY THIS FILE EXISTS
   Divi 5 cannot express two things this effect needs:
     1. transform-origin (the wipe must flip right -> left)
     2. a child reacting to its PARENT's hover state
   Everything else - colour, radius, timing, spacing - is set
   natively on the module or its preset.

   NOTHING IN HERE IS A HARDCODED VALUE. Every colour and size
   is a Divi global colour or global variable. To change how
   the card looks, change the token in Divi, not this file.

   APPLIES TO
   Any column given the CSS class "titan-service-card"
   (Divi > column > Advanced > CSS Class).
   ========================================================== */

.titan-service-card {
  position: relative;
}

/* The wipe panel. Sits behind card content. */
.titan-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gcid-2bb8a513-465e-4f74-9d35-e2947186ec89); /* Titan Crimson */
  border-radius: inherit;                                       /* follows the card's own radius token */
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 180ms ease-out;
}

.titan-service-card:hover::before,
.titan-service-card:focus-within::before {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Keep card content above the panel. */
.titan-service-card > .et_pb_module {
  position: relative;
  z-index: 1;
}

/* Invert the caption over crimson. Scoped to this class so the
   same caption preset used elsewhere can never go white on white. */
.titan-service-card .et_pb_text,
.titan-service-card .et_pb_text p,
.titan-service-card .et_pb_text h3 {
  transition: color 180ms ease-out;
}

.titan-service-card:hover .et_pb_text,
.titan-service-card:hover .et_pb_text p,
.titan-service-card:hover .et_pb_text h3,
.titan-service-card:focus-within .et_pb_text,
.titan-service-card:focus-within .et_pb_text p,
.titan-service-card:focus-within .et_pb_text h3 {
  /* !important is required: Divi 5 emits the caption preset's heading
     colour with !important, so without it the hover colour never wins.
     Scoped to hover/focus inside this class only. */
  color: var(--gcid-28141c8b-3858-4587-b95f-def53f15d8af) !important; /* White */
}

@media (prefers-reduced-motion: reduce) {
  .titan-service-card::before,
  .titan-service-card .et_pb_text,
  .titan-service-card .et_pb_text p,
  .titan-service-card .et_pb_text h3 {
    transition: none;
  }
}