/* Basic shadow: offset right and down */
.simple-shadow {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  /* offset-x offset-y blur-radius color */
}

/* Shadow offset left and up */
.shadow-top-left {
  text-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);
}

/* No blur (hard shadow) */
.hard-shadow {
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
  /* Creates bold outline effect */
}

/* Colored shadow */
.colored-shadow {
  color: white;
  text-shadow: 0 2px 4px rgba(255, 0, 0, 0.5);
  /* Red shadow */
}

/* Large blur for glow */
.glow {
  color: #fff;
  text-shadow: 0 0 20px rgba(52, 152, 219, 0.8);
  /* Blue glow effect */
}

/* Multiple shadows (layered) */
.multi-shadow {
  text-shadow:
    2px 2px 4px rgba(0, 0, 0, 0.3),
    4px 4px 8px rgba(0, 0, 0, 0.2),
    6px 6px 12px rgba(0, 0, 0, 0.1);
  /* Layered depth */
}

/* Minimal shadow (subtle) */
.subtle {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Text over background image (readability) */
.hero-title {
  color: white;
  font-size: 48px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  /* Makes white text readable over any background */
}

/* Embossed/engraved effect */
.embossed {
  color: #ddd;
  text-shadow: 1px 1px 0 #000;
  /* Creates raised appearance */
}

.engraved {
  color: #888;
  text-shadow: -1px -1px 0 #fff;
  /* Creates carved-in appearance */
}

/* 3D text effect */
.text-3d {
  color: white;
  font-size: 48px;
  font-weight: bold;
  text-shadow:
    1px 1px 0 #ccc,
    2px 2px 0 #bbb,
    3px 3px 0 #aaa,
    4px 4px 0 #999,
    5px 5px 8px rgba(0, 0, 0, 0.4);
  /* Multiple layers for depth */
}

/* Neon sign effect */
.neon-glow {
  color: #fff;
  font-weight: bold;
  text-shadow:
    0 0 10px rgba(255, 0, 0, 0.8),
    0 0 20px rgba(255, 0, 0, 0.6),
    0 0 30px rgba(255, 0, 0, 0.4);
  /* Layered glow */
}

/* Cyberpunk text */
.cyberpunk {
  color: #00ff00;
  text-shadow:
    0 0 10px rgba(0, 255, 0, 0.8),
    0 0 20px rgba(0, 0, 255, 0.5);
  /* Green with blue glow */
}

/* Blurred outline for contrast */
.outline-blur {
  color: white;
  text-shadow:
    0 0 4px #000,
    0 0 4px #000,
    0 0 4px #000;
  /* Subtle dark halo for readability */
}

/* Multiple colored shadows */
.rgb-shadow {
  text-shadow:
    2px 0 0 red,
    -2px 0 0 blue,
    0 2px 0 green;
  /* RGB chromatic aberration effect */
}

/* Glass morphism text */
.glass-text {
  color: rgba(255, 255, 255, 0.8);
  text-shadow:
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 0 1px rgba(255, 255, 255, 0.5);
  /* Subtle shadow with light edge */
}

/* Text glow animation */
@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 10px rgba(52, 152, 219, 0.5); }
  50% { text-shadow: 0 0 20px rgba(52, 152, 219, 0.8); }
}

.glowing-text {
  color: white;
  animation: glow-pulse 2s ease-in-out infinite;
}

/* Shadow move animation */
@keyframes shadow-shift {
  0% { text-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  50% { text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4); }
  100% { text-shadow: 0 0 0 rgba(0, 0, 0, 0); }
}

.shadow-shift {
  animation: shadow-shift 2s ease-in-out infinite;
}

/* Text focus effect on hover */
.focus-shadow {
  transition: text-shadow 0.3s ease;
  text-shadow: 0 0 0 rgba(52, 152, 219, 0);
}

.focus-shadow:hover {
  text-shadow: 0 0 15px rgba(52, 152, 219, 0.8);
  /* Glows on hover */
}

/* Color transition in shadow */
.color-shift-shadow {
  color: white;
  transition: text-shadow 0.5s ease;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.color-shift-shadow:hover {
  text-shadow: 0 0 10px rgba(0, 0, 255, 0.5);
  /* Shadow color shifts blue */
}

/* Long shadow effect */
@keyframes long-shadow-anim {
  from {
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  }
  to {
    text-shadow:
      1px 1px 0 rgba(0, 0, 0, 0.2),
      2px 2px 0 rgba(0, 0, 0, 0.15),
      3px 3px 0 rgba(0, 0, 0, 0.15),
      4px 4px 0 rgba(0, 0, 0, 0.1),
      5px 5px 10px rgba(0, 0, 0, 0.15);
  }
}

.long-shadow {
  animation: long-shadow-anim 1s ease forwards;
}

/* Glitch effect */
@keyframes glitch-shadow {
  0% { text-shadow: -2px 0 red, 2px 0 blue; }
  20% { text-shadow: -2px 0 cyan, 2px 0 magenta; }
  40% { text-shadow: -2px 0 magenta, 2px 0 cyan; }
  60% { text-shadow: -2px 0 yellow, 2px 0 red; }
  80% { text-shadow: -2px 0 blue, 2px 0 yellow; }
  100% { text-shadow: -2px 0 red, 2px 0 blue; }
}

.glitch {
  animation: glitch-shadow 0.3s infinite;
}

/* Text depth motion */
.depth-text {
  color: white;
  transition: text-shadow 0.3s ease;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.depth-text:hover {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.2);
  /* Appears closer on hover */
}

/* Backdrop text (light text on dark shadow) */
.backdrop-text {
  color: white;
  text-shadow:
    0 0 20px rgba(0, 0, 0, 0.8),
    inset 0 0 10px rgba(0, 0, 0, 0.5);
  /* Creates backdrop effect */
}

/* Simple shadows are performant */
.performant {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Single, simple shadow = fast */
}

/* Multiple shadows require more rendering */
.expensive {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.15),
    0 8px 16px rgba(0, 0, 0, 0.1);
  /* Multiple shadows = slower rendering */
}

/* Avoid very large blur values */
.reasonable-blur {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  /* Blur up to 8-10px is typical */
}

.excessive-blur {
  text-shadow: 0 2px 50px rgba(0, 0, 0, 0.5);
  /* Large blur values slow down rendering */
}

/* Ensure text remains readable */
.readable {
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  /* Shadow dark, text light = good contrast */
}

.low-contrast {
  color: #999;
  text-shadow: 0 2px 4px rgba(100, 100, 100, 0.5);
  /* Low contrast shadow, text hard to read */
}

/* Browser support is excellent */
.supported {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Works in all modern browsers */
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .animated-shadow {
    animation: none;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}