/* =========================================================
   V17 — Liquid Glass study
   Clear refractive surfaces, specular rims, ambient color.
   ========================================================= */

html {
  background: #eaf2ef;
}

body.liquid-glass {
  --ink: #151b19;
  --ink-soft: #313d39;
  --muted: #58645f;
  --muted-2: #73817b;
  --line: rgba(28, 55, 47, 0.12);
  --line-strong: rgba(28, 55, 47, 0.17);
  --glass-border: rgba(255, 255, 255, 0.58);

  color: var(--ink);
  background-color: #dceff5;
  background-image:
    radial-gradient(42% 44% at 6% 6%, rgba(68, 132, 255, 0.50), transparent 72%),
    radial-gradient(36% 38% at 96% 9%, rgba(43, 201, 162, 0.43), transparent 72%),
    radial-gradient(42% 40% at 84% 58%, rgba(126, 163, 247, 0.27), transparent 74%),
    radial-gradient(38% 38% at 1% 82%, rgba(48, 192, 156, 0.25), transparent 72%),
    radial-gradient(34% 32% at 68% 96%, rgba(104, 157, 230, 0.19), transparent 76%),
    linear-gradient(145deg, #dcecfb 0%, #e6f7f0 48%, #e5eefb 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* The ambient color needs to pass through every light section. */
body.liquid-glass .section--work,
body.liquid-glass .section--capabilities,
body.liquid-glass .section--about,
body.liquid-glass .section--experience {
  background: transparent;
}

body.liquid-glass .hero-blur--one {
  background: rgba(100, 158, 255, 0.38);
  filter: blur(95px);
}

body.liquid-glass .hero-blur--two {
  background: rgba(92, 210, 174, 0.26);
  filter: blur(92px);
}

body.liquid-glass .hero-ring {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 0 0 68px rgba(255, 255, 255, 0.025),
    inset 0 0 0 69px rgba(255, 255, 255, 0.16);
  opacity: 0.56;
}

/* ---------------------------------------------------------
   The clear glass material
   --------------------------------------------------------- */
body.liquid-glass .glass,
body.liquid-glass .work-card,
body.liquid-glass .resume-photo-card,
body.liquid-glass .resume-tabs,
body.liquid-glass .resume-detail,
body.liquid-glass .hobby-card,
body.liquid-glass .video-showcase {
  background:
    radial-gradient(125% 90% at 10% -18%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(217, 245, 255, 0.02) 38%, rgba(255, 255, 255, 0.015) 56%, rgba(226, 255, 246, 0.075) 100%);
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-top-color: rgba(255, 255, 255, 0.74);
  border-bottom-color: rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.94),
    inset 0 -1px 1px rgba(255, 255, 255, 0.16),
    inset 1px 0 1px rgba(255, 255, 255, 0.14),
    0 24px 62px rgba(30, 59, 52, 0.085),
    0 0 34px rgba(140, 225, 198, 0.035);
  -webkit-backdrop-filter: blur(32px) saturate(215%);
  backdrop-filter: blur(32px) saturate(215%);
}

body.liquid-glass .glass {
  background-color: transparent;
}

/* Header chrome: clear, bright and still legible over photography. */
body.liquid-glass .nav-shell {
  background:
    radial-gradient(120% 100% at 10% -30%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.92),
    inset 0 -1px 1px rgba(255, 255, 255, 0.14),
    0 16px 48px rgba(25, 54, 47, 0.12);
  -webkit-backdrop-filter: blur(42px) saturate(215%) brightness(1.04);
  backdrop-filter: blur(42px) saturate(215%) brightness(1.04);
}

body.liquid-glass .site-header.is-scrolled .nav-shell {
  background:
    radial-gradient(120% 100% at 10% -30%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.94),
    0 16px 48px rgba(25, 54, 47, 0.14);
}

body.liquid-glass .nav-link,
body.liquid-glass .nav-trigger {
  color: #303d38;
}

body.liquid-glass .nav-link:hover,
body.liquid-glass .nav-trigger:hover,
body.liquid-glass .nav-item.is-open .nav-trigger {
  color: #111816;
  background: rgba(255, 255, 255, 0.26);
}

body.liquid-glass .nav-link.is-active {
  color: #0068c9;
  background: rgba(255, 255, 255, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* The flyout gets more lift because it floats over content. */
body.liquid-glass .mega-menu {
  background:
    radial-gradient(120% 110% at 10% -20%, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.98),
    0 32px 90px rgba(20, 44, 38, 0.20);
  -webkit-backdrop-filter: blur(48px) saturate(170%) brightness(1.02);
  backdrop-filter: blur(48px) saturate(170%) brightness(1.02);
}

body.liquid-glass .mega-preview {
  background:
    radial-gradient(ellipse at 90% 0%, rgba(255, 255, 255, 0.30), transparent 44%),
    rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.96),
    0 8px 24px rgba(29, 54, 47, 0.05);
}

body.liquid-glass .mega-link:hover,
body.liquid-glass .mega-link:focus-visible,
body.liquid-glass .mega-link.is-active {
  background: rgba(255, 255, 255, 0.28);
}

/* Hero and primary actions: tinted glass rather than flat paint. */
body.liquid-glass .button--primary {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(0, 119, 237, 0.84) 0%, rgba(0, 94, 196, 0.68) 100%);
  border: 1px solid rgba(255, 255, 255, 0.37);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    inset 0 -1px 0 rgba(0, 49, 110, 0.14),
    0 12px 32px rgba(0, 105, 218, 0.20);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  backdrop-filter: blur(22px) saturate(190%);
}

body.liquid-glass .button--primary:hover {
  background: linear-gradient(135deg, rgba(22, 139, 255, 0.92) 0%, rgba(0, 106, 219, 0.76) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 16px 38px rgba(0, 105, 218, 0.25);
}

body.liquid-glass .button--glass {
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.54);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.82),
    0 9px 28px rgba(31, 58, 51, 0.06);
  -webkit-backdrop-filter: blur(26px) saturate(205%);
  backdrop-filter: blur(26px) saturate(205%);
}

body.liquid-glass .button--glass:hover {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.07));
}

body.liquid-glass .hero-action-info {
  background:
    radial-gradient(120% 90% at 10% -15%, rgba(255, 255, 255, 0.48), transparent 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.09));
  border-color: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(30px) saturate(210%);
  backdrop-filter: blur(30px) saturate(210%);
}

/* Work cards: the imagery does the talking, the shell is only glass. */
body.liquid-glass .work-card {
  background:
    radial-gradient(120% 100% at 12% -20%, rgba(255, 255, 255, 0.28), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 60%, rgba(255, 255, 255, 0.07));
}

body.liquid-glass .work-card:hover {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.96),
    0 34px 78px rgba(28, 58, 50, 0.16);
}

body.liquid-glass .work-art {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* Video: keep the dark media player, make its chrome glass. */
body.liquid-glass .video-showcase {
  background:
    radial-gradient(120% 100% at 8% -18%, rgba(255, 255, 255, 0.24), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
}

body.liquid-glass .video-choice {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.48);
  -webkit-backdrop-filter: blur(22px) saturate(195%);
  backdrop-filter: blur(22px) saturate(195%);
}

body.liquid-glass .video-choice:hover {
  background: rgba(255, 255, 255, 0.22);
}

body.liquid-glass .video-choice.is-active {
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.22));
  border-color: rgba(255, 255, 255, 0.68);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    0 7px 22px rgba(24, 51, 45, 0.09);
}

/* Résumé: transparent glass, portrait remains the anchor. */
body.liquid-glass .resume-photo-card {
  background:
    radial-gradient(120% 100% at 8% -15%, rgba(255, 255, 255, 0.30), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018));
}

body.liquid-glass .resume-tabs {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.54);
  -webkit-backdrop-filter: blur(28px) saturate(205%);
  backdrop-filter: blur(28px) saturate(205%);
}

body.liquid-glass .resume-tab {
  color: rgba(42, 57, 51, 0.66);
}

body.liquid-glass .resume-tab:hover {
  background: rgba(255, 255, 255, 0.13);
}

body.liquid-glass .resume-tab-glider {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.32));
  border-color: rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.94),
    0 4px 15px rgba(24, 51, 45, 0.10);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  backdrop-filter: blur(16px) saturate(190%);
}

body.liquid-glass .resume-detail {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 44%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012));
}

body.liquid-glass .hobby-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  backdrop-filter: blur(24px) saturate(200%);
}

body.liquid-glass .hobby-card:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* Contact: the same glass, tuned for a dark photographic backdrop. */
body.liquid-glass .contact-direct {
  background:
    radial-gradient(120% 100% at 12% -20%, rgba(255, 255, 255, 0.18), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.27);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.33),
    inset 0 -1px 1px rgba(255, 255, 255, 0.08),
    0 26px 66px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(44px) saturate(155%) brightness(0.94);
  backdrop-filter: blur(44px) saturate(155%) brightness(0.94);
}

body.liquid-glass .contact-direct .contact-line {
  border-top-color: rgba(255, 255, 255, 0.13);
}

body.liquid-glass .contact-direct .contact-label {
  color: rgba(245, 249, 247, 0.43);
}

body.liquid-glass .contact-direct .contact-value {
  color: #f3f8f5;
}

body.liquid-glass .contact-direct .contact-value i {
  color: rgba(217, 241, 231, 0.62);
}

body.liquid-glass .contact-direct .contact-line:hover .contact-value,
body.liquid-glass .contact-direct .contact-line:hover .contact-value i {
  color: #9ee0c8;
}

body.liquid-glass .contact-direct .phone-reveal {
  color: rgba(240, 247, 243, 0.64);
}

body.liquid-glass .contact-direct .phone-reveal:hover {
  color: #9ee0c8;
}

body.liquid-glass .contact-direct .phone-link {
  color: #f3f8f5;
}

body.liquid-glass .back-top {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.07));
  border-color: rgba(255, 255, 255, 0.42);
  color: #f5faf7;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    0 9px 24px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

body.liquid-glass .back-top i {
  background: rgba(255, 255, 255, 0.17);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

body.liquid-glass .back-top:hover {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.62);
  color: #ffffff;
}

/* Gallery chrome keeps the same clear material. */
body.liquid-glass .wg-topbar {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12));
  border-color: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(34px) saturate(200%);
  backdrop-filter: blur(34px) saturate(200%);
}

body.liquid-glass .wg-arrow {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  backdrop-filter: blur(20px) saturate(190%);
}

/* Subtle specular light on the very top of the clear chrome. */
body.liquid-glass .nav-shell::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 0;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.liquid-glass .glass,
  body.liquid-glass .work-card,
  body.liquid-glass .resume-photo-card,
  body.liquid-glass .resume-tabs,
  body.liquid-glass .resume-detail,
  body.liquid-glass .hobby-card,
  body.liquid-glass .video-showcase {
    background: rgba(255, 255, 255, 0.83);
  }

  body.liquid-glass .contact-direct {
    background: rgba(16, 28, 25, 0.78);
  }
}

@media (max-width: 760px) {
  body.liquid-glass {
    background-image:
      radial-gradient(90% 50% at 2% 2%, rgba(68, 132, 255, 0.44), transparent 72%),
      radial-gradient(80% 44% at 100% 8%, rgba(43, 201, 162, 0.38), transparent 72%),
      radial-gradient(90% 44% at 78% 82%, rgba(111, 156, 235, 0.21), transparent 76%),
      linear-gradient(150deg, #dfeffc 0%, #e9f7f1 54%, #e8f0fb 100%);
    background-attachment: scroll;
  }

  body.liquid-glass .glass,
  body.liquid-glass .work-card,
  body.liquid-glass .resume-photo-card,
  body.liquid-glass .resume-tabs,
  body.liquid-glass .resume-detail,
  body.liquid-glass .hobby-card,
  body.liquid-glass .video-showcase {
    -webkit-backdrop-filter: blur(22px) saturate(200%);
    backdrop-filter: blur(22px) saturate(200%);
  }

  body.liquid-glass .nav-shell {
    -webkit-backdrop-filter: blur(28px) saturate(205%) brightness(1.025);
    backdrop-filter: blur(28px) saturate(205%) brightness(1.025);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.liquid-glass .glass,
  body.liquid-glass .work-card,
  body.liquid-glass .resume-photo-card,
  body.liquid-glass .resume-tabs,
  body.liquid-glass .resume-detail,
  body.liquid-glass .hobby-card,
  body.liquid-glass .video-showcase {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}