/* Light-only glass layer. Load after the portfolio's existing stylesheets. */
:root {
  --glass-edge: rgba(143, 174, 222, .48);
  --glass-shadow: 0 18px 42px rgba(31, 71, 139, .09);
}

/* Sideways reveal animations should never widen the phone's viewport. */
html { overflow-x: clip; }

body {
  overflow-x: clip;
  background-color: #f5f8ff;
  background-image: none;
}

/* Extend the glass beyond the text so its rounded edges have breathing room. */
header {
  --nav-glass-inset: clamp(12px, 2vw, 28px);
  margin-inline: calc(-1 * var(--nav-glass-inset));
  padding-inline: var(--nav-glass-inset);
  background: linear-gradient(115deg, rgba(255, 255, 255, .95), rgba(232, 242, 255, .91));
  border-bottom-color: var(--glass-edge);
  border-radius: 22px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 16px 28px -24px rgba(28, 65, 128, .43);
}

.hero-bottom {
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(164, 190, 227, .48);
  border-radius: 20px;
  background: linear-gradient(120deg, rgba(255, 255, 255, .9), rgba(232, 242, 255, .8));
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 18px 45px rgba(31, 71, 139, .07);
}

/* Short pieces of interface carry the shine; long paragraphs remain plain. */
.button:not(.dark):not(.regatta-row),
.nav-toggle,
.tiny-button {
  background: linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(224, 237, 255, .8));
  border-color: rgba(135, 167, 219, .57);
  box-shadow: inset 0 1px rgba(255, 255, 255, .98), 0 8px 18px rgba(33, 77, 150, .075);
}

.button:not(.dark):not(.regatta-row):hover,
.nav-toggle:hover,
.tiny-button:hover {
  background: linear-gradient(145deg, #fff, rgba(210, 228, 255, .93));
}

.button.dark {
  background: linear-gradient(135deg, #3267c8, #183f94);
  border-color: #4774c8;
  box-shadow: inset 0 1px rgba(255, 255, 255, .24), 0 10px 22px rgba(29, 69, 145, .2);
  color: #fff;
}

.button.dark:hover {
  background: linear-gradient(135deg, #4075d3, #1d4ca9);
  color: #fff;
}

/* These controls sit on dark blue panels and need their light lettering. */
.market-card .market-actions .button {
  background: linear-gradient(145deg, rgba(64, 111, 183, .65), rgba(30, 67, 125, .9));
  color: #eef5ff;
  border-color: #8aa8d7;
}

.market-card .market-actions .button:hover {
  background: linear-gradient(145deg, #4876b7, #2a5392);
  color: #fff;
}

.winner-ribbon,
.membership-grid article,
.tool-skill-grid article,
.hobby-grid article {
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(226, 238, 255, .84));
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px rgba(255, 255, 255, .96), var(--glass-shadow);
}

.winner-ribbon:hover {
  background: linear-gradient(145deg, #fff, #dce9ff);
}

.winner-ribbon { border-radius: 12px; }
.membership-grid article,
.tool-skill-grid article,
.hobby-grid article { border-radius: 18px; }

.decision-route {
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(222, 235, 255, .88));
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px rgba(255, 255, 255, .96), var(--glass-shadow);
  border-radius: 22px;
}

.project-contribution {
  background: linear-gradient(120deg, rgba(248, 251, 255, .96), rgba(228, 239, 255, .88));
  box-shadow: inset 0 1px rgba(255, 255, 255, .96), 0 10px 24px rgba(31, 71, 139, .055);
  border-radius: 0 18px 18px 0;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header {
    background: linear-gradient(115deg, rgba(255, 255, 255, .82), rgba(226, 239, 255, .69));
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
  }

  .hero-bottom,
  .membership-grid article,
  .tool-skill-grid article,
  .decision-route {
    background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(228, 240, 255, .63));
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    backdrop-filter: blur(14px) saturate(135%);
  }

  @media (max-width: 900px) {
    #main-nav.nav-open {
      background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(231, 242, 255, .98));
      -webkit-backdrop-filter: blur(16px) saturate(135%);
      backdrop-filter: blur(16px) saturate(135%);
    }
  }
}

@media (max-width: 900px) {
  header { --nav-glass-inset: 12px; }

  #main-nav.nav-open {
    border-color: var(--glass-edge);
    border-radius: 18px;
    margin-top: 6px;
    box-shadow: 0 16px 32px rgba(31, 71, 139, .16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover { transform: none; }
}

@media print {
  body { background: #fff !important; }
  header,
  #main-nav.nav-open,
  .button,
  .hero-bottom,
  .winner-ribbon,
  .decision-route,
  .membership-grid article,
  .tool-skill-grid article,
  .hobby-grid article,
  .project-contribution {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  .button,
  .market-card .market-actions .button { color: #152b55 !important; }
}