*,
*:after,
*:before {
	box-sizing: border-box;
	transform-style: preserve-3d;
}

:root {
    --line: hsla(55, 100%, 50%, 0.35);
	--basic: ease; 
	--back: 
    linear( 0, -0.0077 5.2%, -0.0452 16.98%, -0.0493 22.35%, -0.0418 25.57%,
       -0.0258 28.57%, -0.0007 31.42%, 0.0335 34.15%, 0.1242 39.03%, 0.2505 43.65%,
       0.3844 47.35%, 0.656 53.68%, 0.81 58.37%, 0.9282 63.52%, 0.9719 66.23%,
       1.0055 69.04%, 1.0255 71.4%, 1.0396 73.87%, 1.0477 76.48%, 1.05 79.27%,
       1.0419 84.36%, 1.0059 95.49%, 1 );
	--color-white: hsl(0, 100%, 100%);
  --color-main:hsl(48, 100%, 46%);
  --color-main-bright:hsl(54, 100%, 50%);
  --color-highlight: hsla(313.18, 100%, 50%,0.5);
  --v1: 9vmin;
  --v2: calc(var(--v1)*-0.5);

  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */

}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

::selection { background-color: var(--color-highlight);
    color: var(--color-white);
}

body {
    font-size: 16px;
	display: grid;
	place-items: center;
	min-height: 100vh;
	background: hsl(48 100% 46%);
  overflow: hidden;
  color: var(--color-white);
}

body::before {
	content: "";
	height: 100vh;
	width: 100vw;
	position: fixed;
	background:
		linear-gradient(90deg, var(--line) 1px, transparent 1px var(--v1)) 0 var(--v2) / var(--v1) var(--v1),
		linear-gradient(var(--line) 1px, transparent 1px var(--v1)) 0 var(--v2) / var(--v1) var(--v1);
	mask: linear-gradient(-15deg, transparent 30%, white);
	top: 0;
	z-index: -1;
	transform: translate3d(0, 0, -100vmin);
}

.hide {display: none !important}

#app { text-align: center;
	display: grid;
	place-items: center;
	row-gap: 1rem;
}
#app div {width: 100%;}

#logo::before {
content: '';
background-color: var(--color-main-bright);
width: 90%;
height:160%;
border-radius: 100%;
position: absolute;
left:50%;
transform: translateX(-50%);
filter:blur(2.75em);
opacity: 0;
animation: rise 500ms ease-in-out 850ms 1 forwards, 
fadein 1000ms ease 1000ms 1 forwards;
}
svg {max-width: 100%;}
svg .path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1500;
  animation: 
      dash 2000ms linear 500ms 1 forwards,
      fillin 1050ms ease-in-out 1s 1 forwards;
  fill: url(#paint0_linear_5_25);
  fill-opacity: 0;
  
}

h2 {font-size: 1.875rem;line-height: 1.4; font-weight: 300;opacity: 0; position:relative; animation: show 150ms linear 1650ms 1 forwards,fadein 1000ms ease 1650ms 1 forwards;}
h2 span {position: relative}
h2 span span {position: absolute;}
h2 span span:nth-of-type(1) {position: absolute; animation: wink 3000ms ease-in-out 2500ms infinite forwards;z-index: 1;}
h3, #mce-success-response {margin-top: 1rem;}


.underline {position:relative; font-style: italic;}
.underline::after {
    content: '';
    position: absolute;
    animation: underline 250ms ease-in-out 2000ms 1 forwards;
    bottom: -0.6rem;
    left: -0.5rem;
    right: -0.5rem;
    height: 0.75rem;
	background-image: url('/assets/img/underline.svg');
    background-repeat: no-repeat;
	background-size: cover;
   opacity: 0;

}

input[type="email"] {
  background: 
    linear-gradient(rgb(235, 188, 0) 0 0) padding-box, 
    linear-gradient(160deg, hsla(313, 100%, 50%, 1), hsla(162, 100%, 60%, 1),hsla(313, 100%, 50%, 1)) border-box;
  color: #fff;
  padding: 0.75rem;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  display: inline-block;
  width: 100%;
   transition: all ease-in-out 300ms;
   outline: none;
   
}
input[type="email"]:hover, input[type="email"]:focus {  
  background: 
  linear-gradient(rgb(235, 188, 0) 0 0) padding-box, 
  linear-gradient(to right, hsla(313, 100%, 50%, 1), hsla(162, 100%, 60%, 1),hsla(313, 100%, 50%, 1)) border-box;
  outline: 3px solid rgba(255,255,255,0.4)
}
input[type="email"]::placeholder {transition: all ease 300ms;}
input[type="email"]:hover::placeholder {color: transparent;}


.joinmsg {animation:
  fadein 1000ms ease 2000ms 1 forwards;opacity: 0;
}
.inputwrap {animation:
  fadein 1000ms ease 2000ms 1 forwards;opacity: 0;
}
.inputwrap::after  {
  content: '';
  background: url('../img/mail.svg') center center no-repeat ;
  position: absolute;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
height: 2rem;
width: 2rem;
z-index: 1;
}


.inputwrap:has(input:hover)::after {opacity: 0;}

@media screen and (max-width: 39.9875em) {
  #app {margin: 0 2rem; row-gap: 0.5rem;}
svg{max-width: 100%;
}
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fillin {    
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

@keyframes underline  { 0% {right: 4rem; opacity: 0;} 100%{right: -0.5rem; opacity: 1;}}
@keyframes fadein {0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes show {0% { bottom: -1rem} 100% { bottom: 0}}
@keyframes rise  {0% {top: 0} 100% {top: -75%;}}
@keyframes pulse {
  0%{opacity: 1;}
   15%{opacity: 1;}
  20%{opacity: 0.8;}
25% {opacity: 1;} 
45%{opacity: 1;}
50%{opacity: 0.8;}
55% {opacity: 1;} 
50%{opacity: 1;}
60%{opacity: 0.9;}
70% {opacity: 1;}
100% {opacity: 1;}
}

@keyframes wink { 
0% {opacity: 1;} 
21% {opacity: 1;} 
22% {opacity: 0;} 
41% {opacity: 0;} 
42% {opacity: 1;} 
100% {opacity: 1;}
}
  
@keyframes pulse {
  0%{opacity: 1;}
   15%{opacity: 1;}
  20%{opacity: 0.8;}
25% {opacity: 1;} 
45%{opacity: 1;}
50%{opacity: 0.8;}
55% {opacity: 1;} 
50%{opacity: 1;}
60%{opacity: 0.9;}
70% {opacity: 1;}
100% {opacity: 1;}
}