/* ============================================================
 * ScienceApp WP — v1.3
 * Responsive across mobile/tablet/desktop + animations + carousel
 * ============================================================ */

.sawp-host,
.sawp-host * { box-sizing: border-box; }

.sawp-host {
	--sawp-phone-w: 390px;
	--sawp-phone-h: 780px;
	--sawp-phone-max-h: 92vh;
	--sawp-phone-radius: 42px;
	--sawp-phone-shadow: 0 30px 60px -12px rgba(0,0,0,.55), 0 0 0 10px #0f172a, 0 0 0 12px #1e293b;
	--sawp-frame-min-h: 720px;
	--sawp-frame-bg: linear-gradient(135deg, #1e293b, #334155);
	--sawp-frame-padding: 20px 12px;

	width: 100%; max-width: 100%;
	margin: 16px auto;
	padding: 0 8px;
	font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #0F172A;
	line-height: 1.5;
	animation: sawp-fade-up 0.6s ease-out;
}

@keyframes sawp-fade-up {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============ TRANSLATE BAR ============ */
.sawp-translate-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 18px;
	background: linear-gradient(135deg, #1E293B, #2563EB 60%, #7C3AED);
	background-size: 200% 100%;
	color: #fff;
	border-radius: 14px;
	margin: 0 auto 14px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
	max-width: 720px;
	flex-wrap: wrap;
	animation: sawp-gradient-shift 8s ease infinite;
}
@keyframes sawp-gradient-shift {
	0%,100% { background-position: 0% 50%; }
	50%     { background-position: 100% 50%; }
}
.sawp-translate-label {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.02em;
}
#sawp-translate { min-height: 36px; display: flex; align-items: center; }

/* ============ HERO CAROUSEL ============
 * Auto-rotating welcome banner shown above the app on the grade picker
 * screen. JS attaches it with the class .sawp-hero-carousel.
 */
.sawp-hero-carousel {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	margin: 0 auto 14px;
	max-width: 720px;
	min-height: 110px;
	background: linear-gradient(135deg, #FBBF24, #F472B6);
	color: #fff;
	box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.25);
}
.sawp-hero-slide {
	position: absolute;
	inset: 0;
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	pointer-events: none;
}
.sawp-hero-slide.is-active {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}
.sawp-hero-slide h3 {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 800;
	text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.sawp-hero-slide p {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	opacity: 0.95;
}
.sawp-hero-slide .sawp-hero-emoji {
	font-size: 36px;
	margin-bottom: 4px;
	animation: sawp-bounce 1.8s ease-in-out infinite;
}
@keyframes sawp-bounce {
	0%,100% { transform: translateY(0); }
	50%     { transform: translateY(-6px); }
}
.sawp-hero-dots {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
}
.sawp-hero-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.5);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: all .25s ease;
}
.sawp-hero-dot.is-active {
	background: #fff;
	width: 20px;
	border-radius: 999px;
}
/* Carousel gradient cycles every slide */
.sawp-hero-carousel[data-slide="0"] { background: linear-gradient(135deg, #FBBF24, #F472B6); }
.sawp-hero-carousel[data-slide="1"] { background: linear-gradient(135deg, #3B82F6, #06B6D4); }
.sawp-hero-carousel[data-slide="2"] { background: linear-gradient(135deg, #10B981, #14B8A6); }
.sawp-hero-carousel[data-slide="3"] { background: linear-gradient(135deg, #8B5CF6, #EC4899); }

/* ============ APP WRAPPER ============ */
.sawp-wrapper {
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
	background: #fff;
	position: relative;
	transition: box-shadow .3s ease;
}
.sawp-wrapper:hover { box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18); }

/* ============ RESPONSIVE BREAKPOINTS ============ */
@media (min-width: 600px) {
	.sawp-host {
		--sawp-phone-w: 460px;
		--sawp-phone-h: 820px;
		--sawp-phone-max-h: 88vh;
		--sawp-frame-padding: 24px 12px;
		--sawp-frame-bg: linear-gradient(135deg, #334155, #475569);
	}
}
@media (min-width: 900px) {
	.sawp-host {
		--sawp-phone-w: 640px;
		--sawp-phone-h: 820px;
		--sawp-phone-radius: 28px;
		--sawp-phone-shadow: 0 24px 48px -16px rgba(0,0,0,.35), 0 0 0 1px rgba(15,23,42,.08);
		--sawp-frame-bg: linear-gradient(135deg, #f1f5f9, #e2e8f0);
		--sawp-frame-padding: 32px 24px;
	}
	.sawp-wrapper { background: transparent; box-shadow: none; }
}
@media (min-width: 1200px) {
	.sawp-host {
		--sawp-phone-w: 920px;
		--sawp-phone-h: 760px;
		--sawp-phone-max-h: 80vh;
		--sawp-phone-radius: 24px;
		--sawp-phone-shadow: 0 16px 32px -8px rgba(0,0,0,.18), 0 0 0 1px rgba(15,23,42,.06);
		--sawp-frame-bg: linear-gradient(135deg, #f1f5f9, #e2e8f0);
		--sawp-frame-padding: 32px;
	}
	.sawp-wrapper { max-width: 1100px; background: transparent; box-shadow: none; }
}
@media (min-width: 1500px) {
	.sawp-host { --sawp-phone-w: 1040px; --sawp-phone-h: 800px; }
}

/* ============ LOADING STATE ============ */
.sawp-loading {
	padding: 220px 24px;
	text-align: center;
	color: #475569;
	font-size: 17px;
	font-weight: 700;
	background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
	min-height: 720px;
	box-sizing: border-box;
}
.sawp-loading::after {
	content: '';
	display: block;
	width: 38px; height: 38px;
	border: 4px solid #93C5FD;
	border-top-color: #2563EB;
	border-radius: 50%;
	margin: 18px auto 0;
	animation: sawp-spin .9s linear infinite;
}
@keyframes sawp-spin { to { transform: rotate(360deg); } }

/* ============ MOBILE TUNING ============ */
@media (max-width: 599px) {
	.sawp-host {
		margin: 8px 0;
		padding: 0 6px;
		--sawp-phone-w: 100%;
		--sawp-phone-h: 720px;
		--sawp-phone-max-h: 88vh;
		--sawp-phone-radius: 28px;
		--sawp-phone-shadow: 0 12px 24px -8px rgba(0,0,0,.35), 0 0 0 4px #0f172a;
		--sawp-frame-padding: 12px 6px;
	}
	.sawp-translate-bar { padding: 10px 14px; border-radius: 12px; margin-bottom: 10px; }
	.sawp-translate-label { font-size: 12.5px; }
	.sawp-loading { padding: 180px 16px; min-height: 600px; font-size: 15px; }
	.sawp-loading::after { width: 32px; height: 32px; }
	.sawp-hero-carousel { min-height: 96px; }
	.sawp-hero-slide h3 { font-size: 18px; }
	.sawp-hero-slide p  { font-size: 13px; }
	.sawp-hero-slide .sawp-hero-emoji { font-size: 28px; }
}

/* ============ KID-FRIENDLY INNER ANIMATIONS ============
 * These rules target the inner React app's elements by attribute selectors
 * so the existing component code doesn't need to know about them.
 */

/* When the React app renders a button (grade card, chapter card, lesson row),
 * give it a subtle hover lift. */
.sawp-wrapper [style*="cursor:pointer"]:hover,
.sawp-wrapper [style*="cursor: pointer"]:hover {
	transform: translateY(-2px);
	transition: transform .15s ease, box-shadow .15s ease;
	box-shadow: 0 8px 16px -4px rgba(15,23,42,0.18) !important;
}
.sawp-wrapper [style*="cursor:pointer"]:active,
.sawp-wrapper [style*="cursor: pointer"]:active {
	transform: translateY(0);
	transition: transform .05s ease;
}

/* Big "press me" buttons (S.bigBtn) get a pulse glow on hover */
.sawp-wrapper button:hover {
	filter: brightness(1.05);
	transition: filter .15s ease, transform .15s ease;
}

/* Lesson screen header should pulse-in when shown */
.sawp-wrapper {
	scroll-behavior: smooth;
}

/* Confetti container for quiz wins */
.sawp-confetti {
	pointer-events: none;
	position: fixed;
	inset: 0;
	overflow: hidden;
	z-index: 9999;
}
.sawp-confetti span {
	position: absolute;
	top: -20px;
	width: 10px; height: 14px;
	background: #FBBF24;
	opacity: 0.9;
	animation: sawp-fall 2.6s linear forwards;
	transform-origin: center;
}
@keyframes sawp-fall {
	0%   { transform: translateY(0) rotate(0); opacity: 1; }
	100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

@media print { .sawp-host { display: none; } }

/* ============ CONCEPT CAROUSEL (per-lesson slideshow) ============ */
.sawp-concept-carousel {
	position: relative;
	margin: 0 0 6px;
	padding: 0 0 28px;
	overflow: hidden;
}
.sawp-concept-track {
	display: flex;
	transition: transform 0.4s cubic-bezier(.22,.61,.36,1);
}
.sawp-concept-slide {
	flex: 0 0 100%;
	padding: 4px 36px;
	box-sizing: border-box;
}
.sawp-concept-slide > * {
	width: 100%;
	min-height: 110px;
	background: #FFFBF5 !important;
	border: 2px solid #E5E7EB;
	border-radius: 14px;
	padding: 14px 16px !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	box-shadow: 0 4px 12px -4px rgba(15,23,42,0.08);
}
.sawp-cc-arrow {
	position: absolute;
	top: calc(50% - 24px);
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	color: #2563EB;
	font-size: 22px;
	line-height: 1;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(15,23,42,0.18);
	z-index: 2;
	transition: all .15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.sawp-cc-arrow:hover:not([disabled]) {
	transform: translateY(-50%) scale(1.1);
	background: #2563EB;
	color: #fff;
}
.sawp-cc-arrow[disabled] { opacity: 0.3; cursor: not-allowed; }
.sawp-cc-prev { left: 2px; }
.sawp-cc-next { right: 2px; }
.sawp-cc-dots {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 5px;
}
.sawp-cc-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: rgba(37, 99, 235, 0.3);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: all .25s ease;
}
.sawp-cc-dot.is-active {
	background: #2563EB;
	width: 18px;
	border-radius: 999px;
}

/* ============ DIAGRAM ANIMATIONS ============ */
@keyframes sawp-svg-fadein {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes sawp-dash-flow {
	to { stroke-dashoffset: -32; }
}
@keyframes sawp-pulse {
	0%,100% { transform: scale(1); }
	50%     { transform: scale(1.08); }
}
@keyframes sawp-rotate-slow {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}
@keyframes sawp-fall-rain {
	0%   { transform: translateY(-6px); opacity: 0; }
	30%  { opacity: 1; }
	100% { transform: translateY(40px); opacity: 0; }
}
@keyframes sawp-float {
	0%,100% { transform: translateX(0); }
	50%     { transform: translateX(6px); }
}
@keyframes sawp-heartbeat {
	0%,40%,100% { transform: scale(1); }
	20%         { transform: scale(1.12); }
	60%         { transform: scale(1.06); }
}
@keyframes sawp-wave {
	0%,100% { transform: translateX(0); }
	50%     { transform: translateX(4px); }
}
@keyframes sawp-sway {
	0%,100% { transform: rotate(-1.5deg); }
	50%     { transform: rotate(1.5deg); }
}
@keyframes sawp-arrow-bounce {
	0%,100% { transform: translateX(0); }
	50%     { transform: translateX(4px); }
}
@keyframes sawp-magnet-pulse {
	0%,100% { opacity: 1; }
	50%     { opacity: 0.4; }
}