/* ==========================================================================
   TalentWebX — Flower Pop Success Modal
   Shown after a successful contact form submission
   ========================================================================== */

.success-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 13, 28, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.success-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Card ---------- */
.success-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--navy-600);
  border-radius: 24px;
  padding: 44px 32px 36px;
  text-align: center;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.65);
  transform: scale(0.7) translateY(30px);
  opacity: 0;
  overflow: visible;
}
.success-overlay.is-open .success-card {
  animation: cardPop 0.6s var(--ease) 0.08s forwards;
}
@keyframes cardPop {
  0%   { transform: scale(0.7) translateY(30px); opacity: 0; }
  60%  { transform: scale(1.04) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.success-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(244, 246, 250, 0.08);
  color: var(--slate-300);
  font-size: 1rem;
  display: grid;
  place-items: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.success-close:hover,
.success-close:focus-visible {
  background: rgba(255, 122, 0, 0.15);
  color: var(--orange-400);
  transform: rotate(90deg);
}

/* ---------- Flower petal burst (sits behind the checkmark) ---------- */
.petal-field {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 6px;
}
.petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 40px;
  margin: -20px 0 0 -13px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--orange-500);
  opacity: 0;
  transform-origin: 50% 100%;
  transform: rotate(var(--rot, 0deg)) translateY(0) scale(0);
}
.success-overlay.is-open .petal {
  animation: petalBurst 0.9s var(--ease) forwards;
  animation-delay: calc(var(--delay, 0s) + 0.15s);
}
@keyframes petalBurst {
  0%   { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(0) scale(0); }
  55%  { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(-46px) scale(1); }
  80%  { opacity: 1; transform: rotate(var(--rot, 0deg)) translateY(-42px) scale(0.92); }
  100% { opacity: 0; transform: rotate(var(--rot, 0deg)) translateY(-30px) scale(0.6); }
}
/* alternate petal tones for a fuller "flower" feel */
.petal:nth-child(3n)   { background: var(--orange-300); }
.petal:nth-child(4n)   { background: var(--pure-white); opacity: 0; }
.petal:nth-child(5n+1) { background: var(--orange-400); }

/* ---------- Checkmark badge ---------- */
.success-badge {
  position: relative;
  width: 84px;
  height: 84px;
  margin: -104px auto 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--orange-400), var(--orange-500));
  box-shadow: 0 0 0 8px rgba(255, 122, 0, 0.12), 0 20px 40px -12px var(--orange-glow);
  display: grid;
  place-items: center;
  transform: scale(0);
}
.success-overlay.is-open .success-badge {
  animation: badgePop 0.55s var(--ease) 0.55s forwards;
}
@keyframes badgePop {
  0%   { transform: scale(0) rotate(-20deg); }
  70%  { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.success-badge svg {
  width: 38px;
  height: 38px;
}
.success-badge path {
  fill: none;
  stroke: var(--pure-white);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.success-overlay.is-open .success-badge path {
  animation: drawCheck 0.4s ease-out 0.95s forwards;
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

/* ---------- Copy ---------- */
.success-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--pure-white);
  margin: 0 0 10px;
  opacity: 0;
  transform: translateY(10px);
}
.success-text {
  font-family: var(--font-body);
  font-size: 0.94rem;
  color: var(--slate-300);
  margin: 0 0 30px;
  opacity: 0;
  transform: translateY(10px);
}
.success-overlay.is-open .success-title {
  animation: fadeUp 0.45s var(--ease) 1.05s forwards;
}
.success-overlay.is-open .success-text {
  animation: fadeUp 0.45s var(--ease) 1.15s forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Social follow row ---------- */
.success-social {
  opacity: 0;
}
.success-overlay.is-open .success-social {
  animation: fadeUp 0.45s var(--ease) 1.25s forwards;
}
.success-social-label {
  font-family: var(--font-sub);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: 16px;
  position: relative;
}
.success-social-label::before,
.success-social-label::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 46px;
  height: 1px;
  background: var(--navy-600);
}
.success-social-label::before { right: calc(50% + 84px); }
.success-social-label::after  { left: calc(50% + 84px); }

.success-social-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.success-social-icons a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  color: var(--pure-white);
  background: var(--icon-color, var(--navy-600));
  transform: scale(0);
  opacity: 0;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), filter 0.2s;
}
.success-overlay.is-open .success-social-icons a {
  animation: iconPop 0.4s var(--ease) forwards;
}
.success-social-icons a:nth-child(1) { animation-delay: 1.35s !important; }
.success-social-icons a:nth-child(2) { animation-delay: 1.42s !important; }
.success-social-icons a:nth-child(3) { animation-delay: 1.49s !important; }
.success-social-icons a:nth-child(4) { animation-delay: 1.56s !important; }
@keyframes iconPop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.success-social-icons a:hover,
.success-social-icons a:focus-visible {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 10px 22px -6px var(--icon-color, rgba(0,0,0,0.4));
}

/* Brand colors per platform */
.icon-instagram { --icon-color: #E1306C; background: radial-gradient(circle at 30% 30%, #FEDA75, #FA7E1E 30%, #D62976 55%, #962FBF 75%, #4F5BD5 100%); }
.icon-facebook  { --icon-color: #1877F2; }
.icon-tiktok    { --icon-color: #010101; }
.icon-linkedin  { --icon-color: #0A66C2; }

@media (prefers-reduced-motion: reduce) {
  .success-overlay, .success-card, .petal, .success-badge, .success-badge path,
  .success-title, .success-text, .success-social, .success-social-icons a {
    animation: none !important;
    transition: opacity 0.2s linear !important;
  }
  .success-overlay.is-open .success-card,
  .success-overlay.is-open .success-badge,
  .success-overlay.is-open .success-title,
  .success-overlay.is-open .success-text,
  .success-overlay.is-open .success-social,
  .success-overlay.is-open .success-social-icons a {
    opacity: 1 !important;
    transform: none !important;
  }
  .success-badge path { stroke-dashoffset: 0 !important; }
  .petal { display: none; }
}

@media (max-width: 480px) {
  .success-card { padding: 40px 22px 30px; }
  .success-social-icons { gap: 10px; }
  .success-social-icons a { width: 42px; height: 42px; font-size: 0.95rem; }
}