/*
 * WonderTale House — components (v0.1)
 * Buttons, cards (book / character / feature / storyteller), badges, layered depth scene, reveals.
 * Usage classes are documented in docs/design-system.md and can be applied in Elementor via
 * Advanced > CSS Classes.
 */

/* ---------- Buttons ---------- */
/* Variant variables live on .wt-btn (low specificity) so modifiers below can override them. */
.wt-btn {
	--_bg: var(--wt-gold);
	--_fg: var(--wt-teal-900);
	--_bd: transparent;
}
.wt-btn,
.wt-site a.wt-btn,
.wt-site .elementor-button.wt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var(--wt-btn-h);
	min-width: var(--wt-tap-min);
	padding: 0 var(--wt-space-5);
	border: 1.5px solid var(--_bd);
	border-radius: var(--wt-radius-pill);
	background: var(--_bg);
	color: var(--_fg);
	font-family: var(--wt-font-body);
	font-size: var(--wt-fs-button);
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--wt-shadow-1);
	transition: transform var(--wt-dur-fast) var(--wt-ease-out), box-shadow var(--wt-dur-fast) var(--wt-ease-out), background-color var(--wt-dur-fast);
	-webkit-tap-highlight-color: transparent;
}
.wt-btn:hover,
.wt-site a.wt-btn:hover { transform: translateY(-2px); box-shadow: var(--wt-shadow-2); color: var(--_fg); text-decoration: none; }
.wt-btn:active { transform: translateY(0); box-shadow: var(--wt-shadow-1); }
.wt-btn[disabled], .wt-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.wt-btn--primary:hover { --_bg: var(--wt-gold-hover); }
.wt-btn--secondary { --_bg: transparent; --_fg: var(--wt-teal); --_bd: var(--wt-teal); box-shadow: none; }
.wt-btn--secondary:hover { --_bg: rgb(6 79 75 / 0.06); }
.wt-btn--on-dark { --_bg: transparent; --_fg: var(--wt-ivory); --_bd: rgb(255 247 238 / 0.7); box-shadow: none; }
.wt-btn--on-dark:hover { --_bg: rgb(255 247 238 / 0.1); }
.wt-btn--on-dark:focus-visible { outline-color: var(--wt-ivory); }
.wt-btn--dark { --_bg: var(--wt-teal); --_fg: var(--wt-ivory); }
.wt-btn--dark:hover { --_bg: var(--wt-teal-900); }
.wt-btn--lg { min-height: var(--wt-btn-h-lg); padding-inline: var(--wt-space-6); }
.wt-btn--sm { min-height: var(--wt-btn-h-sm); padding-inline: var(--wt-space-4); }
.wt-btn__arrow { width: 16px; height: 16px; flex: none; transition: transform var(--wt-dur-fast) var(--wt-ease-out); }
.wt-btn:hover .wt-btn__arrow { transform: translateX(3px); }

/* Round icon button (carousel prev/next) */
.wt-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--wt-line);
	background: var(--wt-ivory);
	color: var(--wt-teal);
	cursor: pointer;
	box-shadow: var(--wt-shadow-1);
	transition: transform var(--wt-dur-fast) var(--wt-ease-out), box-shadow var(--wt-dur-fast);
}
.wt-icon-btn:hover { transform: translateY(-2px); box-shadow: var(--wt-shadow-2); }

/* Text link with arrow */
.wt-link-arrow,
.wt-site a.wt-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 800;
	font-size: var(--wt-fs-small);
	color: var(--wt-teal);
	text-decoration: none;
}
.wt-link-arrow::after { content: "→"; transition: transform var(--wt-dur-fast) var(--wt-ease-out); }
.wt-link-arrow:hover { text-decoration: underline; }
.wt-link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Cards ---------- */
.wt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wt-space-3);
	padding: var(--wt-space-5);
	background: #fffdf9;
	border: 1px solid var(--wt-line);
	border-radius: var(--wt-radius-md);
	box-shadow: var(--wt-shadow-1);
	transition: transform var(--wt-dur-base) var(--wt-ease-out), box-shadow var(--wt-dur-base) var(--wt-ease-out);
}
.wt-card:hover { transform: translateY(-4px); box-shadow: var(--wt-shadow-2); }
.wt-card__title { font-family: var(--wt-font-display); font-weight: 600; font-size: var(--wt-fs-h3); line-height: 1.2; color: var(--wt-teal); margin: 0; }
.wt-card__text { font-size: var(--wt-fs-small); color: var(--wt-ink); margin: 0; }
/* Whole-card click target without nesting links */
.wt-site .wt-card__link { color: inherit; text-decoration: none; }
.wt-site .wt-card__link:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.wt-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wt-card:has(.wt-card__link:focus-visible) { outline: var(--wt-focus-ring); outline-offset: 3px; }

/* Book card: 3D cover */
.wt-book-card { padding-top: var(--wt-space-6); text-align: left; }
.wt-book-cover {
	position: relative;
	margin: 0 auto var(--wt-space-3);
	width: min(100%, 240px);
	perspective: 900px;
}
.wt-book-cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px 10px 10px 4px;
	box-shadow: var(--wt-shadow-book);
	transform: rotateY(-8deg);
	transform-origin: left center;
	transition: transform var(--wt-dur-slow) var(--wt-ease-out);
}
.wt-book-cover::before { /* spine shading */
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 6%;
	border-radius: 4px 0 0 4px;
	background: linear-gradient(90deg, rgb(0 0 0 / 0.28), rgb(0 0 0 / 0));
	z-index: 1;
	pointer-events: none;
}
.wt-book-card:hover .wt-book-cover img { transform: rotateY(-4deg) translateY(-4px); }

/* Character card: arched portrait */
.wt-character-card { align-items: center; text-align: center; padding: var(--wt-space-4) var(--wt-space-3) var(--wt-space-5); }
.wt-character-card__portrait {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: var(--wt-radius-arch);
	background: linear-gradient(180deg, var(--wt-peach), #fdeee4);
	display: grid;
	place-items: end center;
	overflow: hidden;
}
.wt-character-card__portrait img { width: 92%; height: auto; object-fit: contain; }
.wt-character-card:nth-child(3n+2) .wt-character-card__portrait { background: linear-gradient(180deg, #e9dcef, #f5eef8); }
.wt-character-card:nth-child(3n) .wt-character-card__portrait { background: linear-gradient(180deg, #dcebe0, #eef6f0); }
.wt-character-card__name { font-family: var(--wt-font-body); font-weight: 800; font-size: var(--wt-fs-h4); color: var(--wt-teal); margin: 0; }
.wt-character-card__trait { font-size: var(--wt-fs-small); color: var(--wt-forest-700); margin: 0; }

/* Feature tile (value icons row) */
.wt-feature { flex-direction: row; align-items: flex-start; gap: var(--wt-space-4); }
.wt-feature__icon { flex: none; width: 40px; height: 40px; color: var(--wt-gold-700); }
.wt-feature__title { font-weight: 800; color: var(--wt-teal); margin: 0 0 2px; font-size: 1.0625rem; }

/* Storyteller card */
.wt-storyteller { flex-direction: row; align-items: center; gap: var(--wt-space-5); }
.wt-storyteller__portrait { flex: none; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 4px solid var(--wt-ivory); box-shadow: var(--wt-shadow-1); }
@media (max-width: 767px) { .wt-storyteller { flex-direction: column; text-align: center; } }

/* Panel (large rounded container) */
.wt-panel { background: #fffdf9; border-radius: var(--wt-radius-lg); padding: clamp(24px, 4vw, 56px); box-shadow: var(--wt-shadow-1); }
.wt-panel--night { background: var(--wt-night); color: var(--wt-ivory); }

/* ---------- Badges ---------- */
.wt-badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--wt-radius-pill);
	background: var(--wt-peach);
	color: var(--wt-teal-900);
	font-size: var(--wt-fs-eyebrow);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}
.wt-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wt-coral); }

/* ---------- Horizontal scroller (carousel base: works without JS) ---------- */
.wt-scroller {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(78%, 1fr);
	gap: var(--wt-grid-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wt-gutter);
	padding-block: var(--wt-space-4) var(--wt-space-6);
	scrollbar-width: thin;
}
.wt-scroller > * { scroll-snap-align: start; }
@media (min-width: 768px) { .wt-scroller { grid-auto-columns: calc((100% - var(--wt-grid-gap)) / 2); } }
@media (min-width: 1025px) { .wt-scroller { grid-auto-columns: calc((100% - 2 * var(--wt-grid-gap)) / 3); } }
.wt-scroller--characters { grid-auto-columns: minmax(42%, 1fr); }
@media (min-width: 768px) { .wt-scroller--characters { grid-auto-columns: calc((100% - 3 * var(--wt-grid-gap)) / 4); } }
@media (min-width: 1025px) { .wt-scroller--characters { grid-auto-columns: calc((100% - 6 * var(--wt-grid-gap)) / 7); } }

/* ---------- Layered depth scene (hero foundation; artwork arrives in Phase 2) ---------- */
.wt-scene { position: relative; isolation: isolate; overflow: hidden; }
.wt-scene__layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	will-change: transform;
	transform: translate3d(0, var(--wt-parallax-y, 0px), 0);
}
.wt-scene__layer img { width: 100%; height: 100%; object-fit: cover; }
.wt-scene__content { position: relative; z-index: 5; }

/* Ambient sparkles (decorative only) */
.wt-sparkle {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(255 236 190 / 0.95) 0%, rgb(233 162 59 / 0.35) 45%, transparent 70%);
	pointer-events: none;
	animation: wt-twinkle 6s ease-in-out infinite;
}
@keyframes wt-twinkle {
	0%, 100% { opacity: 0.25; transform: translate3d(0, 0, 0) scale(0.8); }
	50% { opacity: 0.9; transform: translate3d(0, -8px, 0) scale(1); }
}
.wt-motion-paused .wt-sparkle { animation-play-state: paused; }

/* ---------- Reveal on scroll (progressive enhancement: content is visible without JS) ---------- */
.wt-js .wt-reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--wt-dur-slow) var(--wt-ease-out), transform var(--wt-dur-slow) var(--wt-ease-out); transition-delay: var(--wt-reveal-delay, 0ms); }
.wt-js .wt-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.wt-js .wt-reveal { opacity: 1; transform: none; }
	.wt-scene__layer { transform: none !important; }
	.wt-sparkle { animation: none; opacity: 0.6; }
	.wt-book-cover img { transform: none; }
	.wt-card:hover, .wt-btn:hover { transform: none; }
}

/* ---------- Touch devices: no sticky hover lifts ---------- */
@media (hover: none) {
	.wt-card:hover, .wt-btn:hover, .wt-icon-btn:hover { transform: none; box-shadow: var(--wt-shadow-1); }
}