/* Reusable reactive glass surface */

.playfolio-page .pf-reactive-glass {
  --pf-glass-x: 50%;
  --pf-glass-y: 50%;
  --pf-glass-px: 0.5;
  --pf-glass-py: 0.5;
  --pf-glass-dx: 0px;
  --pf-glass-dy: 0px;
  --pf-glass-tone-amber: #f0c95c;
  --pf-glass-tone-blue: #79a0ff;
  --pf-glass-tone-brand: #050505;
  --pf-glass-tone-brand-ink: #f4f1e8;
  --pf-glass-tone-coral: #ff7048;
  --pf-glass-tone-green: #40b898;
  --pf-glass-tone-mode: #f0c95c;
  --pf-glass-tone-mode-ink: #171717;
  --pf-glass-tone-mode-preview: #050505;
  --pf-glass-tone-mode-preview-ink: #f4f1e8;
  --pf-glass-tone-neutral: color-mix(in srgb, var(--pf-ink) 86%, var(--pf-bg));
  --pf-glass-tone-neutral-ink: var(--pf-bg);
  --pf-glass-item-color: var(--pf-accent-2);
  --pf-glass-item-ink: var(--pf-ink);
  --pf-glass-spread: 0.45rem;
  --pf-glass-blur: 14px;
  --pf-glass-lift: -1px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius);
  background: color-mix(in srgb, var(--pf-bg) 88%, transparent) !important;
  box-shadow: none;
  position: relative;
  isolation: isolate;
  overflow: visible;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transition:
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

:root[data-theme="dark"] .playfolio-page .pf-reactive-glass {
  --pf-glass-tone-brand: #f4f1e8;
  --pf-glass-tone-brand-ink: #171717;
  --pf-glass-tone-mode: #050505;
  --pf-glass-tone-mode-ink: #f4f1e8;
  --pf-glass-tone-mode-preview: #f0c95c;
  --pf-glass-tone-mode-preview-ink: #171717;
  --pf-glass-tone-neutral: color-mix(in srgb, var(--pf-ink) 86%, var(--pf-bg));
  --pf-glass-tone-neutral-ink: var(--pf-bg);
}

.playfolio-page .pf-reactive-glass::before,
.playfolio-page .pf-reactive-glass::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 220ms ease,
    filter 220ms ease,
    transform 220ms ease;
}

.playfolio-page .pf-reactive-glass::before {
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 34%, transparent);
}

.playfolio-page .pf-reactive-glass::after {
  inset: calc(var(--pf-glass-spread) * -1);
  z-index: -2;
  border-radius: calc(var(--pf-radius) + var(--pf-glass-spread));
  filter: blur(var(--pf-glass-blur));
}

.playfolio-page .pf-reactive-glass.is-glass-bar-hovering,
.playfolio-page .pf-reactive-glass.is-glass-item-hovering,
.playfolio-page .pf-reactive-glass:has(:focus-visible) {
  transform: translateY(var(--pf-glass-lift));
  background: color-mix(in srgb, var(--pf-bg) 64%, transparent) !important;
}

.playfolio-page .pf-reactive-glass.is-glass-bar-hovering::before,
.playfolio-page .pf-reactive-glass.is-glass-bar-hovering::after,
.playfolio-page .pf-reactive-glass.is-glass-item-hovering::before,
.playfolio-page .pf-reactive-glass.is-glass-item-hovering::after,
.playfolio-page .pf-reactive-glass:has(:focus-visible)::before,
.playfolio-page .pf-reactive-glass:has(:focus-visible)::after {
  opacity: 1;
}

.playfolio-page .pf-reactive-glass--site-bloom::before {
  background:
    radial-gradient(
      circle at var(--pf-glass-x) var(--pf-glass-y),
      color-mix(in srgb, var(--pf-accent-3) 34%, transparent),
      color-mix(in srgb, var(--pf-accent-2) 15%, transparent) 24%,
      transparent 48%
    ),
    linear-gradient(
      110deg,
      color-mix(in srgb, var(--pf-accent-3) 14%, transparent),
      color-mix(in srgb, var(--pf-accent-2) 10%, transparent) 44%,
      color-mix(in srgb, var(--pf-accent) 12%, transparent)
    );
}

.playfolio-page .pf-reactive-glass--site-bloom::after {
  background:
    radial-gradient(
      circle at var(--pf-glass-x) var(--pf-glass-y),
      color-mix(in srgb, var(--pf-accent-3) 42%, transparent),
      color-mix(in srgb, var(--pf-accent-2) 20%, transparent) 26%,
      transparent 52%
    ),
    radial-gradient(circle at 50% 95%, color-mix(in srgb, var(--pf-accent) 18%, transparent), transparent 46%);
}

.playfolio-page .pf-reactive-glass--site-bloom.is-glass-bar-hovering,
.playfolio-page .pf-reactive-glass--site-bloom:has(:focus-visible) {
  border-color: color-mix(in srgb, var(--pf-accent-3) 45%, var(--pf-line-strong)) !important;
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--pf-accent-3) 13%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}

.playfolio-page .pf-reactive-glass--site-bloom.is-glass-item-hovering {
  border-color: color-mix(in srgb, var(--pf-glass-item-color) 52%, var(--pf-line-strong)) !important;
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--pf-glass-item-color) 14%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 11%, transparent);
}

.playfolio-page .pf-reactive-glass--site-bloom.is-glass-item-hovering::before {
  background:
    radial-gradient(
      circle at var(--pf-glass-x) var(--pf-glass-y),
      color-mix(in srgb, var(--pf-glass-item-color) 34%, transparent),
      color-mix(in srgb, var(--pf-glass-item-color) 12%, transparent) 28%,
      transparent 54%
    ),
    linear-gradient(
      110deg,
      color-mix(in srgb, var(--pf-glass-item-color) 12%, transparent),
      color-mix(in srgb, #fff 8%, transparent) 48%,
      color-mix(in srgb, var(--pf-glass-item-color) 10%, transparent)
    );
}

.playfolio-page .pf-reactive-glass--site-bloom.is-glass-item-hovering::after {
  background:
    radial-gradient(
      circle at var(--pf-glass-x) var(--pf-glass-y),
      color-mix(in srgb, var(--pf-glass-item-color) 42%, transparent),
      color-mix(in srgb, var(--pf-glass-item-color) 18%, transparent) 28%,
      transparent 56%
    );
}

.playfolio-page .pf-reactive-glass [data-glass-item] {
  border: 1px solid transparent;
}

.playfolio-page .pf-reactive-glass .navbar-brand {
  min-height: 2.05rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.playfolio-page .pf-reactive-glass .pf-icon-button,
.playfolio-page .pf-reactive-glass .theme-toggle-btn,
.playfolio-page .pf-reactive-glass .pf-nav-ai-button {
  border-color: var(--pf-line);
}

.playfolio-page .pf-reactive-glass .is-glass-target {
  color: var(--pf-glass-item-ink) !important;
  border-color: color-mix(in srgb, var(--pf-glass-item-color) 72%, var(--pf-line)) !important;
  background:
    radial-gradient(circle at var(--pf-glass-x) var(--pf-glass-y), color-mix(in srgb, #fff 10%, transparent), transparent 78%),
    color-mix(in srgb, var(--pf-glass-item-color) 16%, var(--pf-surface-soft)) !important;
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--pf-glass-item-color) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    0 0 0 1px color-mix(in srgb, var(--pf-glass-item-color) 24%, transparent);
  transform: translateY(-1px);
}

.playfolio-page .pf-reactive-glass .navbar-brand.is-glass-target,
.playfolio-page .pf-reactive-glass .theme-toggle-btn.is-glass-target {
  background:
    radial-gradient(circle at var(--pf-glass-x) var(--pf-glass-y), color-mix(in srgb, #fff 14%, transparent), transparent 74%),
    var(--pf-glass-item-color) !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--pf-glass-item-color) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--pf-glass-item-color) 30%, transparent);
}

.playfolio-page .theme-toggle-btn {
  position: relative;
  overflow: hidden;
}

.playfolio-page .theme-toggle-icon {
  grid-area: 1 / 1;
  display: inline-grid;
  place-items: center;
  transition:
    opacity 170ms ease,
    transform 170ms ease;
}

.playfolio-page .theme-toggle-icon--current,
.playfolio-page .theme-toggle-icon--preview {
  opacity: 0;
}

:root[data-theme="light"] .playfolio-page .theme-toggle-icon--current,
:root[data-theme="dark"] .playfolio-page .theme-toggle-icon--preview {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}

:root[data-theme="light"] .playfolio-page .theme-toggle-icon--preview,
:root[data-theme="dark"] .playfolio-page .theme-toggle-icon--current {
  transform: translateY(0.35rem) scale(0.82) rotate(-14deg);
}

.playfolio-page .theme-toggle-btn.is-theme-switching[data-theme-switch-from="light"] .theme-toggle-icon--current,
.playfolio-page .theme-toggle-btn.is-theme-switching[data-theme-switch-from="dark"] .theme-toggle-icon--preview {
  opacity: 0;
  transform: translateY(-0.35rem) scale(0.82) rotate(14deg);
}

.playfolio-page .theme-toggle-btn.is-theme-switching[data-theme-switch-from="light"] .theme-toggle-icon--preview,
.playfolio-page .theme-toggle-btn.is-theme-switching[data-theme-switch-from="dark"] .theme-toggle-icon--current {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0deg);
}

@media (hover: hover) and (pointer: fine) {
  :root[data-theme="light"] .playfolio-page .theme-toggle-btn:hover .theme-toggle-icon--current,
  :root[data-theme="dark"] .playfolio-page .theme-toggle-btn:hover .theme-toggle-icon--preview {
    opacity: 0;
    transform: translateY(-0.35rem) scale(0.82) rotate(14deg);
  }

  :root[data-theme="light"] .playfolio-page .theme-toggle-btn:hover .theme-toggle-icon--preview,
  :root[data-theme="dark"] .playfolio-page .theme-toggle-btn:hover .theme-toggle-icon--current {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}