/* ==========================================================================
   AUTH ANIMATION LAYER  (Sign In / Create Account / Forgot Password)
   --------------------------------------------------------------------------
   Pure add-on: loaded after styles.css, uses the same design tokens
   (light + dark), and is driven by js/auth-anim.js.

   What animates
     1. Background  – drifting colour glows, moving dot grid, floating shapes
     2. Card        – rise-in on load, exit on successful login, shake on error
     3. Logo        – cap is "drawn" stroke by stroke, soft pulse ring
     4. Heading     – cross-fades when the tab changes
     5. Tabs        – sliding pill with a slight spring
     6. Forms       – slide in from the direction of the tab, fields stagger in
     7. Buttons     – spinner → morph to green circle with a drawn check
     8. Top bar     – sweeping progress line while a request is running
   ========================================================================== */

:root { --fx-ok: #16a34a; --fx-ease: cubic-bezier(0.2, 0.8, 0.2, 1); }

/* --------------------------------------------------------------------------
   1. BACKGROUND
   -------------------------------------------------------------------------- */
.auth-wrapper, .dash-wrapper { position: relative; isolation: isolate; }

.auth-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.auth-bg .fx-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.auth-bg .fx-blob-1 {
  width: 46rem; height: 46rem; left: -14rem; top: -18rem;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.30) 0%, transparent 65%);
  animation: fx-drift-a 18s ease-in-out infinite alternate;
}
.auth-bg .fx-blob-2 {
  width: 40rem; height: 40rem; right: -12rem; bottom: -16rem;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.26) 0%, transparent 65%);
  animation: fx-drift-b 22s ease-in-out infinite alternate;
}
.auth-bg .fx-blob-3 {
  width: 28rem; height: 28rem; left: 48%; top: 52%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.20) 0%, transparent 65%);
  animation: fx-drift-c 26s ease-in-out infinite alternate;
}

.auth-bg .fx-grid {
  position: absolute;
  inset: -26px;
  background-image: radial-gradient(circle, rgba(100, 116, 139, 0.30) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
          mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
  animation: fx-grid 24s linear infinite;
}

.auth-bg .fx-float {
  position: absolute;
  border: 2px solid rgba(37, 99, 235, 0.28);
  animation: fx-float var(--d, 9s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}
.fx-float.f1 { width: 34px; height: 34px; border-radius: 10px; left: 9%;  top: 24%; --d: 9s; }
.fx-float.f2 { width: 20px; height: 20px; border-radius: 50%;  right: 11%; top: 17%; --d: 11s; --dl: -3s; border-color: rgba(124, 58, 237, 0.32); }
.fx-float.f3 { width: 26px; height: 26px; border-radius: 8px;  left: 15%; bottom: 17%; --d: 12s; --dl: -6s; border-color: rgba(6, 182, 212, 0.35); }
.fx-float.f4 { width: 46px; height: 46px; border-radius: 50%;  right: 15%; bottom: 14%; --d: 10s; --dl: -2s; }
.fx-float.f5 { width: 14px; height: 14px; border-radius: 4px;  left: 30%; top: 10%; --d: 8s; --dl: -4s; border-color: rgba(124, 58, 237, 0.30); }

[data-theme="dark"] .auth-bg .fx-blob-1 { background: radial-gradient(circle, rgba(59, 130, 246, 0.22) 0%, transparent 65%); }
[data-theme="dark"] .auth-bg .fx-blob-2 { background: radial-gradient(circle, rgba(139, 92, 246, 0.20) 0%, transparent 65%); }
[data-theme="dark"] .auth-bg .fx-blob-3 { background: radial-gradient(circle, rgba(34, 211, 238, 0.14) 0%, transparent 65%); }
[data-theme="dark"] .auth-bg .fx-grid  { background-image: radial-gradient(circle, rgba(148, 163, 184, 0.22) 1px, transparent 1.5px); }
[data-theme="dark"] .auth-bg .fx-float { border-color: rgba(96, 165, 250, 0.30); }

@keyframes fx-drift-a { to { transform: translate(7rem, 5rem) scale(1.12); } }
@keyframes fx-drift-b { to { transform: translate(-6rem, -4rem) scale(1.1); } }
@keyframes fx-drift-c { to { transform: translate(-9rem, -6rem) scale(0.85); } }
@keyframes fx-grid    { to { transform: translate(26px, 26px); } }
@keyframes fx-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-22px) rotate(16deg); }
}

/* --------------------------------------------------------------------------
   2. CARD  (entrance / exit)
   -------------------------------------------------------------------------- */
.auth-card {
  position: relative;
  animation: fx-card-in 0.7s var(--fx-ease) both;
}
.auth-card.is-leaving { animation: fx-card-out 0.38s ease-in forwards; }

@keyframes fx-card-in {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes fx-card-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-18px) scale(0.96); }
}

/* Sweeping progress line on top of the card while a request runs */
.auth-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.auth-progress::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--primary), #7c3aed, transparent);
  animation: fx-sweep 1.1s ease-in-out infinite;
}
.auth-card.is-busy .auth-progress { opacity: 1; }
@keyframes fx-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

/* --------------------------------------------------------------------------
   3. HERO  (animated logo + heading)
   -------------------------------------------------------------------------- */
.auth-hero {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.15rem;
  min-width: 0;
}

.auth-logo {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #7c3aed);
  box-shadow: 0 10px 22px -8px rgba(37, 99, 235, 0.6);
  animation: fx-logo-pop 0.8s cubic-bezier(0.2, 1.3, 0.4, 1) 0.1s both;
}
.auth-logo::before {                      /* green layer, fades in on success */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.auth-logo::after {                       /* soft pulse ring */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--primary);
  opacity: 0;
  animation: fx-ring 2.8s ease-out 1.4s infinite;
}
.auth-logo svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.auth-logo svg path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: fx-draw 0.9s ease forwards;
}
.auth-logo svg path:nth-of-type(1) { animation-delay: 0.30s; }
.auth-logo svg path:nth-of-type(2) { animation-delay: 0.60s; }
.auth-logo svg path:nth-of-type(3) { animation-delay: 0.90s; }
.auth-logo svg circle {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  animation: fx-fade 0.3s ease 1.3s forwards;
}
.auth-card.is-success .auth-logo        { animation: fx-logo-jump 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
.auth-card.is-success .auth-logo::before { opacity: 1; }
.auth-card.is-success .auth-logo::after  { border-color: var(--fx-ok); }

.auth-hero-text { min-width: 0; }
.auth-hero-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-hero-sub {
  margin: 0.2rem 0 0;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text-muted);
}

@keyframes fx-logo-pop {
  from { opacity: 0; transform: scale(0.4) rotate(-14deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes fx-logo-jump {
  0%   { transform: none; }
  35%  { transform: translateY(-10px) scale(1.08) rotate(-6deg); }
  70%  { transform: translateY(0) scale(0.97); }
  100% { transform: none; }
}
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-fade { to { opacity: 1; } }
@keyframes fx-ring {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.55); }
  100% { opacity: 0;    transform: scale(1.55); }
}

/* --------------------------------------------------------------------------
   4. TABS  (sliding pill)
   -------------------------------------------------------------------------- */
.auth-tabs { position: relative; }
.auth-tab  { position: relative; z-index: 1; }

.auth-tab-indicator {
  position: absolute;
  top: 4px; bottom: 4px; left: 0;
  width: 0;
  border-radius: 9px;
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
.auth-tabs.fx-ready .auth-tab-indicator { opacity: 1; }
.auth-tabs.fx-ready .auth-tab.active    { background-color: transparent; box-shadow: none; }
.auth-tabs.fx-animate .auth-tab-indicator {
  transition: transform 0.45s cubic-bezier(0.3, 1.25, 0.4, 1), width 0.45s cubic-bezier(0.3, 1.25, 0.4, 1);
}

/* --------------------------------------------------------------------------
   5. FORMS  (slide from the tab's direction, fields stagger in)
   -------------------------------------------------------------------------- */
.auth-card form > * {
  animation: fx-rise 0.55s var(--fx-ease) both;
  animation-delay: calc(var(--i, 0) * 65ms + 90ms);
}
.auth-card form.fx-from-right { animation: fx-slide-r 0.4s var(--fx-ease) both; }
.auth-card form.fx-from-left  { animation: fx-slide-l 0.4s var(--fx-ease) both; }

.auth-card form.is-busy .form-group { pointer-events: none; opacity: 0.7; transition: opacity 0.25s ease; }

@keyframes fx-rise    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fx-slide-r { from { opacity: 0; transform: translateX(28px); }  to { opacity: 1; transform: none; } }
@keyframes fx-slide-l { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

/* input focus glow (extends the existing .form-control focus styles) */
.auth-card .form-control { transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.auth-card .form-control:focus { transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   6. BUTTONS  (loading → success / error)
   -------------------------------------------------------------------------- */
.auth-card .btn-block { display: flex; margin-inline: auto; }   /* block-level so auto margins centre it when it shrinks */

.btn.fx-btn {
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease,
    box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease,
    width 0.45s cubic-bezier(0.3, 1, 0.4, 1), border-radius 0.45s ease;
}

.fx-btn .fx-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.2s ease, transform 0.28s ease;
}

.fx-btn .fx-spinner,
.fx-btn .fx-check {
  position: absolute;
  left: 50%; top: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
  pointer-events: none;
}
.fx-btn .fx-spinner { width: 20px; height: 20px; }
.fx-btn .fx-spinner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  animation: fx-spin 0.7s linear infinite;
}
.fx-btn .fx-check {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fx-btn .fx-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }

.btn.fx-btn.is-loading:disabled,
.btn.fx-btn.is-success:disabled { opacity: 1; cursor: progress; }

.fx-btn.is-loading .fx-label,
.fx-btn.is-success .fx-label { opacity: 0; transform: translateY(-10px); }

.fx-btn.is-loading .fx-spinner { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.btn.fx-btn.is-success,
.btn.fx-btn.is-sent {
  background-color: var(--fx-ok);
  border-color: var(--fx-ok);
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(22, 163, 74, 0.55);
}
.fx-btn.is-success .fx-check { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fx-btn.is-success .fx-check path { animation: fx-draw 0.45s ease 0.18s forwards; }

/* the big submit button shrinks into a circle on success */
.auth-card .btn-block.fx-btn.is-success {
  width: var(--touch-target);
  border-radius: 999px;
}

/* small "Get Code" / "Send Code" button: brief ✓ Sent state */
.fx-btn.is-sent .fx-label { opacity: 1; transform: none; }

.btn.fx-btn.is-error {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

@keyframes fx-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   7. HEADING TEXT SWAP  (used from JS via .fx-swap-in)
   -------------------------------------------------------------------------- */
.fx-swap-in { animation: fx-swap-in 0.32s var(--fx-ease) both; }
@keyframes fx-swap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   8. APP ENTRANCE after login (opacity only, so fixed bars aren't affected)
   -------------------------------------------------------------------------- */
#main-app-container { animation: fx-app-in 0.5s ease both; }
@keyframes fx-app-in { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  .auth-logo { width: 46px; height: 46px; border-radius: 14px; }
  .auth-logo svg { width: 26px; height: 26px; }
  .auth-hero { gap: 0.7rem; margin-bottom: 1rem; }
  .auth-hero-title { font-size: 1.15rem; }
  .auth-hero-sub { font-size: 0.78rem; }
  .auth-bg .fx-blob-1 { width: 30rem; height: 30rem; left: -10rem; top: -12rem; }
  .auth-bg .fx-blob-2 { width: 26rem; height: 26rem; right: -10rem; bottom: -10rem; }
  .fx-float.f5, .fx-float.f3 { display: none; }
}

/* --------------------------------------------------------------------------
   10. REDUCED MOTION  (styles.css already shortens durations; also drop delays
       so nothing stays invisible, and stop the endless background loops)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-card form > *, .auth-card form, .auth-logo, .auth-logo svg path,
  .auth-logo svg circle, .fx-btn .fx-check path, #main-app-container, .dash-hero-card, .dash-card { animation-delay: 0s !important; }
  .auth-bg .fx-blob, .auth-bg .fx-grid, .auth-bg .fx-float, .auth-logo::after { animation: none !important; }
  .auth-logo svg path { stroke-dashoffset: 0; }
  .auth-logo svg circle { opacity: 1; }
  .dash-hero-card, .dash-card { animation: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   11. DASHBOARD ANIMATIONS
   -------------------------------------------------------------------------- */
.dash-wrapper {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  min-height: calc(100vh - 140px);
}

.dash-wrapper .dash-bg {
  border-radius: var(--radius-lg);
}

.dash-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  animation: fx-card-in 0.7s var(--fx-ease) both;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.dash-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.dash-hero-card .auth-progress.is-active {
  opacity: 1;
}

.dash-logo {
  animation: fx-logo-pop 0.8s cubic-bezier(0.2, 1.3, 0.4, 1) 0.1s both;
}

.dash-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  animation: fx-rise 0.55s var(--fx-ease) both;
  animation-delay: calc(var(--i, 0) * 80ms + 120ms);
  transition: transform 0.25s var(--fx-ease), box-shadow 0.25s var(--fx-ease), border-color 0.25s var(--fx-ease);
}

.dash-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(37, 99, 235, 0.4);
}

.dash-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #7c3aed);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dash-card:hover::before {
  opacity: 1;
}

.dash-card-icon {
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.dash-card:hover .dash-card-icon {
  transform: scale(1.12) rotate(4deg);
}

/* --------------------------------------------------------------------------
   12. GLOBAL APP & VIEW ANIMATIONS (All 10 views from 1.txt)
   -------------------------------------------------------------------------- */
.app-content {
  position: relative;
  isolation: isolate;
}

.app-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Smooth view entrance */
.view-panel {
  animation: fx-view-in 0.4s var(--fx-ease) both;
}

@keyframes fx-view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Staggered rise-in for view components */
.view-panel > * {
  animation: fx-rise 0.5s var(--fx-ease) both;
  animation-delay: calc(var(--i, 0) * 55ms + 50ms);
}

/* Elevated Page Headers */
.view-panel .page-header {
  position: relative;
  padding: 1.1rem 1.35rem;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.view-panel .page-header:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
}

.view-panel .page-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #7c3aed, #06b6d4);
  opacity: 0.9;
}

.view-header-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.view-header-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: linear-gradient(135deg, var(--primary-light), rgba(124, 58, 237, 0.12));
  color: var(--primary);
  border: 1px solid rgba(37, 99, 235, 0.18);
  box-shadow: 0 4px 12px -3px rgba(37, 99, 235, 0.25);
  transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.view-panel .page-header:hover .view-header-icon {
  transform: scale(1.08) rotate(3deg);
}

/* Interactive Cards across all views */
.view-panel .card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--fx-ease), box-shadow 0.25s var(--fx-ease), border-color 0.25s var(--fx-ease);
}

.view-panel .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(37, 99, 235, 0.35);
}

.view-panel .card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--primary), #7c3aed);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.view-panel .card:hover::before {
  opacity: 1;
}

/* Filter bars */
.view-panel .filter-bar {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.view-panel .filter-bar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Table containers */
.view-panel .table-responsive {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.view-panel .table-responsive:hover {
  box-shadow: var(--shadow-md);
}

.view-panel .table tbody tr {
  transition: background-color 0.2s ease;
}

.view-panel .table tbody tr:hover {
  background-color: var(--bg-surface-hover);
}

/* Student card grid (mobile/tablet) */
.student-grid .student-card {
  transition: transform 0.25s var(--fx-ease), box-shadow 0.25s var(--fx-ease), border-color 0.25s var(--fx-ease);
}

.student-grid .student-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

@media (prefers-reduced-motion: reduce) {
  .view-panel, .view-panel > *, .view-panel .page-header, .view-panel .card, .view-header-icon {
    animation: none !important;
    transform: none !important;
  }
}