/* ==========================================================================
   CONTACT FORM — INTERACTION & MOTION LAYER
   Activated by script.js (adds .urnm-cf / .urnm-cf-ready); without JS the
   form renders exactly as before. Transform/opacity-only for smooth fps.
   ========================================================================== */

.urnm-cf {
  --cf-red: #D01722;
  --cf-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Normalise field layout so the animated underline sits flush on the input */
.urnm-cf label { position: relative; display: block; }
.urnm-cf label > .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.urnm-cf input,
.urnm-cf select,
.urnm-cf textarea {
  display: block;
  vertical-align: top;
  transition:
    border-color 0.3s var(--cf-ease),
    background-color 0.3s var(--cf-ease),
    box-shadow 0.35s var(--cf-ease);
}
.urnm-cf textarea { resize: vertical; min-height: 140px; }

/* ---------- 1. Staggered entrance ---------- */
.urnm-cf-ready:not(.is-in) .cf-item { opacity: 0; }
.urnm-cf-ready.is-in .cf-item {
  animation: cfItemIn 0.75s var(--cf-ease) backwards;
  animation-delay: calc(var(--cf-i, 0) * 85ms + 120ms);
}
@keyframes cfItemIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- 2. Focus: sweeping red underline + glow ---------- */
.urnm-cf label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--cf-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--cf-ease);
  pointer-events: none;
}
.urnm-cf label:focus-within::after,
.urnm-cf label.is-invalid::after { transform: scaleX(1); }

.urnm-cf input:focus,
.urnm-cf select:focus,
.urnm-cf textarea:focus {
  border-color: var(--cf-red);
  background-color: rgba(208, 23, 34, 0.05);
  box-shadow: 0 0 0 3px rgba(208, 23, 34, 0.14), 0 10px 30px -14px rgba(208, 23, 34, 0.55);
}
.urnm-cf input:hover:not(:focus),
.urnm-cf select:hover:not(:focus),
.urnm-cf textarea:hover:not(:focus) { border-color: rgba(255, 255, 255, 0.28); }

/* Label text nudges and turns red on focus */
.urnm-cf label > .eyebrow {
  transition: color 0.3s var(--cf-ease), transform 0.4s var(--cf-ease);
}
.urnm-cf label:focus-within > .eyebrow {
  color: var(--cf-red);
  transform: translate3d(4px, 0, 0);
}

/* ---------- 3. Filled indicator (red tick dot) ---------- */
.urnm-cf label > .eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--cf-red);
  transform: scale(0) rotate(45deg);
  transition: transform 0.35s var(--cf-ease);
  flex-shrink: 0;
}
.urnm-cf label.is-filled > .eyebrow::before { transform: scale(1) rotate(45deg); }

/* ---------- 4. Invalid: shake + red state ---------- */
.urnm-cf label.is-invalid > .eyebrow { color: var(--cf-red); }
.urnm-cf label.is-invalid input,
.urnm-cf label.is-invalid select,
.urnm-cf label.is-invalid textarea { border-color: var(--cf-red); }
.urnm-cf label.cf-shake { animation: cfShake 0.45s var(--cf-ease); }
@keyframes cfShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-8px, 0, 0); }
  40% { transform: translate3d(7px, 0, 0); }
  60% { transform: translate3d(-5px, 0, 0); }
  80% { transform: translate3d(3px, 0, 0); }
}

/* ---------- 5. Submit button: lift, shine sweep, sending & sent states ---------- */
.urnm-cf button[type="submit"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  opacity: 1 !important;
  transition:
    transform 0.3s var(--cf-ease),
    box-shadow 0.3s var(--cf-ease),
    background-color 0.3s var(--cf-ease);
}
.urnm-cf button[type="submit"]::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.38) 50%, transparent 100%);
  transform: skewX(-20deg) translate3d(0, 0, 0);
  transition: transform 0.8s var(--cf-ease);
  pointer-events: none;
}
.urnm-cf button[type="submit"]:hover,
.urnm-cf button[type="submit"]:focus-visible {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 14px 30px -12px rgba(208, 23, 34, 0.75);
}
.urnm-cf button[type="submit"]:hover::before,
.urnm-cf button[type="submit"]:focus-visible::before {
  transform: skewX(-20deg) translate3d(420%, 0, 0);
}
.urnm-cf button[type="submit"]:active {
  transform: translate3d(0, 0, 0) scale(0.97);
  transition-duration: 0.1s;
}

/* Progress bar while preparing the draft */
.urnm-cf button[type="submit"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.9);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.urnm-cf button[type="submit"].is-sending { cursor: progress; }
.urnm-cf button[type="submit"].is-sending::after {
  animation: cfProgress 0.9s var(--cf-ease) forwards;
}
@keyframes cfProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.urnm-cf button[type="submit"].is-sent {
  background-color: #0f0f10 !important;
  box-shadow: inset 0 0 0 1px var(--cf-red);
}
.urnm-cf .cf-btn-label {
  display: inline-block;
  animation: cfLabelIn 0.45s var(--cf-ease) both;
}
@keyframes cfLabelIn {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .urnm-cf *,
  .urnm-cf *::before,
  .urnm-cf *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .urnm-cf-ready:not(.is-in) .cf-item { opacity: 1; }
}