/* =========================================================================
   iOS 26.1 Liquid Glass — web approximation
   Flat translucent fill · heavy blur + saturation · specular rim only
   No internal fill gradients (muddy on web). Optional SVG refraction on Chromium.
   ========================================================================= */

:root {
  /* Default material — over varied / dark content */
  --glass-blur: blur(20px) saturate(185%) brightness(1.06);
  --glass-blur-chrome: blur(28px) saturate(190%) brightness(1.05);
  --glass-blur-subtle: blur(16px) saturate(175%) brightness(1.04);

  --glass-fill: rgba(255, 255, 255, 0.11);
  --glass-fill-chrome: rgba(255, 255, 255, 0.16);
  --glass-fill-subtle: rgba(255, 255, 255, 0.08);

  --glass-border: rgba(255, 255, 255, 0.24);
  --glass-border-chrome: rgba(255, 255, 255, 0.28);

  --glass-rim:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.52),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.12),
    inset 0.5px 0 0 rgba(255, 255, 255, 0.16),
    inset -0.5px 0 0 rgba(255, 255, 255, 0.16);
  --glass-highlight: var(--glass-rim);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  --glass-sheen-opacity: 0.55;

  --glass-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --glass-spring: cubic-bezier(0.34, 1.28, 0.64, 1);
  --glass-press-duration: 0.48s;
  --material: var(--glass-blur-chrome);
}

[data-theme="light"] {
  /* iOS 26.1 default light appearance */
  --glass-blur: blur(24px) saturate(165%) brightness(1.03);
  --glass-blur-chrome: blur(32px) saturate(170%) brightness(1.02);
  --glass-blur-subtle: blur(18px) saturate(155%) brightness(1.02);

  --glass-fill: rgba(255, 255, 255, 0.62);
  --glass-fill-chrome: rgba(255, 255, 255, 0.78);
  --glass-fill-subtle: rgba(255, 255, 255, 0.52);

  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-border-chrome: rgba(0, 0, 0, 0.05);

  --glass-rim:
    inset 0 0.5px 0 rgba(255, 255, 255, 0.98),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.38),
    inset 0.5px 0 0 rgba(255, 255, 255, 0.42),
    inset -0.5px 0 0 rgba(255, 255, 255, 0.42);
  --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
  --glass-sheen-opacity: 0.38;
}

/* ---------- Base material ---------- */
.liquid-glass {
  position: relative;
  overflow: hidden;
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-rim), var(--glass-shadow);
}
.liquid-glass:not(.glass-interactive) {
  transition: background 280ms var(--glass-ease), box-shadow 280ms var(--glass-ease);
}

.liquid-glass > * {
  position: relative;
  z-index: 1;
}

/* Specular glint — separate layer, not a muddy fill gradient */
.liquid-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glass-sheen-opacity);
  background: radial-gradient(
    90% 65% at 14% -12%,
    rgba(255, 255, 255, 0.28) 0%,
    transparent 62%
  );
}

.liquid-glass--subtle {
  background: var(--glass-fill-subtle);
  backdrop-filter: var(--glass-blur-subtle);
  -webkit-backdrop-filter: var(--glass-blur-subtle);
  box-shadow: var(--glass-rim), 0 2px 16px rgba(0, 0, 0, 0.08);
}

.liquid-glass--chrome {
  background: var(--glass-fill-chrome);
  backdrop-filter: var(--glass-blur-chrome);
  -webkit-backdrop-filter: var(--glass-blur-chrome);
  border-color: var(--glass-border-chrome);
  box-shadow: var(--glass-rim), 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* =========================================================================
   Interactive glass controls — press / hold / release
   Why this is hard on the web:
   · backdrop-filter + filter() on :active breaks compositing (muddy flash)
   · transition only on :active = no smooth release animation
   · ::after sheen must stay separate from press wash (::before)
   · Mobile :active is flaky — JS .is-pressed backs it up
   ========================================================================= */

.liquid-glass.glass-interactive {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  cursor: pointer;
  transform: scale(1);
  transition:
    transform var(--glass-press-duration) var(--glass-spring),
    background var(--glass-press-duration) var(--glass-ease),
    box-shadow var(--glass-press-duration) var(--glass-ease);
}

/* Press wash — luminosity bloom, NOT filter on the whole element */
.liquid-glass.glass-interactive::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.38);
  transition: opacity calc(var(--glass-press-duration) * 0.85) var(--glass-ease);
}

[data-theme="light"] .liquid-glass.glass-interactive::before {
  background: rgba(255, 255, 255, 0.55);
}

/* Sheen stays above wash, below content */
.liquid-glass.glass-interactive::after {
  z-index: 1;
  transition: opacity calc(var(--glass-press-duration) * 0.85) var(--glass-ease);
}

.liquid-glass.glass-interactive > * {
  z-index: 2;
}

/* Pressed — scale + brighter fill + tighter shadow (iOS glass squeeze) */
.liquid-glass.glass-interactive:is(:active, .is-pressed) {
  transform: scale(0.962);
  background: color-mix(in srgb, var(--glass-fill) 55%, #ffffff);
  box-shadow:
    var(--glass-rim),
    0 1px 8px rgba(0, 0, 0, 0.05),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.45);
}

.liquid-glass--subtle.glass-interactive:is(:active, .is-pressed) {
  background: color-mix(in srgb, var(--glass-fill-subtle) 50%, #ffffff);
}

.liquid-glass--chrome.glass-interactive:is(:active, .is-pressed) {
  background: color-mix(in srgb, var(--glass-fill-chrome) 62%, #ffffff);
}

.liquid-glass.glass-interactive:is(:active, .is-pressed)::before {
  opacity: 1;
}

.liquid-glass.glass-interactive:is(:active, .is-pressed)::after {
  opacity: calc(var(--glass-sheen-opacity) * 1.35);
}

[data-theme="light"] .liquid-glass.glass-interactive:is(:active, .is-pressed) {
  background: color-mix(in srgb, var(--glass-fill) 72%, #ffffff);
}

[data-theme="light"] .liquid-glass--subtle.glass-interactive:is(:active, .is-pressed) {
  background: color-mix(in srgb, var(--glass-fill-subtle) 68%, #ffffff);
}

/* Glass pills — accent tint on press (matches music player links) */
.btn-primary.liquid-glass.glass-interactive:is(:active, .is-pressed),
:is(a.btn-primary, button.btn-primary):is(:active, .is-pressed) {
  background: color-mix(in srgb, var(--glass-fill-subtle) 50%, var(--accent, var(--theme-accent, #ea580c)) 18%);
}
.theme-panel .btn-primary.liquid-glass.glass-interactive:is(:active, .is-pressed),
.theme-panel :is(a.btn-primary, button.btn-primary):is(:active, .is-pressed) {
  background: color-mix(in srgb, var(--glass-fill-subtle) 50%, var(--theme-accent) 18%);
}

@media (prefers-reduced-motion: reduce) {
  .liquid-glass.glass-interactive {
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }
  .liquid-glass.glass-interactive:is(:active, .is-pressed) {
    transform: none;
  }
  .liquid-glass.glass-interactive::before,
  .liquid-glass.glass-interactive::after {
    transition: none;
  }
}

/* Nav bar: flat glass strip */
.nav.liquid-glass {
  box-shadow: var(--glass-rim), 0 1px 0 rgba(0, 0, 0, 0.04);
}
.nav.liquid-glass::after {
  opacity: 0.18;
  pointer-events: none;
}
.nav.liquid-glass > * {
  position: relative;
  z-index: 1;
}

/* Inset well — URL fields, form inputs, chips inside glass cards */
.liquid-glass-inset,
.input,
.textarea {
  background: color-mix(in srgb, var(--glass-fill) 85%, rgba(0, 0, 0, 0.04));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 0.5px solid color-mix(in srgb, var(--glass-border) 80%, transparent);
  border-radius: 10px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .liquid-glass-inset,
[data-theme="light"] .input,
[data-theme="light"] .textarea {
  background: color-mix(in srgb, #ffffff 55%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Chromium: optional edge refraction (Safari uses blur-only above) */
@supports (backdrop-filter: url("#lg-refract")) {
  .liquid-glass {
    backdrop-filter: var(--glass-blur) url("#lg-refract");
    -webkit-backdrop-filter: var(--glass-blur) url("#lg-refract");
  }
  .liquid-glass--chrome {
    backdrop-filter: var(--glass-blur-chrome) url("#lg-refract-chrome");
    -webkit-backdrop-filter: var(--glass-blur-chrome) url("#lg-refract-chrome");
  }
  .liquid-glass--subtle {
    backdrop-filter: var(--glass-blur-subtle) url("#lg-refract");
    -webkit-backdrop-filter: var(--glass-blur-subtle) url("#lg-refract");
  }
}

@media (prefers-reduced-transparency: reduce) {
  .liquid-glass,
  .liquid-glass--chrome,
  .liquid-glass--subtle,
  :is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu, .card, .info-card) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .liquid-glass { background: color-mix(in srgb, var(--glass-fill) 40%, #ffffff); }
  .liquid-glass--chrome { background: color-mix(in srgb, var(--glass-fill-chrome) 50%, #ffffff); }
  .liquid-glass--subtle { background: color-mix(in srgb, var(--glass-fill-subtle) 45%, #ffffff); }
  :is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu, .card, .info-card) {
    background: color-mix(in srgb, var(--glass-fill-subtle) 45%, #ffffff);
  }
  .liquid-glass::after,
  :is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu, .card, .info-card)::after { display: none; }
}

/* =========================================================================
   Site controls — auto liquid glass (buttons, link rows, panels, fields)
   No extra classes required in HTML for .btn / .linklist a / .nav__drawer a
   ========================================================================= */

/* Subtle glass material + sheen */
:is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu, .card, .info-card) {
  position: relative;
  overflow: hidden;
  background: var(--glass-fill-subtle);
  backdrop-filter: var(--glass-blur-subtle);
  -webkit-backdrop-filter: var(--glass-blur-subtle);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-rim), 0 2px 16px rgba(0, 0, 0, 0.08);
}

:is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu, .card, .info-card)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glass-sheen-opacity);
  background: radial-gradient(
    90% 65% at 14% -12%,
    rgba(255, 255, 255, 0.28) 0%,
    transparent 62%
  );
}

:is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu) > * {
  position: relative;
  z-index: 2;
}

/* Interactive press — pills & menu rows */
:is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  cursor: pointer;
  transform: scale(1);
  transition:
    transform var(--glass-press-duration) var(--glass-spring),
    background var(--glass-press-duration) var(--glass-ease),
    box-shadow var(--glass-press-duration) var(--glass-ease),
    color 0.2s ease,
    border-color 0.2s ease;
}

:is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.38);
  transition: opacity calc(var(--glass-press-duration) * 0.85) var(--glass-ease);
}

[data-theme="light"] :is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu)::before {
  background: rgba(255, 255, 255, 0.55);
}

:is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu)::after {
  z-index: 1;
  transition: opacity calc(var(--glass-press-duration) * 0.85) var(--glass-ease);
}

:is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu):is(:active, .is-pressed) {
  transform: scale(0.962);
  background: color-mix(in srgb, var(--glass-fill-subtle) 50%, #ffffff);
  box-shadow:
    var(--glass-rim),
    0 1px 8px rgba(0, 0, 0, 0.05),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.45);
}

:is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu):is(:active, .is-pressed)::before {
  opacity: 1;
}

:is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu):is(:active, .is-pressed)::after {
  opacity: calc(var(--glass-sheen-opacity) * 1.35);
}

[data-theme="light"] :is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu):is(:active, .is-pressed) {
  background: color-mix(in srgb, var(--glass-fill-subtle) 68%, #ffffff);
}

/* Back to top — fixed floater (excluded from auto-glass position/transform) */
.to-top.ctrl--glass {
  position: fixed;
  right: max(16px, var(--gutter));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  overflow: hidden;
  background: var(--glass-fill-subtle);
  backdrop-filter: var(--glass-blur-subtle);
  -webkit-backdrop-filter: var(--glass-blur-subtle);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-rim), 0 2px 16px rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: translateY(12px) scale(1);
  transition:
    opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
    background var(--glass-press-duration) var(--glass-ease),
    box-shadow var(--glass-press-duration) var(--glass-ease);
}
.to-top.ctrl--glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glass-sheen-opacity);
  background: radial-gradient(
    90% 65% at 14% -12%,
    rgba(255, 255, 255, 0.28) 0%,
    transparent 62%
  );
}
.to-top.ctrl--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.38);
  transition: opacity calc(var(--glass-press-duration) * 0.85) var(--glass-ease);
}
.to-top.ctrl--glass svg {
  position: relative;
  z-index: 2;
}
.to-top.ctrl--glass.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.to-top.ctrl--glass.show:is(:active, .is-pressed) {
  transform: translateY(0) scale(0.962);
  background: color-mix(in srgb, var(--glass-fill-subtle) 50%, #ffffff);
  box-shadow:
    var(--glass-rim),
    0 1px 8px rgba(0, 0, 0, 0.05),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.45);
}
.to-top.ctrl--glass.show:is(:active, .is-pressed)::before {
  opacity: 1;
}
.to-top.ctrl--glass.show:is(:active, .is-pressed)::after {
  opacity: calc(var(--glass-sheen-opacity) * 1.35);
}

@media (prefers-reduced-motion: reduce) {
  :is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu) {
    transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  }
  :is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu):is(:active, .is-pressed) {
    transform: none;
  }
  :is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu)::before,
  :is(a.btn, button.btn, .linklist a, .nav__drawer a, .ctrl.ctrl--glass:not(.to-top), .nav__menu)::after {
    transition: none;
  }
}

/* ---------- Immersive / lifestyle panels ---------- */
.immersive {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.immersive > .container,
.immersive > .hero-inner,
.immersive > .frame,
.immersive > .panel__inner {
  position: relative;
  z-index: 1;
}

.hero.immersive { background: var(--canvas, #f5f5f7); }

.panel__bg--mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(175deg, var(--panel-g1, #f8f6f3) 0%, var(--panel-g2, #efeae4) 100%);
}

.panel__bg--photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: center / cover no-repeat;
  opacity: var(--panel-photo-opacity, 0.72);
  transform: scale(1.02);
}

/* Light scrim — environment tint, not glass fill */
.panel__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

[data-theme="light"] .panel__scrim {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.1) 55%,
    rgba(0, 0, 0, 0.08) 100%
  );
}

[data-theme="dark"] .panel__scrim {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.22) 55%,
    rgba(0, 0, 0, 0.32) 100%
  );
}