/* ============================================================
   Magenta Private Island — Testimonial Snippet Widget
   Structural styles only.

   All colors, font families, and font sizes are applied as
   inline styles by mpi-snippet-widget.js — do not hardcode
   them here. Changes here affect layout and animation only.
   ============================================================ */


/* ── Outer container ─────────────────────────────────────────────────── */

/*
  Block element that sits inside whatever WPBakery column it is placed in.
  Width is set as an inline style by JS (from the data-width attribute).
  pointer-events: none — the widget is display-only; no interactive children.
*/
.mpi-snippet-rotator {
  display: block;
  position: relative;
  pointer-events: none;
}


/* ── Animated inner panel ────────────────────────────────────────────── */

/*
  animation-duration defaults to 7s here but is overridden per-instance
  by an inline style written by JS to match the configured rotation speed.
  iteration-count: 1 + fill-mode: forwards — plays once and holds opacity:0
  so the element stays invisible until JS replaces innerHTML with the next
  snippet. Never use `infinite` here (see §13.1 of CLAUDE.md).
*/
.mpi-snippet-inner {
  animation: mpiSnippetFade 7s ease-in-out 1 forwards;
  border-radius: 12px;
  padding: 28px 28px 22px;
}

@keyframes mpiSnippetFade {
  0%   { opacity: 0; transform: translateY(14px); }
  14%  { opacity: 1; transform: translateY(0);    }
  80%  { opacity: 1; transform: translateY(0);    }
  100% { opacity: 0; transform: translateY(-8px); }
}


/* ── Quote text ──────────────────────────────────────────────────────── */

/*
  font-family, font-size, color, and text-align are all inline styles.
  padding-left creates clearance for the absolutely-positioned opening
  mark regardless of text alignment.
*/
.mpi-snippet-quote {
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 14px;
  padding-left: 30px;
  position: relative;  /* establishes context for .mpi-snippet-mark */
}


/* ── Decorative closing quotation mark ───────────────────────────────── */

/*
  Rendered as an inline <span> by JS so its color can be set via inline
  style. font-size uses em so it scales proportionally with whatever
  font-size is applied to the parent .mpi-snippet-quote by JS.
  (e.g. 3.1 × 22px = ~68px at the default font size.)
*/
.mpi-snippet-mark {
  font-family: Georgia, serif;
  font-size: 3.1em;
  opacity: 0.7;
  position: absolute;
  left: -6px;
  top: -18px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}


/* ── Attribution / reviewer name ─────────────────────────────────────── */

/*
  font-family, color, and text-align are inline styles.
  font-size, weight, letter-spacing, and transform are structural constants.
*/
.mpi-snippet-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}