/*
Theme Name: Fruitastic Landing
Theme URI: https://nanajoslab.framer.website/
Author: Tom Michelle Rau
Description: Block theme for the "A Fruitastic Idea" landing page. Every section, text, color, size, and spacing is edited visually in Appearance → Editor (like a page builder, but native WordPress). Includes a fixed sky background, a scroll-animated hero fan, and the interactive Nana Jo's Lab fruit mixer.
Version: 2.0.0
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fruitastic-landing
*/

/* Fallback so the sky stays fixed even if the WP version ignores
   theme.json's backgroundAttachment. */
body {
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/* Pills (announcement, badges): keep them shrink-to-fit and centered. */
.fl-pill {
	width: fit-content;
	margin-left: auto !important;
	margin-right: auto !important;
	box-shadow: 0 4px 16px rgba(95, 39, 138, .1);
}

/* Lab cards: lift on hover (colors/radius/padding are block settings). */
.fl-card {
	box-shadow: 0 14px 34px rgba(61, 35, 82, .16);
	transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}
.fl-card:hover {
	transform: translateY(-8px) rotate(-.5deg);
	box-shadow: 0 24px 48px rgba(61, 35, 82, .22);
}

/* Book mockup drop shadow. */
.fl-book img { filter: drop-shadow(0 20px 36px rgba(61, 35, 82, .2)); }

/* ---------- Scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hero fan (scroll-animated, [fruitastic_fan]) ---------- */
.fan {
	position: relative;
	max-width: var(--hero-img-w, 860px);
	margin: 46px auto 0;
	aspect-ratio: 16 / 10;
}
.fan img {
	position: absolute; bottom: 2%; left: 50%; width: 34%;
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(61, 35, 82, .22);
	transform-origin: 50% 115%;
	transform: translateX(-50%);
	will-change: transform;
}
.fan .fan-l2, .fan .fan-r2 { z-index: 1; }
.fan .fan-l1, .fan .fan-r1 { z-index: 2; }
.fan .fan-center {
	width: 42%; z-index: 5; border-radius: 20px;
	box-shadow: 0 24px 60px rgba(61, 35, 82, .3);
}

/* ---------- Email form ([fruitastic_form]) ---------- */
.fj-form { display: flex; gap: 10px; justify-content: center; align-items: center; max-width: 440px; margin: 24px auto 0; }
.fj-form input[type=email] {
	flex: 1; min-width: 0; padding: 15px 20px; border: 1px solid #e4e4e4;
	border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 15px;
	color: #444; background: #fff; outline: none; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.fj-form input[type=email]::placeholder { color: #a9a9a9; }
.fj-form button {
	width: 46px; height: 46px; flex: 0 0 46px; border: none; border-radius: 50%;
	background: var(--form-btn-bg, #63D9D8); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center; transition: filter .2s, transform .2s;
}
.fj-form button:hover { filter: brightness(.92); transform: scale(1.06); }
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); word-wrap: normal;
}

/* ---------- Fruit mixer ([fruitastic_mixer]) ---------- */
.njl-machine {
	max-width: 780px; margin: 40px auto 0;
	background:
		radial-gradient(600px 340px at 50% -10%, rgba(124,92,191,.45), transparent 60%),
		linear-gradient(180deg, var(--mixer-g1, #3B2A61) 0%, var(--mixer-g2, #4A3578) 100%);
	border: 2px solid rgba(255,255,255,.14); border-radius: 30px;
	padding: 36px 24px 44px; font-family: 'Inter', sans-serif;
	box-shadow: 0 30px 70px rgba(61, 35, 82, .35);
}
.njl-step { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; color: #EBD9A8; text-align: center; margin: 0 0 20px; }
.njl-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 560px; margin: 0 auto; }
.njl-chip { background: #FDFAFF; border: none; border-radius: 16px; padding: 12px 6px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: .9rem; color: #3D2352; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.njl-chip img { width: 58px; height: 58px; object-fit: contain; mix-blend-mode: multiply; }
.njl-chip:hover { transform: translateY(-4px) scale(1.05); }
.njl-chip[aria-pressed=true] { background: #FFEFCB; transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 3.5px #F79A3E, 0 10px 22px rgba(0,0,0,.3); }
.njl-zone { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 30px 0 8px; min-height: 96px; }
.njl-slot { width: 84px; height: 84px; border-radius: 20px; border: 3px dashed rgba(255,255,255,.35); display: grid; place-items: center; font-size: 2rem; color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); transition: border-color .2s, background .2s; }
.njl-slot img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.njl-slot.filled { border-style: solid; border-color: #F79A3E; background: rgba(247,154,62,.12); }
.njl-plus { font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 800; color: #EBD9A8; }
.njl-actions { text-align: center; margin-top: 18px; }
.njl-btn { display: inline-flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; color: #fff; background: linear-gradient(180deg, #F79A3E, #E8821B); border: none; border-radius: 40px; padding: 14px 30px; min-height: 48px; cursor: pointer; text-decoration: none; box-shadow: 0 6px 0 #C96E12, 0 14px 26px rgba(232,130,27,.35); transition: transform .15s, box-shadow .15s; }
.njl-btn:hover { transform: translateY(-2px); }
.njl-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.njl-btn-sm { padding: 10px 20px; font-size: .95rem; min-height: 44px; box-shadow: 0 4px 0 #C96E12; }
.njl-machine.shaking { animation: njlshake .6s ease-in-out 2; }
@keyframes njlshake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-7px) rotate(-.6deg); }
	40% { transform: translateX(7px) rotate(.6deg); }
	60% { transform: translateX(-5px) rotate(-.4deg); }
	80% { transform: translateX(5px) rotate(.4deg); }
}
.njl-result { display: none; margin-top: 30px; }
.njl-result.show { display: block; animation: njlin .6s cubic-bezier(.22,1,.36,1); }
@keyframes njlin { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
.njl-card { background: #FFF9EE; color: #3D2352; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.4); text-align: left; }
.njl-card > img { width: 100%; aspect-ratio: 2/1; object-fit: cover; display: block; }
.njl-body { padding: 26px 28px 30px; }
.njl-body h3 { font-family: 'Poppins', sans-serif; font-size: 1.8rem; color: #C2308F; margin: 0 0 4px; }
.njl-card.custom .njl-body h3 { color: #7C5CBF; }
.njl-pitch { color: #6B5687; font-size: 1.05rem; margin: 6px 0 14px; }
.njl-verdict { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid #D9C9F5; border-radius: 16px; padding: 14px 18px; font-size: 1.05rem; }
.njl-verdict .face { font-size: 1.7rem; flex: none; }
.njl-verdict strong { color: #C2308F; }
.njl-cta { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.njl-hint { font-size: .95rem; color: #6B5687; }

/* ---------- Sticky email CTA bar ---------- */
.fl-sticky {
	position: fixed; top: 0; left: 0; right: 0; z-index: 90;
	display: flex; align-items: center; justify-content: center; gap: 20px;
	padding: 10px 20px;
	background: rgba(255, 255, 255, .93);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	box-shadow: 0 2px 20px rgba(61, 35, 82, .14);
	transform: translateY(-110%);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.fl-sticky.show { transform: none; }
.fl-sticky-text { margin: 0; font-size: 14px; color: #5F278A; white-space: nowrap; }
.fl-sticky .fj-form { margin: 0; max-width: 340px; flex: 0 1 340px; }
.fl-sticky .fj-form input[type=email] { padding: 10px 16px; font-size: 14px; }
.fl-sticky .fj-form button { width: 38px; height: 38px; flex-basis: 38px; font-size: 17px; }

@media (max-width: 700px) {
	.fl-sticky {
		top: auto; bottom: 0;
		transform: translateY(110%);
		box-shadow: 0 -2px 20px rgba(61, 35, 82, .14);
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	}
}
@media (max-width: 600px) {
	.fl-sticky-text { display: none; }
	.fl-sticky .fj-form { flex: 1 1 auto; }
}

/* ---------- Responsive tweaks for the custom pieces ---------- */
@media (max-width: 560px) {
	.njl-tray { grid-template-columns: repeat(2, 1fr); }
	.fan { aspect-ratio: 4 / 3.4; }
	.fan img { width: 44%; }
	.fan .fan-center { width: 54%; }
}