/* ============================================================
   Manar Studios: Contact us.
   The one white page: a title and a form, and a lot of space.
   Loaded after base.css (type and the pill) and forms.css.
   ============================================================ */

:root{ --paper:#FFFFFF; }
html,body{ background:var(--paper); }
body{ color:var(--navy); min-height:100svh; }
::selection{ background:rgba(10,98,245,.18); }

.contact{
  width:min(620px, calc(100vw - 48px)); margin:0 auto;
  padding:clamp(150px, 24svh, 230px) 0 clamp(120px, 20svh, 200px);
}
/* plain text, the same size as everything else on the page */
.contact__title{
  margin:0 0 32px;
  font-size:1.15rem; font-weight:600; letter-spacing:-.012em;
  opacity:0; animation:contact-in 1.2s cubic-bezier(.16,.8,.2,1) .15s forwards;
}
.contact .form{
  --f-field:#F4F5F8; --f-field-hover:#EEF0F4; --f-edge:rgba(1,18,58,.06);
  --f-btn:var(--navy); --f-btn-ink:#FFFFFF;
  margin:0;
  opacity:0; animation:contact-in 1.2s cubic-bezier(.16,.8,.2,1) .3s forwards;
}
@keyframes contact-in{ to{ opacity:1; transform:none; } }

/* text fades out under the pill instead of scrolling into it (desktop, where the pill stays) */
@media (min-width: 900px){ body::before{
  content:""; position:fixed; z-index:2; left:0; right:0; top:0; height:clamp(96px, 15svh, 140px);
  pointer-events:none; background:var(--paper);
  -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent);
          mask-image:linear-gradient(to bottom, #000 30%, transparent);
} }

@media (prefers-reduced-motion: reduce){
  .contact__title,.contact .form{ animation:none; opacity:1; transform:none; }
}