/* Get Started modal (homepage hut, article contents CTA). Loaded with popup.js by get-started-modal.php. */
.zs-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.zs-modal[hidden] { display: none; }
.zs-modal__backdrop { position: absolute; inset: 0; background: rgba(30, 30, 30, 0.55); opacity: 0; transition: opacity var(--modal-dur, 300ms) var(--ease-out); }
.zs-modal__panel {
	position: relative; width: min(440px, 100%); padding: 40px 28px 28px; border-radius: var(--radius-lg);
	background: var(--c-bg); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.45); outline: none;
	opacity: 0; transition: opacity var(--modal-dur, 300ms) var(--ease-out), transform var(--modal-dur, 300ms) var(--ease-out);
}
.zs-modal--slide .zs-modal__panel { transform: translateY(24px); }
.zs-modal--scale .zs-modal__panel { transform: scale(0.94); }
.zs-modal.is-open .zs-modal__backdrop { opacity: 1; }
.zs-modal.is-open .zs-modal__panel { opacity: 1; transform: none; }
.zs-modal__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.zs-modal__close:hover { background: var(--c-surface); }
.zs-modal__close .icon { width: 20px; height: 20px; }
.zs-modal__title { font-size: 34px; text-align: center; padding-inline: 24px; }
.zs-modal__actions { display: grid; gap: 12px; margin-top: 24px; }
.is-modal-open { overflow: hidden; }
.is-modal-open body { padding-right: var(--scrollbar-gap, 0); }
@media (prefers-reduced-motion: reduce) {
	.zs-modal__backdrop, .zs-modal__panel { transition: none; }
}


/* Hero "View my Options" (template-parts/components/hero-options-modal.php): a Zulu
   beadwork band, a "Sawubona" greeting and three tiles, each an illustrated scene on a
   shweshwe-style print (inc/template-tags.php → zs_option_art()). */
.zs-modal--options .zs-modal__panel { width: min(760px, 100%); padding: 52px 32px 32px; overflow: hidden; }
.beadwork {
	position: absolute; top: 0; left: 0; right: 0; height: 18px;
	background: url("../images/beadwork-h.svg?v=3") space no-repeat 0 0 / 72px 18px;
}
.option-greeting { text-align: center; } /* pill style from .eyebrow (base.css), same as the hut popup */
.zs-modal--options .zs-modal__title { margin-top: 6px; }

.option-tiles { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; padding: 0; list-style: none; }
.option-tile {
	--tint: #f6e3c8;
	display: flex; flex-direction: column; height: 100%; padding: 10px 10px 16px; border-radius: 16px; text-align: center;
	background: #fffaf2; border: 1px solid rgba(42, 33, 28, 0.14); color: var(--c-text);
	box-shadow: 0 2px 0 rgba(42, 33, 28, 0.08);
	transition: background-color var(--t-swap), border-color var(--t-swap), color var(--t-swap), transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out);
}
.option-tile--growth { --tint: #fbdcc6; }
.option-tile--chat { --tint: #d9eaf7; }
.option-tile__art {
	display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 4l5 5-5 5-5-5z' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='1.2'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='18' cy='18' r='1.4' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='9' cy='9' r='1' fill='%232a211c' fill-opacity='.18'/%3E%3C/svg%3E"),
		var(--tint);
}
.option-tile__art svg { width: 100%; height: 100%; padding: 14% 6% 2%; }
.option-tile__label { margin-top: 14px; font-family: var(--f-display); font-size: 22px; line-height: 1.05; letter-spacing: -0.02em; }
.option-tile__note { margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--c-muted); transition: color var(--t-swap); }
.option-tile:hover, .option-tile:focus-visible { background: var(--c-blue); border-color: var(--c-blue); color: var(--c-white); transform: translateY(-4px) rotate(-0.6deg); box-shadow: 0 14px 28px -14px rgba(12, 115, 185, 0.6); }
.option-tile:hover .option-tile__note, .option-tile:focus-visible .option-tile__note { color: rgba(250, 250, 250, 0.85); }
.option-tile:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }

/* Scene colours (flat shapes + dark ink line). */
.option-tile__art .ink { stroke: #2a211c; stroke-width: 2; }
.option-tile__art .thin { stroke-width: 1.3; opacity: 0.45; }
.option-tile__art .ochre { fill: #d99a4e; }
.option-tile__art .orange { fill: var(--c-accent); }
.option-tile__art .blue { fill: var(--c-blue); }
.option-tile__art .dark { fill: #2a211c; }
.option-tile__art .cream { fill: #fff4e4; }
.option-tile__art .white { fill: #fff; }
.option-tile__art .sun { fill: #ff9a4d; opacity: 0.85; }
.option-tile__art .blue-line { stroke: var(--c-blue); stroke-width: 2.5; }
.option-tile__art .cream-line { stroke: #fff4e4; stroke-width: 2; }

@media (max-width: 599px) {
	.zs-modal--options .zs-modal__panel { padding: 44px 16px 18px; }
	.option-tiles { grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
	.option-tile { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 8px 14px 8px 8px; text-align: left; }
	.option-tile__art { grid-row: span 2; }
	.option-tile__label { margin-top: 0; align-self: end; font-size: 20px; }
	.option-tile__note { margin-top: 2px; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
	.option-tile { transition: none; }
	.option-tile:hover { transform: none; }
}

/* Drop + dead bounce: used when the homepage hut rockets off (animations.js adds
   .zs-modal--drop before opening). The panel falls from above the viewport and
   settles with shrinking bounces. Reduced motion never gets this class. */
.zs-modal--drop { --drop-dur: 1.15s; }
.zs-modal--drop .zs-modal__panel { transform: none; transition: none; }
.zs-modal--drop.is-open .zs-modal__panel { opacity: 1; animation: zs-drop-bounce var(--drop-dur) both; }
@keyframes zs-drop-bounce {
	0% { transform: translateY(-110vh); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
	48% { transform: translateY(0) scaleY(0.97); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
	64% { transform: translateY(-36px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
	77% { transform: translateY(0) scaleY(0.99); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
	86% { transform: translateY(-11px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
	93% { transform: translateY(0); animation-timing-function: ease-out; }
	97% { transform: translateY(-3px); }
	100% { transform: translateY(0); }
}

/* Hut launch eyebrow ("You Rebel!!") above the title; the pill style comes from .eyebrow (base.css). */
.zs-modal__eyebrow { margin-bottom: 10px; text-align: center; }
/* Phones: keep the hut launch title ("Ready to take off with Zulu Shack?") to two lines. */
/* Font scales with the screen so "READY TO TAKE OFF" (~8.1em) always fits the panel's content width (100vw − 96px). */
@media (max-width: 767px) { .zs-modal--drop .zs-modal__title { padding-inline: 0; font-size: min(30px, calc((100vw - 96px) / 8.6)); } }

/* Hut launch footer: "Zulu Shack Take Offs 148" (count fades in once the launch is saved). */
.zs-modal__takeoffs {
	margin: 22px -4px -6px; padding-top: 14px; border-top: 1px solid var(--c-border);
	text-align: center; font-size: 13px; line-height: 1.4; color: var(--c-muted);
}
.zs-modal__takeoffs strong { display: inline-block; min-width: 2.5em; text-align: left; font-weight: 400; color: inherit; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.3s; }
.zs-modal__takeoffs.is-counted strong { opacity: 1; }