/* ===== Contact Modal — Circle Expand Animation ===== */

@keyframes modal-reveal {
  0% {
    clip-path: circle(0px at var(--origin-x) var(--origin-y));
  }
  40% {
    clip-path: circle(calc(var(--reveal-radius) * 0.35) at var(--origin-x) var(--origin-y));
  }
  100% {
    clip-path: circle(var(--reveal-radius) at var(--origin-x) var(--origin-y));
  }
}

@keyframes modal-hide {
  0% {
    clip-path: circle(var(--reveal-radius) at var(--origin-x) var(--origin-y));
  }
  100% {
    clip-path: circle(0px at var(--origin-x) var(--origin-y));
  }
}

@keyframes modal-overlay-in {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  100% {
    opacity: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

@keyframes modal-overlay-out {
  0% {
    opacity: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  100% {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
}

@keyframes modal-content-in {
  0%,
  20% {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-content-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}

@keyframes modal-success-pop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.contact-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.contact-modal-overlay.is-open {
  pointer-events: all;
  animation: modal-overlay-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.contact-modal-overlay.is-closing {
  pointer-events: none;
  animation: modal-overlay-out 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.contact-modal-card {
  --origin-x: 50%;
  --origin-y: 50%;
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 600px);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--c-white);
  border-radius: var(--radius-2xl);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  clip-path: circle(0px at var(--origin-x) var(--origin-y));
}

.contact-modal-card.is-open {
  pointer-events: all;
  opacity: 1;
  visibility: visible;
  animation: modal-reveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.contact-modal-card.is-closing {
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  animation: modal-hide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.contact-modal-card::-webkit-scrollbar {
  display: none;
}

.contact-modal-inner {
  opacity: 0;
}

.contact-modal-card.is-open .contact-modal-inner {
  animation: modal-content-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

.contact-modal-card.is-closing .contact-modal-inner {
  animation: modal-content-out 0.2s ease forwards;
}

.contact-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
}

.contact-modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  margin: 0;
  line-height: 1.3;
  padding-right: var(--space-md);
}

.contact-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--c-gray-100);
  color: var(--c-gray-600);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  position: relative;
}

.contact-modal-close:hover {
  background: var(--c-gray-200);
  color: var(--c-ink);
  transform: rotate(90deg);
}

.contact-modal-close:active {
  transform: rotate(90deg) scale(0.92);
}

.contact-modal-close::before,
.contact-modal-close::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.contact-modal-close::before {
  transform: rotate(45deg);
}

.contact-modal-close::after {
  transform: rotate(-45deg);
}

.contact-modal-form {
  margin: 0;
}

.contact-modal-form .form-row .form-group {
  margin-bottom: 0;
}

.contact-modal-form .btn--submit {
  margin-top: var(--space-md);
  width: 100%;
  justify-content: center;
}

.contact-modal-success {
  display: none;
  text-align: center;
  padding: var(--space-xl) 0;
}

.contact-modal-card.is-success .contact-modal-inner {
  animation: none;
  opacity: 1;
}

.contact-modal-card.is-success .contact-modal-form {
  display: none;
}

.contact-modal-card.is-success .contact-modal-success {
  display: block;
  animation: modal-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.contact-modal-success__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-lg);
  border-radius: 50%;
  background: var(--c-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-modal-success__icon svg {
  width: 32px;
  height: 32px;
  color: var(--c-white);
}

.contact-modal-success__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  margin-bottom: var(--space-sm);
}

.contact-modal-success__text {
  color: var(--c-gray-600);
  font-size: var(--text-base);
}

@keyframes confetti-burst {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0);
    opacity: 1;
  }
  15% {
    opacity: 1;
    transform:
      translate(
        calc(sin(var(--i) * 2.4) * var(--spread) * 0.6),
        calc(cos(var(--i) * 1.8) * var(--spread) * -0.4)
      )
      rotate(calc(var(--i) * 120deg))
      scale(1);
  }
  100% {
    transform:
      translate(
        calc(sin(var(--i) * 2.4) * var(--spread)),
        calc(var(--fall))
      )
      rotate(calc(var(--i) * 600deg))
      scale(0.3);
    opacity: 0;
  }
}

.confetti {
  position: absolute;
  top: 40%;
  left: 50%;
  pointer-events: none;
  z-index: 1;
}

.confetti span {
  position: absolute;
  width: var(--size, 8px);
  height: var(--size, 8px);
  border-radius: var(--radius, 2px);
  background: var(--color);
  opacity: 0;
  --spread: 220px;
  --fall: 200px;
}

.contact-modal-card.is-success .confetti span {
  animation: confetti-burst calc(1s + var(--i) * 0.06s) cubic-bezier(0.15, 0.85, 0.35, 1) calc(var(--i) * 0.02s) forwards;
}

.confetti span:nth-child(1)  { --i: 1;  --color: var(--c-brand);       --size: 8px; --radius: 2px;   --fall: 170px; }
.confetti span:nth-child(2)  { --i: 2;  --color: var(--c-brand-light); --size: 6px; --radius: 50%;   --fall: 210px; }
.confetti span:nth-child(3)  { --i: 3;  --color: #f0c040;             --size: 10px; --radius: 2px;  --fall: 160px; }
.confetti span:nth-child(4)  { --i: 4;  --color: #ff6b6b;             --size: 7px; --radius: 50%;   --fall: 195px; }
.confetti span:nth-child(5)  { --i: 5;  --color: #4ade80;             --size: 8px; --radius: 2px;   --fall: 185px; }
.confetti span:nth-child(6)  { --i: 6;  --color: #f0c040;             --size: 6px; --radius: 50%;   --fall: 220px; }
.confetti span:nth-child(7)  { --i: 7;  --color: var(--c-brand);      --size: 9px; --radius: 2px;   --fall: 175px; }
.confetti span:nth-child(8)  { --i: 8;  --color: #ff6b6b;             --size: 5px; --radius: 50%;   --fall: 200px; }
.confetti span:nth-child(9)  { --i: 9;  --color: var(--c-brand-light); --size: 7px; --radius: 2px;  --fall: 210px; }
.confetti span:nth-child(10) { --i: 10; --color: #4ade80;             --size: 8px; --radius: 50%;   --fall: 180px; }
.confetti span:nth-child(11) { --i: 11; --color: #f0c040;             --size: 6px; --radius: 2px;   --fall: 190px; }
.confetti span:nth-child(12) { --i: 12; --color: var(--c-brand);      --size: 9px; --radius: 50%;   --fall: 205px; }
.confetti span:nth-child(13) { --i: 13; --color: #ff6b6b;             --size: 7px; --radius: 2px;   --fall: 165px; }
.confetti span:nth-child(14) { --i: 14; --color: var(--c-brand-light); --size: 8px; --radius: 50%;  --fall: 215px; }
.confetti span:nth-child(15) { --i: 15; --color: #4ade80;             --size: 5px; --radius: 2px;   --fall: 185px; }
.confetti span:nth-child(16) { --i: 16; --color: #f0c040;             --size: 10px; --radius: 50%;  --fall: 175px; }
.confetti span:nth-child(17) { --i: 17; --color: var(--c-brand);      --size: 6px; --radius: 2px;   --fall: 200px; }
.confetti span:nth-child(18) { --i: 18; --color: #ff6b6b;             --size: 8px; --radius: 50%;   --fall: 190px; }
.confetti span:nth-child(19) { --i: 19; --color: #4ade80;             --size: 7px; --radius: 2px;   --fall: 180px; }
.confetti span:nth-child(20) { --i: 20; --color: var(--c-brand-light); --size: 9px; --radius: 50%;  --fall: 210px; }
.confetti span:nth-child(21) { --i: 21; --color: #f0c040;             --size: 6px; --radius: 2px;   --fall: 195px; }
.confetti span:nth-child(22) { --i: 22; --color: #ff6b6b;             --size: 8px; --radius: 50%;   --fall: 170px; }
.confetti span:nth-child(23) { --i: 23; --color: var(--c-brand);      --size: 5px; --radius: 2px;   --fall: 220px; }
.confetti span:nth-child(24) { --i: 24; --color: #4ade80;             --size: 10px; --radius: 50%;  --fall: 185px; }
.confetti span:nth-child(25) { --i: 25; --color: var(--c-brand-light); --size: 7px; --radius: 2px;  --fall: 200px; }
.confetti span:nth-child(26) { --i: 26; --color: #f0c040;             --size: 8px; --radius: 50%;   --fall: 190px; }
.confetti span:nth-child(27) { --i: 27; --color: #ff6b6b;             --size: 6px; --radius: 2px;   --fall: 215px; }
.confetti span:nth-child(28) { --i: 28; --color: var(--c-brand);      --size: 9px; --radius: 50%;   --fall: 175px; }
.confetti span:nth-child(29) { --i: 29; --color: #4ade80;             --size: 7px; --radius: 2px;   --fall: 205px; }
.confetti span:nth-child(30) { --i: 30; --color: var(--c-brand-light); --size: 8px; --radius: 50%;  --fall: 195px; }
.confetti span:nth-child(31) { --i: 31; --color: #f0c040;             --size: 5px; --radius: 2px;   --fall: 185px; }
.confetti span:nth-child(32) { --i: 32; --color: #ff6b6b;             --size: 10px; --radius: 50%;  --fall: 210px; }
.confetti span:nth-child(33) { --i: 33; --color: var(--c-brand);      --size: 6px; --radius: 2px;   --fall: 180px; }
.confetti span:nth-child(34) { --i: 34; --color: #4ade80;             --size: 8px; --radius: 50%;   --fall: 200px; }
.confetti span:nth-child(35) { --i: 35; --color: var(--c-brand-light); --size: 7px; --radius: 2px;  --fall: 190px; }
.confetti span:nth-child(36) { --i: 36; --color: #f0c040;             --size: 9px; --radius: 50%;   --fall: 215px; }
.confetti span:nth-child(37) { --i: 37; --color: #ff6b6b;             --size: 6px; --radius: 2px;   --fall: 170px; }
.confetti span:nth-child(38) { --i: 38; --color: var(--c-brand);      --size: 8px; --radius: 50%;   --fall: 205px; }
.confetti span:nth-child(39) { --i: 39; --color: #4ade80;             --size: 7px; --radius: 2px;   --fall: 195px; }
.confetti span:nth-child(40) { --i: 40; --color: var(--c-brand-light); --size: 5px; --radius: 50%;  --fall: 220px; }

@media (prefers-reduced-motion: reduce) {
  .contact-modal-overlay,
  .contact-modal-card,
  .contact-modal-card .contact-modal-inner,
  .contact-modal-card .contact-modal-success,
  .contact-modal-card .confetti span {
    animation-duration: 0.01s !important;
    transition-duration: 0.01s !important;
  }
}

@media (max-width: 640px) {
  .contact-modal-card {
    width: 96vw;
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    max-height: 94vh;
  }

  .contact-modal-form .form-row {
    grid-template-columns: 1fr;
  }
}