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

header { position: relative; grid-template-columns: 1fr; justify-content: center; align-items: center; overflow: hidden; }

header > .rainbow-backdrop {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: left top;
   pointer-events: none;
   z-index: 0;
}

header > article,
header > aside {
   position: relative;
   z-index: 1;
}

@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: var(--text-light); font-size: 1.5em; }
header h1 { font-size: 3em; margin: 0.3em 0; display: flex; align-items: center; gap: 0.5em; color: var(--text); }
.app-icon { width: 1.5em; height: 1.5em; corner-shape: squirqle; border-radius: 0.5em; }
.nooch-slogan { font-size: 2em; letter-spacing: 0.03ch; color: var(--text-light); transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out, letter-spacing 0.3s ease; transform-origin: left center; }

/* Apply rainbow gradient fill and stamp effect only when the heading is hovered */
h1:hover ~ .nooch-slogan {
   transform: translateY(30%) rotate(-3deg) scale(1.1);
   filter: drop-shadow(0 1em 1.5em var(--text-light)) saturate(170%);
   background-image: url('/static/images/background/gradient-rainbow.svg');
   background-size: cover;
   background-position: center top;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   letter-spacing: 0.2ch;
   color: transparent;
}

.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;
}
.waitlist-section { background-color: var(--bg-light); box-shadow: 0 0 0 100vmax var(--bg-light); clip-path: polygon(-100vmax 0%, +100vmax 0%, +100vmax 100%, -100vmax 100%); }

.waitlist-section p { margin: 5rem 0 3rem 0; opacity: 0.8; }

.waitlist-heading { font-size: clamp(2em, 6vw, 3em); text-align: center; width: 100%; margin: 0.6em 0; }
.waitlist-heading .rainbow-word { position: relative; display: inline-block; overflow: visible; margin-right: 0.35rem; }
.waitlist-heading .rainbow-word strong { position: relative; z-index: 1; }
.waitlist-heading .rainbow-word .rainbow-background {
   position: absolute;
   right: 0;
   top: 0;
   z-index: 0;
   pointer-events: none;
   overflow: visible;
   width: 120%;
   opacity: 0.5;
}


#waitlist-food-suggestions { display: none; }

.waitlist-form { margin-block: 3rem; }
.waitlist-labels-inputs { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; width: 100%; }
.waitlist-labels-inputs > label { align-self: center; font-size: clamp(0.5em, 3vw, 1.1em); text-align: right; opacity: 0.8; }
.waitlist-food-field { position: relative; }

.waitlist-form input { font-family: inherit; font-size: 1em; width: 100%; position: relative; }

#waitlist-food {
   background-color: transparent;
   padding-right: 3rem;
}

#waitlist-food-hint {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   pointer-events: none;
   color: var(--text-light);
   opacity: 0.5;
   font: inherit;
   padding: 0.5em 3rem 0.5em 0.75em;
   z-index: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

#waitlist-food-image {
   position: absolute;
   right: 0.5rem;
   top: 50%;
   transform: translateY(-50%);
   width: 2rem;
   height: 2rem;
   object-fit: cover;
   border-radius: 9999px;
   pointer-events: none;
   z-index: 2;
   opacity: 0.85;
}


.join-button { margin: 2rem auto; }
.join-button { background-color: var(--accent); 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), black 10%); }
@media (prefers-color-scheme: dark) {
   .join-button:hover { background-color: color-mix(in hsl, var(--accent), white 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; } */

@media (prefers-color-scheme: dark) {
   app-view { background-color: var(--bg-light); color: var(--text); box-shadow: 0 0 1.2em rgba(0,0,0,0.6); }
   .app-carousel-text p { color: var(--text); opacity: 0.95; }
   .coming-soon { color: var(--text); }
   .nutrient-title strong { background-color: color-mix(in srgb, var(--text) 6%, transparent); }
   .award { color: var(--bg); }
}



.site-footer { padding: var(--m); background-color: var(--bg); color: var(--text); text-align: center; margin-top: var(--m); }
.site-footer .footer-nav { margin-bottom: 0.5em; display: flex; justify-content: center; gap: 1em; flex-wrap: wrap; }
.site-footer .footer-nav a { color: var(--text); text-decoration: none; font-size: 0.95em; }
.site-footer .footer-nav a:hover { text-decoration: underline; }

.site-footer .footer-socials { margin-bottom: 0.5em; }
.site-footer .footer-socials a { margin: 0 0.1em; color: var(--text); text-decoration: none; font-size: 0.95em; display: inline-flex; align-items: center; justify-content: center; }
.site-footer .footer-socials a:hover { opacity: 0.7; }

.social-icon { width: 1.2em; height: 1.2em; color: inherit; }

.site-footer-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; column-gap: 3em; row-gap: 1.5em; flex-wrap: wrap; }

/* Content sections hidden by default, shown when targeted via URL */
.content-section {
   display: none;
   background-color: var(--bg-light);
   box-shadow: 0 0 0 100vmax var(--bg-light);
   clip-path: polygon(-100vmax 0%, +100vmax 0%, +100vmax 100%, -100vmax 100%);
}

#terms h2, #privacy h2 {
   margin-bottom: 4rem;
}

.content-section:target {
   display: block;
}

.content-section h2 {
   font-size: clamp(1.5em, 5vw, 2.5em);
   margin-top: 0;
   color: var(--text);
}

.content-section h3 {
   font-size: 1.3em;
   color: var(--text);
   margin-top: 1.5em;
   margin-bottom: 0.5em;
}

.content-section p {
   line-height: 1.6;
   opacity: 0.9;
}

.content-section ul {
   padding-left: 2em;
   line-height: 1.8;
}

.content-section li {
   margin-bottom: 0.5em;
}

.content-section a[href="#"] {
   display: inline-block;
   margin-top: 2em;
   color: var(--accent);
   text-decoration: none;
   border-bottom: 1px solid var(--accent);
   padding-bottom: 0.2em;
   transition: opacity 0.3s ease-in-out;
}

.content-section a[href="#"]:hover {
   opacity: 0.8;
}


.button-round { padding: var(--s) var(--m); border-radius: var(--m); border: none; background-color: var(--accent); color: white; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background 0.3s ease-in-out; }
.button-round:disabled { cursor: not-allowed; opacity: 0.5; }
.button-round:hover { background-color: color-mix(in hsl, var(--accent), black 10%); }
@media (prefers-color-scheme: dark) {
   .button-round:hover { background-color: color-mix(in hsl, var(--accent), white 10%); }
}