/* =======================================================================
   EDUSCAPE MOTION LAYER
   Additive polish for the whole site: entrances, hover light, ripples,
   drawer, modals. Loaded after the main styles. Switched off for
   print and for people who ask their device for reduced motion.
   ======================================================================= */
:root {
  --mx-ease: cubic-bezier(.22, 1, .36, 1);
  --mx-spring: cubic-bezier(.34, 1.56, .64, 1);
}
html { scroll-behavior: smooth; }

/* ---------- keyframes ---------- */
@keyframes mx-rise { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes mx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mx-slide-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes mx-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mx-toast { from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.96); } to { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1); } }
@keyframes mx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mx-ripple { to { transform: scale(1); opacity: 0; } }
@keyframes mx-shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes mx-aurora { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(5%, 4%) scale(1.1); } }
@keyframes mx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes mx-route { 0% { transform: scaleX(0); opacity: 1; } 65% { transform: scaleX(.8); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes mx-halo { 0% { outline-color: rgba(225, 123, 63, .26); outline-offset: 0; } 100% { outline-color: rgba(225, 123, 63, 0); outline-offset: 10px; } }

/* ---------- interactive surfaces: light follows the pointer ---------- */
.card, .dash-tile, .dash-help-item, .dash-stats > div,
.bento, .price-card, .vm-card, .lp-value-card, .value { position: relative; }
.card::after, .dash-tile::after, .dash-help-item::after, .dash-stats > div::after,
.bento::after, .price-card::after, .vm-card::after, .lp-value-card::after, .value::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(192, 138, 40, .09), transparent 70%);
  opacity: 0; transition: opacity .4s ease;
}
.card:hover::after, .dash-tile:hover::after, .dash-help-item:hover::after, .dash-stats > div:hover::after,
.bento:hover::after, .price-card:hover::after, .vm-card:hover::after, .lp-value-card:hover::after, .value:hover::after { opacity: 1; }
.dash-tile, .dash-help-item { transition: transform .3s var(--mx-spring), box-shadow .3s ease, border-color .25s ease, background .25s ease; }
.dash-tile:hover, .dash-help-item:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(22, 35, 63, .22); }
.dash-tile:active, .dash-help-item:active { transform: translateY(0) scale(.99); }

/* ---------- buttons ---------- */
.btn, .lp-btn, .nav-item, .dash-tile, .dash-help-item, .ptoggle-btn, .lp-authtab { position: relative; overflow: hidden; isolation: isolate; }
.mx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .12; transform: scale(0); animation: mx-ripple .8s var(--mx-ease) forwards; z-index: 0; }
.btn.primary:hover, .btn.gold:hover, .lp-btn.primary:hover, .lp-btn.pink:hover, .lp-btn.lime:hover, .lp-btn.orange:hover {
  background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
  background-size: 250% 100%; animation: mx-shine 1.1s var(--mx-ease);
}
.lp-btn .arr { display: inline-block; }
.lp-btn:hover .arr { transform: translateX(3px); }
.lp-hero .lp-btn.pink { outline: 2px solid transparent; animation: mx-halo 3.8s ease-out infinite; }

/* ---------- inputs ---------- */
.field input, .field select, .field textarea, .lp-field input, .lp-field select, .lp-field textarea {
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus,
.lp-field input:focus, .lp-field select:focus, .lp-field textarea:focus { box-shadow: 0 0 0 3px rgba(192, 138, 40, .13); }

/* ---------- tables ---------- */
table.data tbody tr { transition: background .2s ease, box-shadow .2s ease; }
table.data tbody tr:hover { box-shadow: inset 3px 0 0 var(--gold, #C08A28); }

/* ---------- sidebar ---------- */
.nav-item { transition: background .2s ease, color .2s ease, transform .3s var(--mx-spring), box-shadow .3s ease; }
.nav-item .ic { display: inline-block; transition: transform .35s var(--mx-spring); }
.nav-item:hover .ic { transform: scale(1.1) rotate(-3deg); }
.nav-item.active { box-shadow: inset 3px 0 0 var(--gold, #C08A28), 0 0 20px -12px rgba(192, 138, 40, .45); }
#navlist.mx-nav-in .nav-item { animation: mx-slide-in .55s var(--mx-ease) both; animation-delay: calc(var(--mx-i, 0) * 30ms); }
.menu-btn { transition: background .2s ease, transform .3s var(--mx-spring); }
.menu-btn:hover { transform: scale(1.08); }
.mx-scrim { display: none; }
@media (max-width: 980px) {
  #sidebar { transition: transform .42s var(--mx-ease), box-shadow .42s ease; box-shadow: none; }
  #sidebar.open { box-shadow: 26px 0 60px -22px rgba(6, 12, 24, .6); }
  .mx-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(8, 14, 28, .45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
  body.mx-nav-open .mx-scrim { opacity: 1; pointer-events: auto; }
  #sidebar.open .nav-item { animation: mx-slide-in .45s var(--mx-ease) both; animation-delay: calc(var(--mx-i, 0) * 22ms + .1s); }
}

/* ---------- screen change ---------- */
#content.mx-enter > * { animation: mx-rise .5s var(--mx-ease) backwards; animation-delay: calc(var(--mx-i, 0) * 40ms); }
#content.mx-enter .ins-hb .t i, #content.mx-enter .dash-class-n i { transform-origin: left; animation: mx-grow 1s var(--mx-ease) .3s backwards; }
#content.mx-enter table.data tbody tr:nth-child(-n+14) { animation: mx-fade .5s ease backwards; }
#content.mx-enter table.data tbody tr:nth-child(1) { animation-delay: .20s; } #content.mx-enter table.data tbody tr:nth-child(2) { animation-delay: .24s; }
#content.mx-enter table.data tbody tr:nth-child(3) { animation-delay: .28s; } #content.mx-enter table.data tbody tr:nth-child(4) { animation-delay: .32s; }
#content.mx-enter table.data tbody tr:nth-child(5) { animation-delay: .36s; } #content.mx-enter table.data tbody tr:nth-child(6) { animation-delay: .40s; }
#content.mx-enter table.data tbody tr:nth-child(7) { animation-delay: .44s; } #content.mx-enter table.data tbody tr:nth-child(8) { animation-delay: .48s; }
#content.mx-enter table.data tbody tr:nth-child(9) { animation-delay: .52s; } #content.mx-enter table.data tbody tr:nth-child(10) { animation-delay: .56s; }
#content.mx-enter table.data tbody tr:nth-child(11) { animation-delay: .60s; } #content.mx-enter table.data tbody tr:nth-child(12) { animation-delay: .64s; }
#content.mx-enter table.data tbody tr:nth-child(13) { animation-delay: .68s; } #content.mx-enter table.data tbody tr:nth-child(14) { animation-delay: .72s; }
.mx-routebar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9998; pointer-events: none; transform-origin: left; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, #E17B3F, #F6B35A, #3D8DD6); box-shadow: 0 0 12px rgba(246, 179, 90, .7); }
.mx-routebar.mx-run { animation: mx-route .75s var(--mx-ease) backwards; }

/* ---------- dashboard hero: slow aurora + floating orb ---------- */
.dash-hero::before { content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none; filter: blur(22px);
  background: radial-gradient(closest-side at 28% 40%, rgba(246, 179, 90, .2), transparent 70%), radial-gradient(closest-side at 72% 62%, rgba(61, 141, 214, .2), transparent 70%);
  animation: mx-aurora 24s ease-in-out infinite; }
.dash-hero::after { animation: mx-float 10s ease-in-out infinite; }
.dash-ring svg { filter: drop-shadow(0 0 7px rgba(246, 179, 90, .3)); }

/* ---------- modals and toasts ---------- */
.modal-backdrop { backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); animation: mx-fade .25s ease both; }
.modal { animation: mx-pop .35s var(--mx-ease) both; box-shadow: 0 30px 70px -26px rgba(8, 14, 28, .5); }
.lp-authcard, .tour-card { animation: mx-pop .4s var(--mx-ease) both; }
.toast.show { animation: mx-toast .4s var(--mx-ease); }

/* ---------- landing page ---------- */
.mx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9998; pointer-events: none; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, #E17B3F, #F6B35A, #3D8DD6); }
.mx-cursor { position: fixed; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(closest-side, rgba(61, 141, 214, .11), rgba(246, 179, 90, .04) 55%, transparent 75%); transition: opacity .6s ease; will-change: transform; }
.mx-cursor.on { opacity: 1; }
.lp-hero-stars { transition: translate .7s var(--mx-ease); }
.lp-brand .lp-logo { transition: transform .55s var(--mx-spring); }
.lp-brand:hover .lp-logo { transform: rotate(-5deg) scale(1.06); }
.lp-navlinks a { position: relative; }
.lp-navlinks a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #E17B3F, #F6B35A); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--mx-ease); }
.lp-navlinks a:hover::after { transform: scaleX(1); }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
.lp-sec-head[data-reveal] h2 { background: linear-gradient(90deg, #E17B3F, #F6B35A) no-repeat 0 100% / 0 3px; padding-bottom: 8px; transition: background-size .9s var(--mx-ease) .35s; }
.lp-sec-head[data-reveal].in h2 { background-size: 72px 3px; }
.price-card.featured { outline: 2px solid transparent; animation: mx-halo 4.6s ease-out infinite; }
/* staggered reveal inside grids (uses the site's existing data-reveal) */
.lp-bento > [data-reveal]:nth-child(2) { transition-delay: .08s; } .lp-bento > [data-reveal]:nth-child(3) { transition-delay: .16s; }
.lp-bento > [data-reveal]:nth-child(4) { transition-delay: .24s; } .lp-bento > [data-reveal]:nth-child(5) { transition-delay: .32s; }
.lp-bento > [data-reveal]:nth-child(6) { transition-delay: .4s; }
.lp-steps > [data-reveal]:nth-child(2), .lp-pricing-grid > [data-reveal]:nth-child(2), .lp-values-grid > [data-reveal]:nth-child(2), .lp-values > [data-reveal]:nth-child(2) { transition-delay: .1s; }
.lp-steps > [data-reveal]:nth-child(3), .lp-pricing-grid > [data-reveal]:nth-child(3), .lp-values-grid > [data-reveal]:nth-child(3), .lp-values > [data-reveal]:nth-child(3) { transition-delay: .2s; }
.lp-steps > [data-reveal]:nth-child(4), .lp-values-grid > [data-reveal]:nth-child(4) { transition-delay: .3s; }
/* 3D tilt while the pointer is over a card (set by motion.js) */
.mx-tilting { transition: transform .15s ease-out, box-shadow .3s ease !important; will-change: transform; }

/* ---------- small helpers ---------- */
.dash-contact { margin: 14px 0 0; font-size: 13px; color: var(--text-soft, #5b6577); }
.dash-contact a { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(192, 138, 40, .55); transition: color .2s ease, border-color .2s ease; }
.dash-contact a:hover { color: var(--gold, #C08A28); border-color: var(--gold, #C08A28); }

/* ---------- cookie notice: a quiet floating card ---------- */
#privacyNotice {
  left: 50%; right: auto; bottom: calc(14px + var(--safe-b, 0px));
  width: min(430px, calc(100% - 24px));
  padding: 8px 10px 8px 14px; gap: 10px; flex-wrap: nowrap; justify-content: space-between;
  background: var(--surface, #fff); background: color-mix(in srgb, var(--surface, #fff) 90%, transparent);
  color: var(--text, #1b2333);
  border: 1px solid var(--line, rgba(22, 35, 63, .1)); border-radius: 14px;
  box-shadow: 0 12px 32px -20px rgba(22, 35, 63, .35);
  backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  opacity: 0; transform: translate(-50%, 14px);
  transition: transform .7s var(--mx-ease), opacity .7s ease;
}
#privacyNotice.show { opacity: 1; transform: translate(-50%, 0); }
#privacyNotice p { font-size: 11.5px; line-height: 1.45; opacity: .8; color: inherit; max-width: none; }
#privacyNotice .btn { padding: 6px 12px; border-radius: 999px; font-size: 11.5px; box-shadow: none; }
@media (max-width: 520px) {
  #privacyNotice { flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 10px 12px; }
  #privacyNotice .btn { margin-left: auto; }
}
/* ---------- layering: dialogs sit above the Assistant button and the cookie card ---------- */
.modal-backdrop, .lp-auth, .tour-modal { z-index: 1500; }
.toast { z-index: 1600; }
.modal .btn-row { position: sticky; bottom: -22px; margin-top: 14px; padding: 12px 0 2px; background: var(--surface, #fff); z-index: 2; }
.mx-saved { position: fixed; top: 14px; right: 16px; z-index: 1700; padding: 6px 13px; border-radius: 999px; background: var(--ink, #16233F); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s ease, transform .3s var(--mx-ease); box-shadow: 0 10px 24px -14px rgba(8, 14, 28, .6); }
.mx-saved.on { opacity: 1; transform: none; }

/* ---------- people who prefer less motion, and print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .mx-cursor, .mx-progress, .mx-routebar { display: none !important; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mx-cursor, .mx-progress, .mx-routebar, .mx-scrim, .mx-ripple { display: none !important; }
  .card::after, .dash-tile::after, .dash-help-item::after, .bento::after, .price-card::after { display: none !important; }
}

/* The page area can never be scrolled by itself: it used to be overflow:hidden, which a browser can still scroll by code (focus, scroll-into-view), pushing the top of every page under the header until a refresh. 'clip' makes that impossible. */
#main { overflow: hidden; overflow: clip; }
html { scroll-padding-top: 120px; }

/* ---------- headers that stay put while scrolling (screen only; printing is not touched) ----------
   Marks entry has two header rows (subject, then BOT / MID / EOT): the second one now sits just under the first,
   so a subject such as ENG is never covered. Every other table and the assessment sheet keep their header row in view too. */
@media screen {
  table.marks.excel-sheet thead th { top: 0; }
  table.marks.excel-sheet thead tr:nth-child(2) th { top: 29px; z-index: 4; }
  .table-scroll { max-height: calc(100vh - 220px); overflow: auto; }
  table.data thead th { position: sticky; top: 0; z-index: 3; background-color: var(--surface); background-image: linear-gradient(rgba(20,184,166,.10), rgba(20,184,166,.10)); box-shadow: inset 0 -1px 0 var(--line); }
  .assess-sheet-frame { max-height: calc(100vh - 200px); overflow: auto; align-items: flex-start; }
  table.assess-table thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 #000, inset 0 -1px 0 #000; }
  .tpl-slide-frame .table-scroll, .tpl-slide-frame .assess-sheet-frame { max-height: none; overflow: visible; }
  .tpl-slide-frame table.data thead th, .tpl-slide-frame table.assess-table thead th { position: static; }
}