/* --- Zed Fonts -------------------------------------------------- */
/* Loads your custom fonts */

@font-face {
  font-family: "Zed Mono";
  src: url("../fonts/zed-mono-extended.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Zed Sans";
  src: url("../fonts/zed-sans-extended.ttf") format("truetype");
  font-display: swap;
}

/* --- Global Font Bindings --------------------------------------- */
/* Tells Material to use your fonts */

:root {
  --md-text-font: "Zed Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --md-code-font: "Zed Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* --- zyx-gray Color Scheme -------------------------------------- */
/* This is your main theme definition. All Material variables are   */
/* mapped here from your custom palette.                          */

[data-md-color-scheme="zyx-gray"] {
  color-scheme: dark;

  /* 1. Your Custom Palette */
  /* surface scale (dark → light) */
  --g0: #0f1012;  /* page */
  --g1: #121316;  /* header / rails */
  --g2: #15171a;  /* content background */
  --g3: #1a1c20;  /* cards / code */
  --g4: #202226;  /* hover / active */

  /* borders & shadows */
  --br1: #23252a;
  --br2: #2a2c31;
  --sh1: 0 0 0 1px var(--br1), 0 8px 24px rgba(0,0,0,.35);
  --sh2: 0 0 0 1px var(--br2), 0 14px 40px rgba(0,0,0,.5);

  /* text */
  --tx1: #e7e8ea; /* primary text */
  --tx2: #c9cbd1; /* secondary text */
  --tx3: #9ea2a9; /* tertiary text */

  /* accent */
  --acc: #90dfe2;
  --acc-weak: color-mix(in oklab, var(--acc) 22%, transparent);

  /* code */
  --code-bg: #17191d; /* code block background */
  --code-fg: #eae6e3; /* code block foreground (pre-pygments) */
  --code-hl: #22252b; /* code block highlighted line */

  /* 2. Sizing Fix */
  /* This *correctly* sets the code font size. */
  /* The default is 0.9em. 0.94em is slightly larger. */
  --md-code-font-size: 0.94em;

  /* 3. Material Token Mapping */
  --md-primary-fg-color:               var(--g1);
  --md-primary-fg-color--light:        var(--g2);
  --md-primary-fg-color--dark:         var(--g0);
  --md-primary-bg-color:               var(--tx1);
  --md-primary-bg-color--light:        var(--tx2);

  --md-accent-fg-color:                var(--acc);
  --md-accent-fg-color--transparent:   var(--acc-weak);

  --md-default-bg-color:               var(--g0);
  --md-default-bg-color--light:        var(--g1);
  --md-default-bg-color--lighter:      var(--g2);
  --md-default-bg-color--lightest:     var(--g3);

  --md-default-fg-color:               var(--tx1);
  --md-default-fg-color--light:        var(--tx2);
  --md-default-fg-color--lighter:      var(--tx3);
  --md-default-fg-color--lightest:     #7b8087;

  --md-typeset-color:                  var(--tx1);
  --md-typeset-a-color:                var(--acc);

  --md-code-bg-color:                  var(--code-bg);
  --md-code-fg-color:                  var(--code-fg);
  --md-code-hl-color:                  var(--code-hl);
  --md-code-hl-number-color:           var(--tx3);

  --md-typeset-table-color:            var(--g3);
  --md-typeset-table-color--light:     var(--g2);

  --md-admonition-fg-color:            var(--tx1);
  --md-admonition-bg-color:            var(--g3);

  --md-footer-fg-color:                var(--tx2);
  --md-footer-fg-color--light:         var(--tx3);
  --md-footer-fg-color--lighter:       #7f848b;
  --md-footer-bg-color:                var(--g1);
  --md-footer-bg-color--dark:          var(--g0);

  --md-shadow-z1:                      var(--sh1);
  --md-shadow-z2:                      var(--sh2);
  --md-shadow-z3:                      var(--sh2);
}

/* --- Typeset Improvements (Bold, Italic, Inline Code) --------- */
/* Provides better distinction for inline markdown elements.      */

/* Inline Code: `code` */
[data-md-color-scheme="zyx-gray"] code:not(pre > code) {
  background-color: var(--g3);
  border: 1px solid var(--br1);
  color: var(--tx2); /* Use secondary text color for inline code */
  font-size: 0.94em; /* Match block code size */
  line-height: 1.4;
  vertical-align: middle;
  padding: 0.1em 0.3em;
  border-radius: 4px;
  /* Prevents long code from breaking out of lists/tables */
  word-break: break-word; 
}

/* Bold: **text** */
[data-md-color-scheme="zyx-gray"] strong {
  font-weight: 700;
  color: var(--tx1); /* Use primary text color to make it pop */
}

/* Italic: *text* */
[data-md-color-scheme="zyx-gray"] em {
  font-style: italic;
  color: var(--tx2); /* Use secondary text color to make it softer */
}

/* Bold Italic: ***text*** */
[data-md-color-scheme="zyx-gray"] strong em,
[data-md-color-scheme="zyx-gray"] em strong {
  font-weight: 700;
  font-style: italic;
  color: var(--tx2);
}

/* Blockquotes: > text */
[data-md-color-scheme="zyx-gray"] blockquote {
  font-size: 0.9em;
  color: var(--tx3);
  opacity: 0.85;
}

/* --- Pygments Syntax Highlighting: One Dark Pro Theme --------- */
/* This section styles all Pygments tokens to match One Dark Pro. */
/* All `!important` flags have been removed.                      */

[data-md-color-scheme="zyx-gray"] .highlight {
  /* 1. One Dark Pro Palette */
  --odp-fg:      #abb2bf; /* Default Text */
  --odp-fg-weak: #5c6370; /* Comments (italic) */
  --odp-red:     #e06c75; /* Variables, operators */
  --odp-green:   #98c379; /* Strings */
  --odp-yellow:  #e5c07b; /* Classes, Types, Decorators */
  --odp-orange:  #d19a66; /* Numbers, Constants (True/False) */
  --odp-blue:    #61afef; /* Functions, Methods */
  --odp-purple:  #c678dd; /* Keywords, Imports (def, if, from) */
  --odp-cyan:    #56b6c2; /* Built-ins, Params, `self` */

  /* 2. Token Mapping */

  /* Default text (variables, punctuation) */
  .n, .p, .hll, .w { color: var(--odp-fg); }

  /* Comments: .c, .c1, .cm, .cp, .cs */
  .c, .c1, .cm, .cp, .cs { color: var(--odp-fg-weak); font-style: italic; }

  /* Keywords: .k, .kc, .kd, .kn, .kp, .kr, .kt */
  /* e.g., def, class, if, else, from, import, return */
  .k, .kc, .kd, .kn, .kp, .kr, .kt { color: var(--odp-purple); }

  /* Functions & Methods: .nf, .nb, .nc, .nd */
  .nf { color: var(--odp-blue); } /* Function names */
  .nb { color: var(--odp-cyan); } /* Built-ins (print, str, int) */
  .nc { color: var(--odp-yellow); } /* Class names */
  .nd { color: var(--odp-yellow); } /* Decorators (@) */

  /* Variables: .nv, .nx, .ne, .bp */
  .nv { color: var(--odp-red); } /* Instance variables */
  .bp { color: var(--odp-cyan); } /* `self` */
  .ne { color: var(--odp-red); } /* Exception names */
  .nx { color: var(--odp-fg); } /* Generic names */

  /* Strings: .s, .s1, .s2, .sb, .sc, .sd, .se, .sh, .si, .sr, .ss, .sx */
  .s, .s1, .s2, .sb, .sc, .sd, .se, .sh, .si, .sr, .ss, .sx { color: var(--odp-green); }

  /* Numbers: .m, .mi, .il, .mf, .mh, .mo */
  .m, .mi, .il, .mf, .mh, .mo { color: var(--odp-orange); }

  /* Constants: .no */
  .no { color: var(--odp-orange); } /* True, False, None */
  
  /* Operators: .o, .ow */
  .o, .ow { color: var(--odp-cyan); } /* +, =, in, is */

  /* Errors & Generic */
  .err, .ge, .gr { color: #f00; font-weight: bold; } /* Errors */
  .gd { color: var(--odp-red); } /* Generic delete */
  .gi { color: var(--odp-green); } /* Generic insert */
}

/* ========== Animated Link Styles ========== */
/* Blue links with animated underline on hover */
.md-content a:not(.md-button):not([class*="md-header"]):not([class*="md-nav"]) {
  color: #4cc9f0;
  text-decoration: none;
  position: relative;
  display: inline-block;
  background-image: linear-gradient(#4cc9f0, #4cc9f0);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s ease, color 0.2s ease;
}

.md-content a:not(.md-button):not([class*="md-header"]):not([class*="md-nav"]):hover {
  color: #10a37f;
  background-size: 100% 2px;
  background-image: linear-gradient(#10a37f, #10a37f);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .md-content a:not(.md-button) {
    transition: color 0.2s ease;
  }
}

/* ========== ZYX Glitch Effect ========== */
/* Wrapper for glitch effect on "zyx" text */
.zyx-glitch {
  position: relative;
  display: inline-block;
  color: var(--zyx-acc-0, #10a37f);
  font-weight: 600;
  cursor: default;
  user-select: none;
}

/* Glitch layers - hidden by default */
.zyx-glitch::before,
.zyx-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

/* Only animate on hover */
.zyx-glitch:hover::before {
  color: #4cc9f0;
  animation: zyx-glitch-1 0.6s infinite linear;
  opacity: 0.8;
  z-index: -1;
}

.zyx-glitch:hover::after {
  color: #c678dd;
  animation: zyx-glitch-2 0.6s infinite linear;
  opacity: 0.8;
  z-index: -2;
}

/* Glitch animation 1 - left/right shifts with clip */
@keyframes zyx-glitch-1 {
  0% {
    clip-path: inset(40% 0 61% 0);
    transform: translate(-2px, 0);
  }
  10% {
    clip-path: inset(92% 0 1% 0);
    transform: translate(2px, 0);
  }
  20% {
    clip-path: inset(43% 0 1% 0);
    transform: translate(-2px, 0);
  }
  30% {
    clip-path: inset(25% 0 58% 0);
    transform: translate(3px, 0);
  }
  40% {
    clip-path: inset(54% 0 7% 0);
    transform: translate(-1px, 0);
  }
  50% {
    clip-path: inset(58% 0 43% 0);
    transform: translate(2px, 0);
  }
  60% {
    clip-path: inset(84% 0 6% 0);
    transform: translate(-2px, 0);
  }
  70% {
    clip-path: inset(17% 0 56% 0);
    transform: translate(1px, 0);
  }
  80% {
    clip-path: inset(63% 0 11% 0);
    transform: translate(-3px, 0);
  }
  90% {
    clip-path: inset(22% 0 67% 0);
    transform: translate(2px, 0);
  }
  100% {
    clip-path: inset(53% 0 26% 0);
    transform: translate(-1px, 0);
  }
}

/* Glitch animation 2 - opposite shifts with different clip */
@keyframes zyx-glitch-2 {
  0% {
    clip-path: inset(65% 0 15% 0);
    transform: translate(2px, 0);
  }
  10% {
    clip-path: inset(13% 0 80% 0);
    transform: translate(-3px, 0);
  }
  20% {
    clip-path: inset(71% 0 15% 0);
    transform: translate(2px, 0);
  }
  30% {
    clip-path: inset(34% 0 42% 0);
    transform: translate(-2px, 0);
  }
  40% {
    clip-path: inset(2% 0 80% 0);
    transform: translate(3px, 0);
  }
  50% {
    clip-path: inset(47% 0 34% 0);
    transform: translate(-1px, 0);
  }
  60% {
    clip-path: inset(81% 0 9% 0);
    transform: translate(2px, 0);
  }
  70% {
    clip-path: inset(39% 0 47% 0);
    transform: translate(-2px, 0);
  }
  80% {
    clip-path: inset(14% 0 73% 0);
    transform: translate(1px, 0);
  }
  90% {
    clip-path: inset(69% 0 2% 0);
    transform: translate(-3px, 0);
  }
  100% {
    clip-path: inset(28% 0 63% 0);
    transform: translate(2px, 0);
  }
}

/* Add subtle glow on hover */
.zyx-glitch:hover {
  text-shadow: 
    0 0 8px color-mix(in oklab, var(--zyx-acc-0, #10a37f) 30%, transparent),
    0 0 12px color-mix(in oklab, #4cc9f0 15%, transparent);
}

/* Disable glitch effect for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .zyx-glitch:hover::before,
  .zyx-glitch:hover::after {
    animation: none;
    opacity: 0;
  }
  
  .zyx-glitch:hover {
    text-shadow: none;
  }
}