/*
 * XRPL Gopnik Wallet – Dark Neon Theme
 *
 * This optional stylesheet applies a cohesive dark‑mode palette and
 * glassmorphic card styling across the application.  It overrides
 * selected CSS variables defined in the main ``style.css`` and
 * introduces helper classes for translucent panels.  Load this file
 * after ``style.css`` to activate the neon theme.  The intent of
 * this first iteration is to harmonise colours and surfaces without
 * introducing heavy animation or 3D effects; those will follow in a
 * subsequent iteration.
 */

:root {
  /*
   * Harmonise the optional dark theme with the refined core palette.
   *
   * This theme deepens the charcoal backgrounds slightly and retains
   * the cool blue/purple accent pairing.  Surfaces remain
   * translucent but use lower alpha values than before to maintain
   * subtlety.  The variables defined here override those in
   * `style.css` when dark_theme.css is loaded afterward.
   */
  /* Updated colours for better contrast and accessibility.  These
     values increase the luminance of text and surfaces while
     retaining the neon aesthetic. */
  --bg-main: #0e1120;
  --bg-secondary: #15182b;
  /* Text colours */
  --fg-light: #f5f5fa;
  --fg-muted: #a2a3b3;
  /* Accents: adjust brightness to improve contrast */
  --accent: #0d9dff;
  --accent-secondary: #7c5cf6;
  /* Translucent surfaces */
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.18);
}

/* Apply the dark backgrounds to the page body.  Many templates use
   inline or Bootstrap classes on ``body``, so we set the background
   globally without altering layout or fonts. */
/*
 * Global body styling
 *
 * Override the default Bootstrap body styles with a deep midnight gradient
 * and subtle radial glows.  The gradient uses our primary dark hues
 * defined in the root variables.  A ::before pseudo‑element paints
 * almost imperceptible aurora‑like glows which drift slowly across
 * the page.  This creates depth and movement without distracting
 * from the core content.  The body's text colour is set to the
 * foreground colour variable for high contrast on dark backgrounds.
 */
/*
 * Global page background
 *
 * All pages except the authentication flows (login/register) share a
 * common background that combines our dark gradient palette with a
 * high‑resolution hero image.  The first background layer is the image
 * loaded from ``static/images/app_background.png`` which fills the
 * viewport and stays fixed during scroll.  A semi‑transparent
 * gradient overlays the image to tint it with the primary dark hues
 * defined in this theme.  By specifying both layers in a single
 * ``background`` declaration we ensure they render correctly across
 * modern browsers.  The ``background-size: cover`` rule ensures
 * the image scales to cover the entire viewport without distortion.
 */
body {
  /* order matters: image layer first, gradient overlay second */
  /* Use the WebP version of the background image for improved performance.  WebP
     offers better compression than PNG while preserving visual quality.  The
     fallback gradient ensures the page still renders if the browser does not
     support WebP. */
  background: url('../images/app_background.webp') no-repeat center center fixed,
              linear-gradient(135deg, rgba(13, 23, 53, 0.90), rgba(21, 40, 84, 0.90));
  background-size: cover;
  color: var(--fg-light) !important;
  font-family: "Inter", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Global focus style for accessibility (dark mode).  Provide a
   high‑contrast outline when an element receives keyboard focus. */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Animated radial glows gently pan across the viewport.  These are
   placed behind all content via negative z-index and pointer-events
   disabled so they don't interfere with interaction. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at top left, rgba(0, 234, 255, 0.05), rgba(118, 0, 236, 0.02) 30%, transparent 80%),
    radial-gradient(circle at bottom right, rgba(118, 0, 236, 0.05), rgba(0, 234, 255, 0.02) 30%, transparent 80%);
  z-index: -1;
  pointer-events: none;
  animation: slow-pan-bg 60s linear infinite;
}

/* On mobile devices, fixed-position pseudo elements can become invisible or
   lead to inconsistent scrolling behaviour.  Switching to absolute
   positioning ensures that the animated background glows remain visible
   behind content on small screens. */
@media (max-width: 575.98px) {
  body::before {
    position: absolute !important;
  }
}
@keyframes slow-pan-bg {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(80px, 50px); }
  100% { transform: translate(0, 0); }
}

/* Typography scale
   Define consistent sizes for headings across the app.  Poppins is
   used for headings and Inter for body text (set on the body).
*/
h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: var(--fg-light);
  margin-top: 0;
}
h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

/* Navbar glassmorphism
   Apply a translucent glass effect to any navigation bar using the
   ``glass-nav`` class.  The nav’s background is semi‑opaque, the
   bottom border echoes the glow palette, and on large screens
   shadow is used to distinguish it from content. */
.glass-nav {
  backdrop-filter: blur(24px);
  background: var(--glass-bg) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3), 0 0 12px rgba(0,234,255,0.15);
}

.navbar .nav-link {
  /* Use the primary light colour for navigation links to improve contrast
     against the dark nav background. */
  color: var(--fg-light) !important;
  font-weight: 500;
  transition: color 0.25s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--accent) !important;
}

/* Glass card component
   Cards and panels adopt a unified style with blurred backgrounds,
   rounded corners, deep shadows and interactive holographic effects.
   The pseudo‑elements produce a gentle halo and sweeping sheen on
   hover.  ``transform-style`` enables 3D tilt animations. */
.glass-card,
.glass-card-strong,
.card-3d {
  position: relative;
  backdrop-filter: blur(24px);
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--fg-light) !important;
  border-radius: 1.4rem;
  box-shadow: 0 28px 64px rgba(0,0,0,0.7), 0 12px 32px rgba(0,0,0,0.4), 0 0 28px rgba(0,234,255,0.22);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}

/* 3D tilt and stronger shadow on hover */
.glass-card:hover,
.glass-card-strong:hover,
.card-3d:hover {
  transform: rotateY(-5deg) rotateX(5deg) translateY(-6px);
  box-shadow: 0 32px 72px rgba(0,0,0,0.75), 0 16px 40px rgba(0,0,0,0.45), 0 0 32px rgba(0,234,255,0.25);
}

/* Override Bootstrap .card to adopt the glass neon styling globally.
   Many templates still use the standard ``card`` class for content
   containers.  These rules ensure they match the updated palette
   without requiring markup changes. */
.card {
  position: relative;
  backdrop-filter: blur(20px);
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--fg-light) !important;
  border-radius: 1.3rem;
  box-shadow: 0 26px 60px rgba(0,0,0,0.7), 0 10px 28px rgba(0,0,0,0.4), 0 0 24px rgba(0,234,255,0.22);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s;
}
.card:hover {
  transform: rotateY(-4deg) rotateX(4deg) translateY(-5px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.75), 0 14px 36px rgba(0,0,0,0.45), 0 0 28px rgba(0,234,255,0.25);
}
.card::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -60px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at center, var(--accent), var(--accent-secondary) 60%, transparent 80%);
  opacity: 0.12;
  animation: halo-rotate 28s linear infinite;
  pointer-events: none;
}
.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: -200%;
  width: 200%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.14) 40%, transparent 60%);
  transform: skewX(-20deg);
  transition: transform 0.8s ease;
  pointer-events: none;
}
.card:hover::after {
  transform: translateX(200%) skewX(-20deg);
}

/* Halo behind glass cards */
.glass-card::before,
.glass-card-strong::before,
.card-3d::before {
  content: '';
  position: absolute;
  top: -90px;
  left: -70px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle at center, var(--accent), var(--accent-secondary) 60%, transparent 80%);
  opacity: 0.13;
  animation: halo-rotate 26s linear infinite;
  pointer-events: none;
}
@keyframes halo-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Holographic sheen sweeping across cards on hover */
.glass-card::after,
.glass-card-strong::after,
.card-3d::after {
  content: '';
  position: absolute;
  top: 0;
  left: -200%;
  width: 200%;
  height: 100%;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.15) 40%, transparent 60%);
  transform: skewX(-20deg);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.glass-card:hover::after,
.glass-card-strong:hover::after,
.card-3d:hover::after {
  transform: translateX(200%) skewX(-20deg);
}

/* Accent gradient text utility */
.text-accent {
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Button styling
   Buttons adopt pill shapes with subtle neon glows.  Primary
   buttons use translucent backgrounds and transition into a
   neon gradient on hover.  Outline buttons use accent borders
   and similar hover effects.  Ripple effects provide tactile
   feedback on click. */
.btn {
  border-radius: 1rem !important;
  padding: 0.6rem 1.1rem !important;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  transition: all 0.25s ease;
}

.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
  background: rgba(255,255,255,0.09) !important;
  border: none !important;
  color: var(--fg-light) !important;
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover {
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0,234,255,0.5), 0 4px 12px rgba(0,0,0,0.4) !important;
  transform: translateY(-3px);
}

/* Outline buttons */
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  border-radius: 1rem !important;
  background: transparent !important;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary)) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0,234,255,0.5), 0 4px 12px rgba(0,0,0,0.4) !important;
  transform: translateY(-3px);
}

/* Ripple effect on click */
.btn:active::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 0.6s ease-out;
}
@keyframes ripple {
  from { width: 0; height: 0; opacity: 0.8; }
  to   { width: 400px; height: 400px; opacity: 0; }
}

/* Table styling
   Standardise tables to dark cards with crisp separators.  Hover
   states highlight rows subtly. */
.table {
  color: var(--fg-light) !important;
  /* Ensure all tables adopt a transparent background in dark mode.
     Bootstrap's default ``table`` sets a white background which
     results in unreadable white rows on dark pages.  Override the
     background here and let striping/hover classes apply subtle
     tints. */
  background-color: transparent !important;
}
.table thead th {
  border-bottom: 2px solid var(--glass-border) !important;
  color: var(--fg-light) !important;
}
.table tbody td {
  border-top: 1px solid var(--glass-border) !important;
}
.table-hover tbody tr:hover {
  /* Increase hover contrast slightly on dark backgrounds. */
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ------------------------------------------------------------------
 * Enhanced table styling for dark mode
 *
 * Many templates define tables without the ``table-dark`` class.  In
 * Bootstrap's default styles this results in white backgrounds and
 * unreadable content when the dark theme is active.  The rules
 * below bring consistent dark styling to any table (striped, hover,
 * bordered, etc.) by applying semi‑transparent tints and border
 * colours derived from our root variables.
 */

/* Tint the table header to distinguish it from the body. */
.table thead {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Ensure the tbody has no solid white background. */
.table tbody {
  background-color: transparent !important;
}

/* Striped tables: apply subtle alternating row colours for better
   readability.  We define both odd and even row colours so that
   ``table-striped`` always produces visible stripes on a dark
   background. */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
.table-striped tbody tr:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* Bordered tables: override the default border colour which is too
   light on dark backgrounds.  Apply our semi‑transparent border
   colour globally and to individual cells. */
.table-bordered {
  border: 1px solid var(--glass-border) !important;
}
.table-bordered > :not(caption) > * {
  border: 1px solid var(--glass-border) !important;
}

/* Table captions: ensure captions inherit the foreground colour. */
.table caption {
  color: var(--fg-muted) !important;
}

/* Override Bootstrap light table variant in dark mode.  Several
   templates use ``table-light`` on the header to distinguish it from
   the body.  On a dark theme this appears white and clashes with
   other elements, so we recolour it to a subtle tint and ensure
   the text remains high contrast. */
.table-light {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--fg-light) !important;
}
.table-light th,
.table-light td {
  color: var(--fg-light) !important;
}

/* List group styling */
.list-group-item {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--glass-border) !important;
  color: var(--fg-light) !important;
}
.list-group-item + .list-group-item {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.list-group-item.active {
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Badge enhancements
   Add icons for status badges so that users who cannot perceive colour
   still understand the state of an item.  The badges are styled with
   a consistent pill shape and include a symbol at the start. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  font-weight: 500;
  border-radius: 0.8rem;
}
.badge.bg-success::before {
  content: '\2714'; /* check mark */
}
.badge.bg-danger::before {
  content: '\2716'; /* heavy cross */
}
.badge.bg-warning::before, .badge.bg-secondary::before {
  content: '\23F3'; /* hourglass */
}

/* Form controls */
.form-control,
.form-select {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--fg-light) !important;
  border-radius: 0.8rem !important;
}
.form-control::placeholder {
  color: var(--fg-muted) !important;
}
.form-control:focus,
.form-select:focus {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(0,234,255,0.25);
  color: var(--fg-light) !important;
}

/* Modal styling
   All modals adopt the glass card aesthetic with dark translucency
   and neon outlines.  Headers and footers have no hard borders and
   inherit the translucent background. */
.modal-content {
  background: var(--glass-bg) !important;
  color: var(--fg-light) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(18px) !important;
  border-radius: 1.2rem !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.35), 0 0 24px rgba(0,234,255,0.20);
}
.modal-header,
.modal-footer {
  border: none !important;
  background: transparent !important;
}
.modal-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--fg-light);
}

/* Spinner and success ring utilities
   Provide spinner and ring styles for asynchronous actions and
   success feedback. */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 1rem auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.success-ring {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 1rem auto;
}
.success-ring::before,
.success-ring::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid transparent;
}
.success-ring::before {
  border-top-color: var(--accent);
  animation: ring-spin 1.2s ease-out forwards;
}
.success-ring::after {
  border-right-color: var(--accent-secondary);
  animation: ring-spin 1.2s 0.2s ease-out forwards;
}
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(720deg); }
}

/* Confetti fall animation for success events.  Individual pieces
   drift downward while rotating and fading out. */
@keyframes confetti-fall {
  0% {
    transform: translate(-50%, -50%) translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateY(80vh) rotate(720deg);
    opacity: 0;
  }
}

/* Reduce motion fallback: remove animations if the user prefers
   reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* Generic glassmorphic card styling.  The original ``style.css``
   defines various card classes; this rule harmonises them by
   applying the new glass background and border variables. */
.glass-card,
.glass-card-strong,
.card-3d {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--fg-light) !important;
  backdrop-filter: blur(16px);
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.35), 0 0 20px rgba(0,234,255,0.15);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Subtle lift and glow on hover.  This adds a gentle depth effect
   without rotating the element. */
.glass-card:hover,
.glass-card-strong:hover,
.card-3d:hover {
  box-shadow: 0 24px 48px rgba(0,0,0,0.65), 0 12px 28px rgba(0,0,0,0.40), 0 0 24px rgba(0,234,255,0.20);
  transform: translateY(-4px);
}

/* Accent gradient for headings and important numbers.  Use with
   ``background-clip`` on elements to draw attention. */
.text-accent {
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Accent buttons: apply neon colours on hover.  These classes can be
   added to Bootstrap buttons to blend them into the new theme. */
.btn-neon {
  color: var(--fg-light);
  background: rgba(255,255,255,0.08);
  border: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.btn-neon:hover {
  background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,234,255,0.5), 0 4px 12px rgba(0,0,0,0.4);
  transform: translateY(-3px);
}

/* Spacing adjustments: unify padding inside cards for consistency. */
.glass-card > .p-3,
.glass-card > .p-4,
.glass-card-strong > .p-3,
.card-3d > .p-3 {
  padding: 1.5rem !important;
}

/* Responsive stacking on small screens: ensure multiple cards
   become full‑width stacks when the viewport is narrow. */
@media (max-width: 768px) {
  .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Accessibility: disable animations for users requesting reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------
 * Glitch effect
 *
 * The following styles implement the retro glitch animation originally
 * defined in the legacy ``style.css``.  Because the legacy stylesheet
 * is no longer loaded, we include these rules here so that slogans or
 * headers using the ``glitch`` class continue to work.  The text
 * duplication uses pseudo‑elements and keyframes to produce a CRT‑like
 * distortion.  See the home page for an example.
 */

/* Container to centre the glitch text horizontally.  Use flexbox so
   that the slogan stays centred within its parent and adapts to
   different screen sizes. */
.glitch-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Primary glitch text element.  The title attribute is used by the
   pseudo‑elements to duplicate the text.  Adjust font size and
   letter spacing to harmonise with the rest of the site. */
.glitch {
    position: relative;
    font-family: 'Fira Mono', monospace;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    letter-spacing: -2px;
    color: #ffffff;
    animation: glitch 1s linear infinite;
}

/* Top and bottom layers: flicker horizontally and vertically to
   simulate distortion.  The clip-path restricts the layers to
   sections of the text. */
.glitch::before, .glitch::after {
    content: attr(title);
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    color: inherit;
}

.glitch::before {
    animation: glitchTop 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

.glitch::after {
    animation: glitchBottom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitch {
    2%,64%{
        transform: translate(2px,0) skew(0deg);
    }
    4%,60%{
        transform: translate(-2px,0) skew(0deg);
    }
    62%{
        transform: translate(0,0) skew(5deg);
    }
}

@keyframes glitchTop {
    2%,64%{
        transform: translate(2px,-2px);
    }
    4%,60%{
        transform: translate(-2px,2px);
    }
    62%{
        transform: translate(13px,-1px) skew(-13deg);
    }
}

@keyframes glitchBottom {
    2%,64%{
        transform: translate(-2px,0);
    }
    4%,60%{
        transform: translate(-2px,0);
    }
    62%{
        transform: translate(-22px,5px) skew(21deg);
    }
}

/*
 * Colour utility overrides (Iteration 2)
 *
 * Many templates reference colour classes such as `.text-blue` or
 * `.card-blue` defined in the legacy stylesheet.  Because the legacy
 * stylesheet has been removed, we redefine these classes here to
 * unify them under the neon accent palette.  All colour classes map
 * to the same accent colours to maintain consistency across cards and
 * icons.  Outline buttons within coloured cards also adopt the
 * accent gradient on hover.
 */
.text-blue, .text-orange, .text-red, .text-teal, .text-green,
.text-yellow, .text-purple, .text-pink, .text-brown, .text-grey {
    color: var(--accent) !important;
}

/* Ensure coloured card icons use the neon accent */
.card-blue i, .card-orange i, .card-red i, .card-teal i,
.card-green i, .card-yellow i, .card-purple i, .card-pink i,
.card-brown i, .card-grey i {
    color: var(--accent) !important;
}

/* Standardise outline buttons within coloured cards */
.card-blue .btn-outline, .card-orange .btn-outline, .card-red .btn-outline,
.card-teal .btn-outline, .card-green .btn-outline, .card-yellow .btn-outline,
.card-purple .btn-outline, .card-pink .btn-outline, .card-brown .btn-outline,
.card-grey .btn-outline {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    transition: background 0.25s ease, color 0.25s ease;
}

/* Hover and focus states for outline buttons in coloured cards */
.card-blue .btn-outline:hover, .card-blue .btn-outline:focus,
.card-orange .btn-outline:hover, .card-orange .btn-outline:focus,
.card-red .btn-outline:hover, .card-red .btn-outline:focus,
.card-teal .btn-outline:hover, .card-teal .btn-outline:focus,
.card-green .btn-outline:hover, .card-green .btn-outline:focus,
.card-yellow .btn-outline:hover, .card-yellow .btn-outline:focus,
.card-purple .btn-outline:hover, .card-purple .btn-outline:focus,
.card-pink .btn-outline:hover, .card-pink .btn-outline:focus,
.card-brown .btn-outline:hover, .card-brown .btn-outline:focus,
.card-grey .btn-outline:hover, .card-grey .btn-outline:focus {
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary)) !important;
    color: #ffffff !important;
}