/* =====================================================================
   Service-card transitions: one 5-second scene per card.
   The overlay is created by cgs-home.js only after a plain left-click
   and only when the visitor has not asked for reduced motion.
   ===================================================================== */

.cgs-fx {
	--fx-d: 5s;
	position: fixed; inset: 0; z-index: 2000;
	display: grid; place-items: center; padding: 20px;
	background:
		radial-gradient(ellipse at 50% 30%, rgba(201, 162, 74, .25), transparent 60%),
		linear-gradient(160deg, rgba(7, 45, 25, .96), rgba(13, 86, 49, .96));
	animation: cgs-fx-in .35s var(--ease) both;
	font-family: var(--font-bn);
}
.cgs-fx.is-leaving { animation: cgs-fx-out .3s ease both; }
@keyframes cgs-fx-in { from { opacity: 0; } }
@keyframes cgs-fx-out { to { opacity: 0; } }
.cgs-fx__card {
	width: min(560px, 100%);
	background: var(--ivory); border-radius: 28px; padding: 18px 18px 20px;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(201, 162, 74, .5);
	text-align: center;
	animation: cgs-fx-pop .5s var(--ease) both;
}
@keyframes cgs-fx-pop { from { transform: translateY(16px) scale(.96); opacity: 0; } }
.cgs-fx__stage {
	border-radius: 20px; overflow: hidden;
	background: radial-gradient(ellipse at 50% 20%, #fff, #eef5ef 70%);
	box-shadow: inset 0 0 0 1px var(--line);
}
.fx-svg { display: block; width: 100%; height: auto; }
.fx-svg * { transform-box: fill-box; animation-duration: var(--fx-d); animation-fill-mode: both; animation-timing-function: var(--ease); }
.cgs-fx__t {
	margin: 16px 0 10px; font-family: var(--font-display);
	font-size: var(--fs-lg); font-weight: 700; color: var(--emerald-900);
}
.cgs-fx__bar { height: 6px; border-radius: 6px; background: rgba(13, 86, 49, .12); overflow: hidden; }
.cgs-fx__bar span {
	display: block; height: 100%; width: 100%; transform-origin: left;
	background: linear-gradient(90deg, var(--emerald-600), var(--gold));
	animation: cgs-fx-bar var(--fx-d) linear both;
}
@keyframes cgs-fx-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cgs-fx__actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.cgs-fx__btn {
	appearance: none; cursor: pointer; min-height: 44px; padding: 0 20px; border-radius: 999px;
	font-family: var(--font-bn); font-size: var(--fs-sm); font-weight: 700;
	border: 1px solid var(--emerald-700); background: var(--emerald-700); color: #fff;
}
.cgs-fx__btn--ghost { background: transparent; color: var(--emerald-800); }

/* ---------- Academic: book opens, pages turn, classroom appears ---------- */
.fx-ac-book { animation-name: fx-ac-book; transform-origin: center; }
@keyframes fx-ac-book { 0% { opacity: 0; transform: scale(.85); } 6% { opacity: 1; transform: none; } 48% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; transform: scale(.7) translateY(-20px); } }
.fx-ac-cover { animation-name: fx-ac-cover; transform-origin: left center; }
@keyframes fx-ac-cover { 0%, 6% { transform: scaleX(1); } 18% { transform: scaleX(0); opacity: 1; } 19%, 100% { transform: scaleX(0); opacity: 0; } }
.fx-ac-flip { transform-origin: left center; opacity: 0; }
.fx-ac-flip--1 { animation-name: fx-ac-flip1; }
.fx-ac-flip--2 { animation-name: fx-ac-flip2; }
.fx-ac-flip--3 { animation-name: fx-ac-flip3; }
@keyframes fx-ac-flip1 { 0%, 19% { opacity: 1; transform: scaleX(1); } 31% { transform: scaleX(-1); opacity: 1; } 32%, 100% { opacity: 0; transform: scaleX(-1); } }
@keyframes fx-ac-flip2 { 0%, 19% { opacity: 0; } 20%, 26% { opacity: 1; transform: scaleX(1); } 38% { transform: scaleX(-1); opacity: 1; } 39%, 100% { opacity: 0; transform: scaleX(-1); } }
@keyframes fx-ac-flip3 { 0%, 26% { opacity: 0; } 27%, 33% { opacity: 1; transform: scaleX(1); } 45% { transform: scaleX(-1); opacity: 1; } 46%, 100% { opacity: 0; transform: scaleX(-1); } }
.fx-ac-room { animation-name: fx-ac-room; transform-origin: center; }
@keyframes fx-ac-room { 0%, 50% { opacity: 0; transform: scale(.92); } 62%, 100% { opacity: 1; transform: none; } }
.fx-ac-chalk path, .fx-ac-chalk circle { stroke-dasharray: 260; stroke-dashoffset: 260; animation-name: fx-draw; }
.fx-ac-chalk :nth-child(1) { animation-name: fx-draw-a; }
.fx-ac-chalk :nth-child(2) { animation-name: fx-draw-b; }
.fx-ac-chalk :nth-child(3) { animation-name: fx-draw-c; }
.fx-ac-chalk :nth-child(4) { animation-name: fx-draw-d; }
.fx-ac-chalk :nth-child(5) { animation-name: fx-draw-e; }
@keyframes fx-draw-a { 0%, 60% { stroke-dashoffset: 260; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes fx-draw-b { 0%, 64% { stroke-dashoffset: 260; } 74%, 100% { stroke-dashoffset: 0; } }
@keyframes fx-draw-c { 0%, 68% { stroke-dashoffset: 260; } 78%, 100% { stroke-dashoffset: 0; } }
@keyframes fx-draw-d { 0%, 72% { stroke-dashoffset: 260; } 82%, 100% { stroke-dashoffset: 0; } }
@keyframes fx-draw-e { 0%, 76% { stroke-dashoffset: 260; } 88%, 100% { stroke-dashoffset: 0; } }
.fx-ac-desks { animation-name: fx-rise; }
.fx-ac-kids { animation-name: fx-rise-late; }
@keyframes fx-rise { 0%, 54% { opacity: 0; transform: translateY(30px); } 66%, 100% { opacity: 1; transform: none; } }
@keyframes fx-rise-late { 0%, 62% { opacity: 0; transform: translateY(24px); } 74% { opacity: 1; transform: none; } 84% { transform: translateY(-4px); } 92%, 100% { opacity: 1; transform: none; } }

/* ---------- Notice: board arrives, sheet unfolds and is pinned ---------- */
.fx-nt-board { animation-name: fx-nt-board; }
@keyframes fx-nt-board { 0% { transform: translateY(-120%); opacity: 0; } 14% { transform: translateY(4%); opacity: 1; } 18%, 100% { transform: none; opacity: 1; } }
.fx-nt-sheet { animation-name: fx-nt-sheet; transform-origin: top center; }
@keyframes fx-nt-sheet { 0%, 20% { transform: scaleY(.06); opacity: 0; } 22% { opacity: 1; } 32% { transform: scaleY(.5) skewX(-4deg); } 44%, 100% { transform: none; opacity: 1; } }
.fx-nt-pin { animation-name: fx-nt-pin; transform-origin: center; }
@keyframes fx-nt-pin { 0%, 16% { transform: translateY(-90px) scale(1.6); opacity: 0; } 22% { transform: translateY(2px); opacity: 1; } 25%, 100% { transform: none; opacity: 1; } }
.fx-nt-lines path { stroke-dasharray: 120; stroke-dashoffset: 120; }
.fx-nt-lines :nth-child(1) { animation-name: fx-l1; } .fx-nt-lines :nth-child(2) { animation-name: fx-l2; } .fx-nt-lines :nth-child(3) { animation-name: fx-l3; } .fx-nt-lines :nth-child(4) { animation-name: fx-l4; } .fx-nt-lines :nth-child(5) { animation-name: fx-l5; }
@keyframes fx-l1 { 0%, 46% { stroke-dashoffset: 120; } 54%, 100% { stroke-dashoffset: 0; } }
@keyframes fx-l2 { 0%, 51% { stroke-dashoffset: 120; } 59%, 100% { stroke-dashoffset: 0; } }
@keyframes fx-l3 { 0%, 56% { stroke-dashoffset: 120; } 64%, 100% { stroke-dashoffset: 0; } }
@keyframes fx-l4 { 0%, 61% { stroke-dashoffset: 120; } 69%, 100% { stroke-dashoffset: 0; } }
@keyframes fx-l5 { 0%, 66% { stroke-dashoffset: 120; } 74%, 100% { stroke-dashoffset: 0; } }
.fx-nt-horn { animation-name: fx-pop-late; transform-origin: left center; }
@keyframes fx-pop-late { 0%, 70% { transform: scale(0); opacity: 0; } 78% { transform: scale(1.12); opacity: 1; } 82%, 100% { transform: none; opacity: 1; } }
.fx-nt-waves path { animation-name: fx-wave; }
.fx-nt-waves path:nth-child(2) { animation-name: fx-wave2; }
@keyframes fx-wave { 0%, 78% { opacity: 0; } 84% { opacity: 1; } 90% { opacity: .2; } 96%, 100% { opacity: 1; } }
@keyframes fx-wave2 { 0%, 82% { opacity: 0; } 88% { opacity: 1; } 94% { opacity: .2; } 100% { opacity: 1; } }

/* ---------- Gallery: frames fly in, then settle into an album ---------- */
.fx-gl-album { animation-name: fx-gl-album; transform-origin: center; }
@keyframes fx-gl-album { 0%, 52% { opacity: 0; transform: scale(.9); } 64%, 100% { opacity: 1; transform: none; } }
.fx-gl-frame { transform-box: view-box; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .2)); }
.fx-gl-frame--a { animation-name: fx-gl-a; }
.fx-gl-frame--b { animation-name: fx-gl-b; }
.fx-gl-frame--c { animation-name: fx-gl-c; }
.fx-gl-frame--d { animation-name: fx-gl-d; }
@keyframes fx-gl-a { 0% { transform: translate(-90px, 40px) rotate(-60deg); } 14% { transform: translate(-90px, 40px) rotate(-60deg); } 30%, 50% { transform: translate(96px, 74px) rotate(-16deg); } 80%, 100% { transform: translate(140px, 92px) rotate(-2deg) scale(.92); } }
@keyframes fx-gl-b { 0%, 18% { transform: translate(500px, 30px) rotate(50deg); } 34%, 52% { transform: translate(312px, 64px) rotate(14deg); } 82%, 100% { transform: translate(260px, 92px) rotate(2deg) scale(.92); } }
@keyframes fx-gl-c { 0%, 22% { transform: translate(-90px, 280px) rotate(40deg); } 38%, 54% { transform: translate(104px, 196px) rotate(12deg); } 84%, 100% { transform: translate(140px, 172px) rotate(1deg) scale(.92); } }
@keyframes fx-gl-d { 0%, 26% { transform: translate(500px, 300px) rotate(-50deg); } 42%, 56% { transform: translate(304px, 200px) rotate(-12deg); } 86%, 100% { transform: translate(260px, 172px) rotate(-1deg) scale(.92); } }

/* ---------- Contact: phone rings, envelope opens, location pin drops ---------- */
.fx-ct-phone { animation-name: fx-ct-phone; transform-origin: center bottom; }
@keyframes fx-ct-phone {
	0% { opacity: 0; transform: scale(.6); } 10% { opacity: 1; transform: none; }
	14% { transform: rotate(-6deg); } 17% { transform: rotate(6deg); } 20% { transform: rotate(-5deg); } 23% { transform: rotate(5deg); }
	26% { transform: rotate(-3deg); } 29% { transform: rotate(3deg); } 32%, 100% { transform: none; opacity: 1; }
}
.fx-ct-rings { animation-name: fx-ct-rings; }
@keyframes fx-ct-rings { 0%, 10% { opacity: 0; } 14% { opacity: 1; } 20% { opacity: .2; } 26% { opacity: 1; } 34%, 100% { opacity: 0; } }
.fx-ct-env { animation-name: fx-ct-env; }
@keyframes fx-ct-env { 0%, 28% { opacity: 0; transform: translate(120px, -60px) rotate(18deg); } 46%, 100% { opacity: 1; transform: none; } }
.fx-ct-flap { animation-name: fx-ct-flap; transform-origin: top center; }
@keyframes fx-ct-flap { 0%, 50% { transform: none; } 58%, 100% { transform: scaleY(-1); } }
.fx-ct-letter { animation-name: fx-ct-letter; }
@keyframes fx-ct-letter { 0%, 56% { transform: none; } 68%, 100% { transform: translateY(-34px); } }
.fx-ct-map { animation-name: fx-ct-map; }
@keyframes fx-ct-map { 0%, 58% { opacity: 0; transform: translateY(16px); } 66%, 100% { opacity: 1; transform: none; } }
.fx-ct-pin { animation-name: fx-ct-pin; }
@keyframes fx-ct-pin { 0%, 66% { opacity: 0; transform: translateY(-120px); } 74% { opacity: 1; transform: translateY(4px); } 78%, 100% { opacity: 1; transform: none; } }
.fx-ct-ripple { animation-name: fx-ct-ripple; transform-origin: center; }
@keyframes fx-ct-ripple { 0%, 76% { opacity: 0; transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(3.2); } }