/* ==========================================================================
   Contact Section — styles for contactSection.php
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section-title masks (shared pattern across sections)
   -------------------------------------------------------------------------- */
.leftmask   { transform: translateX(0); }
.rightmask  { transform: translateX(0); }
.topmask    { transform: translateY(0); }
.bottommask { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Floating label initial position
   -------------------------------------------------------------------------- */
#first_name_label,
#last_name_label,
#email_label,
#phone_label,
#message_label {
  transform: translateY(0) scale(1);
}

/* Label floats when input has value OR is focused */
.peer:not(:placeholder-shown) + label,
.peer:focus + label {
  transform: translateY(-24px) scale(0.75);
  color: #000;
}

.dark .peer:not(:placeholder-shown) + label,
.dark .peer:focus + label {
  color: #fff;
}