/* ==========================================================================
   SLOP MODE — April Fools 2026
   Full creative slop layered on top of the real styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme Switcher
   -------------------------------------------------------------------------- */
.theme-switcher {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 102;
  display: flex;
  background: white;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
  overflow: hidden;
  font-family: var(--font-body);
}

.theme-switcher__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.theme-switcher__btn:hover {
  background: rgba(0,0,0,0.04);
}

.theme-switcher__btn.active {
  background: var(--color-purp-dark);
  color: white;
}

.theme-switcher__btn.active.active--dark {
  background: #1a1a2e;
}

.theme-switcher__btn.active.active--rainbow {
  background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff);
  color: #000;
  animation: rainbow-btn 3s linear infinite;
  background-size: 300% 300%;
}

@keyframes rainbow-btn {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --------------------------------------------------------------------------
   Dark Mode
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg: #0f0f1a;
  --color-surface: #1a1a2e;
  --color-card: #1e1e32;
  --color-card-hover: #25253d;
  --color-ice: #1a1a2e;
  --color-text: #e4e4f0;
  --color-text-secondary: #9494b0;
  --color-text-muted: #5e5e7a;
  --color-border: #2a2a44;
  --color-mintee: #2a4a32;
  --color-mintee-dark: #3a7a4a;
}

[data-theme="dark"] .nav {
  background-color: rgba(15, 15, 26, 0.9);
}

[data-theme="dark"] .under-construction {
  background: repeating-linear-gradient(45deg, #2a2a44, #2a2a44 10px, #1a1a2e 10px, #1a1a2e 20px);
  color: #9494b0;
}

[data-theme="dark"] .skill-tag {
  background-color: rgba(194, 133, 211, 0.1);
}

[data-theme="dark"] .project-card__label {
  background-color: rgba(194, 133, 211, 0.15);
}

[data-theme="dark"] .theme-switcher {
  background: #1e1e32;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

[data-theme="dark"] .theme-switcher__btn {
  color: #9494b0;
}

[data-theme="dark"] .theme-switcher__btn:hover {
  background: rgba(255,255,255,0.05);
}

[data-theme="dark"] .footer {
  border-top-color: #2a2a44;
}

[data-theme="dark"] .contact__link {
  border-color: #2a2a44;
}

[data-theme="dark"] .testimonial::before {
  opacity: 0.08;
}

/* --------------------------------------------------------------------------
   Rainbow Mode — Unicorn Vomit
   -------------------------------------------------------------------------- */
[data-theme="rainbow"] {
  --color-bg: #FFF0F5;
  --color-surface: #E0FFE0;
  --color-card: #FFFACD;
  --color-card-hover: #FFE4E1;
  --color-ice: #E6E6FA;
  --color-text: #8B008B;
  --color-text-secondary: #FF1493;
  --color-text-muted: #FF69B4;
  --color-border: #00FF7F;
  --color-border-active: #FF4500;
  --color-mintee: #00FF00;
  --color-purp: #FF00FF;
  --color-purp-dark: #4B0082;
  --color-melon: #FF6347;
}

[data-theme="rainbow"] body {
  background: linear-gradient(180deg, #FFF0F5 0%, #E0FFFF 20%, #FFFACD 40%, #E6E6FA 60%, #FFE4E1 80%, #F0FFF0 100%);
  background-attachment: fixed;
}

[data-theme="rainbow"] .nav {
  background: linear-gradient(90deg, rgba(255,182,193,0.9), rgba(173,216,230,0.9), rgba(255,255,224,0.9));
  backdrop-filter: blur(12px);
}

[data-theme="rainbow"] .nav__logo .logo-glow {
  background: linear-gradient(135deg, #FF1493, #FF4500, #FFD700, #00FF00, #00CED1, #9400D3);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="rainbow"] .hero__title {
  background: linear-gradient(90deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #8B00FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="rainbow"] .section__title {
  color: #FF1493;
}

[data-theme="rainbow"] .section__title::after {
  background: linear-gradient(90deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #8B00FF);
  height: 6px;
}

[data-theme="rainbow"] .section--tinted {
  background: linear-gradient(135deg, #E6E6FA, #FFE4E1, #E0FFE0, #FFFACD);
}

[data-theme="rainbow"] .approach__card,
[data-theme="rainbow"] .project-card,
[data-theme="rainbow"] .testimonial {
  border-width: 3px;
  border-style: solid;
  border-image: linear-gradient(135deg, #FF1493, #FFD700, #00FF7F, #00CED1, #FF69B4) 1;
  border-radius: 0; /* border-image doesn't work with border-radius, embrace the chaos */
}

[data-theme="rainbow"] .approach__card:hover,
[data-theme="rainbow"] .project-card:hover,
[data-theme="rainbow"] .testimonial:hover {
  border-image: linear-gradient(135deg, #FF4500, #FF00FF, #00FFFF, #ADFF2F, #FF69B4) 1;
  box-shadow: 0 8px 32px rgba(255, 20, 147, 0.3);
}

[data-theme="rainbow"] .skill-tag {
  background: linear-gradient(135deg, rgba(255,105,180,0.15), rgba(255,215,0,0.15));
  color: #8B008B;
  border: 1px solid #FF69B4;
}

[data-theme="rainbow"] .skill-tag--s {
  background: linear-gradient(135deg, #FF69B4, #FF1493) !important;
  color: white !important;
  border: none !important;
}

[data-theme="rainbow"] .skill-tag--a {
  background: linear-gradient(135deg, #00CED1, #20B2AA) !important;
  color: white !important;
  border: none !important;
}

[data-theme="rainbow"] .skill-tag--b {
  background: linear-gradient(135deg, #FFD700, #FFA500) !important;
  color: #333 !important;
  border: none !important;
}

[data-theme="rainbow"] .skill-tag--c {
  background: linear-gradient(135deg, #ADFF2F, #7FFF00) !important;
  color: #333 !important;
  border: none !important;
  font-style: italic;
}

[data-theme="rainbow"] .badge--fire {
  background: linear-gradient(135deg, #FF4500, #FF6347);
  color: white;
  border: none;
}

[data-theme="rainbow"] .badge--verified {
  background: linear-gradient(135deg, #00FF7F, #00FA9A);
  color: #333;
  border: none;
}

[data-theme="rainbow"] .badge--new {
  background: linear-gradient(135deg, #FF00FF, #DA70D6);
  color: white;
  border: none;
}

[data-theme="rainbow"] .contact__link {
  border: 2px solid #FF1493;
  color: #FF1493;
}

[data-theme="rainbow"] .contact__link:hover {
  background: linear-gradient(135deg, #FF69B4, #FF1493);
  color: white;
  border-color: transparent;
}

[data-theme="rainbow"] .under-construction {
  background: repeating-linear-gradient(45deg, #FF69B4, #FF69B4 10px, #FFD700 10px, #FFD700 20px, #00CED1 20px, #00CED1 30px, #ADFF2F 30px, #ADFF2F 40px);
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

[data-theme="rainbow"] .about__quote-box {
  border-left-color: #FF1493;
  background: linear-gradient(135deg, rgba(255,105,180,0.1), rgba(255,215,0,0.1), rgba(0,255,127,0.1));
}

[data-theme="rainbow"] .about__fun-facts {
  border-color: #FF69B4;
  border-style: dashed;
  background: linear-gradient(135deg, rgba(255,182,193,0.2), rgba(255,255,224,0.2), rgba(173,216,230,0.2));
}

[data-theme="rainbow"] .fun-fact__number {
  background: linear-gradient(135deg, #FF1493, #FF4500, #FFD700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="rainbow"] .footer {
  border-top: 3px solid;
  border-image: linear-gradient(90deg, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000FF, #8B00FF) 1;
}

[data-theme="rainbow"] .footer__badge {
  background: linear-gradient(135deg, rgba(255,182,193,0.3), rgba(255,255,224,0.3));
  border-color: #FF69B4;
}

[data-theme="rainbow"] .hero__wave-decoration path {
  fill: #FF69B4;
}

[data-theme="rainbow"] .theme-switcher {
  background: linear-gradient(135deg, #FFB6C1, #FFFACD, #B0E0E6);
  box-shadow: 0 4px 20px rgba(255,105,180,0.3);
}

[data-theme="rainbow"] .contact__urgency {
  background: rgba(255,20,147,0.1);
  border-color: #FF1493;
  color: #FF1493;
}

[data-theme="rainbow"] .pulse-dot {
  background: #FF1493;
}

[data-theme="rainbow"] ::selection {
  background-color: rgba(255, 20, 147, 0.3);
}

/* --------------------------------------------------------------------------
   Under Construction Banner
   -------------------------------------------------------------------------- */
.under-construction {
  background: repeating-linear-gradient(
    45deg,
    #FFF3CD,
    #FFF3CD 10px,
    #FFE69C 10px,
    #FFE69C 20px
  );
  color: #664D03;
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 0;
  text-align: center;
  position: relative;
  z-index: 101;
  letter-spacing: 0.05em;
}

.under-construction marquee span {
  margin: 0 3rem;
}

/* --------------------------------------------------------------------------
   Logo Enhancements
   -------------------------------------------------------------------------- */
.logo-glow {
  position: relative;
  background: linear-gradient(135deg, var(--color-purp-dark), var(--color-purp), var(--color-mintee-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-badge {
  display: inline-block;
  font-size: 0.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  padding: 1px 5px;
  border-radius: 4px;
  vertical-align: super;
  margin-left: 2px;
  font-family: var(--font-body);
  letter-spacing: 0.1em;
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* --------------------------------------------------------------------------
   Hero Slop
   -------------------------------------------------------------------------- */
.avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.avatar-status {
  display: block;
  font-size: 0.6rem;
  color: var(--color-thyme);
  white-space: nowrap;
  margin-top: 4px;
  font-weight: 600;
  animation: status-blink 3s ease-in-out infinite;
}

@keyframes status-blink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0.3; }
}

.hero__kicker {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-purp);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.hero__sub-tagline {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 4px;
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.badge--fire {
  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
  color: #E65100;
  border: 1px solid #FFB74D;
}

.badge--verified {
  background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
  color: #2E7D32;
  border: 1px solid #81C784;
}

.badge--new {
  background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
  color: var(--color-purp-dark);
  border: 1px solid var(--color-purp);
  animation: badge-pulse 2s ease-in-out infinite;
}

.hero__disclaimer {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   About Enhancements
   -------------------------------------------------------------------------- */
.about__quote-box {
  background: linear-gradient(135deg, rgba(194, 133, 211, 0.06), rgba(194, 240, 204, 0.1));
  border-left: 4px solid var(--color-purp);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.about__quote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 400;
  color: var(--color-text);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}

.about__quote-attr {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* Fun Facts / Metrics */
.about__fun-facts {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: linear-gradient(135deg, var(--color-ice), rgba(194, 240, 204, 0.15));
  border-radius: var(--radius-card);
  border: 2px dashed var(--color-mintee);
}

.fun-facts__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  text-align: center;
}

.fun-facts__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  text-align: center;
}

.fun-fact {
  padding: var(--space-sm);
}

.fun-fact__number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.5rem);
  color: var(--color-purp-dark);
  line-height: 1;
}

.fun-fact__suffix {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--color-purp);
}

.fun-fact__label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Approach Enhancements
   -------------------------------------------------------------------------- */
.approach__intro {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  max-width: 680px;
  line-height: 1.75;
}

.approach__icon {
  display: block;
  font-size: 2rem;
  margin-bottom: var(--space-xs);
}

/* --------------------------------------------------------------------------
   Skills Tier System
   -------------------------------------------------------------------------- */
.skills-tier {
  margin-bottom: var(--space-md);
}

.skills-tier__title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.8rem;
  color: #fff;
  flex-shrink: 0;
}

.tier-badge--s { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.tier-badge--a { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.tier-badge--b { background: linear-gradient(135deg, #16a34a, #22c55e); }
.tier-badge--c { background: linear-gradient(135deg, #d97706, #f59e0b); }

.skill-tag--s {
  background-color: rgba(124, 58, 237, 0.08) !important;
  border: 1px solid rgba(124, 58, 237, 0.2);
  color: #7c3aed !important;
}

.skill-tag--a {
  background-color: rgba(37, 99, 235, 0.08) !important;
  border: 1px solid rgba(37, 99, 235, 0.2);
  color: #2563eb !important;
}

.skill-tag--b {
  background-color: rgba(22, 163, 74, 0.08) !important;
  border: 1px solid rgba(22, 163, 74, 0.2);
  color: #16a34a !important;
}

.skill-tag--c {
  background-color: rgba(217, 119, 6, 0.08) !important;
  border: 1px solid rgba(217, 119, 6, 0.2);
  color: #d97706 !important;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Project Card Enhancements
   -------------------------------------------------------------------------- */
.project-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-xs);
}

.project-card__header .project-card__label {
  margin-bottom: 0;
}

.project-card__status {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.project-card__footnote {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.testimonials__grid {
  display: grid;
  gap: var(--space-md);
}

.testimonial {
  background: var(--color-card);
  border: 2px solid var(--color-mintee);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.testimonial:hover {
  border-color: var(--color-purp);
  box-shadow: 0 4px 16px rgba(194, 133, 211, 0.1);
}

.testimonial::before {
  content: "\201C";
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--color-purp);
  opacity: 0.15;
  position: absolute;
  top: 8px;
  left: 16px;
  line-height: 1;
}

.testimonial__text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  font-style: italic;
  margin: 0 0 var(--space-sm);
  position: relative;
  z-index: 1;
}

.testimonial__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial__name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text);
}

.testimonial__role {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Contact Enhancements
   -------------------------------------------------------------------------- */
.contact__urgency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #dc2626;
  font-weight: 500;
  margin-bottom: var(--space-md);
  padding: 8px 16px;
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.15);
  border-radius: var(--radius-pill);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #dc2626;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.contact__fine-print {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  max-width: 520px;
  line-height: 1.5;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Footer Slop
   -------------------------------------------------------------------------- */
.footer__slop {
  text-align: center;
}

.footer__built-with {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.footer__badges-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-sm);
}

.footer__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-ice);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-mintee);
}

.footer__cookie-link {
  font-size: 0.75rem;
  margin-top: var(--space-sm);
}

.footer__cookie-link a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  padding: 12px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.footer__cookie-link a:hover {
  color: var(--color-purp);
  border-color: var(--color-purp);
}

.footer__easter-egg {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  padding-bottom: 120px;
  font-style: italic;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .fun-facts__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}