/* ==========================================================================
   Contact form
   Mobile: centred neumorphic card, fields stacked
   Desktop (>= 768px): horizontal pill bar with logo, fields inline
   ========================================================================== */

.footer-section {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 2rem 1rem 3rem;
}

@media (width >= 76.8rem) {
  .footer-section {
    padding-bottom: 10rem;
  }
}

/* ---- Card (mobile) ---- */

.contact-form {
  background: #e0e5ec;
  border-radius: 1.5625rem;
  box-shadow: 10px 10px 20px #a3b1c6,
    -10px -10px 20px #ffffff;
  padding: 5rem 4rem;
  text-align: center;
  width: 34rem;
  display: flex;
  flex-direction: column;
}

.contact-form-logo {
  border-radius: 50%;
  box-shadow:
    inset 6px 6px 10px rgba(163, 177, 198, 0.5),
    inset -6px -6px 10px rgba(255, 255, 255, 0.5);
  display: block;
  height: 5rem;
  margin: 0 auto 1.25rem;
  width: 5rem;
}

.contact-form h2 {
  color: var(--color-text);
  font-size: 1.3rem;
  margin-bottom: 0.3125rem;
}

.contact-form p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1.5625rem;
}

/* ---- Inputs ---- */

.contact-form .input-field {
  margin-bottom: 1.25rem;
  position: relative;
}

.contact-form .input-field input {
  background: #e0e5ec;
  border: none;
  border-radius: 0.9375rem;
  box-shadow: inset 6px 6px 10px #a3b1c6,
    inset -6px -6px 10px #ffffff;
  color: var(--color-text);
  font-size: 0.95rem;
  outline: none;
  padding: 1.2rem 1.5rem 1.2rem 4.5rem;
  width: 100%;
}

.contact-form .input-field i {
  color: #666;
  left: 0.9375rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.contact-form .input-field input:focus-visible {
  box-shadow: inset 4px 4px 8px #8fa3ba,
    inset -4px -4px 8px #f0f8ff,
    0 0 0 2px rgba(64, 169, 195, 0.4);
  outline: none;
}

/* ---- Button ---- */

.contact-form .btn {
  background: #40a9c3;
  border: none;
  border-radius: 1.25rem;
  box-shadow: 5px 5px 15px #a3b1c6,
    -5px -5px 15px #ffffff;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem;
  transition: background 0.2s, box-shadow 0.15s, transform 0.1s;
  width: 100%;
}

.contact-form .btn:hover {
  background: #3a97af;
}

.contact-form .btn:active,
.contact-form .btn:focus-visible {
  background: #3a97af;
  box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.18),
    inset -2px -2px 6px rgba(255, 255, 255, 0.15);
  outline: none;
  transform: scale(0.97);
}

/* ---- Bluesky / options line ---- */

.contact-form .options {
  color: #555;
  font-size: 0.85rem;
  margin-top: 0.9375rem;
}

.contact-form .options a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.contact-form .options a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Dark mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .contact-form h2 {
    color: #a1b1ca;
  }

  .contact-form p {
    color: #6a7a8a;
  }

  .contact-form {
    background: #1a1d28;
    box-shadow: 10px 10px 20px #0a0c12,
      -10px -10px 20px rgba(255, 255, 255, 0.12);
  }

  .contact-form .input-field input,
  .contact-form .input-message {
    background: #1a1d28;
    box-shadow: inset 6px 6px 10px #0a0c12,
      inset -6px -6px 10px rgba(255, 255, 255, 0.08);
    color: #a1b1ca;
  }

  .contact-form .input-field input::placeholder,
  .contact-form .input-message::placeholder {
    color: #6a7a8a;
  }

  .contact-form .input-field i {
    color: #a1b1ca;
  }

  .contact-form .input-field input:focus-visible {
    box-shadow: inset 4px 4px 8px #080a0f,
      inset -4px -4px 8px #2a3045,
      0 0 0 2px rgba(80, 160, 220, 0.4);
    outline: none;
  }

  .contact-form .btn {
    box-shadow: 5px 5px 15px #0a0c12,
      -5px -5px 15px rgba(255, 255, 255, 0.10);
    color: #1d1f24;
  }

  .contact-form .btn:active,
  .contact-form .btn:focus-visible {
    box-shadow: inset 4px 4px 10px #080a0f,
      inset -2px -2px 6px rgba(255, 255, 255, 0.08);
    outline: none;
  }

  .contact-form .options {
    color: #6a7a8a;
  }

  .contact-form .options a {
    color: #a1b1ca;
  }
}

/* ==========================================================================
   Desktop — horizontal pill bar
   ========================================================================== */

@media (width >= 76.8rem) {
  .contact-form {
    align-items: center;
    border-radius: 2rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    max-width: 90rem;
    padding: 1rem 1.5rem;
    position: relative;
    text-align: left;
    width: 100%;

  }

  .contact-form h2,
  .contact-form p,
  .contact-form .options {
    display: none;
  }

  .contact-form-logo {
    border-radius: 0;
    box-shadow: none;
    display: block;
    flex-shrink: 0;
    height: 2.25rem;
    margin: 0;
    width: 2.25rem;
  }

  .contact-form form {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: row;
    gap: 0.75rem;
  }

  .contact-form .input-field {
    flex: 1;
    margin-bottom: 0;
    min-width: 0;
  }

  .contact-form .input-field:has(.input-message) {
    flex: 2;
  }

  .contact-form .input-message {
    height: auto;
  }

  .contact-form .btn {
    flex-shrink: 0;
    padding: 1.2rem 1.5rem;
    width: auto;
  }
}

/* ==========================================================================
   Sent confirmation modal
   Shown via :target when page is loaded with #sent hash
   ========================================================================== */

#sent {
  align-items: center;
  display: none;
  inset: 0;
  justify-content: center;
  position: fixed;
  z-index: 200;
}

#sent:target {
  animation: sent-overlay 5s ease forwards;
  display: flex;
}

#sent:target .sent-modal {
  animation: sent-modal-enter 0.4s ease forwards;
}

.sent-modal {
  align-items: center;
  background: var(--color-surface);
  border-radius: 1rem;
  display: flex;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
}

.sent-message {
  color: var(--color-text);
  font-size: 1.1em;
  margin: 0;
}

.sent-close {
  color: var(--color-text);
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1;
  opacity: 0.5;
  text-decoration: none;
}

.sent-close:hover,
.sent-close:focus-visible {
  opacity: 1;
  outline: none;
}

.sent-close:visited {
  opacity: 0.9;
}

@keyframes sent-overlay {
  0% { opacity: 0; }
  8% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; visibility: hidden; }
}

@keyframes sent-modal-enter {
  0% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}


ul.contact-links {
  position: absolute;
  list-style: none;
  right: 3rem;
  top: 3rem;
}

@media (width >= 76.8rem) {
  ul.contact-links {
    right: -5rem;
    top: 2rem;
  }
}

/* ===== BLUESKY FLUTTER ANIMATION ===== */
/* Adapted from https://github.com/nicholasgasior/bluesky-flutterby (MIT) */
.bsky-flutter {
    color: #0085ff;
    display: block;
    height: 2rem;
    transition: transform 200ms;
    width: 2rem;
}

.bsky-flutter .left {
    transform-origin: center;
}

.bsky-flutter .right {
    transform: scale(-1, 1);
    transform-origin: center;
}

.bsky-flutter:hover,
.bsky-flutter:focus {
    transform: rotate(-5deg);
    transition: transform 500ms;
}

.bsky-flutter:hover .left,
.bsky-flutter:focus .left {
    animation: bsky-flutter 430ms ease-in-out;
    --flip: 1;
}

.bsky-flutter:hover .right,
.bsky-flutter:focus .right {
    animation: bsky-flutter 500ms ease-in-out;
    --flip: -1;
}

@keyframes bsky-flutter {
    10%  { transform: scale(calc(var(--flip) * 1), 0.9); }
    20%  { transform: scale(calc(var(--flip) * 0.5), 1); }
    40%  { transform: scale(calc(var(--flip) * 0.9), 0.95); }
    60%  { transform: scale(calc(var(--flip) * 0.3), 1); }
    80%  { transform: scale(calc(var(--flip) * 0.9), 0.95); }
    100% { transform: scale(calc(var(--flip) * 1), 1); }
}

@media (prefers-reduced-motion: reduce) {
    .bsky-flutter:hover .left,
    .bsky-flutter:focus .left,
    .bsky-flutter:hover .right,
    .bsky-flutter:focus .right {
        animation: none;
    }
}