/* Basic: offset-x offset-y blur-radius color */
.simple-shadow {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  /* Right 2px, Down 2px, Blur 5px, Semi-transparent black */
}

/* With spread radius */
.spread-shadow {
  box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.15);
  /* No offset, blur 8px, spread 2px, color with alpha */
}

/* Inset shadow (inside the box) */
.inset-shadow {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
  /* Inset keyword creates inner shadow */
}

/* Multiple shadows */
.multi-shadow {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
  /* Layered shadows for depth */
}

/* Shadow with color */
.colored-shadow {
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
  /* Red shadow instead of black */
}

/* No blur (hard shadow) */
.hard-shadow {
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
  /* Sharp edges, no blur radius */
}

/* Large spread for glow effect */
.glow {
  box-shadow: 0 0 20px 10px rgba(52, 152, 219, 0.5);
  /* Large spread creates glow */
}

/* Minimal: just offsets */
.minimal {
  box-shadow: 2px 2px black;
  /* Uses default blur (0) and black color */
}

/* Common: offset + blur + color */
.common {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Centered below, blurred, semi-transparent */
}

/* Full: all parameters */
.full {
  box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, 0.15);
  /* offset-x offset-y blur spread color */
}

/* Negative offset */
.negative {
  box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.2);
  /* Shadow above and to the left */
}

/* Inset shadow (engraved effect) */
.engraved {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  /* Creates inset/carved appearance */
}

/* Zero offset, centered shadow */
.centered {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  /* Glowing halo effect */
}

/* Card elevation (Material Design style) */
.card-elevated {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.card-elevated:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  /* Lifts on hover */
}

/* Layered depth (multiple shadows) */
.deep-shadow {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  /* Multiple layers = perception of depth */
}

.deeper-shadow {
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.10);
}

/* Focus state (keyboard navigation) */
button {
  transition: box-shadow 0.2s ease, outline 0.2s ease;
}

button:focus-visible {
  outline: 3px solid #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  /* Visible outline + shadow ring */
}

/* Drop shadow effect (photo) */
.photo {
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Inset border effect (alternative to border) */
.border-effect {
  box-shadow: inset 0 0 0 1px #ddd;
  /* Shadow creates border-like effect */
}

/* Glow effect (neon) */
.glow-neon {
  box-shadow:
    0 0 10px rgba(0, 255, 0, 0.5),
    0 0 20px rgba(0, 255, 0, 0.3),
    inset 0 0 10px rgba(0, 255, 0, 0.2);
  /* Green neon glow */
}

/* Floating effect */
.floating {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.floating:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
  /* Appears to lift up */
}

/* Long shadow effect */
@keyframes shadow-progress {
  from { box-shadow: 0 0 rgba(0, 0, 0, 0); }
  to { box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.2); }
}

.long-shadow {
  animation: shadow-progress 1s ease forwards;
  /* Shadow expands and blurs */
}

/* Neumorphic (soft UI) design */
.neumorphic {
  background: #e0e5ec;
  box-shadow:
    inset 2px 2px 5px #b8b9be,
    inset -3px -3px 7px #ffffff;
  /* Subtle inset shadows for 3D effect */
}

/* Multiple colored shadows */
.rgb-shadow {
  box-shadow:
    0 4px 8px rgba(255, 0, 0, 0.2),
    0 4px 8px rgba(0, 255, 0, 0.2),
    0 4px 8px rgba(0, 0, 255, 0.2);
  /* Red, green, blue shadows layered */
}

/* Directional shadow (dramatic lighting) */
.directional {
  box-shadow:
    10px 10px 20px rgba(0, 0, 0, 0.3),
    -5px -5px 15px rgba(255, 255, 255, 0.2);
  /* Light from top-left, shadow bottom-right */
}

/* Shadow with animation */
@keyframes pulse-shadow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); }
  50% { box-shadow: 0 0 0 20px rgba(52, 152, 219, 0); }
}

.pulse-shadow {
  animation: pulse-shadow 2s infinite;
  /* Growing pulse effect */
}

/* Multiple inset shadows for depth */
.inset-depth {
  background: white;
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.05),
    inset 0 2px 3px rgba(0, 0, 0, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02);
  /* Layered inset depth */
}

/* Box shadow is GPU accelerated and performant */
.performant {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Smooth, hardware-accelerated */
}

/* Use will-change if animating shadow */
.animated {
  will-change: box-shadow;
  transition: box-shadow 0.3s ease;
}

.animated:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Browser support is excellent (all modern browsers) */
.universal {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Works everywhere */
}

/* No vendor prefixes needed */

/* Avoid excessive blur on large shadows (performance) */
.reasonable {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* Blur 12px is typical maximum */
}

.excessive {
  box-shadow: 0 4px 100px rgba(0, 0, 0, 0.5);
  /* Very large blur can impact performance */
}