/*─────────────────────────────────────────────────────────────
  GLOBAL UTILITIES
  ────────────────────────────────────────────────────────────*/
html {
  scroll-behavior: smooth;
}

mark{
  border-radius:5px;padding:.1em .4em;
}

html[data-bs-theme="light"] body {
  /* A clean, standard light grey. You can change this hex code. */
  background-image: url('background2.jpg'); /* NIGHT TIME */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  /* A dark fallback color while the image loads */
  background-color: #101010; 
}

/* --- This rule applies ONLY in DARK mode --- */
html[data-bs-theme="dark"] body {
  background-image: url('background2.webp'); /* DAY TIME */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  /* A dark fallback color while the image loads */
   background-color: #ffffff;
}

/*─────────────────────────────────────────────────────────────
  HEADER EFFECTS
  ────────────────────────────────────────────────────────────*/
/* TYPO/HEADER EFFECTS */
.hover-letter, .hover-word{
  display:inline-block;transition:color .3s,transform .3s,text-shadow .3s;
}
/* This now uses the theme's variable for text color */
.hover-letter,
.hover-word {
  color: var(--bs-body-color);
}

.hover-letter:hover{
  font-weight:bold;
  text-shadow:0 0 9px #fff,0 0 6px rgba(232,137,180,.9);
  transform:scale(1.25);
}
.hover-word:hover{
  font-weight:bold;
  text-shadow:0 0 9px #fff,0 0 6px rgba(232,137,180,.9);
  transform:scale(1.06);
}
.quarto-title .hover-word:hover,
p.subtitle.lead .hover-word:hover{font-weight:normal}

/* -------------------- Headers -------------------------- */
html[data-bs-theme="light"] h1,
html[data-bs-theme="light"] h1 .hover-letter{ color:#59414D!important; }
html[data-bs-theme="light"] p .hover-word { color:#3E2D36; }
html[data-bs-theme="light"] h2 { color:#4B3340 !important; }  /* h2 - posts page */
html[data-bs-theme="light"] h5 { color:#4B3340 !important; }  /* h5 -categoies  */

html[data-bs-theme="dark"]  h1,
html[data-bs-theme="dark"]  h1 .hover-letter{ color:#F7D8EA!important; }
html[data-bs-theme="dark"]  p .hover-word{ color:#FFF2F9!important; }
html[data-bs-theme="dark"]  h2 { color:#F1C0E2 !important; }
html[data-bs-theme="dark"]  h5 { color:#F1C0E2 !important; }

/* ============================================================
   FINAL NAVBAR LINK STYLING
   ============================================================ */
/*─────────────────────────────────────────────────────────────
  NAVBAR  – colour differs by scheme
  ────────────────────────────────────────────────────────────*/
html[data-bs-theme="light"] nav.navbar a:not(#custom-theme-toggle):not(#custom-theme-toggle *),
html[data-bs-theme="light"] nav.navbar a:not(#custom-theme-toggle):not(#custom-theme-toggle *) .bi {
  color: #282828 !important;          /* base link + icon colour */
}
html[data-bs-theme="dark"] nav.navbar a:not(#custom-theme-toggle):not(#custom-theme-toggle *),
html[data-bs-theme="dark"] nav.navbar a:not(#custom-theme-toggle):not(#custom-theme-toggle *) .bi {
  color: #FFF2F9 !important;          /* <—- pick any dark-mode tint */
}
html[data-bs-theme="light"] nav.navbar{background:#6b6b6b!important;}
html[data-bs-theme="dark"]  nav.navbar{background:#878787!important;}

/* LIGHT scheme — blue glow, only the toggle glyph */
/* LIGHT scheme – glow ONLY on the theme button’s glyph */
/* LIGHT  → blue glow only on the toggle glyph */
/* LIGHT scheme – blue glow on the theme glyph only */
html[data-bs-theme="light"] nav.navbar
i.bi[aria-label^="Toggle theme"]:hover {
  display: inline-block;
  transform: scale(1.3);
  transition: transform 0.3s ease;
  text-shadow: 0 0 6px rgba(2, 73, 250,1),
               0 0 9px rgba(131, 169, 230,.6);
}

/* DARK scheme – yellow-green glow on the same glyph */
html[data-bs-theme="dark"] nav.navbar
i.bi[aria-label^="Toggle theme"]:hover {
  display: inline-block;
  transform: scale(1.3);
  transition: transform 0.3s ease;
  text-shadow: 0 0 10px rgba(194, 164, 56.8),
               0 0 13px rgba(242, 219, 133,.7);
}


nav.navbar .nav-link[href*="github.com"]:hover i,
nav.navbar .nav-link[href*="linkedin.com"]:hover i,
nav.navbar .nav-link[href*="https://mail.google.com/mail/?view=cm&to=raameenahmed1@gmail.com"]:hover i {
  transform: scale(1.3);
  text-shadow: 0 0 3px rgba(232,137,180,.7),
               0 0 6px rgba(232,137,180,.6) !important;
}

nav.navbar .nav-link[href*="github.com"]:hover,
nav.navbar .nav-link[href*="linkedin.com"]:hover,
nav.navbar .nav-link[href*="https://mail.google.com/mail/?view=cm&to=raameenahmed1@gmail.com"]:hover {
  display: inline-block;
  transform: scale(1.3);
  transition: transform 0.3s ease;
}
.navbar a[href*="projects"]:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease;
  text-shadow: 0 0 3px rgba(232,137,180,.7),
               0 0 6px rgba(232,137,180,.6) !important;
}
/* CV */
.navbar a[href*="cv"]:hover {
  transform: scale(1.23);
  transition: transform 0.3s ease;
  text-shadow: 0 0 3px rgba(232,137,180,.7),
               0 0 6px rgba(232,137,180,.6) !important;
}
.navbar-brand:hover{
  transform:scale(1.08);
  transition: transform 0.3s ease;
  text-shadow: 0 0 3px rgba(232,137,180,.7),
               0 0 6px rgba(232,137,180,.6) !important;
}

/*─────────────────────────────────────────────────────────────
  -------------------- PROJECTS PAGE --------------------------
  ────────────────────────────────────────────────────────────*/

html[data-bs-theme="light"] .quarto-post .listing-category,
html[data-bs-theme="light"] .quarto-post .listing-title a,
html[data-bs-theme="light"] .quarto-post .listing-title a:visited{
  color: #3E2D36 !important;
}

html[data-bs-theme="dark"] .quarto-post .listing-category,
html[data-bs-theme="dark"] .quarto-post .listing-title a,
html[data-bs-theme="dark"] .quarto-post .listing-title a:visited{
  color: #FFEAF6 !important;
}

/* ------------- CATEGORIES -------------- */

/* Sidebar category styling */
html[data-bs-theme="light"] div.category {
  color: #3E2D36 !important;
  transition: all 0.25s ease;
  display: block;
  cursor: pointer;
}
html[data-bs-theme="dark"] div.category {
  color: #FFEAF6 !important;
  transition: all 0.25s ease;
  display: block;
  cursor: pointer;
}
/* Hover: underline + scale up */
html[data-bs-theme="light"] div.category:hover {
  text-decoration: underline;
  font-weight: bold !important;
}
html[data-bs-theme="dark"] div.category:hover {
  text-decoration: underline;
  font-weight: bold !important;
}
/* Base category pill styling */
html[data-bs-theme="light"] .listing-category {
  font-weight: bold!important;
  transition: all 0.25s ease;
  background-color: rgba(255, 255, 255, .15);
  border: .9px solid rgba(255, 255, 255, .4) !important;
  display: inline-block;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}
html[data-bs-theme="dark"] .listing-category {
  font-weight: bold!important;
  transition: all 0.25s ease;
  background-color: rgba(255, 255, 255, 0.2);
  border: .9px solid rgba(255, 255, 255, .6) !important;
  display: inline-block;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}
/* Hover effect: grow + pink */
html[data-bs-theme="light"] .listing-category:hover {
  transform: scale(1.08);
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.7)   /* soft pink glow */
}
html[data-bs-theme="dark"] .listing-category:hover {
  transform: scale(1.08);
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.7)   /* soft pink glow */
}

/* =======================================================
   PROJECT CARD: Custom Subtitle & Description Colors
   ======================================================= */

/* --- LIGHT MODE --- */
html[data-bs-theme="light"] .listing-subtitle,
html[data-bs-theme="light"] .listing-subtitle *,
html[data-bs-theme="light"] .listing-description,
html[data-bs-theme="light"] .listing-description *,
html[data-bs-theme="light"] .listing-author,
html[data-bs-theme="light"] .listing-author *,
html[data-bs-theme="light"] .listing-date,
html[data-bs-theme="light"] .listing-date *{
  /* A vibrant, readable pink for light mode */
  color: #353535 !important; 
}

/* --- DARK MODE --- */
html[data-bs-theme="dark"] .listing-subtitle,
html[data-bs-theme="dark"] .listing-subtitle *,
html[data-bs-theme="dark"] .listing-description,
html[data-bs-theme="dark"] .listing-description *,
html[data-bs-theme="dark"] .listing-author,
html[data-bs-theme="dark"] .listing-author *,
html[data-bs-theme="dark"] .listing-date,
html[data-bs-theme="dark"] .listing-date *{
  /* A lighter pink for better contrast on dark backgrounds */
  color: #ffffff !important; 
}         

/*═════════════════════════════════════════════════════════════
  INDIVIDUAL POST PAGES
═════════════════════════════════════════════════════════════*/
/* CATEGORY PILLS • *post pages only*
  (listing grid pills keep their existing look) */

/* ── DARK MODE ──────────────────────────────────────────── */
html[data-bs-theme="light"] .quarto-title .quarto-category {
  font-weight: bold!important;
  transition: all 0.25s ease;
  background-color: rgba(255, 255, 255, .15);
  border: .9px solid rgba(255, 255, 255, .4) !important;
  display: inline-block;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}
html[data-bs-theme="light"]  .quarto-title .quarto-category a {
  color: #492739 !important;
  /* #FFB3DA */
}
html[data-bs-theme="light"]  .quarto-title .quarto-category:hover a {
  color: black !important;
  /* #FFB3DA */
}
html[data-bs-theme="light"] .quarto-category:hover,
.quarto-categories .category:hover {
  transform: scale(1.06);
  background: rgba(247, 208, 230, .6) !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, .7) !important;
  transition: transform 0.2s ease;
}

/* ── LIGHT MODE ───────────────────────────────────────────── */
html[data-bs-theme="dark"]  .quarto-title .quarto-category {
  background:   rgba(255, 205, 233, .65);
  border: 1px solid rgba(255, 255, 255, .4) !important;
  font-weight: bold!important;
}
html[data-bs-theme="dark"]  .quarto-title .quarto-category a {
  color: #ffffff !important;
  /* #FFB3DA */
}
html[data-bs-theme="dark"]  .quarto-title .quarto-category:hover a {
  color: #E1A8C8 !important;
  /* #FFB3DA */
}
html[data-bs-theme="dark"] .quarto-category:hover,
.quarto-categories .category:hover {
  transform: scale(1.06);
  background: #FFEAF6 !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, .7) !important;
  transition: transform 0.2s ease;
}

/*═════════════════════════════════════════════════════════════
  1 ▸  SUBTITLE (above the pills) ON *INDIVIDUAL* POST PAGES
═════════════════════════════════════════════════════════════*/
html[data-bs-theme="light"]
  header.quarto-title-banner   p.subtitle.lead     { color:#C71585!important; }
html[data-bs-theme="dark"]
  header.quarto-title-banner   p.subtitle.lead     { color:#FF69B4!important; }

/*═════════════════════════════════════════════════════════════
  2 ▸  BODY TEXT INSIDE EVERY .content-card BLOCK
═════════════════════════════════════════════════════════════*/

html[data-bs-theme="light"]
  .page-layout-article .content-card h3,
html[data-bs-theme="light"]
  .page-layout-article .content-card p:not("blockquote"),
html[data-bs-theme="light"]
  .page-layout-article .content-card p,
html[data-bs-theme="light"]
  .page-layout-article .content-card li,
html[data-bs-theme="light"]
  .page-layout-article .content-card th,
html[data-bs-theme="light"]
  .page-layout-article .content-card td,
html[data-bs-theme="light"]
  .page-layout-article .content-card pre code{ color:#333333!important; }

html[data-bs-theme="dark"]
  .page-layout-article .content-card h3,
html[data-bs-theme="dark"]
  .page-layout-article .content-card p:not("blockquote"),
html[data-bs-theme="dark"]
  .page-layout-article .content-card li,
html[data-bs-theme="dark"]
  .page-layout-article .content-card th,
html[data-bs-theme="dark"]
  .page-layout-article .content-card td,
html[data-bs-theme="dark"]
  .page-layout-article .content-card pre code{ color:#FFF3FA!important; }

/* Optional: make *inline* links match the subtitle tint */
html[data-bs-theme="light"]
  .page-layout-article .content-card a             { color:#662848!important; font-weight: bold;}
html[data-bs-theme="dark"]
  .page-layout-article .content-card a             { color:#AA4B7E!important; font-weight: bold;}

/* For light theme */
html[data-bs-theme="light"] .page-layout-article .content-card blockquote {
    color: #662848!important;
}

/* For dark theme */
html[data-bs-theme="dark"] .page-layout-article .content-card blockquote {
    color: #AA4B7E!important;
} 

/*═════════════════════════════════════════════════════════════
  3 ▸  SUBTITLE .content-card BLOCK
═════════════════════════════════════════════════════════════*/
html[data-bs-theme="light"] .quarto-title p { color:#212529!important; }
html[data-bs-theme="dark"] .quarto-title p { color:#FFEAF6!important; }

/* Style the Quarto TOC container */
html[data-bs-theme="light"] .sidebar #TOC {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 4px rgba(255,255,255,0.2),
    0 4px 20px rgba(0,0,0,0.1);
  transition: background-color .3s ease, box-shadow .2s ease;
}
html[data-bs-theme="dark"] .sidebar #TOC {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 4px rgba(255,255,255,0.2),
    0 4px 20px rgba(0,0,0,0.1);
  transition: background-color .3s ease, box-shadow .2s ease;
}

/* TOC links */
html[data-bs-theme="light"] .sidebar #TOC ul {
  color: #212529;
  text-decoration: none;
  display: block;
  padding: 0.2rem 0;
  transition: color .2s ease, padding-left .2s ease;
}
html[data-bs-theme="dark"] .sidebar #TOC ul {
  color: #FFEAF6;
  text-decoration: none;
  display: block;
  padding: 0.2rem 0;
  transition: color .2s ease, padding-left .2s ease;
}
html[data-bs-theme="light"] .sidebar #TOC ul a:hover {
  color: #854064!important;
  padding-left: 0.5rem;
  filter:
    drop-shadow(0 0 1px rgba(171, 88, 126, 0.7))
    drop-shadow(0 0 2px rgba(171, 88, 126, 0.6));
}
html[data-bs-theme="dark"] .sidebar #TOC ul a:hover {
  color: #D46898!important;
  padding-left: 0.5rem;
  filter:
    drop-shadow(0 0 1px rgba(231, 176, 205, 0.7))
    drop-shadow(0 0 2px rgba(231, 176, 205, 0.6));
}

/* light‐mode — style the “active” TOC link */
html[data-bs-theme="light"] .sidebar nav#TOC.toc-active ul li a.nav-link.active {
  color: #662848 !important;
  border-left: 3px solid #662848 !important;
  padding-left: 0.5rem !important;
}

/* dark‐mode — same for dark theme */
html[data-bs-theme="dark"] .sidebar nav#TOC.toc-active ul li a.nav-link.active {
  color: #AA4B7E !important;
  border-left: 3px solid #AA4B7E !important;
  padding-left: 0.5rem !important;
}


/*─────────────────────────────────────────────────────────────
  Search Button  – dark in both schemes + pink hover shadow
  ────────────────────────────────────────────────────────────*/

.aa-DetachedSearchButton:hover .aa-SubmitIcon {
  transform: scale(1.11);
  filter:
    drop-shadow(0 0 1px rgba(232, 137, 180, 0.7))
    drop-shadow(0 0 2px rgba(232, 137, 180, 0.6));
  color: #ffffff;
  transition: filter 0.1s ease, transform 0.3s ease;
}

/*─────────────────────────────────────────────────────────────
  <mark>  HIGHLIGHT  – same look in both schemes
  ────────────────────────────────────────────────────────────*/
html[data-bs-theme="light"] mark {
  background: #9C8090;          /* soft yellow */
  color: #212529;               /* dark text for contrast */
}

html[data-bs-theme="dark"]  mark {
  background: #CCB4C2;          /* deeper yellow so it shows on dark glass */
  color: #ffffff;
}

/*─────────────────────────────────────────────────────────────
  IMAGES  /  MODAL
  ────────────────────────────────────────────────────────────*/
html[data-bs-theme="light"] img[src*="profPic.webp"]{
  border-radius:50%;transition:transform .3s,box-shadow .3s;
  box-shadow:0 10px 20px rgba(38,28,22,.2);
}
html[data-bs-theme="dark"] img[src*="profPic.webp"]{
  border-radius:50%;transition:transform .3s,box-shadow .3s;
  box-shadow:0 10px 20px rgba(255,255,255,.3);
}

html[data-bs-theme="light"] img[src*="profPic.webp"]:hover{
  transform:scale(1.1);
  box-shadow:0 10px 20px rgba(38,28,22,.03),0 0 20px rgb(90,23,52);
}
html[data-bs-theme="dark"] img[src*="profPic.webp"]:hover{
  transform:scale(1.1);
  box-shadow:0 10px 20px rgba(255,255,255,.6),0 0 20px rgb(214,96,145);
}

html[data-bs-theme="light"] #image-modal-content {
  position: relative;
  max-width: 70vw;
  max-height: 70vh;
  border-radius: 0px;

  /* START with white shadow */
  box-shadow: 0 10px 30px rgba(38,28,22,.8);

  transform: scale(0.95);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
html[data-bs-theme="dark"] #image-modal-content {
  position: relative;
  max-width: 70vw;
  max-height: 70vh;
  border-radius: 0px;

  /* START with white shadow */
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.3);

  transform: scale(0.95);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

html[data-bs-theme="light"] #image-modal-content:hover {
  transform: scale(1);

  /* CHANGE to pink glow on hover */
  box-shadow:
    0 10px 20px rgba(38,28,22,.3),   /* soften black */
    0 0 30px rgba(198, 44, 112, 0.7);       /* pink glow */
  cursor: zoom-out;
}
html[data-bs-theme="dark"] #image-modal-content:hover {
  transform: scale(1);

  /* CHANGE to pink glow on hover */
  box-shadow:
    0 10px 20px rgba(255, 255, 255, 0.6),   /* soften black */
    0 0 30px rgba(198, 44, 112, 0.7);       /* pink glow */
  cursor: zoom-out;
}

/* Modal base styles */
#image-modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

#image-modal-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* less dark */
}

/* -------------- SOCIAL ICONS --------------*/

/* Base icon color for GitHub */
.about-links a[href*="github.com/raameena"] { color: #5f497a; }

/* Base icon color for Email */
.about-links a[href*="mail.google.com"]    { color: #6d2f73; }

/* Base icon color for LinkedIn */
.about-links a[href*="linkedin.com/in/raameena"] { color: #3a4e78; }

/* Hover color for GitHub */
.about-links a[href*="github.com/raameena"]:hover { color: #aa5dfc; }

/* Hover color for Email */
.about-links a[href*="mail.google.com"]:hover      { color: #e35bcf; }

/* Hover color for LinkedIn */
.about-links a[href*="linkedin.com/in/raameena"]:hover { color: #658bdb; }

.about-links a {
  transition: color 0.3s ease;
}

.about-links a:hover{
  transform: scale(1.09);
  transition: transform 0.4s ease;
}

/* ------------------ PROJECT.QMD ------------------ */

/* ------------- POSTS BACKGROUND (GLASSMORPHIC) -------------- */
.quarto-listing-default,
.listing-listing,
div.list {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  overflow: visible !important;
}

.quarto-post {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 0 2px rgba(255, 255, 255, 0.2),
    0 4px 30px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.2s ease;
}

.quarto-post:hover {
  background-color: rgba(232, 137, 180, 0.08);
  transform: scale(1.035);
  box-shadow:
    0 0 8px rgba(232, 137, 180, 0.25),
    0 0px 10px rgba(255, 255, 255, 0.4);
}

.quarto-listing-default {
  border-radius: 10px;
}

.listing-title a {
  text-decoration: none;
  transition: text-decoration 0.2s ease, color 0.2s ease;
  display: inline-block;
}

.listing-title a:hover {
  transform: scale(1.035);
  text-decoration: underline;
}
/* ------------- BANNER -------------- */

/* -------- Outermost Layer (flat corners) -------- */
.quarto-title-banner {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.2)
  ) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 3rem 2rem;
  border-radius: 0px;
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.2) !important;
}

/* -------- Middle Layer (rounded, semi-transparent) -------- */
.page-columns.page-full {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.03)
  ) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(16px);
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.2) !important;
}

/* -------- Innermost Box (frosted white card) -------- */
.quarto-title {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.003),
    rgba(255, 255, 255, 0.003)
  ) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(18px);
  border: 0.8px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0px;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25) !important;
}
/* --------------- CURSOR GLOW ---------------- */

/* Target the entire banner wrapper */
#title-block-header {
  position: relative;
  overflow: hidden;

  /* CSS vars to hold the mouse coords */
  --mouse-x: 50%;
  --mouse-y: 50%;
}

/* Create the glow as a ::before so we don’t need an extra <div> */
#title-block-header::before {
  content: "";
  position: absolute;
  left: var(--mouse-x);
  top: var(--mouse-y);
  width: 300px;
  height: 300px;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(232, 137, 180, 0.1) 0%,
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 0;
}

/* Show the glow on hover */
#title-block-header:hover::before { opacity: 1; }

/* make ANY element get the same cursor glow */
.cursor-glow-target {
  position: relative; /* needed for correct positioning   */
  overflow: hidden;   /* hide glow that spills off edges  */
  --mouse-x: 50%;     /* default centre when not hovering */
  --mouse-y: 50%;
}

.cursor-glow-target::before {
  content: "";
  position: absolute;
  left: var(--mouse-x);
  top:  var(--mouse-y);
  width: 300px;
  height: 300px;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(232, 137, 180, 0.10) 0%, /* same pink tint */
    transparent 70%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 0; /* keeps glow under content */
}

.cursor-glow-target:hover::before { opacity: 1; }

/* -------------------- POSTS ----------------------- */

/* put this in index-style.css  (or a posts-style.css) */
.page-layout-article .quarto-container { background: transparent !important; }

/* banner (both listing and individual post) is the glow host */
.quarto-title-banner {
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.quarto-title-banner::before {
  content: "";
  position: absolute;
  left: var(--mouse-x);
  top:  var(--mouse-y);
  width: 300px;
  height: 300px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(232,137,180,.10) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 0;
}

.quarto-title-banner:hover::before { opacity: 1; }

/* ============================================================
   CONTENT-CARD inside POSTS (no mouse-tracking)
   ============================================================ */
.content-card {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.20);
  border-radius:16px;
  padding:1.25rem 1.5rem;
  margin:1.5rem 0;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:
    0 0 2px rgba(255,255,255,.20),
    0 4px 30px rgba(0,0,0,.10);
  transition:background-color .3s ease, transform .3s ease, box-shadow .2s ease;
}
.content-card:hover {
  background:rgba(232,137,180,.08);
  transform:scale(1.03);
  box-shadow:
    0 0 8px rgba(232,137,180,.25),
    0 0 9px rgba(255,255,255,.50);
}

/* ============================================================
   FORCE TRANSPARENT ARTICLE BACKGROUND SO CARD SHADOWS SHOW
   ============================================================ */
.page-layout-article .quarto-container { background:transparent !important; }