/* =========================================================
   Technoknowledge: lms.css  (LMS page)
   ========================================================= */

/* browser frame around real LMS screenshots */
.browser { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #EEF1F6; border-bottom: 1px solid var(--border); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #CBD3DF; }
.browser__bar i:nth-child(1) { background: var(--orange); } .browser__bar i:nth-child(2) { background: var(--yellow); } .browser__bar i:nth-child(3) { background: var(--green); }
.browser__bar span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: #fff; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser img { display: block; width: 100%; height: auto; }

/* hero: main screen + floating lecture screen */
.lms-hero { padding-bottom: 18%; }
.browser--hero { width: 92%; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); border-color: transparent; }
.browser--float { position: absolute; right: 0; bottom: 0; width: 52%; border: 4px solid #fff; animation: tk-float 5s ease-in-out infinite; }
@keyframes tk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .browser--float { animation: none; } }

/* portals */
.portals { list-style: none; padding: 0; display: grid; gap: 18px; }
@media (min-width: 1100px) { .portals { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.portal { padding: 28px 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.portal:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.portal h3 { margin: 16px 0 14px; font-size: var(--fs-h4); }
.portal__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; }
.portal__icon svg { width: 26px; height: 26px; }
.portal__icon--navy { background: var(--navy); color: var(--yellow); }
.portal__icon--sky { background: var(--sky-soft); color: #00709F; }
.portal__icon--yellow { background: var(--yellow-soft); color: #8A6A00; }

/* tour */
.tour__tabs { flex-wrap: wrap; margin-bottom: 22px; }
.tour__panel { margin-top: 0; max-width: 1000px; }
.tour__panel .browser { box-shadow: var(--shadow-lg); }
.tour__panel img { max-height: 620px; object-fit: contain; object-position: top; background: #fff; }
.tour__caption { margin-top: 16px; color: var(--text-muted); }
.tour__caption strong { color: var(--navy); }
.js .tour__panel:not([hidden]) { animation: tk-fade-up 400ms var(--ease); }

/* how schools use it */
.use-grid { display: grid; gap: 18px; }
@media (min-width: 1100px) { .use-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.use__num { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--navy); font-family: var(--font-heading); font-weight: 800; margin-bottom: 14px; }
.use-grid p { color: #C9D3E3; font-size: var(--fs-sm); }
.use-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 28px; }
.link-arrow--light { color: var(--yellow); }
.page-lms .booking__aside .btn--light { margin-top: 8px; }

/* ---------- hero: animated log-in → courses (loops every 11 s) ---------- */
.lms-url { display: grid; }
.lms-url b { grid-area: 1 / 1; font-weight: 400; }
.lms-url__b { opacity: 0; }
.lms-anim { position: relative; container-type: inline-size; overflow: hidden; }
.lms-anim > img { display: block; width: 100%; height: auto; }
.lms-login { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, #F6F7FA, #ECEFF5); }
.lms-login__card { width: 46%; display: grid; gap: 1.6cqw; padding: 2.6cqw 3cqw 2.2cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 1.4cqw 4cqw rgba(19,41,75,.16); }
.lms-login__logo { width: 82%; height: auto; justify-self: center; margin-bottom: .6cqw; }
.lms-field { position: relative; display: block; height: 4.6cqw; border: 1px solid #B9C2D0; border-radius: .9cqw; font-size: 1.8cqw; line-height: 4.6cqw; padding: 0 1.6cqw; color: #13294B; overflow: hidden; }
.lms-field__ph { color: #7C8798; }
.lms-field__val { position: absolute; left: 1.6cqw; top: 0; font-weight: 600; background: #fff; clip-path: inset(0 100% 0 0); }
.lms-field__val--pass { letter-spacing: .2em; }
.lms-btn { position: relative; display: grid; place-items: center; height: 4.6cqw; border-radius: .9cqw; background: #0F4BAE; color: #fff; font-size: 1.9cqw; font-weight: 600; }
.lms-btn > span { grid-area: 1 / 1; }
.lms-btn__b { opacity: 0; }
.lms-btn__b i { display: block; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; border: .35cqw solid rgba(255,255,255,.35); border-top-color: #fff; animation: lms-spin .7s linear infinite; }
.lms-lost { justify-self: center; font-size: 1.5cqw; color: #0F4BAE; }

.lms-login { animation: lms-screen 11s ease infinite; }
.lms-field__val--user { animation: lms-type-user 11s steps(14, end) infinite; }
.lms-field__val--pass { animation: lms-type-pass 11s steps(8, end) infinite; }
.lms-field:nth-of-type(1) { animation: lms-focus-1 11s step-end infinite; }
.lms-field:nth-of-type(2) { animation: lms-focus-2 11s step-end infinite; }
.lms-btn { animation: lms-press 11s ease infinite; }
.lms-btn__a { animation: lms-btn-a 11s step-end infinite; }
.lms-btn__b { animation: lms-btn-b 11s step-end infinite; }
.lms-anim > img { animation: lms-courses 11s ease infinite; }
.lms-url__a { animation: lms-url-a 11s step-end infinite; }
.lms-url__b { animation: lms-url-b 11s step-end infinite; }

@keyframes lms-screen { 0%, 52% { opacity: 1; transform: none; } 57%, 95% { opacity: 0; transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes lms-type-user { 0%, 6% { clip-path: inset(0 100% 0 0); } 20%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes lms-type-pass { 0%, 24% { clip-path: inset(0 100% 0 0); } 34%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes lms-focus-1 { 0% { border-color: #B9C2D0; box-shadow: none; } 5% { border-color: #0F4BAE; box-shadow: 0 0 0 .4cqw rgba(15,75,174,.15); } 22% { border-color: #B9C2D0; box-shadow: none; } }
@keyframes lms-focus-2 { 0% { border-color: #B9C2D0; box-shadow: none; } 23% { border-color: #0F4BAE; box-shadow: 0 0 0 .4cqw rgba(15,75,174,.15); } 36% { border-color: #B9C2D0; box-shadow: none; } }
@keyframes lms-press { 0%, 39% { transform: none; filter: none; } 41% { transform: scale(.96); filter: brightness(1.2); } 44%, 100% { transform: none; filter: none; } }
@keyframes lms-btn-a { 0% { opacity: 1; } 42% { opacity: 0; } 98% { opacity: 1; } }
@keyframes lms-btn-b { 0% { opacity: 0; } 42% { opacity: 1; } 56% { opacity: 0; } }
@keyframes lms-courses { 0%, 52% { opacity: 0; transform: scale(.97); } 60%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lms-url-a { 0% { opacity: 1; } 54% { opacity: 0; } 97% { opacity: 1; } }
@keyframes lms-url-b { 0% { opacity: 0; } 54% { opacity: 1; } 97% { opacity: 0; } }
@keyframes lms-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lms-login { display: none; }
  .lms-anim > img, .lms-url b, .lms-anim * { animation: none !important; }
  .lms-url__a { opacity: 0; } .lms-url__b { opacity: 1; }
}
.lms-field:nth-of-type(1) .lms-field__ph { animation: lms-ph-1 11s step-end infinite; }
.lms-field:nth-of-type(2) .lms-field__ph { animation: lms-ph-2 11s step-end infinite; }
@keyframes lms-ph-1 { 0% { opacity: 1; } 6.5% { opacity: 0; } 98% { opacity: 1; } }
@keyframes lms-ph-2 { 0% { opacity: 1; } 24.5% { opacity: 0; } 98% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lms-field__ph { animation: none !important; } }