/* src/global.css */
/* NOTE: Tailwind imports are in tailwind-config.css to prevent Sass mangling */
/* NOTE: Font @import url() moved to tailwind-config.css to fix CSS ordering warnings */

@import "./styles/theme.css";

/* Glass effect */
.glass-effect {
  @apply overflow-hidden backdrop-blur-lg;
  background-image: var(--glass-gradient-outer);

  /* Multi-layer borders - light highlight on top/left edges */
  border-top: 1px solid
    color-mix(in srgb, var(--color-background) 90%, transparent);
  border-left: 1px solid
    color-mix(in srgb, var(--color-background) 70%, transparent);
  border-right: 1px solid
    color-mix(in srgb, var(--color-border) 50%, transparent);
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-border) 60%, transparent);

  /* Layered shadows for depth + subtle outer glow */
  box-shadow:
    inset 0 1px 4px 2px color-mix(in srgb, white 30%, transparent),
    inset 0 -1px 2px 0 color-mix(in srgb, var(--color-border) 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-border) 80%, transparent),
    0 4px 16px -4px color-mix(in srgb, var(--color-border) 40%, transparent),
    0 24px 44px -12px rgb(0 0 0 / 0.1);
  &:before {
    content: "";
    @apply absolute inset-0 m-[0.5px] opacity-70;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--glass-gradient-inner);
  }
  &:after {
    content: "";
    @apply absolute inset-0 m-[1px] opacity-90  border-2 border-neutral-500 blur-lg;
    border-radius: inherit;
    z-index: -1;
  }
}

/*
   Glass Effect Opus - Gradient border that glows from top-left
   Designed to match the "music card" aesthetic with directional light:
   - Gradient border: bright at top-left, fading toward bottom-right
   - High backdrop blur for frosted glass look
   - Subtle inner glow
   - Works on any background color
*/
.glass-effect-2 {
  position: relative;
  overflow: hidden;
  @apply backdrop-blur-2xl;

  /* Semi-transparent dark background for the glass */
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );

  /* Subtle inner shadow for depth */
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 32px 0 rgba(0, 0, 0, 0.2);

  /* Gradient border using ::before pseudo-element */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px; /* Border thickness */

    /* Gradient from top-left (bright) to bottom-right (dim) */
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.15) 25%,
      rgba(255, 255, 255, 0) 50%,
      rgba(255, 255, 255, 0.05) 75%,
      rgba(255, 255, 255, 0.02) 100%
    );

    /* Mask to show only the border (hollow out the center) */
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
  }
}

/*
   Glass Effect Opus 2 - Multi-point gradient border with rim lighting
   More sophisticated version with "shine" at multiple points:
   - Strong brightness at top-left corner
   - Glow continues along top and left edges
   - Subtle rim light on other edges
   - Creates a 3D lit glass effect
*/
.glass-effect-3 {
  position: relative;
  overflow: hidden;
  @apply backdrop-blur-2xl;

  /* Semi-transparent background for the glass */
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );

  /* Subtle inner shadow for depth */
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 32px 0 rgba(0, 0, 0, 0.2);

  /* Multi-layer gradient border using ::before */
  &::before {
    content: "";
    @apply absolute inset-0 blur-lg;
    border-radius: inherit;
    padding: 0.5px; /* Border thickness */

    /* Layered gradients for multi-point shine effect */
    background:
      /* Top-left corner highlight - strong radial glow */
      radial-gradient(
        ellipse 60% 40% at 5% 5%,
        rgba(255, 255, 255, 0.7) 0%,
        transparent 50%
      ),
      /* Top edge glow spreading right */
      linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.5) 0%,
          rgba(255, 255, 255, 0.25) 20%,
          rgba(255, 255, 255, 0.1) 50%,
          rgba(255, 255, 255, 0.03) 80%,
          transparent 100%
        ),
      /* Left edge glow spreading down */
      linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.4) 0%,
          rgba(255, 255, 255, 0.15) 30%,
          rgba(255, 255, 255, 0.05) 60%,
          transparent 100%
        ),
      /* Bottom-right subtle highlight for rim effect */
      radial-gradient(
          ellipse 40% 30% at 95% 95%,
          rgba(255, 255, 255, 0.08) 0%,
          transparent 50%
        ),
      /* Very subtle base border for continuity */
      linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.04) 50%,
          rgba(255, 255, 255, 0.02) 100%
        );

    /* Mask to show only the border */
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
  }
}

/*
   Glass Effect Opus 3 - Copy of glass-effect with gradient border
   Same as .glass-effect but with gradient border instead of solid borders
*/
.glass-effect-4 {
  @apply overflow-hidden backdrop-blur-lg;
  background-image: var(--glass-gradient-outer);

  /* Layered shadows for depth + subtle outer glow (same as glass-effect) */
  box-shadow:
    inset 0 1px 4px 2px color-mix(in srgb, white 30%, transparent),
    inset 0 -1px 2px 0 color-mix(in srgb, var(--color-border) 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--color-border) 80%, transparent),
    0 4px 16px -4px color-mix(in srgb, var(--color-border) 40%, transparent),
    0 24px 44px -12px rgb(0 0 0 / 0.1);

  /* Gradient border using ::before */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.5px; /* Border thickness */

    /* Gradient from top-left (bright) to bottom-right (dim) */
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 25%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      rgba(255, 255, 255, 0.1) 100%
    );

    /* Mask to show only the border (hollow out the center) */
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
  }

  /* Inner glow/halo effect - same as glass-effect ::after */
  &::after {
    content: "";
    @apply absolute inset-0 m-[1px] opacity-20 border-2 border-neutral-500 blur-lg;
    border-radius: inherit;
    z-index: -1;
  }
}

/*
   Glass Effect 2 - Ultra-premium frosted glass
   Designed to match the "music card" aesthetic:
   - High blur
   - Clean, thin white border
   - Subtle inner glow
   - Deep drop shadow
*/
.glass-effect-5 {
  @apply overflow-hidden backdrop-blur-2xl;

  /* Subtle gradient background - mostly transparent */
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );

  /* Distinct, thin semi-transparent light border */
  border: 1px solid rgba(255, 255, 255, 0.18);

  /* Shadows: 
     1. Inner white highlight to accentuate the edge (bevel effect)
     2. Deep, soft drop shadow for elevation
  */
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
    0 8px 32px 0 rgba(31, 38, 135, 0.15);

  /* Ensure it works on dark mode too with slightly different values if needed,
     but for now, the "white glass" look is often universal. */
}

/* Global overlay scrollbar styling */
@layer base {
  :root {
    /* Scrollbar styling */
    --ui-scrollbar-size: 4px;
    --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.3);
    --ui-scrollbar-thumb-active: rgb(209 213 219);
    --ui-scrollbar-track-rest: transparent;
    --ui-scrollbar-track-active: rgba(209, 213, 219, 0.1);
  }

  * {
    /* Firefox - use thin scrollbar with custom colors */
    scrollbar-width: thin;
    scrollbar-color: var(--ui-scrollbar-thumb-rest)
      var(--ui-scrollbar-track-rest);
    -ms-overflow-style: none; /* IE/Edge */
  }

  /* Show more prominent scrollbars on hover/focus */
  *:hover,
  *:focus,
  *:active {
    scrollbar-color: var(--ui-scrollbar-thumb-active)
      var(--ui-scrollbar-track-active);
  }

  /* Webkit overlay scrollbars */
  *::-webkit-scrollbar {
    width: var(--ui-scrollbar-size);
    height: var(--ui-scrollbar-size);
    /* Make scrollbar overlay instead of taking up space */
    position: absolute;
  }

  *::-webkit-scrollbar-track {
    background: var(--ui-scrollbar-track-rest);
    transition: background-color 0.3s ease;
    /* Position track to overlay on right edge */
    position: absolute;
    right: 0;
    border-radius: calc(var(--ui-scrollbar-size) / 2);
  }

  *::-webkit-scrollbar-thumb {
    background: var(--ui-scrollbar-thumb-rest);
    border-radius: calc(var(--ui-scrollbar-size) / 2);
    transition: background-color 0.3s ease;
    /* Ensure thumb overlays properly */
    position: relative;
    z-index: 1;
  }

  /* Show scrollbar on hover/focus/active states */
  *:hover::-webkit-scrollbar-thumb,
  *:focus::-webkit-scrollbar-thumb,
  *:active::-webkit-scrollbar-thumb {
    background: var(--ui-scrollbar-thumb-active);
  }

  *:hover::-webkit-scrollbar-track,
  *:focus::-webkit-scrollbar-track,
  *:active::-webkit-scrollbar-track {
    background: var(--ui-scrollbar-track-active);
  }

  *::-webkit-scrollbar-corner {
    background: transparent;
    position: absolute;
  }
}

@layer utilities {
  /* Shadow elevation utilities */
  .shadow-real-sm {
    box-shadow:
      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
      0.1px 3.6px 3.2px -4.1px rgba(0, 0, 0, 0.08);
  }

  .shadow-real-md {
    box-shadow:
      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
      0.1px 3.7px 3.3px -2px rgba(0, 0, 0, 0.09),
      0.4px 18.2px 16.2px -4.1px rgba(0, 0, 0, 0.06);
  }

  .shadow-real-lg {
    box-shadow:
      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
      0.1px 3.6px 3.2px -0.8px rgba(0, 0, 0, 0.06),
      0.2px 9.5px 8.5px -1.6px rgba(0, 0, 0, 0.06),
      0.5px 22.6px 20.2px -2.4px rgba(0, 0, 0, 0.05),
      1.1px 47.3px 42.2px -3.2px rgba(0, 0, 0, 0.04),
      2.1px 87.7px 78.3px -4.1px rgba(0, 0, 0, 0.03);
  }

  .shadow-real-xl {
    box-shadow:
      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
      0.2px 4.8px 4.3px -0.5px rgba(0, 0, 0, 0.06),
      0.4px 11.2px 10px -1px rgba(0, 0, 0, 0.06),
      0.7px 21.3px 19px -1.5px rgba(0, 0, 0, 0.05),
      1.2px 38.4px 34.3px -2px rgba(0, 0, 0, 0.05),
      2px 64.6px 57.7px -2.5px rgba(0, 0, 0, 0.04),
      3.1px 102.1px 91.2px -3px rgba(0, 0, 0, 0.03),
      4.7px 154.3px 137.8px -3.5px rgba(0, 0, 0, 0.03),
      6.8px 222.5px 198.7px -4.1px rgba(0, 0, 0, 0.02);
  }

  .shadow-real-2xl {
    box-shadow:
      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
      0.3px 6.2px 5.5px -0.3px rgba(0, 0, 0, 0.06),
      0.6px 14.8px 13.2px -0.6px rgba(0, 0, 0, 0.06),
      1px 27.1px 24.2px -0.9px rgba(0, 0, 0, 0.06),
      1.6px 45.2px 40.4px -1.2px rgba(0, 0, 0, 0.05),
      2.5px 70.3px 62.8px -1.5px rgba(0, 0, 0, 0.05),
      3.7px 104.2px 93.1px -1.8px rgba(0, 0, 0, 0.04),
      5.4px 148.9px 133px -2.1px rgba(0, 0, 0, 0.04),
      7.6px 207.4px 185.3px -2.4px rgba(0, 0, 0, 0.03),
      10.4px 283.8px 253.5px -2.7px rgba(0, 0, 0, 0.03),
      14px 381.6px 340.9px -3px rgba(0, 0, 0, 0.02),
      18.4px 503.7px 450px -3.3px rgba(0, 0, 0, 0.02);
  }

  .shadow-real-3xl {
    box-shadow:
      0px 0.9px 0.8px rgba(0, 0, 0, 0.04),
      0.4px 8.1px 7.2px -0.2px rgba(0, 0, 0, 0.06),
      0.8px 19.3px 17.2px -0.4px rgba(0, 0, 0, 0.06),
      1.3px 34.8px 31.1px -0.6px rgba(0, 0, 0, 0.06),
      2px 55.2px 49.3px -0.8px rgba(0, 0, 0, 0.06),
      3px 81.7px 73px -1px rgba(0, 0, 0, 0.05),
      4.3px 115.8px 103.4px -1.2px rgba(0, 0, 0, 0.05),
      6px 158.9px 142px -1.4px rgba(0, 0, 0, 0.05),
      8.2px 212.4px 189.7px -1.6px rgba(0, 0, 0, 0.04),
      10.9px 278.8px 249.1px -1.8px rgba(0, 0, 0, 0.04),
      14.2px 360.5px 322.1px -2px rgba(0, 0, 0, 0.03),
      18.2px 460.1px 411px -2.2px rgba(0, 0, 0, 0.03),
      23px 579.9px 518px -2.4px rgba(0, 0, 0, 0.02),
      28.7px 722.4px 645.3px -2.6px rgba(0, 0, 0, 0.02),
      35.3px 890.8px 796px -2.8px rgba(0, 0, 0, 0.02);
  }
}

@layer utilities {
  /* Overlay scrollbar utility classes */
  .scrollbar-thin {
    --ui-scrollbar-size: 6px;
  }

  .scrollbar-thick {
    --ui-scrollbar-size: 8px;
  }

  .scrollbar-thumb-gray-300 {
    --ui-scrollbar-thumb-active: rgb(209 213 219);
  }

  .scrollbar-thumb-\[var\(--color-neutral-300\)\] {
    --ui-scrollbar-thumb-active: var(--color-neutral-300);
  }

  .scrollbar-track-\[var\(--color-neutral-100\)\] {
    --ui-scrollbar-track-active: var(--color-neutral-100);
  }

  .scrollbar-track-transparent {
    --ui-scrollbar-track-active: transparent;
  }

  /* Auto-show scrollbars (default behavior) - visible when scrollable, prominent on hover */
  .scrollbar-auto-show {
    --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.3);
    --ui-scrollbar-thumb-active: rgb(209 213 219);
    --ui-scrollbar-track-rest: transparent;
    --ui-scrollbar-track-active: rgba(209, 213, 219, 0.1);
  }

  /* Hide scrollbars until hover (minimal UI approach) */
  .scrollbar-auto-hide {
    --ui-scrollbar-thumb-rest: transparent;
    --ui-scrollbar-track-rest: transparent;
    scrollbar-color: transparent transparent;
  }

  .scrollbar-auto-hide:hover,
  .scrollbar-auto-hide:focus,
  .scrollbar-auto-hide.scrolling {
    --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.7);
    --ui-scrollbar-thumb-active: rgb(209 213 219);
    --ui-scrollbar-track-rest: transparent;
    --ui-scrollbar-track-active: rgba(209, 213, 219, 0.1);
    scrollbar-color: var(--ui-scrollbar-thumb-rest)
      var(--ui-scrollbar-track-rest);
  }

  /* Always visible scrollbars with full opacity */
  .scrollbar-always-visible {
    --ui-scrollbar-thumb-rest: rgb(209 213 219);
    --ui-scrollbar-thumb-active: rgb(156 163 175);
    --ui-scrollbar-track-rest: rgba(229, 231, 235, 0.5);
    --ui-scrollbar-track-active: rgb(229 231 235);
    scrollbar-color: var(--ui-scrollbar-thumb-rest)
      var(--ui-scrollbar-track-rest);
  }

  /* Completely hide scrollbars */
  .scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scrollbar-color: transparent transparent;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Hover-only visibility for minimal interfaces */
  .scrollbar-hover-only {
    --ui-scrollbar-thumb-rest: transparent;
    --ui-scrollbar-track-rest: transparent;
    scrollbar-color: transparent transparent;
  }

  .scrollbar-hover-only:hover {
    --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.6);
    --ui-scrollbar-thumb-active: rgb(209 213 219);
    scrollbar-color: var(--ui-scrollbar-thumb-rest)
      var(--ui-scrollbar-track-rest);
  }
}

/* ─── Neumorphic Surface Utilities ───
   Usage: <div class="neu-raised rounded-2xl p-4 bg-neutral-800">
   Uses ::after for gradient border — composes cleanly with bg-image (::before).
   Content inside needs "relative z-2" to sit above the ::after border.
*/
@layer utilities {
  .neu-raised {
    position: relative;
    box-shadow: var(--neu-raised-shadow);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: var(--neu-border-width, 1.5px);
      background: var(--neu-raised-border);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 1;
    }
  }

  .neu-inset {
    position: relative;
    box-shadow: var(--neu-inset-shadow);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: var(--neu-border-width, 1.5px);
      background: var(--neu-inset-border);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 1;
    }
  }

  /* Circle button — outer groove */
  .neu-circle-groove {
    position: relative;
    border-radius: 9999px;
    box-shadow: var(--neu-circle-groove-shadow);
    border: 1px solid rgba(0,0,0,0.12);

    .dark & {
      border-color: rgba(0,0,0,0.40);
    }
  }

  /* Circle button — inner disc (gradient border via ::after) */
  .neu-circle-disc {
    position: absolute;
    inset: 2px;
    border-radius: 9999px;
    box-shadow: var(--neu-circle-disc-shadow);
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: var(--neu-border-width, 1.5px);
      background: var(--neu-raised-border);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: 1;
    }
  }

  /* Preset border-width modifiers */
  .neu-border-thin {
    --neu-border-width: 1px;
  }
  .neu-border-thick {
    --neu-border-width: 2px;
  }
}

/* Background image utility system
   Usage: <div className="background-1 background-blur-2xl background-scale-125">
   Uses ::before pseudo-element — content needs "relative z-10" to appear above.
   Base class auto-applies position:relative and overflow:hidden.
*/
@layer utilities {
  /* Shared base setup for all bg-image classes */
  .bg-image {
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image: var(--bg-image);
      background-size: cover;
      background-position: center;
      filter: blur(var(--bg-image-blur, 0px));
      transform: scale(var(--bg-image-scale, 1));
      opacity: var(--bg-image-opacity, 0.5);
      mix-blend-mode: var(--bg-image-blend, multiply);
      pointer-events: none;
    }
  }

  /* Image presets */
  .bg-image-1 {
    --bg-image: url("/bg/1.jpg");
  }
  .bg-image-2 {
    --bg-image: url("/bg/2.jpg");
  }
  .bg-image-3 {
    --bg-image: url("/bg/3.jpg");
  }
  .bg-image-4 {
    --bg-image: url("/bg/4.jpg");
  }
  .bg-image-5 {
    --bg-image: url("/bg/5.jpg");
  }
  .bg-image-6 {
    --bg-image: url("/bg/6.jpg");
  }
  .bg-image-7 {
    --bg-image: url("/bg/7.jpg");
  }
  .bg-image-8 {
    --bg-image: url("/bg/8.jpg");
  }
  .bg-image-9 {
    --bg-image: url("/bg/9.jpg");
  }
  .bg-image-10 {
    --bg-image: url("/bg/10.jpg");
  }
  .bg-image-11 {
    --bg-image: url("/bg/11.jpg");
  }
  .bg-image-12 {
    --bg-image: url("/bg/12.jpg");
  }
  .bg-image-13 {
    --bg-image: url("/bg/13.jpg");
  }
  .bg-image-14 {
    --bg-image: url("/bg/14.jpg");
  }
  .bg-image-15 {
    --bg-image: url("/bg/15.jpg");
  }
  .bg-image-16 {
    --bg-image: url("/bg/16.jpg");
  }
  .bg-image-17 {
    --bg-image: url("/bg/17.jpg");
  }
  .bg-image-18 {
    --bg-image: url("/bg/18.jpg");
  }
  .bg-image-19 {
    --bg-image: url("/bg/19.jpg");
  }
  .bg-image-20 {
    --bg-image: url("/bg/20.jpg");
  }
  .bg-image-21 {
    --bg-image: url("/bg/21.jpg");
  }
  .bg-image-22 {
    --bg-image: url("/bg/22.jpg");
  }
  .bg-image-23 {
    --bg-image: url("/bg/23.jpg");
  }
  .bg-image-24 {
    --bg-image: url("/bg/24.jpg");
  }

  /* Blur modifiers */
  .bg-image-blur-sm {
    --bg-image-blur: 4px;
  }
  .bg-image-blur-md {
    --bg-image-blur: 8px;
  }
  .bg-image-blur-lg {
    --bg-image-blur: 16px;
  }
  .bg-image-blur-xl {
    --bg-image-blur: 24px;
  }
  .bg-image-blur-2xl {
    --bg-image-blur: 40px;
  }
  .bg-image-blur-3xl {
    --bg-image-blur: 64px;
  }

  /* Scale modifiers */
  .bg-image-scale-105 {
    --bg-image-scale: 1.05;
  }
  .bg-image-scale-110 {
    --bg-image-scale: 1.1;
  }
  .bg-image-scale-125 {
    --bg-image-scale: 1.25;
  }
  .bg-image-scale-150 {
    --bg-image-scale: 1.5;
  }

  /* Opacity modifiers */
  .bg-image-opacity-0 {
    --bg-image-opacity: 0;
  }
  .bg-image-opacity-5 {
    --bg-image-opacity: 0.05;
  }
  .bg-image-opacity-10 {
    --bg-image-opacity: 0.1;
  }
  .bg-image-opacity-15 {
    --bg-image-opacity: 0.15;
  }
  .bg-image-opacity-20 {
    --bg-image-opacity: 0.2;
  }
  .bg-image-opacity-25 {
    --bg-image-opacity: 0.25;
  }
  .bg-image-opacity-30 {
    --bg-image-opacity: 0.3;
  }
  .bg-image-opacity-35 {
    --bg-image-opacity: 0.35;
  }
  .bg-image-opacity-40 {
    --bg-image-opacity: 0.4;
  }
  .bg-image-opacity-45 {
    --bg-image-opacity: 0.45;
  }
  .bg-image-opacity-50 {
    --bg-image-opacity: 0.5;
  }
  .bg-image-opacity-55 {
    --bg-image-opacity: 0.55;
  }
  .bg-image-opacity-60 {
    --bg-image-opacity: 0.6;
  }
  .bg-image-opacity-65 {
    --bg-image-opacity: 0.65;
  }
  .bg-image-opacity-70 {
    --bg-image-opacity: 0.7;
  }
  .bg-image-opacity-75 {
    --bg-image-opacity: 0.75;
  }
  .bg-image-opacity-80 {
    --bg-image-opacity: 0.8;
  }
  .bg-image-opacity-85 {
    --bg-image-opacity: 0.85;
  }
  .bg-image-opacity-90 {
    --bg-image-opacity: 0.9;
  }
  .bg-image-opacity-95 {
    --bg-image-opacity: 0.95;
  }
  .bg-image-opacity-100 {
    --bg-image-opacity: 1;
  }

  /* Blend mode modifiers */
  .bg-image-blend-normal {
    --bg-image-blend: normal;
  }
  .bg-image-blend-multiply {
    --bg-image-blend: multiply;
  }
  .bg-image-blend-screen {
    --bg-image-blend: screen;
  }
  .bg-image-blend-overlay {
    --bg-image-blend: overlay;
  }
  .bg-image-blend-darken {
    --bg-image-blend: darken;
  }
  .bg-image-blend-lighten {
    --bg-image-blend: lighten;
  }
  .bg-image-blend-color-dodge {
    --bg-image-blend: color-dodge;
  }
  .bg-image-blend-color-burn {
    --bg-image-blend: color-burn;
  }
  .bg-image-blend-hard-light {
    --bg-image-blend: hard-light;
  }
  .bg-image-blend-soft-light {
    --bg-image-blend: soft-light;
  }
  .bg-image-blend-difference {
    --bg-image-blend: difference;
  }
  .bg-image-blend-exclusion {
    --bg-image-blend: exclusion;
  }
  .bg-image-blend-hue {
    --bg-image-blend: hue;
  }
  .bg-image-blend-saturation {
    --bg-image-blend: saturation;
  }
  .bg-image-blend-color {
    --bg-image-blend: color;
  }
  .bg-image-blend-luminosity {
    --bg-image-blend: luminosity;
  }
}

/* Apply fonts globally */
html,
body {
  font-family: var(--font-family-base);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Auto-fill input styling resets - fixes border-radius issues with auto-populated inputs */
@layer base {
  /* Webkit browsers (Chrome, Safari, Edge) */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    border-radius: var(--form-radius) !important;
  }

  /* Firefox - handle auto-fill styling */
  input:-moz-autofill {
    border-radius: var(--form-radius) !important;
  }

  /* Ensure form controls maintain their styling when auto-filled */
  input[type="text"]:-webkit-autofill,
  input[type="email"]:-webkit-autofill,
  input[type="password"]:-webkit-autofill,
  input[type="tel"]:-webkit-autofill,
  input[type="url"]:-webkit-autofill,
  input[type="search"]:-webkit-autofill {
    border-radius: var(--form-radius) !important;
  }

  /* Hide native number input spinners */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}

/* Heatmap flicker animation */
@keyframes flicker {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  20% {
    opacity: 0.3;
    transform: scale(1.02);
  }
  40% {
    opacity: 0.1;
    transform: scale(1.03);
  }
  60% {
    opacity: 0.7;
    transform: scale(1.01);
  }
  80% {
    opacity: 0.4;
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
    /* No opacity at 100% - let inline styles control final opacity */
  }
}

/* Loader shimmer animation for indeterminate linear progress */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(300%);
  }
}

/* Progress bar indeterminate animation */
@keyframes progress-indeterminate {
  0% {
    left: -33%;
    width: 33%;
  }
  50% {
    left: 40%;
    width: 45%;
  }
  100% {
    left: 100%;
    width: 33%;
  }
}
