/* contact: styles for js/fx/contact.js */
/* Every rule needs a class that the module adds, so the page without JS keeps the inline styles only. */

/* band: the image box is 124% tall (12% spare at each edge) for the parallax; JS sets the transform */
.fx-band img{inset:-12% 0 auto;height:124%;transform-origin:50% 50%;will-change:transform}
.fx-band.fx-still img{inset:0;height:100%;transform:none;will-change:auto}
.band-haze{position:absolute;left:0;right:0;top:55%;height:16%;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.22;
  background:radial-gradient(28% 1.5px at 50% 50%,#f3faff80,transparent),radial-gradient(50% 50% at 50% 50%,#e0f5fe66 0%,#85e0ed1f 45%,transparent 72%);
  transform:translateX(-30%);animation:band-haze 32s ease-in-out infinite alternate;animation-play-state:paused}
.fx-band.is-live .band-haze{animation-play-state:running}
.fx-band.fx-still .band-haze{display:none}
@keyframes band-haze{to{transform:translateX(30%)}}

/* email link: the static aqua line stays; a deep line draws over it from the left */
.fx-mail{border-bottom:0}
.fx-mail .mail-t{position:relative}
.fx-mail .mail-t:before,.fx-mail .mail-t:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--aqua6)}
.fx-mail .mail-t:after{height:2px;bottom:-1.5px;background:var(--deep2);transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fx-mail:hover .mail-t:after,.fx-mail:focus-visible .mail-t:after{transform:scaleX(1);transform-origin:left}
.mail-cue{width:.6em;height:.6em;margin-left:.3em;vertical-align:.04em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--aqua6);transition:transform .45s cubic-bezier(.2,.7,.2,1),color .3s}
.fx-mail:hover .mail-cue,.fx-mail:focus-visible .mail-cue{transform:translateX(5px);color:var(--deep2)}

/* steps: the top line, the number, then a short connector to the next number; --i is the step index */
.fx-steps li{position:relative;border-top-color:transparent}
.fx-steps li:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#6bbeca66;transform-origin:left}
.fx-steps li:not(:last-child):after{content:"";position:absolute;left:calc(var(--cx,8px) - .5px);top:40px;bottom:-10px;width:1px;background:#6bbeca99;transform-origin:top}
.fx-steps li>span{clip-path:inset(0 0 0 0)}
.fx-steps.is-wait li:before{transform:scaleX(0)}
.fx-steps.is-wait li:after{transform:scaleY(0)}
.fx-steps.is-wait li>span{opacity:0;clip-path:inset(0 100% 0 0)}
.fx-steps:not(.is-wait) li:before{transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * .42s)}
.fx-steps:not(.is-wait) li>span{transition:opacity .3s calc(var(--i,0) * .42s + .2s),clip-path .36s steps(2,jump-start) calc(var(--i,0) * .42s + .2s)}
.fx-steps:not(.is-wait) li:after{transition:transform .4s ease-out calc(var(--i,0) * .42s + .5s)}

/* form: focus glow and label shift; the 2px focus outline from the page stays */
.fx-form input,.fx-form select,.fx-form textarea{transition:box-shadow .25s,background-color .25s}
.fx-form input:focus,.fx-form select:focus,.fx-form textarea:focus{background-color:#fff;box-shadow:0 0 0 5px #85e0ed4d,0 10px 24px -14px #6bbecab3}
.fx-form label{transition:color .25s}
.fx-form label:focus-within{color:var(--deep2)}
.fx-field{position:relative}
.fx-field input,.fx-field textarea{padding-right:38px}
.cf-ok{position:absolute;right:12px;top:50%;width:16px;height:16px;pointer-events:none;fill:none;stroke:var(--deep2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:14;stroke-dashoffset:14;opacity:0;transition:stroke-dashoffset .45s cubic-bezier(.2,.7,.2,1) .05s,opacity .2s}
.fx-field.ok .cf-ok{opacity:1;stroke-dashoffset:0}

/* submit button: the spinner and the tick sit over the arrow glyph, so the button keeps its size */
.fx-form .cf-ic{position:relative;display:inline-block;transition:color .2s}
.fx-form .cf-ic svg{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;fill:none;stroke:var(--deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .2s}
.fx-form .is-sending,.fx-form .is-sent{cursor:default}
.fx-form .is-sending .cf-ic,.fx-form .is-sent .cf-ic{color:transparent}
.fx-form .is-sending .cf-spin{opacity:1;animation:cf-spin .8s linear infinite}
.fx-form .is-sent{background:var(--aqua)}
.fx-form .is-sent .cf-done{opacity:1;stroke-dasharray:14;animation:cf-draw .5s cubic-bezier(.2,.7,.2,1)}
@keyframes cf-spin{to{transform:rotate(360deg)}}
@keyframes cf-draw{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
  .fx-band img{inset:0;height:100%;transform:none!important;will-change:auto}
  .band-haze{display:none}
  .fx-mail .mail-t:after,.mail-cue,.fx-steps li:before,.fx-steps li:after,.fx-steps li>span,
  .fx-form input,.fx-form select,.fx-form textarea,.fx-form label,.cf-ok,.fx-form .cf-ic,.fx-form .cf-ic svg{transition:none!important}
  .fx-form .is-sending .cf-spin,.fx-form .is-sent .cf-done{animation:none}
}