/* =====================================================================
   Login Panel (লগইন প্যানেল): navigation item, dropdown character,
   Teacher / Student entry dialogs, animations and login forms.
   Behaviour: assets/js/cgs-portal.js. Authentication: CGS Portal plugin.
   ===================================================================== */

/* ---------- navigation item (desktop) ---------- */
.cgs-menu .cgs-login-toggle {
	width: auto; height: auto;
	display: inline-flex; align-items: center; gap: 7px;
	font: inherit; text-align: left;
}
/* Its own control near the end of the bar, just left of ⋯ (never moves into ⋯). */
.cgs-menu--desktop .cgs-login-toggle {
	min-height: 44px; padding: 0 10px 0 12px; border-radius: 10px; white-space: nowrap;
	border: 1px solid rgba(13, 86, 49, .24); background: #fff;
	color: var(--emerald-950); font-size: calc(1rem * var(--ts)); font-weight: 600; line-height: 1.4;
	box-shadow: 0 1px 0 #fff inset, 0 6px 14px -10px rgba(10, 63, 36, .55);
	transition: background-color .18s, border-color .18s;
}
.cgs-menu--desktop .cgs-login-toggle:hover,
.cgs-menu--desktop .cgs-login-toggle[aria-expanded="true"] { background: var(--emerald-100); border-color: rgba(13, 86, 49, .4); }
.cgs-menu--login > .cgs-menu__item:hover,
.cgs-menu--login > .cgs-menu__item.is-open { background: transparent; }
.cgs-login-toggle__ico { display: inline-grid; place-items: center; color: var(--gold-dark); }
.cgs-login-toggle__ico .cgs-ico { width: 17px; height: 17px; }
.cgs-login-toggle .cgs-login-toggle__chev { width: 16px; height: 16px; color: var(--emerald-700); }
.cgs-login-toggle__short { display: none; }
/* Some menu items are in ⋯ (class set by cgs-core.js, which measures both forms): lock + "লগইন". */
.cgs-nav.is-login-short .cgs-nav__tools .cgs-login-toggle__txt,
.cgs-nav__measure-short .cgs-login-toggle__txt { display: none; }
.cgs-nav.is-login-short .cgs-nav__tools .cgs-login-toggle__short,
.cgs-nav__measure-short .cgs-login-toggle__short { display: inline; }
@container cgs-nav (max-width: 37.5em) {
	.cgs-menu--desktop .cgs-login-toggle { gap: 5px; padding: 0 8px 0 10px; }
}

/* dropdown: header illustration (reserved size: no layout shift) + two links */
/* Last control in the bar: aligned to its right edge; cgs-core.js keeps it inside the screen. */
.cgs-menu--desktop .cgs-loginmenu { min-width: min(300px, calc(100vw - 24px)); left: auto; right: 0; }
.cgs-loginmenu__art { display: block; padding: 4px 4px 6px; pointer-events: none; }
.cgs-loginmenu__stage {
	display: block; width: 100%; height: calc(84px * var(--ts));
	border-radius: 8px; overflow: hidden;
	background: radial-gradient(ellipse at 80% 40%, rgba(191, 233, 209, .16), transparent 70%), rgba(255, 255, 255, .04);
}
.cgs-navart { display: block; width: 100%; height: 100%; }
.cgs-loginmenu .cgs-loginmenu__link { display: flex; align-items: center; gap: 10px; }
.cgs-loginmenu__ico {
	flex: none; display: inline-grid; place-items: center;
	width: 32px; height: 32px; border-radius: 9px;
	background: rgba(255, 255, 255, .1); color: var(--gold-2);
}
.cgs-loginmenu__ico .cgs-ico { width: 18px; height: 18px; }

/* ---------- dropdown character: walk → gesture → still (≈1.6 s, once) ---------- */
.cgs-navart .na-walker, .cgs-navart .na-bob, .cgs-navart .na-leg, .cgs-navart .na-arm, .cgs-navart .na-glow { transform-box: view-box; }
.cgs-navart .na-glow { opacity: 0; }
.cgs-navart .na-leg--f { transform-origin: 46px 56px; }
.cgs-navart .na-leg--b { transform-origin: 42px 56px; }
.cgs-navart .na-arm { transform-origin: 48px 28px; }
.is-play .na-walker { animation: na-walk 1.16s cubic-bezier(.33, .6, .45, 1) both; }
.is-play .na-bob { animation: na-bob .29s ease-in-out 4; }
.is-play .na-leg--f { animation: na-step .58s ease-in-out 2; }
.is-play .na-leg--b { animation: na-step .58s -.29s ease-in-out 2; }
.is-play .na-arm { animation: na-point .44s 1.12s cubic-bezier(.3, .7, .4, 1) both; }
.is-play .na-glow { animation: na-glow .5s 1.2s ease-out both; }
.is-done .na-walker { transform: translateX(140px); }
.is-done .na-arm { transform: rotate(-78deg); }
.is-done .na-glow { opacity: 1; }
@keyframes na-walk  { from { transform: translateX(0); } to { transform: translateX(140px); } }
@keyframes na-bob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes na-step  { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-17deg); } 75% { transform: rotate(15deg); } }
@keyframes na-point { from { transform: rotate(0); } to { transform: rotate(-78deg); } }
@keyframes na-glow  { from { opacity: 0; } to { opacity: 1; } }

/* ---------- dialog ---------- */
html.cgs-portal-open, html.cgs-portal-open body { overflow: hidden; }
.cgs-portal {
	padding: 0; border: 0; background: transparent; color: var(--ink);
	width: min(560px, calc(100% - 24px)); max-width: none;
	max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
	margin: auto; overflow: visible;
	font-family: var(--font-bn); font-size: var(--fs-base);
}
.cgs-portal::backdrop { background: rgba(4, 30, 16, .64); }
.cgs-portal__box {
	display: flex; flex-direction: column;
	max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
	overflow-y: auto; overscroll-behavior: contain;
	background: #fff; border-radius: 20px;
	border-top: 4px solid var(--gold);
	box-shadow: 0 40px 80px -30px rgba(4, 30, 16, .7);
}
.cgs-portal__head {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 18px 18px 12px 22px;
}
.cgs-portal__title {
	flex: 1; margin: 6px 0 0;
	font-family: var(--font-display); font-size: calc(1.375rem * var(--ts)); line-height: 1.45; color: var(--emerald-900);
}
.cgs-portal__close {
	flex: none; appearance: none; cursor: pointer;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--line); background: #fff; color: var(--emerald-900);
	display: grid; place-items: center;
}
.cgs-portal__close:hover { background: var(--emerald-100); }
.cgs-portal__close .cgs-ico { width: 20px; height: 20px; }

.cgs-portal__stage {
	position: relative; overflow: hidden;      /* the growing ball stays inside */
	margin: 0 18px; border-radius: 14px;
	background: #0a3f24;
	aspect-ratio: 16 / 9; max-height: 46vh; max-height: 46dvh;
}
.cgs-portal--student .cgs-portal__stage { aspect-ratio: 8 / 5; }
.cgs-portalart { display: block; width: 100%; height: 100%; }
.cgs-portal__skip {
	align-self: flex-end; margin: 10px 18px 18px;
	appearance: none; cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px;
	border-radius: 999px; border: 1px solid rgba(13, 86, 49, .3); background: #fff; color: var(--emerald-800);
	font: inherit; font-size: var(--fs-sm); font-weight: 700;
}
.cgs-portal__skip:hover { background: var(--emerald-100); }
.cgs-portal__skip .cgs-ico { width: 16px; height: 16px; }

.cgs-portal.is-form .cgs-portal__stage,
.cgs-portal.is-form .cgs-portal__skip { display: none; }
.cgs-portal.is-form .cgs-portal__form { animation: cgs-portal-in .35s ease-out both; }
@keyframes cgs-portal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Student: the ball has filled the stage; fade it out into the form. */
.cgs-portal__stage.is-leaving { animation: cgs-portal-out .3s ease-in both; }
@keyframes cgs-portal-out { to { opacity: 0; } }

/* ---------- form ---------- */
.cgs-portal__form { padding: 2px 22px 24px; display: grid; gap: 16px; }
.cgs-portal__form[hidden] { display: none; } /* author display:grid would otherwise override [hidden] */
.cgs-portal__note {
	margin: 0; padding: 10px 14px; border-radius: 10px;
	background: #f2f9f5; border-left: 3px solid var(--emerald-500);
	font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-2);
}
.cgs-field { display: grid; gap: 6px; min-width: 0; }
.cgs-field__label { font-weight: 700; font-size: var(--fs-sm); color: var(--emerald-950); line-height: 1.5; }
.cgs-field__control { position: relative; }
.cgs-field__input {
	width: 100%; min-height: 50px; padding: 10px 14px;
	border: 1.5px solid rgba(13, 86, 49, .28); border-radius: 12px; background: #fff;
	font: inherit; font-size: var(--fs-base); color: var(--ink); line-height: 1.5;
}
.cgs-field__input:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--emerald-600); }
.cgs-field__input[aria-invalid="true"] { border-color: #b3261e; }
.cgs-field--pass .cgs-field__input { padding-right: 56px; }
.cgs-field__reveal {
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	appearance: none; cursor: pointer;
	width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent; color: var(--emerald-800);
	display: grid; place-items: center;
}
.cgs-field__reveal:hover { background: var(--emerald-100); }
.cgs-field__reveal .cgs-ico { width: 20px; height: 20px; }
.cgs-field__reveal .is-hide,
.cgs-field__reveal[aria-pressed="true"] .is-show { display: none; }
.cgs-field__reveal[aria-pressed="true"] .is-hide { display: inline; }
.cgs-field__err { margin: 0; font-size: var(--fs-xs); font-weight: 600; color: #b3261e; }
.cgs-field__err:empty { display: none; }

.cgs-portal__submit {
	appearance: none; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 52px; padding: 12px 20px; border-radius: 12px; border: 0;
	background: linear-gradient(160deg, var(--emerald-600), var(--emerald-800)); color: #fff;
	font: inherit; font-size: var(--fs-base); font-weight: 700;
	box-shadow: 0 10px 20px -12px rgba(10, 63, 36, .8);
}
.cgs-portal__submit:hover { filter: brightness(1.06); }
.cgs-portal__submit[aria-disabled="true"] { cursor: progress; opacity: .85; }
.cgs-portal__spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: cgs-spin .8s linear infinite; }
.cgs-portal__submit.is-busy .cgs-portal__spin { display: inline-block; }
.cgs-portal__submit .is-busy-txt, .cgs-portal__submit.is-busy .is-idle-txt { display: none; }
.cgs-portal__submit.is-busy .is-busy-txt { display: inline; }
@keyframes cgs-spin { to { transform: rotate(360deg); } }

.cgs-portal__status {
	margin: 0; padding: 0; font-size: var(--fs-sm); line-height: 1.7;
}
.cgs-portal__status:not(:empty) { padding: 10px 14px; border-radius: 10px; }
.cgs-portal__status.is-error { background: #fdecea; color: #8c1d18; border-left: 3px solid #b3261e; }
.cgs-portal__status.is-info  { background: #fff8e6; color: #5b4510; border-left: 3px solid var(--gold); }
.cgs-portal__status.is-ok    { background: var(--emerald-100); color: var(--emerald-900); border-left: 3px solid var(--emerald-600); }

/* ---------- Teacher Panel scene (≈2.35 s) ---------- */
.cgs-portalart * { transform-box: view-box; }
.is-playing .pt-walker { animation: pt-walk .95s cubic-bezier(.33, .55, .45, 1) both; }
.is-playing .pt-leg--f { transform-origin: 84px 184px; animation: pt-step .32s ease-in-out 3; }
.is-playing .pt-leg--b { transform-origin: 76px 184px; animation: pt-step .32s -.16s ease-in-out 3; }
.is-playing .pt-arm    { transform-origin: 93px 136px; animation: pt-reach .38s .88s cubic-bezier(.3, .7, .4, 1) both; }
.is-playing .pt-cover  { transform-origin: 324px 160px; animation: pt-open .5s 1s ease-in-out both; }
.is-playing .pt-leftpage { animation: cgs-fade-in .2s 1.24s both; }
.is-playing .pt-key    { transform-origin: 331px 112px; animation: pt-key .7s 1.2s ease-in-out both; }
.is-playing .pt-card__line { animation: pt-draw .6s 1.62s ease-out both; }
.is-playing .pt-card__inner { animation: cgs-fade-in .3s 1.95s both; }
.is-playing .pt-card__fill { animation: cgs-fade-in .3s 2s both; }
@keyframes pt-walk  { from { transform: translateX(0); } to { transform: translateX(168px); } }
@keyframes pt-step  { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-13deg); } 75% { transform: rotate(12deg); } }
@keyframes pt-reach { from { transform: rotate(0); } to { transform: rotate(-60deg); } }
@keyframes pt-open  { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
@keyframes pt-key {
	0% { opacity: 0; transform: translateY(10px) scale(.9); }
	35%, 62% { opacity: 1; transform: none; }
	100% { opacity: 0; transform: scale(.7); }
}
@keyframes pt-draw  { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes cgs-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Student Panel scene (≈7.7 s): the walk to school and the rose ----------
   assets/images/scenes/portal-student.svg. cgs-portal.js waits for .psg-end to finish,
   fades the stage (.is-leaving) and then shows the login form. */
.psg-bloom { transform-origin: 101.5px 147px; transform: scale(.17) rotate(-60deg); opacity: 0; }
.psg-bloom-in { transform-origin: 101.5px 147px; }
.psg-glow, .psg-spark { opacity: 0; }
.psg-end { opacity: 0; }
.is-playing .psg-end       { animation: psg-end 7.35s linear both; }
.is-playing .psg-girl      { animation: psg-walk 4.5s linear .3s both; }
.is-playing .psg-body      { animation: psg-bob .5625s ease-in-out .3s 8; }
.is-playing .psg-leg--near { transform-origin: 84px 198px; animation: psg-thigh-a 1.125s ease-in-out .3s 4; }
.is-playing .psg-leg--far  { transform-origin: 81px 198px; animation: psg-thigh-b 1.125s ease-in-out .3s 4; }
.is-playing .psg-shin--near { transform-origin: 84px 230px; animation: psg-knee-a 1.125s linear .3s 4; }
.is-playing .psg-shin--far  { transform-origin: 81px 230px; animation: psg-knee-b 1.125s linear .3s 4; }
.is-playing .psg-arm-far   { transform-origin: 78px 152px; animation: psg-thigh-a 1.125s ease-in-out .3s 4; }
.is-playing .psg-arm-near  { transform-origin: 85.5px 151px; animation: psg-carry 1.125s ease-in-out .3s 4; }
.is-playing .psg-hair      { transform-origin: 77px 122px; animation: psg-hair 1.125s ease-in-out .3s 4, psg-hair-rest 1.6s ease-out 4.8s; }
.is-playing .psg-pack      { transform-origin: 64px 150px; animation: psg-pack .5625s ease-in-out .38s 8; }
.is-playing .psg-skirt     { transform-origin: 82px 184px; animation: psg-skirt 1.125s ease-in-out .3s 4; }
.is-playing.cgs-portal__stage .psg-cam { transform-origin: 400px 190px; animation: psg-cam 1s cubic-bezier(.45, 0, .25, 1) 4.6s both; }
.is-playing .psg-fore      { transform-origin: 87px 174px; animation: psg-raise .6s cubic-bezier(.3, .7, .3, 1) 5.15s both; }
.is-playing .psg-bud       { transform-origin: 101.5px 147px; animation: psg-bud .45s ease-in 5.7s both; }
.is-playing .psg-bloom     { animation: psg-bloom 1.1s cubic-bezier(.2, .8, .25, 1) 5.75s both; }
.is-playing .psg-bloom-in  { animation: psg-bloom-in 1s cubic-bezier(.2, .8, .25, 1) 5.95s both; }
.is-playing .psg-glow      { animation: psg-glow 1.1s ease-out 6.25s both; }
.is-playing .psg-spark     { animation: psg-spark .95s ease-out 6.35s both; }
.is-playing .psg-spark:nth-child(even) { animation-delay: 6.5s; }
@keyframes psg-end    { from { opacity: 0; } to { opacity: 0; } }
@keyframes psg-walk   { from { transform: translateX(0); } to { transform: translateX(282px); } }
@keyframes psg-bob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
/* Thigh: forward (negative) and back; the far leg is half a step out of phase. */
@keyframes psg-thigh-a { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(-19deg); } 75% { transform: rotate(17deg); } }
@keyframes psg-thigh-b { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(17deg); } 75% { transform: rotate(-19deg); } }
/* Knee: bends while the leg swings through, straight when the heel lands. */
@keyframes psg-knee-a { 0% { transform: rotate(14deg); } 20%, 50% { transform: rotate(0); } 70% { transform: rotate(4deg); } 85% { transform: rotate(28deg); } 100% { transform: rotate(14deg); } }
@keyframes psg-knee-b { 0%, 70%, 100% { transform: rotate(0); } 20% { transform: rotate(4deg); } 35% { transform: rotate(28deg); } 50% { transform: rotate(14deg); } }
@keyframes psg-carry  { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(3deg); } 75% { transform: rotate(-2.5deg); } }
@keyframes psg-hair   { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(2.4deg); } 75% { transform: rotate(-1.6deg); } }
@keyframes psg-hair-rest { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(1.6deg); } 65% { transform: rotate(-.6deg); } }
@keyframes psg-pack   { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(.9px) rotate(-1deg); } }
@keyframes psg-skirt  { 0%, 50%, 100% { transform: skewX(0); } 25% { transform: skewX(-2.2deg); } 75% { transform: skewX(2deg); } }
@keyframes psg-cam    { from { transform: scale(1); } to { transform: scale(1.4); } }
@keyframes psg-raise  { from { transform: rotate(0); } to { transform: rotate(14deg); } }
@keyframes psg-bud    { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.8); } }
@keyframes psg-bloom  { from { opacity: 0; transform: scale(.17) rotate(-60deg); } 25% { opacity: 1; } to { opacity: 1; transform: scale(.88) rotate(0); } }
@keyframes psg-bloom-in { from { transform: scale(.35) rotate(40deg); } to { transform: scale(1) rotate(0); } }
@keyframes psg-glow   { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: .6; } }
@keyframes psg-spark  {
	0% { opacity: 0; transform: translate(0, 0); }
	30% { opacity: 1; }
	100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

@media (prefers-reduced-motion: reduce) {
	.is-play *, .is-playing *, .cgs-portal.is-form .cgs-portal__form, .cgs-portal__stage.is-leaving { animation: none !important; }
	.cgs-portal__spin { animation-duration: 2s; }
}