/* ============================================
   JEMMA.APP — Mascotte Image Styles
   Images generated by Gemini Imagen.
   Alt attributes contain generation prompts.
   ============================================ */

/* ---- Generic mascotte image container ---- */
.mascotte-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder style shown while image is not yet generated */
.mascotte-img {
  display: block;
  border-radius: var(--r-lg);
  object-fit: contain;
  /* Placeholder fallback */
  background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(99,102,241,0.06));
  border: 1px dashed rgba(16,185,129,0.25);
}

/* ---- Hero illustration ---- */
.mascotte-hero {
  width: 100%;
  max-width: 420px;
  height: 480px;
  filter: drop-shadow(0 30px 60px rgba(16,185,129,0.2));
  animation: float 5s ease-in-out infinite;
}

/* ---- Scenario cards ---- */
.mascotte-scenario {
  width: 100%;
  height: 180px;
  border-radius: var(--r-md);
  margin-bottom: 1.2rem;
  object-fit: cover;
}

/* ---- Feature card top icon ---- */
.mascotte-feature {
  width: 100%;
  height: 160px;
  border-radius: var(--r-md);
  margin-bottom: 1.2rem;
  object-fit: cover;
}

/* ---- Step / how-it-works ---- */
.mascotte-step {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-hi);
  flex-shrink: 0;
}

/* ---- Pricing tier ---- */
.mascotte-pricing {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  display: block;
}

/* ---- Testimonial avatar ---- */
.mascotte-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-hi);
  flex-shrink: 0;
}

/* ---- Glow effect on hover ---- */
.mascotte-img:hover {
  filter: drop-shadow(0 0 20px rgba(16,185,129,0.3));
  transition: filter 0.3s ease;
}

/* ---- Architecture diagram node ---- */
.mascotte-arch {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 0.5rem;
}