/* contact page, hero chat + form */

/* tones + glass */
.contact-page{
  /* solid softer text tones */
  --contact-soft-75:color-mix(in srgb, var(--line) 75%, var(--zone-bg));
  --contact-soft-60:color-mix(in srgb, var(--line) 60%, var(--zone-bg));

  --card-bg:rgba(0,0,0,.035);
  --card-border:rgba(0,0,0,.08);
  --glass:blur(25px) saturate(160%);

  /* picked topic */
  --pick-bg:var(--accent);
  --pick-ink:#fff;

  /* light orange errors */
  --contact-error:color-mix(in srgb, var(--accent) 60%, #fff);
}

html[data-zone] .contact-page{--card-bg:rgba(255,255,255,.05); --card-border:rgba(255,255,255,.14);}

/* <button>s wearing the .btn look */
button.btn{cursor:pointer;}


/* hero extras: buttons + chat */
.contact-hero-buttons{justify-content:center;}

/* extras join the hero entrance */
#splash:not(.loaded) ~ .lappy-hero .contact-hero-buttons,
#splash:not(.loaded) ~ .lappy-hero .contact-hero-visual{opacity:0;}

#splash.loaded ~ .lappy-hero .contact-hero-buttons{animation:lappy-hero-rise 1s cubic-bezier(.22,1,.36,1) .4s both;}
#splash.loaded ~ .lappy-hero .contact-hero-visual{animation:lappy-hero-slide 1.2s cubic-bezier(.22,1,.36,1) .35s both;}

.contact-hero-visual{
  flex:0 0 auto;
  width:min(42vw,480px);
}

/* chat float */
.contact-chat{
  display:flex;
  flex-direction:column;
  gap:14px;

  animation:lappy-float 4.5s ease-in-out infinite;
}

.contact-msg{
  display:flex;
  align-items:flex-end;
  gap:10px;
  max-width:86%;

  transform-origin:bottom left;
}

/* squircle's replies */
.contact-msg--us{
  align-self:flex-end;
  flex-direction:row-reverse;
  transform-origin:bottom right;
}

.contact-bubble{
  padding:14px 20px;
  border-radius:24px 24px 24px 8px;

  font-family:"obliqua",sans-serif;
  font-size:clamp(.95rem,1.3vw,1.1rem);
  line-height:1.4;
  color:var(--line);

  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:var(--glass);
  -webkit-backdrop-filter:var(--glass);
}

.contact-msg--us .contact-bubble{
  border-radius:24px 24px 8px 24px;
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* logo orb */
.contact-avatar{
  flex:0 0 auto;
  width:36px;
  height:36px;
  padding:7px;
  border-radius:50%;

  background:var(--card-bg);
  border:1px solid var(--card-border);

  user-select:none;
}

/* your typing bubble */
.contact-bubble--typing{
  display:flex;
  gap:6px;
  padding:19px 22px;
}

.contact-bubble--typing span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;

  animation:contact-typing 1.2s ease-in-out infinite;
}

.contact-bubble--typing span:nth-child(2){animation-delay:.15s;}
.contact-bubble--typing span:nth-child(3){animation-delay:.3s;}

@keyframes contact-typing{
  0%,60%,100%{translate:0 0; opacity:.45;}
  30%{translate:0 -6px; opacity:1;}
}

/* messages pop in */
#splash:not(.loaded) ~ .lappy-hero .contact-msg{opacity:0;}

#splash.loaded ~ .lappy-hero .contact-msg{animation:contact-msg-in .55s cubic-bezier(.34,1.56,.64,1) both;}
#splash.loaded ~ .lappy-hero .contact-msg:nth-child(1){animation-delay:.9s;}
#splash.loaded ~ .lappy-hero .contact-msg:nth-child(2){animation-delay:1.8s;}
#splash.loaded ~ .lappy-hero .contact-msg:nth-child(3){animation-delay:2.7s;}
#splash.loaded ~ .lappy-hero .contact-msg:nth-child(4){animation-delay:3.4s;}
#splash.loaded ~ .lappy-hero .contact-msg:nth-child(5){animation-delay:4.2s;}

@keyframes contact-msg-in{
  from{opacity:0; scale:.6; translate:0 16px;}
  to{opacity:1; scale:1; translate:0 0;}
}


/* contact section */
.contact{
  position:relative;
  z-index:1;
  padding:120px 8% 140px;

  /* clip the confetti */
  overflow-x:clip;
}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
  gap:clamp(32px,5vw,72px);

  max-width:1200px;
  margin:0 auto;
}

/* sticky info */
.contact-info{
  position:sticky;
  top:120px;

  display:flex;
  flex-direction:column;
  gap:22px;
}

.contact-title{
  font-family:"SuperMalibu","obliqua",sans-serif;
  font-weight:400;
  font-size:clamp(2.2rem,4vw,3.6rem);
  line-height:1.05;
  color:var(--line);
  text-wrap:balance;
}

.contact-lede{
  max-width:42ch;

  font-family:"obliqua",sans-serif;
  font-size:1.1rem;
  line-height:1.6;
  color:var(--contact-soft-75);
}

.contact-details{
  list-style:none;
  margin:0;
  padding:0;
}

/* divider */
.contact-detail{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 0;
  border-top:1px solid color-mix(in srgb, var(--line) 14%, transparent);
}

.contact-detail:last-child{border-bottom:1px solid color-mix(in srgb, var(--line) 14%, transparent);}

/* same small caps as the footer's column headings */
.contact-detail-label,
.contact-label{
  font-family:"obliqua",sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--contact-soft-60);
}

.contact-detail-value{
  font-family:"SuperMalibu","obliqua",sans-serif;
  font-size:clamp(1.15rem,1.6vw,1.35rem);
  line-height:1.25;
  color:var(--line);
}

.contact-socials{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.contact-social{
  padding:8px 16px;
  border-radius:100px;

  background:var(--card-bg);
  border:1px solid var(--card-border);

  font-family:"obliqua",sans-serif;
  font-size:.88rem;
  color:var(--line);
  text-decoration:none;

  transition:transform .25s ease, background .35s ease, border-color .35s ease;
}

.contact-social:hover{transform:scale(1.05);}
.contact-social:focus-visible{outline:2px solid var(--line); outline-offset:3px;}


/* form + sent screen share a cell */
.contact-card{
  position:relative;
  display:grid;

  padding:clamp(26px,3.4vw,44px);
  border-radius:28px;

  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:var(--glass);
  -webkit-backdrop-filter:var(--glass);
}

.contact-form,
.contact-sent{
  grid-area:1/1;
  min-width:0;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:22px;

  transition:opacity .4s ease .1s, visibility 0s;
}

.contact-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.contact-field{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;

  margin:0;
  padding:0;
  border:0;
}

/* float the legend */
legend.contact-label{float:left; width:100%; padding:0; margin-bottom:10px;}
legend.contact-label + *{clear:both;}

.contact-optional{
  font-weight:400;
  letter-spacing:.04em;
  text-transform:none;
}

/* pill inputs */
.contact-input{
  width:100%;
  margin:0;
  padding:14px 20px;
  border-radius:100px;

  background:var(--card-bg);
  border:1px solid var(--card-border);
  outline:none;

  font-family:"obliqua",sans-serif;
  font-size:1rem;
  line-height:1.3;
  color:var(--line);

  transition:border-color .25s ease, box-shadow .25s ease, background .35s ease;
}

.contact-input::placeholder{color:color-mix(in srgb, var(--line) 42%, transparent);}

.contact-input:hover{border-color:color-mix(in srgb, var(--line) 32%, transparent);}

/* focus ring */
.contact-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 32%, transparent);
}

.contact-input[aria-invalid="true"]{border-color:var(--contact-error);}

/* block autofill colours */
.contact-input:-webkit-autofill,
.contact-input:-webkit-autofill:hover,
.contact-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--line);
  caret-color:var(--line);
  transition:background-color 100000s ease 0s, border-color .25s ease, box-shadow .25s ease;
}

.contact-textarea{
  min-height:150px;
  border-radius:24px;
  resize:vertical;
  line-height:1.5;
}

/* dark dropdown */
.contact-select{position:relative;}

.contact-select .contact-input{
  -webkit-appearance:none;
  appearance:none;
  padding-right:48px;

  color-scheme:dark;
  cursor:pointer;
}

.contact-select option{background:#15191c; color:#ededed;}

.contact-select::after{
  content:"";
  position:absolute;
  right:22px;
  top:50%;
  width:8px;
  height:8px;

  border:solid var(--line);
  border-width:0 2px 2px 0;

  translate:0 -70%;
  rotate:45deg;
  pointer-events:none;
}

.contact-label-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.contact-count{
  font-family:"obliqua",sans-serif;
  font-size:.8rem;
  font-variant-numeric:tabular-nums;
  color:var(--contact-soft-60);

  transition:color .25s ease;
}

/* nearly full */
.contact-count.is-near{color:var(--accent-3);}

.contact-error{
  font-family:"obliqua",sans-serif;
  font-size:.85rem;
  line-height:1.4;
  color:var(--contact-error);
}

.contact-error:empty{display:none;}

/* shake */
.contact-field.is-nudged .contact-input{animation:contact-nudge .5s ease;}

@keyframes contact-nudge{
  0%,100%{translate:0 0;}
  20%{translate:-12px 0;}
  40%{translate:10px 0;}
  60%{translate:-7px 0;}
  80%{translate:4px 0;}
}


/* topic chips + sliding pill */
.contact-chips{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.contact-chips-indicator{
  position:absolute;
  z-index:0;
  left:0;
  top:0;
  width:0;
  height:0;
  border-radius:100px;

  background:var(--pick-bg);
  opacity:0;

  pointer-events:none;
  transition:
    left .45s cubic-bezier(.22,1,.36,1),
    top .45s cubic-bezier(.22,1,.36,1),
    width .45s cubic-bezier(.22,1,.36,1),
    height .45s cubic-bezier(.22,1,.36,1),
    opacity .25s ease,
    background .35s ease;
}

.contact-chips-indicator.is-on{opacity:1;}

.contact-chip{
  position:relative;
  z-index:1;

  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  border-radius:100px;

  background:var(--card-bg);
  border:1px solid var(--card-border);

  font-family:"obliqua",sans-serif;
  font-size:.95rem;
  color:var(--line);

  cursor:pointer;
  user-select:none;
  transition:transform .25s ease, background .35s ease, border-color .35s ease, color .35s ease;
}

.contact-chip:hover{transform:scale(1.04);}
.contact-chip:active{transform:scale(.97);}

/* hidden radio, still accessible */
.contact-chip input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.contact-chip:has(input:focus-visible){outline:2px solid var(--line); outline-offset:3px;}

/* picked: clear so the pill shows */
.contact-chips .contact-chip.is-picked{
  background:transparent;
  border-color:transparent;
  color:var(--pick-ink);
}

.contact-chips .contact-chip.is-picked:hover{transform:none;}


/* which squircle fold out */
.contact-reveal{
  display:grid;
  grid-template-rows:0fr;
  margin-top:-22px;

  transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1), margin-top .45s cubic-bezier(.22,1,.36,1);
}

.contact-reveal.is-open{grid-template-rows:1fr; margin-top:0;}

/* hidden while shut */
.contact-reveal-inner{
  min-height:0;
  overflow:hidden;
  margin:-5px;
  padding:5px;

  visibility:hidden;
  transition:visibility 0s linear .45s;
}

.contact-reveal.is-open .contact-reveal-inner{visibility:visible; transition-delay:0s;}


.contact-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
  margin-top:4px;
}

.contact-small{
  flex:1 1 200px;

  font-family:"obliqua",sans-serif;
  font-size:.82rem;
  line-height:1.5;
  color:var(--contact-soft-60);
}

/* sending spinner */
.contact-send.is-sending{pointer-events:none;}

.contact-send.is-sending::after{
  content:"";
  width:14px;
  height:14px;
  max-width:14px;
  margin-left:10px;

  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;

  opacity:1;
  transform:none;
  animation:contact-spin .7s linear infinite;
}

@keyframes contact-spin{to{rotate:360deg;}}


/* sent screen */
.contact-sent{
  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;

  text-align:center;

  visibility:hidden;
  opacity:0;
  transition:opacity .3s ease, visibility 0s linear .3s;
}

.contact-card.is-sent .contact-form{
  visibility:hidden;
  opacity:0;
  transition:opacity .3s ease, visibility 0s linear .3s;
}

.contact-card.is-sent .contact-sent{
  visibility:visible;
  opacity:1;
  transition:opacity .4s ease .15s, visibility 0s;
}

/* celebrating blocks */
.contact-sent-blocks{
  position:relative;
  width:84px;
  aspect-ratio:1;
  margin-bottom:10px;
}

.contact-sent-blocks img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

.contact-card.is-sent .contact-sent-blocks .block-orange{animation:orangeMove 1.5s ease-in-out infinite;}
.contact-card.is-sent .contact-sent-blocks .block-purple{animation:purpleMove 1.5s ease-in-out infinite;}
.contact-card.is-sent .contact-sent-blocks .block-gray,
.contact-card.is-sent .contact-sent-blocks .block-white{animation:blockPulse 1.5s ease-in-out infinite;}

.contact-sent-title{
  font-family:"SuperMalibu","obliqua",sans-serif;
  font-weight:400;
  font-size:clamp(2rem,4vw,2.8rem);
  line-height:1.05;
  color:var(--line);
}

/* focusable for screen readers */
.contact-sent-title:focus{outline:none;}

.contact-sent-text{
  max-width:40ch;

  font-family:"obliqua",sans-serif;
  font-size:1.05rem;
  line-height:1.55;
  color:var(--contact-soft-75);
}

.contact-sent-strong{
  color:var(--line);
  font-weight:700;
  overflow-wrap:anywhere;
}

.contact-sent-note{
  max-width:42ch;

  font-family:"obliqua",sans-serif;
  font-size:.85rem;
  line-height:1.55;
  color:var(--contact-soft-60);
}

.contact-sent-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:12px;
}

.contact-card.is-sent .contact-sent-title{animation:lappy-hero-pop .7s cubic-bezier(.22,1,.36,1) .15s both;}
.contact-card.is-sent .contact-sent-text{animation:lappy-hero-rise .8s cubic-bezier(.22,1,.36,1) .25s both;}
.contact-card.is-sent .contact-sent-note{animation:lappy-hero-rise .8s cubic-bezier(.22,1,.36,1) .35s both;}
.contact-card.is-sent .contact-sent-buttons{animation:lappy-hero-rise .8s cubic-bezier(.22,1,.36,1) .45s both;}

/* confetti */
.contact-confetti{
  position:absolute;
  z-index:2;
  left:50%;
  top:42px;
  pointer-events:none;
}

.contact-confetti span{
  position:absolute;
  left:0;
  top:0;
  width:12px;
  height:12px;
  margin:-6px 0 0 -6px;
}


/* scroll reveal */
.contact-info,
.contact-card{
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    translate .9s cubic-bezier(.22,1,.36,1),
    rotate .9s cubic-bezier(.22,1,.36,1);
}

.has-reveal .contact-info:not(.in-view){opacity:0; translate:-100px 0; rotate:-3deg; transition:none;}
.has-reveal .contact-card:not(.in-view){opacity:0; translate:100px 0; rotate:3deg; transition:none;}


/* tablets: info above form */
@media (max-width:900px){
  .contact-layout{grid-template-columns:minmax(0,1fr);}
  .contact-info{position:static;}
}

/* phones */
@media (max-width:650px){
  .contact-hero-visual{width:min(88vw,400px);}
  .contact-avatar{width:30px; height:30px; padding:6px;}

  .contact{padding:90px 24px 100px;}
  .contact-row{grid-template-columns:minmax(0,1fr);}

  /* card rises in */
  .has-reveal .contact-card:not(.in-view){translate:0 60px; rotate:0deg;}
  .has-reveal .contact-info:not(.in-view){translate:0 60px; rotate:0deg;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  #splash.loaded ~ .lappy-hero .contact-hero-buttons,
  #splash.loaded ~ .lappy-hero .contact-hero-visual,
  #splash.loaded ~ .lappy-hero .contact-msg,
  .contact-chat,
  .contact-bubble--typing span,
  .contact-field.is-nudged .contact-input,
  .contact-card.is-sent .contact-sent-title,
  .contact-card.is-sent .contact-sent-text,
  .contact-card.is-sent .contact-sent-note,
  .contact-card.is-sent .contact-sent-buttons,
  .contact-card.is-sent .contact-sent-blocks img{animation:none;}

  .contact-chip,
  .contact-chips-indicator,
  .contact-reveal,
  .contact-reveal-inner,
  .contact-form,
  .contact-sent,
  .contact-info,
  .contact-card{transition:none;}
}