@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap');

:root {
  --hue1: 255;
  --hue2: 222;

  --border: 5px; /* default = 1px */
  --border-color: hsl(var(--hue2), 12%, 20%);
  --radius: 22px;

  --ease: cubic-bezier(0.5, 1, 0.89, 1);

  /* a href */
  --null-gray: #4e4e4e;
  --null-light-gray: #c4c4c4;
  --link-base: #b6bcc6;        /* soft light gray */
  --link-hover: #ffffff;      /* full white on hover */
  --link-accent: #c084fc;     /* pastel violet */
  --link-shadow: #333333;     /* shadow for glow */
  --link-light-gray: hsl(210, 10%, 75%);

}

/* page frame */
html, body {
  height: 100%;
}

body {
  margin: 0;
  /* background: rgba(8, 9, 13, 0.6); */

  background:
    linear-gradient(235deg, hsl(var(--hue1) 50% 10% / 0.8), hsl(var(--hue1) 50% 10% / 0) 33%),
    linear-gradient(45deg,  hsl(var(--hue2) 50% 10% / 0.8), hsl(var(--hue2) 50% 10% / 0) 33%),
    linear-gradient(hsl(220deg 25% 4.8% / 0.66));
}

a {
    text-decoration: none;
    transition: all .2s ease-out;
    /* padding: 2px 2px; */
    font-family: "Kode Mono", monospace;
    /* font-weight: 400; */
    color: var(--link-light-gray);
}
li {
  list-style: none;
}

#matrix-bg { 
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;

    opacity: 0.85; /* 1 for complete DARK MODE */
}
    

.stage {
  min-height: 100vh;
}

/* BIG box: 75px padding all around */
#glass {
  position: fixed;
  inset: 75px;
  border-radius: var(--radius);
  /* border: var(--border) solid var(--border-color); */
  padding: 1em;

  /* default */
  /* background:
    linear-gradient(235deg, hsl(var(--hue1) 50% 10% / 0.8), hsl(var(--hue1) 50% 10% / 0) 33%),
    linear-gradient(45deg,  hsl(var(--hue2) 50% 10% / 0.8), hsl(var(--hue2) 50% 10% / 0) 33%),
    linear-gradient(hsl(220deg 25% 4.8% / 0.66)); */

    /* glass background added later */
    /* 1. The Glass Base */
    /* background: hsla(240, 1%, 21%, 0.2); Very low opacity dark tint */

    /* another glass background added later */
    /* 2. Another Glass Base */
    background: rgba(33, 33, 33, 0.3);
    -webkit-backdrop-filter: blur(12px);

    /* default */
  /* backdrop-filter: blur(12px); */

  /* experiment */
    backdrop-filter: blur(3px);

  box-shadow:
    hsl(var(--hue2) 50% 2%) 0px 10px 16px -8px,
    hsl(var(--hue2) 50% 4%) 0px 20px 36px -14px;

  overflow: visible; /* important: allow outer glows */
}

/* Animation triggers */
#glass.open::before,
#glass.open::after,
#glass.open .glow,
#glass.open .shine {

  /* default animation */
  /* animation: glow 1s var(--ease) both;  */

  /* looping every 10 seconds */
  animation: glow 10s var(--ease) infinite;
}

#glass.open .shine {
  animation-delay: 0s;
  animation-duration: 2s;
}

#glass.open .glow {
  animation-delay: 0.2s;
}

#glass.open .glow-bright {
  animation-delay: 0.1s;
  animation-duration: 1.5s;
}

#glass.open .shine-bottom {
  animation-delay: 0.1s;
  animation-duration: 1.8s;
}

#glass.open .glow-bottom {
  animation-delay: 0.3s;
}

#glass.open .glow-bright.glow-bottom {
  animation-delay: 0.3s;
  animation-duration: 1.1s;
}

/* hue routing */
#glass .shine,
#glass .glow {
  --hue: var(--hue1);
}

#glass .shine-bottom,
#glass .glow-bottom {
  --hue: var(--hue2);
  --conic: 135deg;
}

/* =========================
   SHINE (crisp inner lights)
   ========================= */

#glass .shine,
#glass .shine::before,
#glass .shine::after {
  pointer-events: none;

  border-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
  border: 1px solid transparent;

  width: 75%; /* default was 75% */
  height: auto;
  min-height: 0px;
  aspect-ratio: 1;

  display: block;
  position: absolute;

  right: calc(var(--border) * -1);
  top: calc(var(--border) * -1);
  left: auto;

  z-index: 1;

  --start: 12%;
  background: conic-gradient(
    from var(--conic, -45deg) at center in oklch,
    transparent var(--start, 0%),
    hsl(var(--hue), var(--sat, 80%), var(--lit, 60%)),
    transparent var(--end, 50%)
  ) border-box;

  mask: linear-gradient(transparent), linear-gradient(black);
  mask-repeat: no-repeat;
  mask-clip: padding-box, border-box;
  mask-composite: subtract;
}

#glass .shine::before,
#glass .shine::after {
  content: "";
  width: auto;
  inset: -2px;
  mask: none;
}

#glass .shine::after {
  z-index: 2;
  --start: 17%;
  --end: 33%;
  background: conic-gradient(
    from var(--conic, -45deg) at center in oklch,
    transparent var(--start, 0%),
    hsl(var(--hue), var(--sat, 80%), var(--lit, 85%)),
    transparent var(--end, 50%)
  );
}

#glass .shine-bottom {
  top: auto;
  bottom: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  right: auto;
}

/* ======================
   GLOW (noisy color bleed)
   ====================== */

#glass .glow {
  pointer-events: none;

  border-top-right-radius: calc(var(--radius) * 2.5);
  border-bottom-left-radius: calc(var(--radius) * 2.5);
  border: calc(var(--radius) * 1.25) solid transparent;

  inset: calc(var(--radius) * -2);

  width: 75%;
  height: auto;
  min-height: 0px;
  aspect-ratio: 1;

  display: block;
  position: absolute;

  left: auto;
  bottom: auto;

  /* exact noise mask reference from the CodePen */
  mask: url("./assets/noise-base.png");
  mask-mode: luminance;
  mask-size: 29%;

  opacity: 1;
  filter: blur(12px) saturate(1.25) brightness(0.5);
  mix-blend-mode: plus-lighter;

  z-index: 3;
}

#glass .glow.glow-bottom {
  inset: calc(var(--radius) * -2);
  top: auto;
  right: auto;
}

#glass .glow::before,
#glass .glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border: inherit;
  border-radius: inherit;

  background: conic-gradient(
    from var(--conic, -45deg) at center in oklch,
    transparent var(--start, 0%),
    hsl(var(--hue), var(--sat, 95%), var(--lit, 60%)),
    transparent var(--end, 50%)
  ) border-box;

  mask: linear-gradient(transparent), linear-gradient(black);
  mask-repeat: no-repeat;
  mask-clip: padding-box, border-box;
  mask-composite: subtract;

  filter: saturate(2) brightness(1);
}

#glass .glow::after {
  --lit: 70%;
  --sat: 100%;
  --start: 15%;
  --end: 35%;

  border-width: calc(var(--radius) * 1.75);
  border-radius: calc(var(--radius) * 2.75);
  inset: calc(var(--radius) * -0.25);

  z-index: 4;
  opacity: 0.75;
}

/* ===========================
   GLOW-BRIGHT (sharper accent)
   =========================== */

#glass .glow-bright {
  --lit: 80%;
  --sat: 100%;
  --start: 13%;
  --end: 37%;

  border-width: 5px;
  border-radius: calc(var(--radius) + 2px);
  inset: -7px;

  left: auto;
  filter: blur(2px) brightness(0.66);
}

#glass .glow-bright::after {
  content: none;
}

#glass .glow-bright.glow-bottom {
  inset: -7px;
  right: auto;
  top: auto;
}

/* =================
   Animations (exact)
   ================= */
/* default glow */
/* @keyframes glow {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  10%  { opacity: 0; }
  12%  { opacity: 0.7; }
  16%  { opacity: 0.3; animation-timing-function: var(--ease); }
  100% { opacity: 1; animation-timing-function: var(--ease); }
} */

/* setting up for infinite loop */
@keyframes glow {
  /* --- THE ACTIVE PART (0s to 1s) --- */
  /* We divided your original percentages by 10 */
  
  0%    { opacity: 0; }
  0.3%  { opacity: 1; }   /* Orig: 3% */
  1%    { opacity: 0; }   /* Orig: 10% */
  1.2%  { opacity: 0.7; } /* Orig: 12% */
  1.6%  { opacity: 0.3; animation-timing-function: var(--ease); } /* Orig: 16% */
  10%   { opacity: 1;   animation-timing-function: var(--ease); } /* Orig: 100% */

  /* --- THE PAUSE (1s to 10s) --- */
  /* Keep the state identical to the 10% mark until the end */
  100%  { opacity: 1; }
}

/* =========================================
   LAYOUT
   ========================================= */

.container {
    height: 100%;
    
    /* Flexbox setup */
    display: flex;
    flex-direction: row;
    
    /* Spacing */
    /* padding: 75px; */
    gap: 5px;
}

/* =========================================
   GRID COLUMNS (LEFT & RIGHT)
   ========================================= */

.left {
    /* Layout */
    flex: 1; /* Grow to fill available width */
    /* height: 100%; */
    
    /* Internal Grid */
    display: grid;
    grid-template-rows: 1fr 1fr; /* Equal split using fractions */
}

.right {
    /* Layout */
    flex: 1; /* Grow to fill available width */
    /* height: 100%; */
    
    /* Internal Grid */
    display: grid;
    grid-template-rows: 3fr 1fr 3fr; /* change to 1 for three equal rows */
    
}

/* =========================================
   (DEBUG BORDERS)
   ========================================= */
/* .container {
    border: 1px solid green;
    padding: 5px;
} */
/* .left {
    border: 1px solid gray;
    gap: 5px;
    padding: 5px;
} */
/* .right {
    border: 1px solid gray;
    gap: 5px;
    padding: 5px;
} */
/* .left-top {
    border: 1px solid darkgoldenrod;
} */

/* .left-bottom {
    border: 1px solid darkgoldenrod;
} */

/* .right-top {
    border: 1px solid darkseagreen;
} */

/* .right-middle {
    border: 1px solid darkseagreen;
} */

/* .right-bottom {
    border: 1px solid darkseagreen;
} */

/* ========================================
    SOME MORE EXPERIMENTS
   ========================================*/

/* ========================================
    RIGHT TOP
   ========================================*/
.right-top {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: last baseline;

    padding-right: 2px;

    /* some fix for the glitch effect */
    /* remove if conflicts */
    overflow: visible;
    /* end of the fix */
}

.right-top > span {
    font-family: "Kode Mono", monospace;
    font-weight: 400;
    font-size: 22px;
    color: var(--null-light-gray);
    /* color: transparent; */
    /* text-align: center; */
    line-height: 1; /* default = 1.4 */

    display: inline-block;

    /* some fix for the glitch effect */
    /* remove if conflicts */
    /* FIX: Force the box to be exactly the width of the text */
    width: fit-content; 
    
    /* Safety: Ensure it doesn't try to fill the flex container */
    align-self: center;
    position: relative;

    padding-left: 10px;
    padding-right: 10px;

    /* end of FIX for glitch effect */
}
/* SPECIAL LETTER TARGETING EXAMPLES----------
-------------DO NOT UNCOMMENT----------------|
--- Target the 1st letter of the TOP quote --|
.quote-above span:nth-child(1) {
    color: red;
}

- Target the 1st letter of the BOTTOM quote -|
.quote-below span:nth-child(1) {
    color: green;
}

--- Target the 3rd letter of BOTH quotes ----|
.right-top span:nth-child(3) {
    font-weight: bold;
    color: var(--link-hover);
}
--- END OF EXAMPLES -------------------------|
---------------------------------------------|
-----------> IMPORTANT NOTE <----------------|
- The span elements are generated via JS ----|
- so the nth-child() indexing applies to ----|
- those generated spans, not the full text --|
---------------------------------------------|
*/

/* ---------------------------------------- */
/* ------------ GLITCH EFFECT ------------- */
/* --------- INDIVIDUAL LETTERS ----------- */
/* ---    be careful // use sparingly   --- */

/* ---------- GLITCHY e's ONLY ------------ */
/* .quote-above span:nth-child(5),
.quote-above span:nth-child(7),
.quote-above span:nth-child(16),
.quote-above span:nth-child(27){
    animation: shift 4s ease-in-out infinite alternate,
               noise-before 4s linear infinite alternate,
                noise-after 4s linear infinite alternate;
} */

@keyframes noise-before {
   0% {
      clip: rect(61px, 9999px, 52px, 0);
   }

   5% {
      clip: rect(33px, 9999px, 144px, 0);
   }

   10% {
      clip: rect(121px, 9999px, 115px, 0);
   }

   15% {
      clip: rect(144px, 9999px, 162px, 0);
   }

   20% {
      clip: rect(62px, 9999px, 180px, 0);
   }

   25% {
      clip: rect(34px, 9999px, 42px, 0);
   }

   30% {
      clip: rect(147px, 9999px, 179px, 0);
   }

   35% {
      clip: rect(99px, 9999px, 63px, 0);
   }

   40% {
      clip: rect(188px, 9999px, 122px, 0);
   }

   45% {
      clip: rect(154px, 9999px, 14px, 0);
   }

   50% {
      clip: rect(63px, 9999px, 37px, 0);
   }

   55% {
      clip: rect(161px, 9999px, 147px, 0);
   }

   60% {
      clip: rect(109px, 9999px, 175px, 0);
   }

   65% {
      clip: rect(157px, 9999px, 88px, 0);
   }

   70% {
      clip: rect(173px, 9999px, 131px, 0);
   }

   75% {
      clip: rect(62px, 9999px, 70px, 0);
   }

   80% {
      clip: rect(24px, 9999px, 153px, 0);
   }

   85% {
      clip: rect(138px, 9999px, 40px, 0);
   }

   90% {
      clip: rect(79px, 9999px, 136px, 0);
   }

   95% {
      clip: rect(25px, 9999px, 34px, 0);
   }

   100% {
      clip: rect(173px, 9999px, 166px, 0);
   }
}

@keyframes noise-after {
   0% {
      clip: rect(26px, 9999px, 33px, 0);
   }

   5% {
      clip: rect(140px, 9999px, 198px, 0);
   }

   10% {
      clip: rect(184px, 9999px, 89px, 0);
   }

   15% {
      clip: rect(121px, 9999px, 6px, 0);
   }

   20% {
      clip: rect(181px, 9999px, 99px, 0);
   }

   25% {
      clip: rect(154px, 9999px, 133px, 0);
   }

   30% {
      clip: rect(134px, 9999px, 169px, 0);
   }

   35% {
      clip: rect(26px, 9999px, 187px, 0);
   }

   40% {
      clip: rect(147px, 9999px, 137px, 0);
   }

   45% {
      clip: rect(31px, 9999px, 52px, 0);
   }

   50% {
      clip: rect(191px, 9999px, 109px, 0);
   }

   55% {
      clip: rect(74px, 9999px, 54px, 0);
   }

   60% {
      clip: rect(145px, 9999px, 75px, 0);
   }

   65% {
      clip: rect(153px, 9999px, 198px, 0);
   }

   70% {
      clip: rect(99px, 9999px, 136px, 0);
   }

   75% {
      clip: rect(118px, 9999px, 192px, 0);
   }

   80% {
      clip: rect(1px, 9999px, 83px, 0);
   }

   85% {
      clip: rect(145px, 9999px, 98px, 0);
   }

   90% {
      clip: rect(121px, 9999px, 154px, 0);
   }

   95% {
      clip: rect(156px, 9999px, 44px, 0);
   }

   100% {
      clip: rect(67px, 9999px, 122px, 0);
   }
}

@keyframes shift {
   0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
      transform: skewX(0deg);
   }

   41% {
      transform: skewX(10deg);
   }

   42% {
      transform: skewX(-10deg);
   }

   59% {
      transform: skewX(40deg) skewY(10deg);
   }

   60% {
      transform: skewX(-40deg) skewY(-10deg);
   }

   63% {
      transform: skewX(10deg) skewY(-5deg);
   }

   70% {
      transform: skewX(-50deg) skewY(-20deg);
   }

   71% {
      transform: skewX(10deg) skewY(-10deg);
   }
}

/* ---------------- end of ---------------- */
/* ------------- GLITCH EFFECT ------------ */
/* --------- INDIVIDUAL LETTERS ----------- */

/* ---------------------------------------- */
/* ------------ GLITCH EFFECT ------------- */
/* ----- WORDS/PHRASES/BLOCKS/LINES ------- */

/* 1. The Container */
.glitch {
  position: relative;
  /* color: rgb(223, 191, 191); */
  /* Ensure the main text is visible */
  z-index: 1;
  /* Check 3. Main Animation (a few blocks below) for animation properties */

  /* CRITICAL FIX: Allows the span to be transformed/skewed */
  display: inline-block;
  will-change: transform;
}

/* 2. The Glitch Layers */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* CHANGED: Transparent so wallpaper shows through */
  background: transparent; 
}

.glitch::before {
  left: -2px;
  text-shadow: -2px 0 magenta;
  /* Optional: Blend mode makes it look better on complex backgrounds */
  mix-blend-mode: hard-light; 
  animation: glitch-noise-1 3s infinite linear alternate-reverse;
}

.glitch::after {
  left: 2px;
  text-shadow: -2px 0 lightgreen;
  mix-blend-mode: hard-light;
  animation: glitch-noise-2 3s infinite linear alternate-reverse;
}

/* 3. Main Animation */
.glitch {
  /* animation: glitch-skew 5s infinite both; */
    animation: glitch-skew 5s infinite;
}

/* Specific stuff for .quote-below glitch */
.quote-below .glitch,
.quote-below .glitch::before,
.quote-below .glitch::after {
    animation-duration: 2s;
    /* starting delay so they don't glitch together on page load */
    animation-delay: 2s;
}

/* 4. Keyframes */
/* DEFAULT */
/* @keyframes glitch-skew {
  0%, 100% { transform: none; }
  1% { transform: rotateX(10deg) skewX(90deg); }
  2% { transform: rotateX(0deg) skewX(0deg); }
}

@keyframes glitch-noise-1 {
  0% { clip-path: inset(40% 0 61% 0); }
  20% { clip-path: inset(92% 0 1% 0); }
  40% { clip-path: inset(43% 0 1% 0); }
  60% { clip-path: inset(25% 0 58% 0); }
  80% { clip-path: inset(54% 0 7% 0); }
  100% { clip-path: inset(58% 0 43% 0); }
}

@keyframes glitch-noise-2 {
  0% { clip-path: inset(24% 0 29% 0); }
  20% { clip-path: inset(54% 0 21% 0); }
  40% { clip-path: inset(1% 0 1% 0); }
  60% { clip-path: inset(99% 0 1% 0); }
  80% { clip-path: inset(31% 0 35% 0); }
  100% { clip-path: inset(58% 0 21% 0); }
} */

/* SLOWED DOWN, DELAYED START and more jazz */
@keyframes glitch-skew {
  /* --- ACTIVE PHASE (0% to 5%) --- */
  0% { transform: none; }
  1% { transform: rotateX(10deg) skewX(90deg); }
  2% { transform: rotateX(-10deg) skewX(-90deg); } /* Added kickback for realism */
  3% { transform: none; }
  
  /* --- PAUSE PHASE (4% to 100%) --- */
  100% { transform: none; }
}

@keyframes glitch-noise-1 {
  /* --- ACTIVE PHASE (Compressed into 5%) --- */
  0%   { clip-path: inset(40% 0 61% 0); opacity: 1; }
  1%   { clip-path: inset(92% 0 1% 0); }
  2%   { clip-path: inset(43% 0 1% 0); }
  3%   { clip-path: inset(25% 0 58% 0); }
  4%   { clip-path: inset(54% 0 7% 0); }
  5%   { clip-path: inset(58% 0 43% 0); }
  
  /* --- PAUSE PHASE (Hide completely) --- */
  5.1% { clip-path: inset(100% 0 0 0); opacity: 0; }
  100% { clip-path: inset(100% 0 0 0); opacity: 0; }
}

@keyframes glitch-noise-2 {
  /* --- ACTIVE PHASE (Compressed into 5%) --- */
  0%   { clip-path: inset(24% 0 29% 0); opacity: 1; }
  1%   { clip-path: inset(54% 0 21% 0); }
  2%   { clip-path: inset(1% 0 1% 0); }
  3%   { clip-path: inset(99% 0 1% 0); }
  4%   { clip-path: inset(31% 0 35% 0); }
  5%   { clip-path: inset(58% 0 21% 0); }

  /* --- PAUSE PHASE (Hide completely) --- */
  5.1% { clip-path: inset(100% 0 0 0); opacity: 0; }
  100% { clip-path: inset(100% 0 0 0); opacity: 0; }
}




/* ---------------- end of ----------------- */
/* ------------- GLITCH EFFECT ------------- */
/* ------ WORDS/PHRASES/BLOCKS/LINES ------- */



/* ========================================
    RIGHT MIDDLE
   ========================================*/
.right-middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.right-middle > svg {
    /* border: 1px solid blue; */
    fill: var(--null-light-gray);
}

/* ========================================
    RIGHT BOTTOM
   ========================================*/

.right-bottom {
    padding: 2px;
    display: flex;
    flex-direction: column;
}
/* LINKS LINKS LINKS start -------------------------------------*/

/* mode → accent color mapping */
.links-list li {
    --link-accent: #e5e7eb; /* fallback */
}

.links-list li.dev-mode { --link-accent: #22c55e; } /* neon green */
.links-list li.drk-mode { --link-accent: #38bdf8; } /* cyan */
.links-list li.sec-mode { --link-accent: #f472b6; } /* pink */
.links-list li.dot-mode { --link-accent: #c084fc; } /* violet */

.right-bottom-links > ul.links-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;   
}

.right-bottom-links > ul.links-list > li {
    font-size: 18px;
    color: var(--link-base);
}

/* link base */
.links-list a {
    text-decoration: none;
    display: inline-block;
    position: relative; /* required for underline */
}

/* animated underline */
.links-list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;

    width: 100%;
    height: 1px;
    background: var(--link-accent);

    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.25s ease-out;
}

.links-list a:hover::after {
    transform: scaleX(0);
}

/* generated spans */
.links-list a span {
    display: inline-block;
    font-weight: 500;
    /* border-bottom: 1px solid var(--null-light-gray); */

    transition:
        font-weight 0.5s ease,
        color 0.45s ease,
        text-shadow 0.5s ease;

    transition-delay: calc(var(--i) * 0.08s);
}

/* hover: reverse stagger */
.links-list a:hover span {
    font-weight: 700;
    color: var(--link-hover);
    transition-delay: calc((var(--count) - 1 - var(--i)) * 0.08s);
}

/* optional effects */
.links-list a.hover-shadow:hover span {
    text-shadow:
        0 0 6px rgba(255,255,255,0.25),
        0 0 12px rgba(255,255,255,0.15);
}

.links-list a.hover-color:hover span {
    border-color: var(--link-accent);
}

/* blinking cursor block (optional modifier) */
.links-list a.cursor::before {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -1px;

    width: 5px;
    height: 5px;
    background: var(--link-accent);

    opacity: 0;
}

.links-list a.cursor:hover::before {
    opacity: 1;
    animation: blink 0.45s steps(1) infinite;
}

/* blink animation */
@keyframes blink {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

/* LINKS LINKS LINKS end -------------------------------------*/