/* Design Bundle - Panel styles and animations */

/**
 * L-Space Web Design Bundle - Panel Styles (DRAMATIC VARIANTS)
 *
 * Pre-built panel variations with DRAMATIC visual differences
 * Each variant should look DISTINCTLY different, not subtly tweaked
 */

/* ============================================
   BASE GLASS FOUNDATIONS
   ============================================ */

/* Subtle Frost - Light, airy, barely there */

.glass-frosted {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ip-radius-md, 20px);
}

/* Deep Glass - Heavy, substantial, immersive */

.glass-deep {
  background: rgba(20, 20, 40, 0.75);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Crystal Clear - Sharp, refractive, prismatic */

.glass-crystal {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.2) 100%
  );
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ============================================
   GLASS INTENSITY VARIANTS
   ============================================ */

/* Heavy Frost - Maximum blur, obscured background */

.glass-heavy {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(60px) brightness(1.1);
  -webkit-backdrop-filter: blur(60px) brightness(1.1);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Ethereal - Almost invisible, ghost-like */

.glass-ethereal {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--ip-radius-md, 20px);
}

/* Satin - Smooth, fabric-like texture feel */

.glass-satin {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
  backdrop-filter: blur(24px) contrast(1.1);
  -webkit-backdrop-filter: blur(24px) contrast(1.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ============================================
   TINTED GLASS (COLOR INFUSED)
   ============================================ */

/* Purple - Royal, deep, mysterious */

.glass-tinted-purple {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #4A1A6B 30%, rgba(255,255,255,0.9)) 0%,
    color-mix(in srgb, #4A1A6B 15%, rgba(255,255,255,0.7)) 100%
  );
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 2px solid color-mix(in srgb, #4A1A6B 40%, white);
  box-shadow:
    0 0 30px color-mix(in srgb, #4A1A6B 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Pink - Soft, warm, welcoming */

.glass-tinted-pink {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #E47DE8 30%, rgba(255,255,255,0.9)) 0%,
    color-mix(in srgb, #E47DE8 15%, rgba(255,255,255,0.7)) 100%
  );
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 2px solid color-mix(in srgb, #E47DE8 40%, white);
  box-shadow:
    0 0 30px color-mix(in srgb, #E47DE8 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Cyan - Fresh, cool, modern */

.glass-tinted-cyan {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #00E4E4 30%, rgba(255,255,255,0.9)) 0%,
    color-mix(in srgb, #00E4E4 15%, rgba(255,255,255,0.7)) 100%
  );
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 2px solid color-mix(in srgb, #00E4E4 40%, white);
  box-shadow:
    0 0 30px color-mix(in srgb, #00E4E4 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Orange - Energetic, vibrant, bold */

.glass-tinted-orange {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #FF9D4A 30%, rgba(255,255,255,0.9)) 0%,
    color-mix(in srgb, #FF9D4A 15%, rgba(255,255,255,0.7)) 100%
  );
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 2px solid color-mix(in srgb, #FF9D4A 40%, white);
  box-shadow:
    0 0 30px color-mix(in srgb, #FF9D4A 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Yellow - Bright, sunny, cheerful */

.glass-tinted-yellow {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #E4FF1A 30%, rgba(255,255,255,0.9)) 0%,
    color-mix(in srgb, #E4FF1A 15%, rgba(255,255,255,0.7)) 100%
  );
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 2px solid color-mix(in srgb, #E4FF1A 40%, white);
  box-shadow:
    0 0 30px color-mix(in srgb, #E4FF1A 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ============================================
   GLASS WITH DEPTH (3D LAYERED)
   ============================================ */

/* Glass with inner glow depth */

.glass-depth {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  position: relative;
}

.glass-depth::before {
  content: '';
  position: absolute;
  inset: 8px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 50%
  );
  border-radius: calc(var(--ip-radius-md, 20px) - 8px);
  pointer-events: none;
}

/* Glass with raised lip effect */

.glass-raised {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.05),
    0 10px 20px rgba(0, 0, 0, 0.08),
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

/* Glass with inner bevel */

.glass-bevel {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.5),
    inset 0 -2px 3px rgba(0, 0, 0, 0.1),
    0 4px 20px rgba(0, 0, 0, 0.1);
}

/* ============================================
   BORDER VARIANTS (EDGE STYLES)
   ============================================ */

/* Thick bold border */

.glass-border-thick {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 4px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Inner border (inset) */

.glass-border-inset {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.3),
    0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Double border */

.glass-border-double {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Gradient border using mask */

.glass-border-gradient {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--ip-radius-md, 20px);
  z-index: 1;
}

.glass-border-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #bb66ff, #e47de8, #00e4e4, #ffc86b, #eeff66);
  -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;
}

/* Glowing border */

.glass-border-glow {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 20px rgba(187, 102, 255, 0.3);
}

/* ============================================
   SHAPE VARIANTS
   ============================================ */

/* Sharp corners - contrast to rounded */

.glass-sharp {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Pill shape - fully rounded */

.glass-pill {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Squircle - superellipse feel */

.glass-squircle {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 30% 30% 30% 30% / 30% 30% 30% 30%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ============================================
   SHADOW VARIANTS
   ============================================ */

/* Deep drop shadow */

.glass-shadow-deep {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.1),
    0 24px 48px rgba(0, 0, 0, 0.15);
}

/* Soft diffuse shadow */

.glass-shadow-soft {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* Colored shadow glow */

.glass-shadow-glow {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    0 0 60px rgba(187, 102, 255, 0.2);
}

/* Inner shadow (recessed) */

.glass-shadow-inset {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow:
    inset 0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ============================================
   SPECIALTY VARIANTS
   ============================================ */

/* Mirror/Reflective */

.glass-mirror {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.1) 40%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(255, 255, 255, 0.2) 100%
  );
  backdrop-filter: blur(20px) brightness(1.1);
  -webkit-backdrop-filter: blur(20px) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--ip-radius-md, 20px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Aurora - multi-color shimmer background */

.glass-aurora {
  background: linear-gradient(
    135deg,
    rgba(187, 102, 255, 0.15) 0%,
    rgba(228, 125, 232, 0.1) 25%,
    rgba(0, 228, 228, 0.1) 50%,
    rgba(255, 157, 74, 0.1) 75%,
    rgba(228, 255, 26, 0.1) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ip-radius-md, 20px);
}

/* Noise texture overlay */

.glass-noise {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ip-radius-md, 20px);
  position: relative;
  overflow: hidden;
}

.glass-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
}

/* Dot pattern overlay */

.glass-dots {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ip-radius-md, 20px);
  position: relative;
  overflow: hidden;
}

.glass-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 8px 8px;
  pointer-events: none;
}

/* Grid pattern overlay */

.glass-grid {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--ip-radius-md, 20px);
  position: relative;
  overflow: hidden;
}

.glass-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* ============================================
   DOUBLE FRAME (2-Stack)
   ============================================ */

.frame-double {
  padding: 20px;
  border-radius: var(--ip-radius-lg, 35px);
}

.frame-double-purple { background: color-mix(in srgb, #4A1A6B 50%, white); }

.frame-double-pink { background: color-mix(in srgb, #E47DE8 50%, white); }

.frame-double-cyan { background: color-mix(in srgb, #00E4E4 50%, white); }

.frame-double-orange { background: color-mix(in srgb, #FF9D4A 50%, white); }

.frame-double-yellow { background: color-mix(in srgb, #E4FF1A 50%, white); }

.frame-double-inner {
  background: rgba(255, 255, 255, 0.98);
  border-radius: calc(var(--ip-radius-lg, 35px) - 8px);
  padding: var(--ip-padding-lg, 2rem);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ============================================
   TRIPLE FRAME (3-Stack)
   ============================================ */

.frame-triple {
  padding: 24px;
  border-radius: var(--ip-radius-lg, 35px);
}

.frame-triple-outer { background: var(--inf-1-purple, #4A1A6B); }

.frame-triple-middle {
  padding: 20px;
  background: color-mix(in srgb, var(--inf-1-purple, #4A1A6B) 50%, white);
  border-radius: calc(var(--ip-radius-lg, 35px) - 10px);
}

.frame-triple-inner {
  background: rgba(255, 255, 255, 0.98);
  border-radius: calc(var(--ip-radius-lg, 35px) - 20px);
  padding: var(--ip-padding-lg, 2rem);
}

/* ============================================
   OFFSET STACK
   ============================================ */

.stack-offset {
  position: relative;
  background: white;
  border-radius: var(--ip-radius-md, 20px);
  padding: var(--ip-padding-lg, 2rem);
}

.stack-offset::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--stack-color, #4A1A6B) 50%, white);
  transform: translate(8px, 8px);
  z-index: -1;
  opacity: 0.3;
}

.stack-offset::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--stack-color, #4A1A6B) 50%, white);
  transform: translate(4px, 4px);
  z-index: -1;
  opacity: 0.5;
}

/* ============================================
   CASCADE STACK
   ============================================ */

.stack-cascade {
  display: flex;
  flex-direction: column;
}

.cascade-layer-1 {
  background: var(--inf-1-purple, #4A1A6B);
  transform: scale(1);
  opacity: 0.2;
}

.cascade-layer-2 {
  background: color-mix(in srgb, var(--inf-1-purple, #4A1A6B) 50%, white);
  transform: scale(0.95) translateY(-8px);
  opacity: 0.5;
}

.cascade-layer-3 {
  background: white;
  transform: scale(0.9) translateY(-16px);
  opacity: 1;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* ============================================
   OVERLAPPING PANELS
   ============================================ */

.panels-overlap {
  position: relative;
  padding: 40px 20px 20px;
}

.panel-overlap-1 {
  position: relative;
  z-index: 3;
  background: white;
  border-radius: var(--ip-radius-md, 20px);
  padding: var(--ip-padding-lg, 2rem);
}

.panel-overlap-2 {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: -20px;
  z-index: 2;
  background: color-mix(in srgb, var(--panel-color, #4A1A6B) 50%, white);
  border-radius: var(--ip-radius-md, 20px);
  opacity: 0.5;
}

/* ============================================
   CONTENT WINDOW (White on Pink)
   ============================================ */

.content-window {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 238, 245, 0.95) 100%);
  border: 1px solid rgba(74, 26, 107, 0.2);
  border-radius: var(--ip-radius-md, 20px);
  padding: var(--ip-padding-lg, 2rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 20px rgba(74, 26, 107, 0.1);
}

/* ============================================
   CARD BLOCKS
   ============================================ */

.card-block {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--ip-radius-md, 20px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(74, 26, 107, 0.06);
}

.card-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(74, 26, 107, 0.12);
}

/* Colored left border cards */

.card-purple { border-left: 4px solid #4A1A6B; }

.card-pink { border-left: 4px solid #E47DE8; }

.card-cyan { border-left: 4px solid #00E4E4; }

.card-orange { border-left: 4px solid #FF9D4A; }

.card-yellow { border-left: 4px solid #E4FF1A; }

/* ============================================
   GRADIENT BORDER (using wrapper approach)
   ============================================ */

.border-gradient {
  position: relative;
  background: white;
  border-radius: var(--ip-radius-md, 20px);
}

.border-gradient::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #bb66ff, #e47de8, #00e4e4, #ffc86b, #eeff66);
  z-index: -1;
}

/* ============================================
   GLOW EFFECTS
   ============================================ */

.glow-purple {
  box-shadow:
    0 0 20px rgba(74, 26, 107, 0.3),
    0 0 40px rgba(74, 26, 107, 0.2),
    0 0 60px rgba(74, 26, 107, 0.1);
}

.glow-pink {
  box-shadow:
    0 0 20px rgba(228, 125, 232, 0.4),
    0 0 40px rgba(228, 125, 232, 0.2);
}

.glow-cyan {
  box-shadow:
    0 0 20px rgba(0, 228, 228, 0.4),
    0 0 40px rgba(0, 228, 228, 0.2);
}

.glow-orange {
  box-shadow:
    0 0 20px rgba(255, 157, 74, 0.4),
    0 0 40px rgba(255, 157, 74, 0.2);
}

.glow-yellow {
  box-shadow:
    0 0 20px rgba(228, 255, 26, 0.4),
    0 0 40px rgba(228, 255, 26, 0.2);
}

/**
 * L-Space Web Design Bundle - Animation Utilities
 *
 * Drop-in animation classes for sophisticated UI effects
 */

/* ============================================
   WAVE ANIMATIONS
   ============================================ */

@keyframes wave-flow {
  0%, 100% {
    d: path("M0,160 C320,280 420,120 600,160 C780,200 860,80 1200,160 L1200,400 L0,400 Z");
  }
  33% {
    d: path("M0,120 C280,80 420,280 620,200 C820,120 920,260 1200,120 L1200,400 L0,400 Z");
  }
  66% {
    d: path("M0,200 C320,120 480,280 680,160 C880,40 1000,200 1200,200 L1200,400 L0,400 Z");
  }
}

@keyframes wave-horizontal {
  0% { transform: translateX(0); }
  50% { transform: translateX(20px); }
  100% { transform: translateX(0); }
}

@keyframes wave-vertical {
  0% { transform: translateY(0); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}

/* ============================================
   GLOW ANIMATIONS
   ============================================ */

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px var(--glow-color, rgba(74, 26, 107, 0.4));
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 40px var(--glow-color, rgba(74, 26, 107, 0.6));
    opacity: 0.8;
  }
}

@keyframes glow-breathe {
  0%, 100% {
    filter: drop-shadow(0 0 10px var(--glow-color, rgba(74, 26, 107, 0.5)));
  }
  50% {
    filter: drop-shadow(0 0 25px var(--glow-color, rgba(74, 26, 107, 0.8)));
  }
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 4px var(--glow-color, #4A1A6B),
      0 0 11px var(--glow-color, #4A1A6B),
      0 0 19px var(--glow-color, #4A1A6B);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

/* ============================================
   SHIMMER ANIMATIONS
   ============================================ */

@keyframes shimmer-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes shimmer-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

/* ============================================
   FLOAT ANIMATIONS
   ============================================ */

@keyframes float-gentle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-5px) rotate(1deg); }
  50% { transform: translateY(-10px) rotate(0deg); }
  75% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes float-orbit {
  0% { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}

@keyframes float-random {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, -5px); }
  50% { transform: translate(-5px, 10px); }
  75% { transform: translate(-10px, -5px); }
}

/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */

@keyframes rise-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes flip-in {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
}

/* ============================================
   ATTENTION ANIMATIONS
   ============================================ */

@keyframes bounce-attention {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-15px); }
  60% { transform: translateY(-8px); }
}

@keyframes shake-attention {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes pulse-attention {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ============================================
   GRADIENT ANIMATIONS
   ============================================ */

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradient-rotate {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes gradient-flow {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.animate-wave-flow { animation: wave-flow 8s ease-in-out infinite; }

.animate-wave-h { animation: wave-horizontal 3s ease-in-out infinite; }

.animate-wave-v { animation: wave-vertical 4s ease-in-out infinite; }

.animate-glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

.animate-glow-breathe { animation: glow-breathe 4s ease-in-out infinite; }

.animate-neon-flicker { animation: neon-flicker 4s linear infinite; }

.animate-shimmer { animation: shimmer-slide 2s linear infinite; }

.animate-shimmer-rotate { animation: shimmer-rotate 3s linear infinite; }

.animate-shimmer-diagonal { animation: shimmer-diagonal 3s linear infinite; background-size: 200% 200%; }

.animate-float { animation: float-gentle 6s ease-in-out infinite; }

.animate-float-orbit { animation: float-orbit 8s linear infinite; }

.animate-float-random { animation: float-random 8s ease-in-out infinite; }

.animate-rise { animation: rise-up 0.5s cubic-bezier(0.23, 1, 0.32, 1) both; }

.animate-scale-in { animation: scale-in 0.4s cubic-bezier(0.23, 1, 0.32, 1) both; }

.animate-slide-left { animation: slide-in-left 0.5s cubic-bezier(0.23, 1, 0.32, 1) both; }

.animate-slide-right { animation: slide-in-right 0.5s cubic-bezier(0.23, 1, 0.32, 1) both; }

.animate-flip { animation: flip-in 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; }

.animate-bounce-attention { animation: bounce-attention 1s ease infinite; }

.animate-shake { animation: shake-attention 0.8s ease infinite; }

.animate-pulse-attention { animation: pulse-attention 2s ease-in-out infinite; }

.animate-gradient { animation: gradient-shift 10s ease infinite; background-size: 400% 400%; }

.animate-gradient-rotate { animation: gradient-rotate 20s linear infinite; }

.animate-gradient-flow { animation: gradient-flow 15s linear infinite; }

/* Animation Delays */

.delay-100 { animation-delay: 100ms; }

.delay-200 { animation-delay: 200ms; }

.delay-300 { animation-delay: 300ms; }

.delay-400 { animation-delay: 400ms; }

.delay-500 { animation-delay: 500ms; }

.delay-700 { animation-delay: 700ms; }

.delay-1000 { animation-delay: 1000ms; }

/* Animation Durations */

.duration-300 { animation-duration: 300ms; }

.duration-500 { animation-duration: 500ms; }

.duration-700 { animation-duration: 700ms; }

.duration-1000 { animation-duration: 1000ms; }

.duration-2000 { animation-duration: 2000ms; }

.duration-3000 { animation-duration: 3000ms; }

/**
 * L-Space Web Design Bundle - Interactive Panels
 *
 * Magical reveal animations, nested frames, and interactive effects
 */

/* ============================================
   NESTED FRAMES WITH DEPTH
   ============================================ */

/* 3-Level Nested Frame with Drop Shadow */

.nested-frame {
  position: relative;
  padding: 24px;
  border-radius: 28px;
  background: var(--frame-outer-bg, #4A1A6B);
}

.nested-frame-middle {
  padding: 20px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--frame-outer-bg, #4A1A6B) 50%, white);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.1);
}

.nested-frame-inner {
  padding: 24px;
  border-radius: 16px;
  background: white;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Deep Shadow Stack */

.shadow-stack {
  position: relative;
  background: white;
  border-radius: 20px;
}

.shadow-stack::before,
.shadow-stack::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shadow-stack::before {
  background: color-mix(in srgb, var(--stack-color, #4A1A6B) 50%, white);
  transform: translate(12px, 12px);
  opacity: 0.25;
  z-index: -2;
}

.shadow-stack::after {
  background: color-mix(in srgb, var(--stack-color, #4A1A6B) 70%, white);
  transform: translate(6px, 6px);
  opacity: 0.4;
  z-index: -1;
}

.shadow-stack:hover::before {
  transform: translate(16px, 16px);
  opacity: 0.3;
}

.shadow-stack:hover::after {
  transform: translate(8px, 8px);
  opacity: 0.5;
}

/* ============================================
   REVEAL PANELS (Bingo Card Style)
   ============================================ */

.reveal-panel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.reveal-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--reveal-color, #4A1A6B) 50%, white),
    color-mix(in srgb, var(--reveal-color, #4A1A6B) 70%, white));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 10;
  cursor: pointer;
}

.reveal-panel:hover .reveal-cover,
.reveal-panel.revealed .reveal-cover {
  transform: perspective(800px) rotateY(180deg);
  opacity: 0;
}

.reveal-content {
  background: white;
  padding: 24px;
  min-height: 100%;
}

/* Scratch-off reveal */

.reveal-scratch {
  position: relative;
  overflow: hidden;
}

.reveal-scratch::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--reveal-color, #4A1A6B) 50%, white);
  transition: clip-path 0.8s ease;
  clip-path: circle(50% at 50% 50%);
  z-index: 5;
}

.reveal-scratch:hover::before {
  clip-path: circle(0% at 50% 50%);
}

/* Slide reveal */

.reveal-slide {
  position: relative;
  overflow: hidden;
}

.reveal-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--reveal-color, #4A1A6B) 50%, white);
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 5;
}

.reveal-slide:hover::before {
  transform: translateX(100%);
}

/* Zoom reveal */

.reveal-zoom {
  position: relative;
  overflow: hidden;
}

.reveal-zoom::before {
  content: '';
  position: absolute;
  inset: -10px;
  background: color-mix(in srgb, var(--reveal-color, #4A1A6B) 50%, white);
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 5;
  border-radius: inherit;
}

.reveal-zoom:hover::before {
  transform: scale(0);
}

/* ============================================
   BLEND LAYERS
   ============================================ */

.blend-container {
  position: relative;
  background: white;
  border-radius: 20px;
  overflow: hidden;
}

.blend-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.blend-multiply { mix-blend-mode: multiply; }

.blend-screen { mix-blend-mode: screen; }

.blend-overlay { mix-blend-mode: overlay; }

.blend-soft-light { mix-blend-mode: soft-light; }

.blend-hard-light { mix-blend-mode: hard-light; }

.blend-color-dodge { mix-blend-mode: color-dodge; }

.blend-color-burn { mix-blend-mode: color-burn; }

.blend-difference { mix-blend-mode: difference; }

.blend-exclusion { mix-blend-mode: exclusion; }

.blend-hue { mix-blend-mode: hue; }

.blend-saturation { mix-blend-mode: saturation; }

.blend-color { mix-blend-mode: color; }

.blend-luminosity { mix-blend-mode: luminosity; }

/* Interactive blend toggle */

.blend-toggle {
  transition: mix-blend-mode 0.3s ease;
}

.blend-toggle:hover {
  mix-blend-mode: overlay;
}

/* ============================================
   FOLD EFFECTS
   ============================================ */

.fold-corner {
  position: relative;
  overflow: hidden;
}

.fold-corner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 40px 40px 0;
  border-color: transparent color-mix(in srgb, var(--fold-color, #4A1A6B) 30%, white) transparent transparent;
  transition: all 0.3s ease;
  z-index: 10;
}

.fold-corner:hover::before {
  border-width: 0 60px 60px 0;
}

/* Page curl */

.curl-page {
  position: relative;
  background: white;
  transition: all 0.3s ease;
}

.curl-page::before,
.curl-page::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.1) 50%);
  transition: all 0.3s ease;
}

.curl-page:hover {
  box-shadow:
    -2px 2px 5px rgba(0,0,0,0.1),
    -5px 5px 10px rgba(0,0,0,0.05);
}

.curl-page:hover::before {
  transform: rotate(-5deg);
}

/* ============================================
   DOOR EFFECTS
   ============================================ */

.door-panel {
  position: relative;
  perspective: 1000px;
  overflow: hidden;
}

.door-left,
.door-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: color-mix(in srgb, var(--door-color, #4A1A6B) 50%, white);
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 10;
}

.door-left {
  left: 0;
  transform-origin: left center;
  border-right: 1px solid rgba(255,255,255,0.3);
}

.door-right {
  right: 0;
  transform-origin: right center;
  border-left: 1px solid rgba(255,255,255,0.3);
}

.door-panel:hover .door-left {
  transform: rotateY(-110deg);
}

.door-panel:hover .door-right {
  transform: rotateY(110deg);
}

/* ============================================
   SHUTTER EFFECTS
   ============================================ */

.shutter-h {
  position: relative;
  overflow: hidden;
}

.shutter-h::before,
.shutter-h::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: color-mix(in srgb, var(--shutter-color, #4A1A6B) 50%, white);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 10;
}

.shutter-h::before {
  left: 0;
}

.shutter-h::after {
  right: 0;
}

.shutter-h:hover::before {
  transform: translateX(-100%);
}

.shutter-h:hover::after {
  transform: translateX(100%);
}

/* Vertical shutter */

.shutter-v {
  position: relative;
  overflow: hidden;
}

.shutter-v::before,
.shutter-v::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: color-mix(in srgb, var(--shutter-color, #4A1A6B) 50%, white);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 10;
}

.shutter-v::before {
  top: 0;
}

.shutter-v::after {
  bottom: 0;
}

.shutter-v:hover::before {
  transform: translateY(-100%);
}

.shutter-v:hover::after {
  transform: translateY(100%);
}

/* ============================================
   BLINDS EFFECT
   ============================================ */

.blinds {
  position: relative;
  overflow: hidden;
}

.blinds-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 20%;
  background: color-mix(in srgb, var(--blinds-color, #4A1A6B) 50%, white);
  transition: transform 0.4s ease;
  z-index: 10;
}

.blinds-bar:nth-child(1) { top: 0; }

.blinds-bar:nth-child(2) { top: 20%; }

.blinds-bar:nth-child(3) { top: 40%; }

.blinds-bar:nth-child(4) { top: 60%; }

.blinds-bar:nth-child(5) { top: 80%; }

.blinds:hover .blinds-bar {
  transform: scaleX(0);
  transform-origin: left;
}

.blinds-bar:nth-child(2) { transition-delay: 0.05s; }

.blinds-bar:nth-child(3) { transition-delay: 0.1s; }

.blinds-bar:nth-child(4) { transition-delay: 0.15s; }

.blinds-bar:nth-child(5) { transition-delay: 0.2s; }

/* ============================================
   PEEL EFFECT
   ============================================ */

.peel {
  position: relative;
  overflow: hidden;
}

.peel-layer {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--peel-color, #4A1A6B) 50%, white);
  transform-origin: top right;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 10;
}

.peel:hover .peel-layer {
  transform: rotate(-15deg) translate(20px, -20px);
}

/* ============================================
   RIPPLE REVEAL
   ============================================ */

.ripple-reveal {
  position: relative;
  overflow: hidden;
}

.ripple-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--ripple-color, #4A1A6B) 50%, white);
  border-radius: 100%;
  transform: scale(2);
  opacity: 1;
  transition: all 0.6s ease;
  z-index: 10;
}

.ripple-reveal:hover::before {
  transform: scale(0);
  opacity: 0;
}

*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}