@keyframes shimmer {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
}

.shimmer-highlight {
  background-image: linear-gradient(
    90deg,
    rgba(251, 191, 36, 0.5) 0%,
    rgba(251, 191, 36, 0.55) 30%,
    rgba(253, 230, 138, 0.75) 50%,
    rgba(251, 191, 36, 0.55) 70%,
    rgba(251, 191, 36, 0.5) 100%
  );
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
  position: relative;
  background-clip: padding-box;
  cursor: default;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* Sparkle styling */
.sparkle {
  display: none;
  position: absolute;
  width: 12px;
  height: 12px;
  background: #f59e0b; /* amber-500 */
  clip-path: polygon(50% 0%, 65% 40%, 100% 50%, 65% 60%, 50% 100%, 35% 60%, 0% 50%, 35% 40%);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 0 4px rgba(245, 158, 11, 0.8);
}

@media (min-width: 1024px) {
  .sparkle {
    display: block;
    animation: sparkle 2s ease-in-out infinite;
  }
}

/* Position sparkles */
.sparkle.s1 {
  top: -6px;
  left: -4px;
  animation-delay: 0s;
}

.sparkle.s2 {
  top: -4px;
  right: 10%;
  animation-delay: 0.5s;
  width: 8px;
  height: 8px;
}

.sparkle.s3 {
  bottom: -6px;
  right: -4px;
  animation-delay: 1s;
  width: 10px;
  height: 10px;
}

/* Animate on hover */
.shimmer-highlight:hover {
  background-color: rgba(251, 191, 36, 0.2);
}

.dark .shimmer-highlight {
  background-image: linear-gradient(
    90deg,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(245, 158, 11, 0.2) 30%,
    rgba(253, 186, 116, 0.25) 50%,
    rgba(245, 158, 11, 0.2) 70%,
    rgba(245, 158, 11, 0.15) 100%
  );
  background-size: 200% auto;
}

.dark .sparkle {
  background: #fef3c7; /* amber-100 */
}

.dark .shimmer-highlight:hover {
  background-color: rgba(245, 158, 11, 0.15);
}
/**
 * Prism.js theme - shadcn/ui style (GitHub Dark Dimmed)
 * Inspired by shadcn/ui documentation code blocks
 */

code[class*="language-"],
pre[class*="language-"] {
  color: #e6edf3;
  background: none;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.6;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
  padding: 1rem;
  margin: 0;
  overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #0d1117;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: 0.1em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

/* Comments */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #8b949e;
  font-style: italic;
}

/* Punctuation */
.token.punctuation {
  color: #e6edf3;
}

.token.namespace {
  opacity: 0.7;
}

/* Strings */
.token.string,
.token.attr-value {
  color: #a5d6ff;
}

/* Operators */
.token.operator {
  color: #ff7b72;
}

/* Entity, URL */
.token.entity,
.token.url {
  color: #a5d6ff;
}

/* Keywords */
.token.keyword,
.token.control,
.token.directive {
  color: #ff7b72;
}

/* At-rules */
.token.atrule {
  color: #ff7b72;
}

/* Booleans and constants */
.token.boolean,
.token.constant {
  color: #79c0ff;
}

/* Numbers */
.token.number {
  color: #79c0ff;
}

/* Properties */
.token.property {
  color: #7ee787;
}

/* Tags */
.token.tag {
  color: #7ee787;
}

/* Attributes */
.token.attr-name {
  color: #79c0ff;
}

/* Selectors, symbols */
.token.selector {
  color: #7ee787;
}

.token.symbol {
  color: #ffa657;
}

/* Builtins, chars */
.token.builtin,
.token.char {
  color: #79c0ff;
}

/* Functions */
.token.function {
  color: #d2a8ff;
}

/* Class names, types */
.token.class-name,
.token.type-class-name {
  color: #ffa657;
}

/* Variables */
.token.variable {
  color: #ffa657;
}

/* Regex, important */
.token.regex {
  color: #a5d6ff;
}

.token.important {
  color: #ff7b72;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

/* Inserted/deleted for diffs */
.token.inserted {
  color: #7ee787;
}

.token.deleted {
  color: #ff7b72;
}

/* Language-specific overrides */

/* HTML/XML */
.language-markup .token.tag,
.language-html .token.tag,
.language-xml .token.tag {
  color: #7ee787;
}

.language-markup .token.attr-name,
.language-html .token.attr-name,
.language-xml .token.attr-name {
  color: #79c0ff;
}

.language-markup .token.attr-value,
.language-html .token.attr-value,
.language-xml .token.attr-value {
  color: #a5d6ff;
}

.language-markup .token.punctuation,
.language-html .token.punctuation,
.language-xml .token.punctuation {
  color: #8b949e;
}

/* CSS */
.language-css .token.selector {
  color: #7ee787;
}

.language-css .token.property {
  color: #79c0ff;
}

.language-css .token.function {
  color: #d2a8ff;
}

.language-css .token.url {
  color: #a5d6ff;
}

/* Tailwind CSS utilities (inside @apply) */
.language-css .token.tailwind-utility {
  color: #a5d6ff;
}

/* Make @apply rule keyword stand out */
.language-css .token.atrule .token.rule {
  color: #d2a8ff;
}

/* JavaScript */
.language-javascript .token.keyword {
  color: #ff7b72;
}

.language-javascript .token.function {
  color: #d2a8ff;
}

.language-javascript .token.class-name {
  color: #ffa657;
}

.language-javascript .token.template-string .token.interpolation {
  color: #e6edf3;
}

.language-javascript .token.template-string .token.interpolation-punctuation {
  color: #ff7b72;
}

/* Ruby */
.language-ruby .token.symbol {
  color: #79c0ff;
}

.language-ruby .token.keyword {
  color: #ff7b72;
}

.language-ruby .token.function {
  color: #d2a8ff;
}

.language-ruby .token.class-name {
  color: #ffa657;
}

/* ERB/Ruby multi-line comments - style the entire ruby block when it starts with # comment */
/* This handles <%# ... %> style comments where only the # is tokenized */
.token.ruby.language-ruby:has(> .token.comment:first-child) {
  color: #8b949e !important;
  font-style: italic;
}

/* Override colors for all tokens inside a comment block */
.token.ruby.language-ruby:has(> .token.comment:first-child) * {
  color: #8b949e !important;
  font-style: italic;
}

/* ERB */
.language-erb .token.delimiter {
  color: #ff7b72;
}

/* JSON */
.language-json .token.property {
  color: #7ee787;
}

.language-json .token.string {
  color: #a5d6ff;
}

.language-json .token.number {
  color: #79c0ff;
}

.language-json .token.boolean {
  color: #79c0ff;
}

/* Selection */
code[class*="language-"]::selection,
pre[class*="language-"]::selection,
code[class*="language-"] *::selection,
pre[class*="language-"] *::selection {
  background: #3b5070;
}

/* ===== Line Numbers ===== */
pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.5em;
  counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 1rem;
  left: 0;
  width: 3em;
  font-size: 100%;
  letter-spacing: -1px;
  border-right: 1px solid #21262d;
  user-select: none;
}

.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
  padding-right: 0.8em;
  text-align: right;
  color: #484f58;
}

.line-numbers-rows > span::before {
  content: counter(linenumber);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

/* example - include a custom font (put file in app/assets/fonts) */
 /* @font-face {
   font-family: 'Retrcade Regular';
   font-style: normal;
   font-weight: normal;
   src: url(/RetrcadeRegular.woff) format('woff');
 } */