/* ============================================================
   Urban Strategy Room — Clip-Path Motion System
   Circle / Inset / Iris / Melt
   ============================================================ */

/* ---- Circle: used for mobile nav panel (see style.css .main-nav.is-open) ---- */
@keyframes circleReveal {
  0% { clip-path: circle(0% at 90% 5%); }
  100% { clip-path: circle(150% at 90% 5%); }
}

/* ---- Inset: card / image hover reveal ---- */
.inset-reveal {
  position: relative;
  overflow: hidden;
}
.inset-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(201,162,75,.14);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .5s cubic-bezier(.6,0,.2,1);
  pointer-events: none;
}
.inset-reveal:hover::after { clip-path: inset(0 0 0 0); }

/* ---- Iris: badge / logo / modal-step entrance ---- */
@keyframes irisIn {
  0% { clip-path: circle(0% at 50% 50%); opacity: 0; }
  100% { clip-path: circle(75% at 50% 50%); opacity: 1; }
}
.iris-in {
  animation: irisIn .6s cubic-bezier(.4,0,.2,1) both;
}

/* ---- Melt: section divider / lightbox transition ---- */
@keyframes meltIn {
  0% {
    clip-path: polygon(0 12%, 10% 0%, 25% 10%, 40% 2%, 55% 12%, 70% 3%, 85% 11%, 100% 4%, 100% 100%, 0 100%);
    opacity: 0;
  }
  100% {
    clip-path: polygon(0 0%, 10% 0%, 25% 0%, 40% 0%, 55% 0%, 70% 0%, 85% 0%, 100% 0%, 100% 100%, 0 100%);
    opacity: 1;
  }
}
.melt-in { animation: meltIn .7s cubic-bezier(.3,0,.2,1) both; }

.melt-divider {
  position: relative;
  height: 64px;
  overflow: hidden;
  margin-top: -1px;
}
.melt-divider svg { width: 100%; height: 100%; display: block; }

/* ---- Contact step transitions ---- */
.step-panel {
  display: none;
}
.step-panel.is-active {
  display: block;
  animation: irisIn .55s cubic-bezier(.4,0,.2,1) both;
}

/* ---- Lightbox image swap ---- */
.lightbox-media.is-changing img {
  animation: meltIn .5s cubic-bezier(.3,0,.2,1) both;
}

@media (prefers-reduced-motion: reduce) {
  .iris-in, .melt-in, .lightbox-media.is-changing img, .step-panel.is-active {
    animation: none !important;
  }
}