/* ========================================
   Catppuccin Mocha + Cyberpunk Theme
   ======================================== */

/* 1. Font Import */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Font family variables */
:root {
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
}

/* 2. CSS Custom Properties (Catppuccin Mocha Colors) */
:root {
  /* Backgrounds */
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;

  /* Surface colors */
  --ctp-surface0: #313244;
  --ctp-surface1: #45475a;
  --ctp-surface2: #585b70;

  /* Text colors */
  --ctp-text: #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;

  /* Overlay colors */
  --ctp-overlay0: #6c7086;
  --ctp-overlay1: #7f849c;
  --ctp-overlay2: #9399b2;

  /* Accent colors */
  --ctp-blue: #89b4fa;
  --ctp-lavender: #b4befe;
  --ctp-sapphire: #74c7ec;
  --ctp-sky: #89dceb;
  --ctp-teal: #94e2d5;
  --ctp-green: #a6e3a1;
  --ctp-yellow: #f9e2af;
  --ctp-peach: #fab387;
  --ctp-maroon: #eba0ac;
  --ctp-red: #f38ba8;
  --ctp-mauve: #cba6f7;
  --ctp-pink: #f5c2e7;
  --ctp-flamingo: #f2cdcd;
  --ctp-rosewater: #f5e0dc;
}

/* 3. Base Overrides */
body,
html {
  background-color: var(--ctp-base) !important;
  color: var(--ctp-text) !important;
  font-family: var(--font-body);
  line-height: 1.7;
}

/* Layered atmospheric background */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 30%, rgba(137, 180, 250, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(203, 166, 247, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: -2;
}

/* Subtle noise texture overlay */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}


/* 4. Typography */

/* Headings - Display font with hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ctp-text) !important;
  letter-spacing: -0.02em;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--ctp-blue) 0%, var(--ctp-lavender) 50%, var(--ctp-mauve) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 2rem;
  margin-top: 2.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid transparent;
  background-image: linear-gradient(to right, var(--ctp-blue), var(--ctp-lavender), var(--ctp-mauve), var(--ctp-pink));
  background-size: 200% 2px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  animation: gradientShift 8s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 100% 100%;
  }
}

h3 {
  font-size: 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid;
}

h3:nth-of-type(4n+1) {
  border-left-color: var(--ctp-blue);
}

h3:nth-of-type(4n+2) {
  border-left-color: var(--ctp-lavender);
}

h3:nth-of-type(4n+3) {
  border-left-color: var(--ctp-mauve);
}

h3:nth-of-type(4n+4) {
  border-left-color: var(--ctp-sapphire);
}

h4 {
  font-size: 1.25rem;
}

h5, h6 {
  font-size: 1.1rem;
}


/* Post title - larger and more prominent */
.post-title {
  font-size: 2.75rem !important;
  font-family: var(--font-display) !important;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
}

/* Body text - improved readability */
body,
p {
  font-family: var(--font-body);
  line-height: 1.7;
  font-size: 1.05rem;
}

.post-content p {
  margin-bottom: 1.5rem;
}

/* Code and technical elements - monospace */
code,
pre,
.highlight {
  font-family: var(--font-mono) !important;
}

/* Post metadata with monospace font */
.post-meta {
  font-family: var(--font-mono) !important;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  color: var(--ctp-subtext1) !important;
}

/* 5. Links & Interactions */
a {
  color: var(--ctp-blue) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

a:hover {
  color: var(--ctp-lavender) !important;
  text-shadow: 0 0 8px rgba(180, 190, 254, 0.3);
  transform: translateY(-1px);
}

a:visited {
  color: var(--ctp-sapphire) !important;
}

/* Animated underlines for post links */
.post-list a {
  text-decoration: none;
  background-image: linear-gradient(to right, var(--ctp-blue), var(--ctp-lavender));
  background-size: 0% 2px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-list a:hover {
  background-size: 100% 2px;
}

/* 6. Code Blocks */
pre {
  background-color: var(--ctp-crust) !important;
  border-left: 3px solid var(--ctp-blue);
  box-shadow:
    -2px 0 8px rgba(137, 180, 250, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(137, 180, 250, 0.1);
  padding: 1em !important;
  border-radius: 4px;
  overflow-x: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

pre:hover {
  border-left-width: 5px;
  box-shadow:
    -4px 0 16px rgba(137, 180, 250, 0.25),
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(137, 180, 250, 0.2);
  transform: translateX(2px);
}

code {
  background-color: var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  padding: 1px 3px;
  border-radius: 3px;
  font-size: 0.9em;
}

pre code {
  background-color: transparent !important;
  padding: 0;
}

/* 7. Post Navigation */
hr {
  margin-top: 30px;
  margin-bottom: 20px;
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--ctp-blue), var(--ctp-lavender), var(--ctp-mauve), transparent);
  position: relative;
}

hr::after {
  content: '◆';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--ctp-base);
  padding: 0 1rem;
  color: var(--ctp-lavender);
  font-size: 0.8rem;
}

.post_navi {
  display: flex;
}

.post_navi-label {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
  color: var(--ctp-subtext0) !important;
}

.post_navi .post_navi-item {
  padding: 0 2.2em;
  width: 50%;
  position: relative;
  color: var(--ctp-text) !important;
  transition: all 0.2s ease;
}

.post_navi .post_navi-item:hover {
  color: var(--ctp-lavender) !important;
}

.post_navi .nav_prev {
  text-align: left;
}

.post_navi .nav_next {
  text-align: right;
}

.post_navi .nav_prev .post_navi-arrow {
  left: 0;
}

.post_navi .nav_next .post_navi-arrow {
  right: 0;
}

.post_navi .post_navi-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.5em;
  opacity: 0.6;
  color: var(--ctp-sapphire) !important;
  transition: all 0.2s ease;
}

.post_navi .post_navi-item:hover .post_navi-arrow {
  opacity: 1;
  text-shadow: 0 0 8px rgba(116, 199, 236, 0.4);
}

/* Add monospace prefixes to navigation labels */
.post_navi .nav_prev .post_navi-label::before {
  content: "< ";
  color: var(--ctp-sapphire);
}

.post_navi .nav_next .post_navi-label::before {
  content: "> ";
  color: var(--ctp-sapphire);
}

/* 8. Site Header & Footer */
.site-header {
  background-color: var(--ctp-mantle) !important;
  border-bottom: 1px solid var(--ctp-surface0) !important;
}

.site-title,
.site-title:visited {
  color: var(--ctp-text) !important;
}

/* Terminal-style prompt before site title */
.site-title::before {
  content: "> ";
  color: var(--ctp-green);
  font-family: "JetBrains Mono", monospace;
}

.site-nav .page-link {
  color: var(--ctp-subtext1) !important;
}

.site-nav .page-link:hover {
  color: var(--ctp-lavender) !important;
}

.site-footer {
  background-color: var(--ctp-mantle) !important;
  border-top: 1px solid var(--ctp-surface0) !important;
  color: var(--ctp-subtext1) !important;
}

/* 9. Post Content */
.post-title {
  color: var(--ctp-text) !important;
}

.post-content {
  color: var(--ctp-text) !important;
}

.post-content p {
  color: var(--ctp-text) !important;
}

/* 10. Tags & Categories - Color Coded */
.post-meta a {
  font-family: var(--font-mono) !important;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75em;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: inline-block;
  margin: 2px;
}

/* Blue tags: data, analysis, database, sql */
.post-meta a[href*="data"],
.post-meta a[href*="analysis"],
.post-meta a[href*="database"],
.post-meta a[href*="sql"] {
  border-color: var(--ctp-blue);
  color: var(--ctp-blue);
}

.post-meta a[href*="data"]:hover,
.post-meta a[href*="analysis"]:hover,
.post-meta a[href*="database"]:hover,
.post-meta a[href*="sql"]:hover {
  background: var(--ctp-blue);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(137, 180, 250, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Green tags: setup, tool, workflow, config */
.post-meta a[href*="setup"],
.post-meta a[href*="tool"],
.post-meta a[href*="workflow"],
.post-meta a[href*="config"] {
  border-color: var(--ctp-green);
  color: var(--ctp-green);
}

.post-meta a[href*="setup"]:hover,
.post-meta a[href*="tool"]:hover,
.post-meta a[href*="workflow"]:hover,
.post-meta a[href*="config"]:hover {
  background: var(--ctp-green);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(166, 227, 161, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Yellow tags: learning, tip, tutorial, guide */
.post-meta a[href*="learning"],
.post-meta a[href*="tip"],
.post-meta a[href*="tutorial"],
.post-meta a[href*="guide"] {
  border-color: var(--ctp-yellow);
  color: var(--ctp-yellow);
}

.post-meta a[href*="learning"]:hover,
.post-meta a[href*="tip"]:hover,
.post-meta a[href*="tutorial"]:hover,
.post-meta a[href*="guide"]:hover {
  background: var(--ctp-yellow);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(249, 226, 175, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Peach tags: python, r, code, programming */
.post-meta a[href*="python"],
.post-meta a[href*="r"],
.post-meta a[href*="code"],
.post-meta a[href*="programming"] {
  border-color: var(--ctp-peach);
  color: var(--ctp-peach);
}

.post-meta a[href*="python"]:hover,
.post-meta a[href*="r"]:hover,
.post-meta a[href*="code"]:hover,
.post-meta a[href*="programming"]:hover {
  background: var(--ctp-peach);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(250, 179, 135, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Mauve tags: ai, ml, automation, agent */
.post-meta a[href*="ai"],
.post-meta a[href*="ml"],
.post-meta a[href*="automation"],
.post-meta a[href*="agent"] {
  border-color: var(--ctp-mauve);
  color: var(--ctp-mauve);
}

.post-meta a[href*="ai"]:hover,
.post-meta a[href*="ml"]:hover,
.post-meta a[href*="automation"]:hover,
.post-meta a[href*="agent"]:hover {
  background: var(--ctp-mauve);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(203, 166, 247, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Pink tags: design, ui, ux, visual */
.post-meta a[href*="design"],
.post-meta a[href*="ui"],
.post-meta a[href*="ux"],
.post-meta a[href*="visual"] {
  border-color: var(--ctp-pink);
  color: var(--ctp-pink);
}

.post-meta a[href*="design"]:hover,
.post-meta a[href*="ui"]:hover,
.post-meta a[href*="ux"]:hover,
.post-meta a[href*="visual"]:hover {
  background: var(--ctp-pink);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(245, 194, 231, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Teal tags: web, api, server, http */
.post-meta a[href*="web"],
.post-meta a[href*="api"],
.post-meta a[href*="server"],
.post-meta a[href*="http"] {
  border-color: var(--ctp-teal);
  color: var(--ctp-teal);
}

.post-meta a[href*="web"]:hover,
.post-meta a[href*="api"]:hover,
.post-meta a[href*="server"]:hover,
.post-meta a[href*="http"]:hover {
  background: var(--ctp-teal);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(148, 226, 213, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Sapphire tags: cloud, docker, devops, deploy */
.post-meta a[href*="cloud"],
.post-meta a[href*="docker"],
.post-meta a[href*="devops"],
.post-meta a[href*="deploy"] {
  border-color: var(--ctp-sapphire);
  color: var(--ctp-sapphire);
}

.post-meta a[href*="cloud"]:hover,
.post-meta a[href*="docker"]:hover,
.post-meta a[href*="devops"]:hover,
.post-meta a[href*="deploy"]:hover {
  background: var(--ctp-sapphire);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(116, 199, 236, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Red tags: debug, error, fix, issue */
.post-meta a[href*="debug"],
.post-meta a[href*="error"],
.post-meta a[href*="fix"],
.post-meta a[href*="issue"] {
  border-color: var(--ctp-red);
  color: var(--ctp-red);
}

.post-meta a[href*="debug"]:hover,
.post-meta a[href*="error"]:hover,
.post-meta a[href*="fix"]:hover,
.post-meta a[href*="issue"]:hover {
  background: var(--ctp-red);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(243, 139, 168, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Maroon tags: performance, optimization, speed */
.post-meta a[href*="performance"],
.post-meta a[href*="optimization"],
.post-meta a[href*="speed"] {
  border-color: var(--ctp-maroon);
  color: var(--ctp-maroon);
}

.post-meta a[href*="performance"]:hover,
.post-meta a[href*="optimization"]:hover,
.post-meta a[href*="speed"]:hover {
  background: var(--ctp-maroon);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(235, 160, 172, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Lavender tags: docs, reference, documentation */
.post-meta a[href*="docs"],
.post-meta a[href*="reference"],
.post-meta a[href*="documentation"] {
  border-color: var(--ctp-lavender);
  color: var(--ctp-lavender);
}

.post-meta a[href*="docs"]:hover,
.post-meta a[href*="reference"]:hover,
.post-meta a[href*="documentation"]:hover {
  background: var(--ctp-lavender);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(180, 190, 254, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Sky tags: test, qa, quality, validation */
.post-meta a[href*="test"],
.post-meta a[href*="qa"],
.post-meta a[href*="quality"],
.post-meta a[href*="validation"] {
  border-color: var(--ctp-sky);
  color: var(--ctp-sky);
}

.post-meta a[href*="test"]:hover,
.post-meta a[href*="qa"]:hover,
.post-meta a[href*="quality"]:hover,
.post-meta a[href*="validation"]:hover {
  background: var(--ctp-sky);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(137, 220, 235, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Flamingo tags: other, misc (default fallback) */
.post-meta a {
  border-color: var(--ctp-flamingo);
  color: var(--ctp-flamingo);
}

.post-meta a:hover {
  background: var(--ctp-flamingo);
  color: var(--ctp-base);
  box-shadow: 0 0 12px rgba(242, 205, 205, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* 11. Wrapper & Page Content */
.wrapper {
  background-color: transparent;
}

.page-content {
  background-color: transparent;
}

/* 12. Tables */
table {
  border-collapse: collapse;
  border: 1px solid var(--ctp-surface0) !important;
}

table th {
  background-color: var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  border: 1px solid var(--ctp-surface1) !important;
  padding: 0.5em !important;
}

table td {
  border: 1px solid var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  padding: 0.5em !important;
}

/* Alternating row colors for better readability */
table tr:nth-child(even) {
  background-color: var(--ctp-mantle) !important;
}

table tr:nth-child(odd) {
  background-color: transparent !important;
}

/* 13. Blockquotes */
blockquote {
  border-left: 4px solid var(--ctp-blue) !important;
  color: var(--ctp-subtext1) !important;
  background: linear-gradient(135deg, rgba(24, 24, 37, 0.8) 0%, rgba(49, 50, 68, 0.4) 100%);
  padding: 1em 1.5em;
  border-radius: 0 8px 8px 0;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(137, 180, 250, 0.1);
  position: relative;
  margin: 1.5rem 0;
}

blockquote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 10px;
  font-size: 4rem;
  color: var(--ctp-blue);
  opacity: 0.2;
  font-family: Georgia, serif;
  line-height: 1;
}

/* 14. Share Buttons - Compact Toolbar */
.share-links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.75rem 0 1.25rem;
}

.share-links > span[style*="color: silver"] {
  background: linear-gradient(135deg, var(--ctp-overlay1), var(--ctp-lavender));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

#share-buttons {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  margin: 0;
  background: rgba(49, 50, 68, 0.5);
  border: 1px solid var(--ctp-surface1);
  border-radius: 6px;
  padding: 3px;
}

#share-buttons > div {
  position: relative;
  padding: 0;
  border-radius: 4px;
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 28px;
  min-width: unset;
  background: transparent;
}

#share-buttons > div > svg {
  height: 14px;
  width: 14px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Facebook - Blue */
#share-buttons > div.facebook > svg {
  fill: var(--ctp-blue);
}

#share-buttons > div.facebook:hover {
  background: rgba(137, 180, 250, 0.15);
}

#share-buttons > div.facebook:hover > svg {
  fill: var(--ctp-blue);
  filter: drop-shadow(0 0 4px rgba(137, 180, 250, 0.5));
}

/* Twitter - Sky */
#share-buttons > div.twitter > svg {
  fill: var(--ctp-sky);
}

#share-buttons > div.twitter:hover {
  background: rgba(137, 220, 235, 0.15);
}

#share-buttons > div.twitter:hover > svg {
  fill: var(--ctp-sky);
  filter: drop-shadow(0 0 4px rgba(137, 220, 235, 0.5));
}

/* LinkedIn - Sapphire */
#share-buttons > div.linkedin > svg {
  fill: var(--ctp-sapphire);
}

#share-buttons > div.linkedin:hover {
  background: rgba(116, 199, 236, 0.15);
}

#share-buttons > div.linkedin:hover > svg {
  fill: var(--ctp-sapphire);
  filter: drop-shadow(0 0 4px rgba(116, 199, 236, 0.5));
}

/* Google Plus - Peach */
#share-buttons > div.gplus > svg {
  fill: var(--ctp-peach);
}

#share-buttons > div.gplus:hover {
  background: rgba(250, 179, 135, 0.15);
}

#share-buttons > div.gplus:hover > svg {
  fill: var(--ctp-peach);
  filter: drop-shadow(0 0 4px rgba(250, 179, 135, 0.5));
}

/* Mail - Lavender */
#share-buttons > div.mail > svg {
  fill: var(--ctp-lavender);
}

#share-buttons > div.mail:hover {
  background: rgba(180, 190, 254, 0.15);
}

#share-buttons > div.mail:hover > svg {
  fill: var(--ctp-lavender);
  filter: drop-shadow(0 0 4px rgba(180, 190, 254, 0.5));
}

/* Instagram - Pink */
#share-buttons > div.instagram > svg {
  fill: var(--ctp-pink);
}

#share-buttons > div.instagram:hover {
  background: rgba(245, 194, 231, 0.15);
}

#share-buttons > div.instagram:hover > svg {
  fill: var(--ctp-pink);
  filter: drop-shadow(0 0 4px rgba(245, 194, 231, 0.5));
}

/* 17. Post Card Depth & Elevation */
.post-list > li {
  background: linear-gradient(135deg, rgba(49, 50, 68, 0.3) 0%, rgba(24, 24, 37, 0.3) 100%);
  border: 1px solid var(--ctp-surface0);
  border-left: 3px solid var(--ctp-blue);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(137, 180, 250, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Cycling left-border colors using all 13 Catppuccin colors */
.post-list > li:nth-child(13n+1)  { border-left-color: var(--ctp-blue); }
.post-list > li:nth-child(13n+2)  { border-left-color: var(--ctp-lavender); }
.post-list > li:nth-child(13n+3)  { border-left-color: var(--ctp-sapphire); }
.post-list > li:nth-child(13n+4)  { border-left-color: var(--ctp-sky); }
.post-list > li:nth-child(13n+5)  { border-left-color: var(--ctp-teal); }
.post-list > li:nth-child(13n+6)  { border-left-color: var(--ctp-green); }
.post-list > li:nth-child(13n+7)  { border-left-color: var(--ctp-yellow); }
.post-list > li:nth-child(13n+8)  { border-left-color: var(--ctp-peach); }
.post-list > li:nth-child(13n+9)  { border-left-color: var(--ctp-maroon); }
.post-list > li:nth-child(13n+10) { border-left-color: var(--ctp-red); }
.post-list > li:nth-child(13n+11) { border-left-color: var(--ctp-mauve); }
.post-list > li:nth-child(13n+12) { border-left-color: var(--ctp-pink); }
.post-list > li:nth-child(13n)    { border-left-color: var(--ctp-flamingo); }

.post-list > li:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(137, 180, 250, 0.1);
  border-color: var(--ctp-blue);
}

.post-list > li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(137, 180, 250, 0.05) 0%, transparent 100%);
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.post-list > li:hover::before {
  opacity: 1;
}

/* 18. Pull Quotes & Callouts */

/* Pull quote - floated right */
.pullquote {
  float: right;
  width: 40%;
  margin: 0 0 1rem 2rem;
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ctp-lavender);
  border-left: 4px solid var(--ctp-lavender);
  background: linear-gradient(135deg, rgba(180, 190, 254, 0.1) 0%, transparent 100%);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Callout boxes */
.callout {
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 8px;
  border-left: 4px solid;
  position: relative;
  padding-left: 3rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.callout::before {
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-weight: bold;
  font-size: 1.2rem;
}

.callout.info {
  background: linear-gradient(135deg, rgba(137, 180, 250, 0.15) 0%, rgba(137, 180, 250, 0.05) 100%);
  border-left-color: var(--ctp-blue);
  color: var(--ctp-text);
}

.callout.info::before {
  content: 'i';
  color: var(--ctp-blue);
}

.callout.warning {
  background: linear-gradient(135deg, rgba(249, 226, 175, 0.15) 0%, rgba(249, 226, 175, 0.05) 100%);
  border-left-color: var(--ctp-yellow);
  color: var(--ctp-text);
}

.callout.warning::before {
  content: '!';
  color: var(--ctp-yellow);
}

.callout.success {
  background: linear-gradient(135deg, rgba(166, 227, 161, 0.15) 0%, rgba(166, 227, 161, 0.05) 100%);
  border-left-color: var(--ctp-green);
  color: var(--ctp-text);
}

.callout.success::before {
  content: '✓';
  color: var(--ctp-green);
}

/* 19. Dynamic Content Spacing */

/* Enhanced h2 spacing with separator */
.post-content h2 {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ctp-surface0);
}

.post-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Better list spacing */
.post-content ul,
.post-content ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
}

.post-content li {
  margin: 0.75rem 0;
  line-height: 1.7;
}

/* Image frame treatment */
.post-content img {
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--ctp-surface0);
}

.post-content img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  border-color: var(--ctp-blue);
}

/* Code block spacing */
.post-content pre {
  margin: 2rem 0;
}

/* 16. Micro-interactions & Motion */

/* Keyframe animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 8px rgba(137, 180, 250, 0.3);
  }
  50% {
    text-shadow: 0 0 16px rgba(137, 180, 250, 0.5);
  }
}

/* Staggered content reveal */
.post-header {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.post-content > * {
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.post-content > *:nth-child(1) { animation-delay: 0.1s; }
.post-content > *:nth-child(2) { animation-delay: 0.15s; }
.post-content > *:nth-child(3) { animation-delay: 0.2s; }
.post-content > *:nth-child(4) { animation-delay: 0.25s; }
.post-content > *:nth-child(5) { animation-delay: 0.3s; }
.post-content > *:nth-child(n+6) { animation-delay: 0.35s; }

/* Share buttons stagger */
#share-buttons > div {
  animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

#share-buttons > div:nth-child(1) { animation-delay: 0.5s; }
#share-buttons > div:nth-child(2) { animation-delay: 0.55s; }
#share-buttons > div:nth-child(3) { animation-delay: 0.6s; }
#share-buttons > div:nth-child(4) { animation-delay: 0.65s; }
#share-buttons > div:nth-child(5) { animation-delay: 0.7s; }
#share-buttons > div:nth-child(6) { animation-delay: 0.75s; }

/* Navigation slides in from sides */
.post_navi .nav_prev {
  animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards 0.4s;
}

.post_navi .nav_next {
  animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards 0.4s;
}

/* Accessibility: Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 15. Responsive Adjustments */
@media screen and (max-width: 768px) {
  /* Disable grid background on mobile for better performance */
  body {
    background-image: none;
  }

  /* Adjust navigation spacing on mobile */
  .post_navi .post_navi-item {
    padding: 0 1em;
  }

  .post_navi .post_navi-arrow {
    font-size: 2em;
  }
}