/* ===========================
   Soul Reveal Overlay
   =========================== */

.soulveil {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;
  padding: 24px;

  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  animation: soulveil-fade-in 0.4s ease-out both;
}

@keyframes soulveil-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Card */

.soulveil__card {
  position: relative;
  width: min(720px, 92vw);

  padding: 24px 24px 20px;
  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.04)
    );

  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);

  overflow: hidden;
}

/* Soft mythic glow */

.soulveil__glow {
  position: absolute;
  inset: -80px;
  pointer-events: none;

  background:
    radial-gradient(circle at 30% 20%, rgba(125,211,252,0.18), transparent 55%),
    radial-gradient(circle at 70% 35%, rgba(251,207,232,0.14), transparent 60%),
    radial-gradient(circle at 50% 90%, rgba(253,230,138,0.10), transparent 60%);

  filter: blur(12px);
}

/* Header */

.soulveil__title {
  position: relative;
  margin-bottom: 14px;

  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  opacity: 0.7;
}

/* Text lines */

.soulveil__lines {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 6px 0 16px;
}

.soulveil__line {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);

  font-size: 18px;
  line-height: 1.35;

  transition:
    opacity 0.7s ease,
    transform 0.7s ease,
    filter 0.7s ease;
}

.soulveil__line.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Actions */

.soulveil__actions {
  position: relative;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Optional button styling (remove if you already have global buttons) */

.soulveil .btn {
  padding: 10px 16px;
  border-radius: 14px;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.9);

  cursor: pointer;
}

.soulveil .btn:hover {
  filter: brightness(1.06);
}

.soulveil .btn--primary {
  background: rgba(125,211,252,0.18);
  border-color: rgba(125,211,252,0.32);
}

/* --- Card arrival animation --- */
.soulveil__card{
  animation: soulveil-card-in 0.55s ease-out both;
}

@keyframes soulveil-card-in{
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Optional: subtle rune/grain haze (no image) --- */
.soulveil__card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.08;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      transparent 2px,
      transparent 6px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 1px,
      transparent 2px,
      transparent 10px
    );
}

/* --- Make first line feel like a “title reveal” --- */
.soulveil__line:first-child{
  font-size: 22px;
  letter-spacing: 0.01em;
}

/* --- Better breathing on small screens --- */
@media (max-width: 520px){
  .soulveil{ padding: 16px; }
  .soulveil__card{ padding: 18px 18px 16px; border-radius: 18px; }
  .soulveil__line{ font-size: 16px; }
  .soulveil__line:first-child{ font-size: 20px; }
}


.soulveil__line.is-visible{
  text-shadow: 0 0 18px rgba(125,211,252,0.08);
}