body { margin: 0; }
header, section { padding: var(--m); }

header { grid-template-columns: 1fr; justify-content: center; align-items: center; background-color: var(--accent-color); }

@media screen and (min-width: 800px) {
   header { display: grid; grid-template-columns: 1fr 1fr; }
   header article { max-width: 400px; }
   header aside { max-width: 400px; }
}

.coming-soon { text-transform: uppercase; color: rgb(0 0 0 / 0.5); font-size: 1.5em; }
header h1 { font-size: 3em; margin: 0.3em 0; display: flex; align-items: center; gap: 0.5em; color: white; }
.app-icon { width: 1.5em; height: 1.5em; corner-shape: squirqle; border-radius: 0.5em; }
.nooch-slogan { font-size: 1.5em; color: white; }

.app-carousel {
   position: relative;
   display: grid;
   justify-content: center;
   padding-top: 5em;
   margin-bottom: 2em;
   /* overflow-x: visible;
   overflow-y: hidden; */
}
/* .app-carousel::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 0.1em;
   background: linear-gradient(to right, transparent 10%, black 20%, black 80%, transparent 90%);
   pointer-events: none;
   z-index: 10;
} */
app-view {
   grid-area: 1 / 1;
   display: block;
   font-size: 5vw;
   width: 10em;
   height: 10em;
   border-radius: 1em;
   padding: 1em;
   background-color: white;
   transform-origin: 50% 100%;
   box-shadow: 0 0 1em rgba(0,0,0,0.2);
   transition: transform 0.3s ease-in-out, z-index 0.3s ease-in-out;
}
@media screen and (min-width: 800px) {
   app-view { font-size: 3vw; }
}
app-view:nth-child(1) { transform: translate(-20%, 0%) rotate(-5deg); z-index: 3; }
app-view:nth-child(2) { transform: translate(0%, 0%) rotate(0deg); z-index: 2; }
app-view:nth-child(3) { transform: translate(+20%, 0%) rotate(+5deg); z-index: 1; }
app-view:nth-child(1).highlight { transform: translate(-20%, -15%) rotate(-5deg); z-index: 4; }
app-view:nth-child(2).highlight { transform: translate(0%, -15%) rotate(0deg); z-index: 4; }
app-view:nth-child(3).highlight { transform: translate(+20%, -15%) rotate(+5deg); z-index: 4; }
/* app-view:hover { transform: translate(0%, -30%) rotate(+5deg); z-index: 3; } */
.app-carousel-text p { opacity: 0.8; }
.app-carousel-text p.highlight { font-weight: bold; opacity: 1; }
app-view > * {
   font-size: 0.65em;
}
app-view img {
   width: 2em;
   height: auto;
}
.nooch-ingredient {
   display: flex; align-items: center; gap: 0.5em;
}


/* custom app view */
.nutrient-title strong { display: inline-block; padding: 0.1em 0.3em; border-radius: 0.3em; background-color: rgb(0 0 0 / 0.1); }
.nutrient-title + div img { transform: scale(1.5); }
.nutrient-title + div em { font-weight: bold; border-bottom: 0.15em solid rgb(0 0 0 / 0.1); }

app-view:has(.award) { padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.5em; }
.award { border-radius: 0.4em; font-size: 0.25em; padding: 0.6em; text-align: center; transition: transform 0.3s ease-in-out; transform: translate(0px, 0px) scale(1); }
app-view.highlight .award:nth-child(1) { transform: translate(-4em, -4em) scale(1.2) rotate(-2.5deg); }
app-view.highlight .award:nth-child(2) { transform: translate(+6em, 0em) scale(1.2) rotate(-2.5deg); }
app-view.highlight .award:nth-child(3) { transform: translate(-4em, +3em) scale(1.2) rotate(-2.5deg); }
.award > strong:first-child { display: block; opacity: 0.5; text-transform: uppercase; }
.award-new-ingredient { width: 20em; background: linear-gradient(150deg, rgb(255, 255, 204), rgb(205, 255, 205), rgb(199, 199, 255)); }
.award-30-plants { width: 25em; background: linear-gradient(160deg, rgb(255, 187, 187), rgb(255, 228, 178), rgb(255, 255, 189)); color: black; }
.award-tip { width: 25em; background: linear-gradient(150deg, rgb(169, 169, 255), rgb(224, 181, 255), rgb(255, 200, 255)); }
/* .award-30-plants { background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); color: white; } */
.award-tip > div { width: max-content; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: center; }
.award-tip > div > img { width: 3em; height: auto; }

.waitlist-section {
   width: max-content;
   max-width: 100%;
   margin: 0 auto;
}

form { margin-top: 2rem; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; row-gap: 1.5rem; }


.input-wrapper { position: relative; width: 100%; }
.waitlist-section input { width: 100%; }
input { padding: var(--s); font-size: 1.2rem; }
input { border: 1px solid rgb(0 0 0 / 0.1); border-radius: var(--s); }
input + label { position: absolute; top: 50%; left: 1em; padding: 0 var(--xs); background-color: white; transition: top 0.3s ease-in-out, transform 0.5s ease-in-out; color: var(--text-color); }
input + label { top: 0; transform: translate(0%, -85%); }
input:invalid + label { top: 50%; transform: translate(0%, -50%); }
input:focus + label { top: 0; transform: translate(0%, -85%); }

.join-button { margin-top: 2rem; }
.join-button { padding: var(--s) var(--l); font-size: 2rem; }
.join-button { border: none; border-radius: var(--l); }
.join-button { background-color: var(--accent-color); color: white; text-shadow: 1px 1px rgba(0,0,0,0.1); transition: background 0.3s ease-in-out; cursor: pointer; }
.join-button:hover { background-color: color-mix(in hsl, var(--accent-color), black 10%); }


.facts-section {
   background-color: color(srgb 0.8055 0.8666 0.9832);
   padding: var(--m);
   overflow: hidden;
}
.facts-section h2 {
   position: relative;
   z-index: 1;
}
.shuffle-facts {
   padding: 2em 0em 2em 4em;
   list-style: none;
   position: relative;
}
.shuffle-facts::before {
   position: absolute;
   content: '';
   top: 50%; left: 0; width: 15em; height: 15em;
   background: url(/static/images/icon/icon-630.png) no-repeat;
   background-size: contain;
   transform: translateY(-50%) rotate(-30deg);
   opacity: 0.1;
}
.shuffle-facts li {
   position: relative;
   font-size: 2em;
   z-index: 1;
}