/* ==================================================================
   LearnGeo — motion layer
   Button feedback, gloss and transitions, layered over app.css.
   Only targets class names app.css already defines and is loaded after
   it, so removing this file (and motion.js) restores the original look.
   ================================================================== */

:root {
  --lg-spring: cubic-bezier(.34, 1.56, .64, 1);
  --lg-out:    cubic-bezier(.16, 1, .3, 1);
  --lg-sheen:  linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 58%);
}

/* ---------------------------- buttons ---------------------------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease),
              transform .34s var(--lg-spring), box-shadow .3s var(--ease);
}
/* both layers sit above the fill but under the label (z-index -1 inside the isolated button) */
.btn::before, .btn::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.btn::before { inset: 0; border-radius: inherit; background: var(--lg-sheen); opacity: 0; }
.btn--primary::before, .btn--accent::before { opacity: 1; }
.btn--ghost::before { background: linear-gradient(180deg, #fff, rgba(255,255,255,0) 70%); opacity: 1; }
.btn::after {
  top: -20%; bottom: -20%; left: 0; width: 55%;
  background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,.4) 50%, transparent 85%);
  transform: translateX(-140%) skewX(-16deg);
}
.btn--ghost::after, .btn--quiet::after {
  background: linear-gradient(100deg, transparent 15%, rgba(27,77,255,.09) 50%, transparent 85%);
}
.btn--primary { box-shadow: 0 1px 2px rgba(10,10,11,.22), inset 0 1px 0 rgba(255,255,255,.12); }
.btn--accent  { box-shadow: 0 1px 2px rgba(27,77,255,.32), inset 0 1px 0 rgba(255,255,255,.24); }

@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn:hover::after { transform: translateX(240%) skewX(-16deg); transition: transform .8s var(--lg-out); }
  .btn--primary:hover { box-shadow: 0 8px 20px -8px rgba(10,10,11,.55), inset 0 1px 0 rgba(255,255,255,.14); }
  .btn--accent:hover  { box-shadow: 0 10px 24px -8px rgba(27,77,255,.6), inset 0 1px 0 rgba(255,255,255,.26); }
  .btn--ghost:hover   { box-shadow: 0 6px 16px -8px rgba(10,10,11,.22); }
}
.btn:active { transform: translateY(0) scale(.965); transition-duration: .09s; }

.icon-btn { transition: background-color .15s, color .15s, transform .32s var(--lg-spring); }
.icon-btn svg { transition: transform .4s var(--lg-spring); }
@media (hover: hover) { .icon-btn[data-close]:hover svg { transform: rotate(90deg); } }
.icon-btn:active { transform: scale(.88); transition-duration: .08s; }

.mini-btn { transition: border-color .14s, color .14s, background-color .14s, transform .3s var(--lg-spring); }
@media (hover: hover) { .mini-btn:hover { transform: translateY(-1px); } }
.mini-btn:active { transform: scale(.94); transition-duration: .08s; }

.cr-tab, .vtab { transition: color .16s, border-color .16s, background-color .16s, transform .3s var(--lg-spring); }
.cr-tab:active, .vtab:active { transform: scale(.96); transition-duration: .08s; }

.code-chip {
  background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 58%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px -10px rgba(10,10,11,.55);
}
.code-chip button { transition: color .15s, background-color .15s, transform .3s var(--lg-spring); }
.code-chip button:active { transform: scale(.88); }

/* ------------------------- mode switcher ------------------------- */
.tabs__thumb {
  background-image: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,0) 62%);
  box-shadow: 0 3px 10px -3px rgba(10,10,11,.42), inset 0 1px 0 rgba(255,255,255,.14);
}
.tab:active { transform: scale(.94); }

/* ------------------------ answer options ------------------------- */
.option {
  position: relative; overflow: hidden;
  transition: border-color .16s, background-color .16s, transform .3s var(--lg-spring), box-shadow .22s var(--ease);
}
.option__key { transition: background-color .16s, color .16s, transform .35s var(--lg-spring); }
.option.is-right .option__key, .option.is-wrong .option__key, .option.is-selected .option__key {
  background-image: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 60%);
}
@media (hover: hover) {
  .option:hover:not(.is-locked) { transform: translateX(3px); box-shadow: 0 6px 16px -10px rgba(10,10,11,.25); }
  .option:hover:not(.is-locked):not(.is-selected) .option__key { background: var(--ink); color: #fff; transform: scale(1.08); }
}
.option:active:not(.is-locked) { transform: scale(.985); transition-duration: .08s; }

/* options cascade in; :where keeps this below .is-right / .is-wrong so their pop and shake still win */
:where(.options) > .option { animation: lgOptIn .45s var(--lg-out) var(--lg-d, 0s) backwards; }
:where(.options > .option:nth-child(2)) { --lg-d: .04s; }
:where(.options > .option:nth-child(3)) { --lg-d: .08s; }
:where(.options > .option:nth-child(4)) { --lg-d: .12s; }
:where(.options > .option:nth-child(5)) { --lg-d: .16s; }
:where(.options > .option:nth-child(6)) { --lg-d: .2s; }
@keyframes lgOptIn { from { opacity: 0; transform: translateY(8px); } }

.option.is-right::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lgSweep .9s var(--lg-out) .05s forwards;
}
@keyframes lgSweep { to { transform: translateX(100%); } }
.option.is-right .option__mark, .option.is-wrong .option__mark { animation: lgMarkIn .45s var(--lg-spring); }
@keyframes lgMarkIn { from { transform: scale(0) rotate(-45deg); } }

.qcard { animation: lgCardIn .5s var(--lg-out); }
@keyframes lgCardIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } }
.feedback, .combo { animation: lgFeedIn .5s var(--lg-spring); }
@keyframes lgFeedIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.combo__mult {
  background-image: var(--lg-sheen);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}

.input, .answer-input { transition: border-color .18s var(--ease), box-shadow .32s var(--lg-out), background-color .18s; }

/* ------------------- segmented, checks, switches ----------------- */
.seg button { transition: background-color .18s var(--ease), color .18s, box-shadow .22s var(--ease), transform .3s var(--lg-spring); }
.seg button:active { transform: scale(.95); transition-duration: .08s; }
.seg button.is-active {
  background-image: linear-gradient(180deg, #fff, #F6F7F9);
  box-shadow: 0 1px 2px rgba(10,10,11,.08), 0 2px 6px -2px rgba(10,10,11,.1), inset 0 1px 0 #fff;
}

.check { transition: border-color .16s, background-color .16s, box-shadow .2s, transform .32s var(--lg-spring); }
@media (hover: hover) { .check:hover { transform: translateY(-1px); } }
.check:active { transform: scale(.98); transition-duration: .08s; }
.check.is-on .check__box {
  background-image: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 65%);
  box-shadow: 0 2px 6px -1px rgba(27,77,255,.45);
}

.switch { transition: background-color .22s var(--ease); box-shadow: inset 0 1px 2px rgba(10,10,11,.12); }
.switch.is-on { background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 70%); }
.switch::after { transition: transform .42s var(--lg-spring), width .2s var(--ease); }
.switch:active::after { width: 24px; }
.switch.is-on:active::after { transform: translateX(14px); }

/* ----------------------------- cards ----------------------------- */
.mode-card, .portal-mode, .rec, .cw-row, .role-opt, .shop-item, .shot {
  position: relative; isolation: isolate;
  transition: transform .45s var(--lg-spring), box-shadow .3s var(--ease),
              border-color .2s var(--ease), background-color .2s var(--ease);
}
/* a soft light that follows the cursor (motion.js feeds --lg-x / --lg-y) */
:is(.mode-card, .portal-mode, .rec, .cw-row, .role-opt, .shop-item)::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px circle at var(--lg-x, 50%) var(--lg-y, 0%), rgba(27,77,255,.08), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease);
}
:is(.mode-card__icon, .portal-mode__icon, .rec__icon, .role-opt__i, .cw-row__i, .tcard__icon, .empty-cta__i, .join-card__i) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(27,77,255,.08);
  transition: transform .5s var(--lg-spring), box-shadow .3s var(--ease);
}
.portal-mode__go svg, .rec__go { transition: transform .4s var(--lg-spring), color .16s; }
.shop-item__vis { transition: transform .5s var(--lg-spring); }
.shop-item.is-equipped { box-shadow: 0 0 0 3px rgba(27,77,255,.1), 0 6px 16px -8px rgba(27,77,255,.35); }

@media (hover: hover) {
  :is(.mode-card, .portal-mode, .rec, .cw-row, .role-opt, .shop-item):hover::after { opacity: 1; }
  :is(.mode-card, .portal-mode, .rec, .role-opt, .cw-row):hover
    :is(.mode-card__icon, .portal-mode__icon, .rec__icon, .role-opt__i, .cw-row__i) {
    transform: translateY(-2px) scale(1.07) rotate(-5deg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 14px -6px rgba(27,77,255,.45);
  }
  .portal-mode:hover .portal-mode__go svg, .rec:hover .rec__go { transform: translateX(3px); }
  .shop-item:hover .shop-item__vis { transform: scale(1.08) rotate(-4deg); }
  .cw-row:hover { transform: translateY(-2px); }
  .shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
}
:is(.portal-mode, .rec, .cw-row, .role-opt, .shop-item):active { transform: scale(.985); transition-duration: .09s; }

.navcell:active { transform: scale(.9); }

/* -------------------------- flashcards --------------------------- */
.fc-inner { transition: transform .8s cubic-bezier(.3, 1.3, .4, 1); }
.fc-face {
  background-image: linear-gradient(180deg, #fff 0%, #FAFBFD 100%);
  transition: box-shadow .35s var(--ease);
}
@media (hover: hover) { .fc-card:hover .fc-face { box-shadow: var(--shadow-xl); } }
.fc-rate button:not(.btn) {
  background-image: linear-gradient(180deg, #fff, #FAFBFC);
  transition: transform .34s var(--lg-spring), box-shadow .25s var(--ease),
              border-color .16s, color .16s, background-color .16s;
}
.fc-rate button:not(.btn):active { transform: scale(.95); transition-duration: .08s; }

/* ------------------------ HUD, chips, bars ----------------------- */
.hud__item {
  background-image: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 65%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(10,10,11,.05);
}
.hud__item.is-bumped { animation: lgBump .65s var(--ease); }
@keyframes lgBump {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.22) translateY(-1px); box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 16%, transparent); }
  55%  { transform: scale(.96); }
  80%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.chip {
  background-image: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
:where(.feedback__gain, .score-lead__chips) > .chip { animation: lgChipIn .5s var(--lg-spring) var(--lg-d, .05s) backwards; }
:where(.feedback__gain, .score-lead__chips) > .chip:nth-child(2) { --lg-d: .12s; }
:where(.feedback__gain, .score-lead__chips) > .chip:nth-child(3) { --lg-d: .19s; }
:where(.feedback__gain, .score-lead__chips) > .chip:nth-child(4) { --lg-d: .26s; }
@keyframes lgChipIn { from { opacity: 0; transform: translateY(6px) scale(.8); } }

.pbar__fill {
  position: relative; overflow: hidden; transform-origin: left center;
  background-image: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 70%);
  transition: width .7s var(--lg-out);
}
.pbar__fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%);
  animation: lgShimmer 2.8s var(--ease) infinite;
}
@keyframes lgShimmer { 55%, 100% { transform: translateX(100%); } }
.an-bar__fill { transform-origin: left center; }
.hist__bar { transform-origin: bottom center; }

/* ------------------------- map capital pins ---------------------- */
.cap-pin { background-image: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%); }
.cap-pin--target { animation: lgPinDrop .55s var(--lg-spring) backwards, pulse 1.5s .55s infinite; }
.cap-pin--right, .cap-pin--wrong { animation: lgPinPop .5s var(--lg-spring); }
@keyframes lgPinDrop { from { transform: translateY(-16px) scale(.4); opacity: 0; } }
@keyframes lgPinPop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* ------------------------ modals, menu, toasts ------------------- */
.overlay { animation: lgFade .3s var(--ease); }
.modal { animation: lgModalIn .5s var(--lg-spring); }
@keyframes lgFade { from { opacity: 0; } }
@keyframes lgModalIn { from { opacity: 0; transform: translateY(20px) scale(.95); } }

.menu { animation: lgMenuIn .34s var(--lg-spring); }
@keyframes lgMenuIn { from { opacity: 0; transform: scale(.92) translateY(-6px); } }
.menu > * { animation: lgItemIn .4s var(--lg-out) var(--lg-d, 0s) backwards; }
.menu > :nth-child(2) { --lg-d: .03s; }
.menu > :nth-child(3) { --lg-d: .06s; }
.menu > :nth-child(4) { --lg-d: .09s; }
.menu > :nth-child(5) { --lg-d: .12s; }
.menu > :nth-child(6) { --lg-d: .15s; }
@keyframes lgItemIn { from { opacity: 0; transform: translateY(-5px); } }
.menu__item { transition: background-color .13s, color .13s, transform .3s var(--lg-spring); }
.menu__item svg { transition: transform .4s var(--lg-spring), color .13s; }
@media (hover: hover) { .menu__item:hover svg { transform: scale(1.12) rotate(-6deg); } }
.menu__item:active { transform: scale(.98); }

/* exit copies left behind by motion.js when a modal or the menu is removed */
.lg-leaving { pointer-events: none !important; }
.overlay.lg-leaving { animation: lgFadeOut .24s var(--ease) forwards; }
.overlay.lg-leaving .modal { animation: lgModalOut .24s var(--ease) forwards; }
.menu.lg-leaving { animation: lgMenuOut .18s var(--ease) forwards; }
.lg-leaving .modal *, .menu.lg-leaving * { animation: none !important; }
.lg-leaving .profile-fx { display: none; }
@keyframes lgFadeOut { to { opacity: 0; } }
@keyframes lgModalOut { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes lgMenuOut { to { opacity: 0; transform: scale(.95) translateY(-4px); } }

.toast {
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.1);
  animation: lgToastIn .55s var(--lg-spring);
}
@keyframes lgToastIn { from { opacity: 0; transform: translateX(32px) scale(.94); } }

.levelup__ring {
  background-image: radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 42%),
                    linear-gradient(135deg, var(--accent), #22D3EE);
  animation: lgRingIn .7s var(--lg-spring), glow 2.4s ease-in-out infinite;
}
@keyframes lgRingIn { from { opacity: 0; transform: scale(.5) rotate(-20deg); } }
.goal-banner__ring {
  background-image: radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 42%),
                    linear-gradient(135deg, var(--success), #34D399);
}

.avatar__img { transition: transform .4s var(--lg-spring); }
.avatar-btn:active .avatar__img { transform: scale(.92); }

/* ------------------------- class banner -------------------------- */
.cr-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: lgBannerSweep 7s ease-in-out infinite;
}
@keyframes lgBannerSweep { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }

/* ----------------------------- landing ---------------------------- */
.lg-pre { opacity: 0; }

.nav { transition: box-shadow .35s var(--ease), background-color .35s var(--ease); }
.nav.lg-scrolled { background-color: rgba(255,255,255,.9); box-shadow: 0 10px 30px -20px rgba(10,10,11,.3); }
.nav__links a { position: relative; }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right center;
  transition: transform .4s var(--lg-out);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left center; }

.brand__mark {
  background-image: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 62%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px -2px rgba(10,10,11,.35);
  transition: transform .55s var(--lg-spring);
}
.brand:hover .brand__mark { transform: rotate(-14deg) scale(1.08); }

/* slow drifting colour behind the headline */
.hero__wash::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: -18%; width: 116%; height: 120%;
  background:
    radial-gradient(40% 48% at 28% 38%, rgba(27,77,255,.20), transparent 68%),
    radial-gradient(36% 44% at 72% 32%, rgba(34,211,238,.18), transparent 70%),
    radial-gradient(30% 38% at 52% 62%, rgba(99,102,241,.14), transparent 72%);
  filter: blur(30px);
  transform: translateX(-50%);
  animation: lgAurora 19s ease-in-out infinite alternate;
}
.hero__wash::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: -22%; width: 94%; height: 104%;
  background: radial-gradient(34% 40% at 60% 44%, rgba(14,159,110,.13), transparent 70%);
  filter: blur(40px);
  transform: translateX(-50%);
  animation: lgAuroraB 27s ease-in-out infinite alternate;
}
@keyframes lgAurora { to { transform: translateX(-46%) translateY(4%) rotate(4deg) scale(1.1); } }
@keyframes lgAuroraB { to { transform: translateX(-56%) translateY(-5%) rotate(-6deg) scale(1.16); } }

.hero h1 em {
  background: linear-gradient(90deg, var(--accent) 0%, #1D8CF8 25%, var(--accent) 50%, #1D8CF8 75%, var(--accent) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lgTextShine 7s linear infinite;
}
@keyframes lgTextShine { to { background-position: 200% 0; } }

.feature-list svg { transition: transform .45s var(--lg-spring); }
@media (hover: hover) { .feature-list li:hover svg { transform: scale(1.18) rotate(-6deg); } }

/* ----------------------------- ripple ----------------------------- */
.lg-ripple-wrap { position: fixed; overflow: hidden; pointer-events: none; z-index: 1; }
.lg-ripple { position: absolute; border-radius: 50%; pointer-events: none; }

/* ------------------------- reduced motion ------------------------- */
/* app.css shortens every animation under reduced motion; the looping
   ones here would then flicker, so switch them off outright. */
@media (prefers-reduced-motion: reduce) {
  .hero__wash::before, .hero__wash::after, .hero h1 em, .pbar__fill::after, .cr-banner::before { animation: none !important; }
  /* the dot field still draws, it just stops pulsing */
  /* the globe still draws and still follows the pointer, it just stops drifting */
  .lg-pre { opacity: 1; }
}