/* -----------------------------
   GlassCard Theme
   ----------------------------- */
.theme-glasscard {
  /* Background atmosphere */
  --bg-0: #07090c;
  --bg-1: #0b0f14;

  /* Glass surfaces */
  --glass-fill: rgba(18, 22, 30, 0.55);
  --glass-fill-2: rgba(18, 22, 30, 0.38);
  --glass-border: rgba(255,255,255,0.10);
  --glass-border-strong: rgba(255,255,255,0.18);
  --glass-blur: 14px;

  /* Glow accents */
  --glow-a: rgba(var(--accent-color-rgb), 0.75);
  --glow-b: rgba(168, 120, 255, 0.55);

  /* Shadows */
  --shadow-1: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-2: 0 18px 50px rgba(0,0,0,0.55);

  /* Corners */
  --radius-lg: 18px;
  --radius-md: 14px;
}


/* =========================
   Header / Footer: full-bleed glass strips
   ========================= */

body.theme-glasscard .site-header,
body.theme-glasscard .site-footer {
  position: relative;
  isolation: isolate; /* keep pseudo behind content */
}

/* Full-bleed glass strip behind header content */
body.theme-glasscard .site-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  /* extend background to viewport width */
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  pointer-events: none;
  z-index: 0;

  background: linear-gradient(180deg, var(--glass-fill), var(--glass-fill-2));
  border-bottom: 1px solid var(--glass-border);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06);

  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Full-bleed glass strip behind footer content */
body.theme-glasscard .site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%);
  width: 100vw;

  pointer-events: none;
  z-index: 0;

  background: linear-gradient(180deg, var(--glass-fill), var(--glass-fill-2));
  border-top: 1px solid var(--glass-border);
  box-shadow:
    0 -18px 45px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06);

  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Ensure header/footer *content* sits above the strip */
body.theme-glasscard .site-header > *,
body.theme-glasscard .site-footer > * {
  position: relative;
  z-index: 1;
}


/* --------------------
   Glasscard Header
   -------------------- */

body.theme-glasscard .site-header.glass-surface {
  border-radius: 999px;             /* pill */
  padding: 0.75rem 1.0rem;
  margin-top: 1rem;
}

/* --------------------
   Glasscard Footer
   -------------------- */
   
body.theme-glasscard .fo-social.glass-surface {
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  /* Neutral glass at rest */
  background: linear-gradient(180deg, var(--glass-fill), var(--glass-fill-2));

  /* Motion knobs (JS writes --grad-angle and --grad-mix) */
  --grad-angle: 135deg;
  --grad-mix: 72%;      /* higher than before so it reads */
}

/* Derive high-contrast colors from current accent */
body.theme-glasscard .fo-social.glass-surface {
  /* Bright edge: accent lifted */
  --pill-grad-1: color-mix(in srgb, var(--accent-color) 60%, white 40%);

  /* Deep edge: accent pushed darker (and slightly toward accent-color-darker for hue separation) */
  --pill-grad-2: color-mix(in srgb, var(--accent-color-darker, var(--accent-color)) 70%, black 30%);
}

/* Hover-only gradient wash */
body.theme-glasscard .fo-social.glass-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    var(--grad-angle),
    color-mix(in srgb, var(--pill-grad-1) var(--grad-mix), transparent),
    color-mix(in srgb, var(--pill-grad-2) var(--grad-mix), transparent)
  );

  opacity: 0;
  transition: opacity 200ms ease;
}

/* Reveal on hover/focus */
@media (hover: hover) {
  body.theme-glasscard .fo-social.glass-surface:hover::after,
  body.theme-glasscard .fo-social.glass-surface:focus-within::after {
    opacity: 1;
  }
}

/* Ensure hover-gradient layer follows the pill shape */
body.theme-glasscard .site-footer .fo-social.glass-surface::after,
body.theme-glasscard .site-footer .fo-social.glass-surface::before {
  border-radius: inherit;
}

/* --------------------
   Glasscard Background
   -------------------- */

body.theme-glasscard::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.0) 40%,
      rgba(255,255,255,0.03)
    );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

body.theme-glasscard{
  color: rgb(var(--body-color-rgb));
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(120, 180, 255, 0.05), transparent 65%),
    radial-gradient(1000px 700px at 80% 25%, rgba(168, 120, 255, 0.04), transparent 68%),
    radial-gradient(1100px 900px at 50% 90%, rgba(255, 255, 255, 0.025), transparent 70%),
    linear-gradient(180deg, #07090c 0%, #0a0d12 45%, #0c1016 100%);
}

/* =========================
   Generic glass surface (re-usable)
   ========================= */

body.theme-glasscard .glass-surface {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, var(--glass-fill), var(--glass-fill-2));
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Same subtle top highlight as cards */
body.theme-glasscard .glass-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.8;
  background: radial-gradient(700px 280px at 20% 0%, rgba(255,255,255,0.10), transparent 60%);
}

/* "contained glow" version only on hover/focus */
body.theme-glasscard .glass-surface.glass-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 280ms ease, transform 280ms ease;

  background: linear-gradient(
    var(--grad-angle, 135deg),
    color-mix(in srgb, var(--grad-1, var(--accent-color)) var(--grad-mix, 55%), transparent),
    color-mix(in srgb, var(--grad-2, var(--accent-color)) var(--grad-mix, 55%), transparent)
  );

  box-shadow:
    0 20px 50px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(var(--accent-color-rgb), 0.18);
}

@media (hover:hover) {
  body.theme-glasscard .glass-surface.glass-glow:hover::after,
  body.theme-glasscard .glass-surface.glass-glow:focus-within::after {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------
   Shared Glass "Trading" Card Base
   Applies to BOTH card variants
   -------------------- */

body.theme-glasscard :where(.portfolio-grid .portfolio-item, .timeline > li) {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, var(--glass-fill), var(--glass-fill-2));
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Shared subtle top highlight (both variants) */
body.theme-glasscard :where(.portfolio-grid .portfolio-item, .timeline > li)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.8;
  background: radial-gradient(700px 280px at 20% 0%, rgba(255,255,255,0.10), transparent 60%);
}

/* --------------------
   Variant A: Portfolio (Showcase)
   -------------------- */

/* Portfolio layout (as-is) */
.portfolio-grid-section { margin-top: 4rem; }
.portfolio-grid-section .section-title {
  text-align: center;
  width: 100%;
  display: block;
  margin-inline: auto;
}
body.portfolio .site-content .portfolio-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2.5rem;
  margin-top: 2rem;
}

body.portfolio .site-content .portfolio-grid .portfolio-item {
  background: var(--body-bg-darker); /* keep */
  padding-bottom: 1rem;
  border: 1px solid transparent;     /* keep */
  box-sizing: border-box;
  flex: 0 0 calc(33.333% - (2.5rem * 2 / 3));
  overflow: visible;                 /* showcase needs glow outside */
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform;

  /* Ambient defaults */
  --grad-angle: 135deg;
  --grad-1: var(--accent-color);
  --grad-2: var(--accent-color);
}

/* Clip card contents (image/slideshow) */
body.portfolio .site-content .portfolio-grid .portfolio-item > a {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: inherit;
  overflow: hidden;
  transform: none !important;
}

body.portfolio .site-content .portfolio-grid .portfolio-item img {
  width: 100%;
  height: auto;
  display: block;
}

body.portfolio .site-content .portfolio-grid .portfolio-item .portfolio-thumb-title {
  color: var(--accent-color);
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1rem;
  padding: 0 1rem;
}

body.portfolio .site-content .portfolio-grid .portfolio-item .portfolio-thumb-subtitle {
  color: var(--body-color);
  font-size: 0.95rem;
  padding: 0 1rem;
  margin-top: 0.25rem;
}

@media (max-width: 900px) {
  body.portfolio .site-content .portfolio-grid .portfolio-item { flex: 0 0 100%; }
}

/* Portfolio external aura slab:
   Use ::after (not ::before) so we don't conflict with shared highlight */
.portfolio-grid-section,
.portfolio-grid-section .container-lg,
.portfolio-grid { overflow: visible; }

.portfolio-grid .portfolio-item::after { content: none; }

@media (hover: hover) {
  body.portfolio .site-content .portfolio-grid .portfolio-item:hover,
  body.portfolio .site-content .portfolio-grid .portfolio-item:focus-within {
    border-color: var(--border-color);
  }

  .portfolio-grid .portfolio-item:hover::after,
  .portfolio-grid .portfolio-item:focus-within::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 22px;

    background: linear-gradient(
      var(--grad-angle),
      color-mix(
        in srgb,
        color-mix(
          in srgb,
          var(--grad-1, var(--accent-color)),
          #808080 calc((1 - min(var(--grad-sat, 1), var(--grad-sat-max))) * 100%)
        )
        var(--grad-mix, 55%),
        transparent
      ),
      color-mix(
        in srgb,
        color-mix(
          in srgb,
          var(--grad-2, var(--accent-color)),
          #808080 calc((1 - min(var(--grad-sat, 1), var(--grad-sat-max))) * 100%)
        )
        var(--grad-mix, 55%),
        transparent
      )
    );

    filter: blur(6px);
    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.35),
      inset 0 0 0 1px rgba(255, 255, 255, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 -1px 0 rgba(0, 0, 0, 0.12);

    pointer-events: none;
    z-index: 0;
  }

  .portfolio-grid .portfolio-item:hover,
  .portfolio-grid .portfolio-item:focus-within {
    z-index: 3;
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
  }
}

/* Portfolio slideshow */
.portfolio-slideshow { position: relative; width: 100%; overflow: hidden; }

.portfolio-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms ease;
  will-change: opacity;
}

.portfolio-slideshow img.is-active { opacity: 1; }
.portfolio-slideshow img:first-child { position: relative; }

/* Portfolio progress */
.portfolio-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.portfolio-progress-fill {
  height: 100%;
  width: 100%;
  background: var(--accent-color);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------
   Variant B: Experience / Productions (Editorial)
   -------------------- */

.about-experience-item {
  display: flex;
  align-items: flex-start;
  gap: 2.142857rem;
}

.about-experience-media {
  flex-shrink: 0;
  width: 180px;
  max-width: 30%;
  min-height: 1px;
  margin-left: 0.5rem;
}

.about-experience-media img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  border-radius: 4px;
}

.about-experience-body { flex: 1; }
.about-productions-image { margin-left: 0.5rem; }

@media (max-width: 768px) {
  .about-experience-item { flex-direction: column; }
  .about-experience-media { width: 100%; max-width: 260px; }
}

/* Timeline editorial cards:
   containment + internal glow */
.timeline > li {
  padding: 14px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--body-color);

  --grad-angle: var(--child-grad-angle, 135deg);
  --grad-1: var(--child-grad-1, var(--accent-color));
  --grad-2: var(--child-grad-2, var(--accent-color));
  --grad-mix: var(--child-grad-mix, 55%);
  --grad-sat: var(--child-grad-sat, 1);
}

/* Internal glow uses ::after (contained) */
.timeline > li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    var(--grad-angle, 135deg),
    color-mix(in srgb, var(--grad-1, var(--accent-color)) var(--grad-mix, 55%), transparent),
    color-mix(in srgb, var(--grad-2, var(--accent-color)) var(--grad-mix, 55%), transparent)
  );
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(var(--accent-color-rgb), 0.25);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: none;
  z-index: -1;
}

.timeline > li:hover::after,
.timeline > li:focus-within::after {
  opacity: 1;
  transform: scale(1);
}

@media (hover: hover) {
  .timeline:hover > li { opacity: 0.65; }
  .timeline:hover > li:hover,
  .timeline:hover > li:focus-within { opacity: 1; }
}

/* Productions image emphasis (editorial) */
.about-productions-list.timeline > li .about-productions-image img {
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease;
  border-radius: 6px;
}

.about-productions-list.timeline li:hover .about-productions-image img,
.about-productions-list.timeline li:focus-within .about-productions-image img {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

@media (hover: hover) {
  .about-productions-list.timeline:hover li:not(:hover):not(:focus-within) .about-productions-image img {
    filter: saturate(0.9) brightness(0.92);
  }
}

/* Parallax-ready media (image-only transforms) */
.about-productions-image img,
.about-experience-media img {
  transform-origin: center center;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 120ms ease-out;
}

.about-experience-list.timeline li:hover .about-experience-media img,
.about-experience-list.timeline li:focus-within .about-experience-media img {
  transform: translateY(-2px) scale(1.03);
}

/* Keep productions info row locked to 2D */
.about-productions-item .about-productions-info-line {
  box-sizing: border-box;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-inline: 1rem;
  border-radius: 10px;
}

.about-productions-item .about-productions-info-line[class] { max-width: 100%; }
.about-productions-item .about-productions-info-line > * {
  max-width: 100%;
  box-sizing: border-box;
}

.about-productions-info-line,
.about-productions-info-line * {
  transform: none !important;
  transform-style: flat !important;
  will-change: auto !important;
}

/* FIXED selector */
.about-productions-info .about-productions-info-line:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

/* Text pop on highlight */
.timeline > li:hover,
.timeline > li:focus-within { color: #ffffff; }

.timeline li:hover .about-productions-info,
.timeline li:hover .about-productions-info *,
.timeline li:hover .about-experience-body,
.timeline li:hover .about-experience-body *,
.timeline li:focus-within .about-productions-info,
.timeline li:focus-within .about-productions-info *,
.timeline li:focus-within .about-experience-body,
.timeline li:focus-within .about-experience-body * {
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.25);
}

.about-productions-item .about-productions-info-line {
  --grad-angle: inherit;
  --grad-1: inherit;
  --grad-2: inherit;
  --grad-mix: inherit;
  --grad-sat: inherit;
}

.about-productions-item:hover .about-productions-info-line,
.about-productions-item:focus-within .about-productions-info-line {
  background: rgba(0, 0, 0, 0.18);
}

body.theme-glasscard .about-experience-period.present {
  color: var(--experience-present-color);
  font-weight: 400;
}

/* If not, mute it */
body.theme-glasscard .about-experience-location,
body.theme-glasscard .about-experience-period {
  color: var(--body-color-darkest);
}

@media (hover: hover) {
  body.theme-glasscard .about-experience-item:hover
  .about-experience-job.present {
    text-shadow:
      0 0 12px rgba(var(--experience-present-color-rgb), 0.35);
  }
}

/* =========================
   Experience description blocks
   ========================= */

body.theme-glasscard .experience-bullets {
  list-style: disc;          /* real bullets */
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.25rem;     /* standard text indent */

  background: none;
  border: 0;
}

body.theme-glasscard .experience-bullets li {
  margin-top: 0.35rem;
  line-height: 1.55;

  /* hard guard against pill styles leaking in */
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* =========================
   Productions info rows — ONLY show pill on hover
   Idle must be pure text + divider
   ========================= */

/* IDLE: remove ANY capsule drawing (bg, border, outline, shadow, filters, pseudo fills) */
body.theme-glasscard .about-productions-item .about-productions-info-line {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  border-radius: 0 !important;
  padding-inline: 0 !important;
}

/* If any pseudo-element is drawing the pill, kill it on idle */
body.theme-glasscard .about-productions-item .about-productions-info-line::before,
body.theme-glasscard .about-productions-item .about-productions-info-line::after {
  content: none !important;
}

/* Keep ONLY the divider line between rows */
body.theme-glasscard .about-productions-info
.about-productions-info-line + .about-productions-info-line {
  border-top: 0.0714285714rem solid var(--border-color) !important;
  padding-top: 0.7857142857rem !important;
}

@media (hover: hover) {
  body.theme-glasscard .about-productions-item:hover
  .about-productions-info-line,
  body.theme-glasscard .about-productions-item:focus-within
  .about-productions-info-line {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    padding-inline: 1rem;
  }
}

/* --------------------
   Reduced motion (cards only)
   -------------------- */
@media (prefers-reduced-motion: reduce) {
  .about-productions-image img,
  .about-experience-media img {
    transition: none !important;
    transform: none !important;
  }

  .timeline li,
  .timeline li::after,
  .timeline img {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .portfolio-slideshow img {
    transition: none !important;
  }
}

/* =========================
   Demo Reel (card-like bezel, portfolio-style outer aura)
   ========================= */

body.theme-glasscard .demo-reel-wrapper {
  width: 100%;
  max-width: 1040px;
  margin: 3rem auto 4rem;
}

body.theme-glasscard .section-title + .demo-reel-wrapper {
  margin-top: 1.25rem;
}

/* The bezel IS the card */
body.theme-glasscard .demo-reel-frame.glass-surface {
  position: relative;
  isolation: isolate;
  border-radius: 22px;

  /* Bezel thickness */
  padding: 1.5rem;

  /* Important: allow the external aura to render */
  overflow: visible;
}

/* Bezel creates its own stacking context */
body.theme-glasscard .demo-reel-frame {
  position: relative;
  isolation: isolate;
  overflow: visible; /* allow glow outside */
   /* Lifted version for leading edge */
  --demo-grad-1: color-mix(
    in srgb,
    var(--grad-1) 60%,
    white 40%
  );

  /* Deeper version for trailing edge */
  --demo-grad-2: color-mix(
    in srgb,
    var(--grad-1) 70%,
    black 30%
  );
}

/* Ensure iframe sits ABOVE the glow */
body.theme-glasscard .demo-reel-frame > iframe {
  position: relative;
  z-index: 1;
}

/* Force glow BEHIND the iframe */
body.theme-glasscard .demo-reel-frame::after {
  z-index: -1;
}

/* Clip the iframe inside the bezel */
body.theme-glasscard .demo-reel-frame > iframe {
  display: block;
  width: 100% !important;
  max-width: none !important;
  border: 0;

  aspect-ratio: 16 / 9;
  height: auto;

  border-radius: 16px;
  overflow: hidden;

  outline: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 45px rgba(0,0,0,0.55);
}

/* --- Strong external aura, bezel only --- */
body.theme-glasscard .demo-reel-frame::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 30px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease, transform 280ms ease, filter 280ms ease;

  background: linear-gradient(
    var(--grad-angle, 135deg),
    color-mix(in srgb, var(--demo-grad-1) var(--grad-mix, 55%), transparent),
    color-mix(in srgb, var(--demo-grad-2) var(--grad-mix, 55%), transparent)
  );

  filter: blur(6px);
  transform: scale(0.995);
  z-index: 0;
}

@media (hover: hover) {
  body.theme-glasscard .demo-reel-frame:hover,
  body.theme-glasscard .demo-reel-frame:focus-within {
    z-index: 3;
    box-shadow:
      var(--shadow-2),
      inset 0 0 0 1px rgba(255,255,255,0.65),
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 -1px 0 rgba(0,0,0,0.12);
  }

  body.theme-glasscard .demo-reel-frame:hover::after,
  body.theme-glasscard .demo-reel-frame:focus-within::after {
    opacity: 1;
    transform: scale(1);
  }
}

/* Reduced motion: keep stable */
@media (prefers-reduced-motion: reduce) {
  body.theme-glasscard .demo-reel-frame,
  body.theme-glasscard .demo-reel-frame::after {
    transition: none !important;
    transform: none !important;
  }
}

/* Demo Reel: pointer proxy overlay so gradient can track cursor even over iframe */
body.theme-glasscard .demo-reel-frame {
  position: relative;
}

/* Invisible overlay that captures pointer movement */
body.theme-glasscard .demo-reel-frame .demo-reel-pointer-proxy {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 5;              /* above iframe */
  background: transparent;
  pointer-events: auto;    /* we need to catch pointermove */
}

/* =========================
   About Glasscard 
   ========================= */

/* Hero card creates its own stacking context */
body.theme-glasscard .about-card.hero-card {
  position: relative;
  isolation: isolate;
}

/* Gradient wash stays BEHIND content */
body.theme-glasscard .about-card.hero-card::after {
  z-index: 0;
}

/* EVERYTHING inside the card sits ABOVE the gradient */
body.theme-glasscard .about-card.hero-card > * {
  position: relative;
  z-index: 1;
}

/* Cover gets a nicer fade so the card reads */
body.theme-glasscard .about-header.bg-overlayed::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.30) 0%,
      rgba(0,0,0,0.55) 45%,
      rgba(0,0,0,0.78) 100%
    );
}

/* Ensure inner content sits above the overlay */
body.theme-glasscard .about-header .bg-overlayed-inner {
  z-index: 2;
}

body.theme-glasscard .about-card.hero-card .bg-overlayed-avatar {
  z-index: 3;
}

/* The hero card becomes a true glass surface */
body.theme-glasscard .about-card.hero-card.glass-surface {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: 18px;

  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Kill the old “black slab” inner background */
body.theme-glasscard .about-header .bg-overlayed-content-inner {
  background: transparent; /* overrides base.css --about-card-bg */
  padding: 0;              /* padding handled by hero-card */
}

/* Grid spacing feels more intentional */
body.theme-glasscard .about-header .bg-overlayed-grid {
  gap: 18px;
  align-items: center;
}

/* Avatar presentation */
body.theme-glasscard .about-header .bg-overlayed-avatar img {
  border-radius: 18px;
  outline: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Name/position feel more “card header” */
body.theme-glasscard .about-header .about-name {
  letter-spacing: 0.02em;
  text-transform: none; /* optional: remove shouty uppercase if you want */
}

body.theme-glasscard .about-header .about-position {
  opacity: 0.92;
}

/* Hover presence on the hero card (subtle, like your other glass surfaces) */
@media (hover: hover) {
  body.theme-glasscard .about-card.hero-card.glass-surface:hover,
  body.theme-glasscard .about-card.hero-card.glass-surface:focus-within {
    transform: translateY(-2px);
    box-shadow:
      0 28px 70px rgba(0,0,0,0.60),
      inset 0 0 0 1px rgba(255,255,255,0.10),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }
}

/* Gradient layer (hidden by default) */
body.theme-glasscard .about-card.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    var(--grad-angle, 135deg),
    color-mix(
      in srgb,
      var(--grad-1, var(--accent-color)) var(--grad-mix, 45%),
      transparent
    ),
    color-mix(
      in srgb,
      var(--grad-2, var(--accent-color)) var(--grad-mix, 45%),
      transparent
    )
  );

  opacity: 0;
  transition: opacity 280ms ease;
}

/* Reveal the gradient wash on hover/focus */
@media (hover: hover) {
  body.theme-glasscard .about-card.hero-card:hover::after,
  body.theme-glasscard .about-card.hero-card:focus-within::after {
    opacity: 1;
  }
}

/* Reduced motion: still allow color, no motion change */
@media (prefers-reduced-motion: reduce) {
  body.theme-glasscard .about-card.hero-card::after {
    transition: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-glasscard .about-card.hero-card.glass-surface {
    transform: none !important;
    transition: none !important;
  }
}

body.theme-glasscard .about-header .about-social {
  background: transparent;
  min-width: 0;
  padding: 0;
}

/* Stop legacy banner behavior inside the hero card */
body.theme-glasscard .about-card.hero-card .about-social {
  margin: 0;
  background: transparent;
  padding: 0;
  min-width: 0;
}

/* Make the icon row align exactly like text */
body.theme-glasscard .about-card.hero-card .about-social--in-card .so-list {
  display: inline-flex;            /* stays compact */
  align-items: center;
  justify-content: flex-start;     /* LEFT aligned */
  gap: 14px;

  /* Align with text block */
  margin-left: 0;
  padding: 0;
  background: none;
  outline: none;
  box-shadow: none;
}

/* Hover/focus integration (uses your existing link motion, but fixes color) */
@media (hover: hover) {
  body.theme-glasscard .about-card.hero-card .about-social--in-card a:hover i.fa-brands,
  body.theme-glasscard .about-card.hero-card .about-social--in-card a:hover i.fa-solid,
  body.theme-glasscard .about-card.hero-card .about-social--in-card a:focus-visible i.fa-brands,
  body.theme-glasscard .about-card.hero-card .about-social--in-card a:focus-visible i.fa-solid {
    color: rgb(var(--body-color-rgb));
  }

  /* Optional: “snap” outline on hover to match card language */
  body.theme-glasscard .about-card.hero-card .about-social--in-card .so-list:hover,
  body.theme-glasscard .about-card.hero-card .about-social--in-card .so-list:focus-within {
    outline-color: rgba(var(--accent-color-rgb), 0.28);
  }
}

.about-card .about-social.about-social--in-card {
  /* kill legacy banner behavior */
  margin-left: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  min-width: 0 !important;

  display: block;
  width: 100%;
  margin-top: 0.6rem;
}

/* Force the icon row to share the same left edge as the text */
.about-card .about-social.about-social--in-card .so-list {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 14px;

  width: 100%;
  margin: 0 !important;
  padding: 0 !important;

  background: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Make sure each item doesn't add weird inline spacing */
.about-card .about-social.about-social--in-card .so-item {
  margin: 0 !important;
  padding: 0 !important;
}

/* Make the content column so we can push socials to the bottom */
body.theme-glasscard .about-card.hero-card .bg-overlayed-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Let the main text area take up remaining space */
body.theme-glasscard .about-card.hero-card .bg-overlayed-content-inner {
  flex: 1 1 auto;
}

/* Push the desktop socials to the bottom */
body.theme-glasscard .about-card.hero-card .about-social--in-card {
  margin-top: auto;
  padding-top: 0.75rem; /* optional breathing room */
}

body.theme-glasscard .about-card.hero-card .bg-overlayed-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* enable hover motion for hero-card social links
body.theme-glasscard .about-card.hero-card .about-social a:hover,
body.theme-glasscard .about-card.hero-card .about-social a:focus-visible {
  transform: translateY(-2px) scale(1.1) !important;
}