/* One warm material for controls placed over photographs and video.
   Layout, visibility, media state and native player controls remain with their owners. */
:root {
  --media-glass-solid: #f8f5ef;
  --media-glass-tint: rgb(248 245 239 / .429);
  --media-glass-ink: #211a14;
  --media-glass-edge: rgb(255 253 248 / .455);
  --media-glass-shine: rgb(255 253 248 / .325);
  --media-glass-label-halo: rgb(255 253 248 / .95);
}

:root[data-theme="dark"], .photo-dialog {
  --media-glass-solid: #241e1a;
  --media-glass-tint: rgb(36 30 26 / .455);
  --media-glass-ink: #fffdf8;
  --media-glass-edge: rgb(245 237 227 / .273);
  --media-glass-shine: rgb(245 237 227 / .156);
  --media-glass-label-halo: rgb(15 12 10 / .95);
}

/* Smaller controls let the opening media and the enlarged photo show through. */
.hero-visual [data-media-glass],
.photo-stage > :is(.photo-prev, .photo-next) {
  --media-glass-tint: rgb(248 245 239 / .26);
  --media-glass-blur: 5px;
  --media-glass-shine: rgb(255 253 248 / .16);
}

:root[data-theme="dark"] .hero-visual [data-media-glass],
.photo-stage > :is(.photo-prev, .photo-next) {
  --media-glass-tint: rgb(36 30 26 / .28);
  --media-glass-shine: rgb(245 237 227 / .10);
}

/* Limit the stronger scope to explicitly marked public media controls. */
:is(#main, dialog) [data-media-glass] {
  border: 1px solid var(--media-glass-edge);
  border-radius: 14px;
  background: var(--media-glass-solid);
  color: var(--media-glass-ink);
  box-shadow: inset 0 1px 0 var(--media-glass-shine), 0 4px 16px rgb(29 23 19 / .12);
  transition: box-shadow 160ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :is(#main, dialog) [data-media-glass] {
    background: var(--media-glass-tint);
    text-shadow: 0 1px 2px var(--media-glass-label-halo);
    -webkit-backdrop-filter: blur(var(--media-glass-blur, 12px)) saturate(115%);
    backdrop-filter: blur(var(--media-glass-blur, 12px)) saturate(115%);
  }

  /* Support glyph edges without filling more of the picture. */
  :is(#main, dialog) [data-media-glass] > :is(.icon, .villa-icon) {
    filter: drop-shadow(0 1px 1px var(--media-glass-label-halo));
  }

  :is(#main, dialog) :where(.hero-visual) [data-media-glass] {
    text-shadow: 0 0 2px var(--media-glass-label-halo), 0 1px 3px var(--media-glass-label-halo);
  }

  :is(#main, dialog) :where(.hero-visual, .photo-stage) [data-media-glass] > .icon {
    filter: drop-shadow(0 0 1px var(--media-glass-label-halo)) drop-shadow(0 1px 2px var(--media-glass-label-halo));
  }
}

@media (hover: hover) {
  :is(#main, dialog) [data-media-glass]:hover,
  :is(#main, dialog) :is(button, a):hover > [data-media-glass] {
    box-shadow: inset 0 0 0 1px var(--media-glass-shine), 0 6px 20px rgb(29 23 19 / .15);
  }
}

:is(#main, dialog) [data-media-glass]:active,
:is(#main, dialog) :is(button, a):active > [data-media-glass] {
  box-shadow: inset 0 0 0 2px var(--media-glass-shine), 0 2px 8px rgb(29 23 19 / .12);
}

:is(#main, dialog) [data-media-glass]:focus-visible {
  outline: 2px solid #fffdf8;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #332d28;
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :is(#main, dialog) [data-media-glass] {
    background: var(--media-glass-solid);
    border-color: currentColor;
    text-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :is(#main, dialog) [data-media-glass] > :is(.icon, .villa-icon) {
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(#main, dialog) [data-media-glass] {
    transition: none;
  }
}

@media (forced-colors: active) {
  :is(#main, dialog) [data-media-glass] {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
    text-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :is(#main, dialog) [data-media-glass] > :is(.icon, .villa-icon) {
    filter: none;
  }

  :is(#main, dialog) [data-media-glass]:is(:hover, :active, :focus-visible),
  :is(#main, dialog) :is(button, a):is(:hover, :active) > [data-media-glass] {
    box-shadow: none;
  }

  :is(#main, dialog) [data-media-glass]:focus-visible {
    outline-color: Highlight;
  }
}