/* Recognizable action icons; navigation, enquiries and descriptive action labels stay visible. */
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .cosmic-page {
    --control-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 4 12 8-12 8Z'/%3E%3C/svg%3E");
    --control-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M8 5v14M16 5v14'/%3E%3C/svg%3E");
    --control-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='m15 10 6-3v10l-6-3'/%3E%3C/svg%3E");
    --control-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H3v5M16 3h5v5M21 16v5h-5M8 21H3v-5'/%3E%3C/svg%3E");
    --control-collapse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h5V3M16 3v5h5M21 16h-5v5M8 21v-5H3'/%3E%3C/svg%3E");
    --control-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3ZM16 8a6 6 0 0 1 0 8m3-11a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
    --control-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3Zm13 0 6 6m0-6-6 6'/%3E%3C/svg%3E");
    --control-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
    --control-day: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.4 1.4m11.2 11.2L19 19M5 19l1.4-1.4M17.6 6.4 19 5'/%3E%3C/svg%3E");
    --control-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A9 9 0 0 1 9.5 4a9 9 0 1 0 10.5 10.5Z'/%3E%3C/svg%3E");
    --control-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E");
  }
  .cosmic-page :is(#motion-toggle, #sound-toggle, #fullscreen-toggle, #close-film, .film-trigger, .camera-trigger, #play-intro, button[data-lighting])::before,
  .cosmic-page .language-picker::before {
    content: ""; display: inline-block; flex: 0 0 auto; width: 20px; height: 20px;
    background: currentColor; vertical-align: middle; pointer-events: none;
    -webkit-mask: var(--control-icon) center / contain no-repeat;
    mask: var(--control-icon) center / contain no-repeat;
  }
  .cosmic-page :is(.film-trigger, #play-intro) { --control-icon: var(--control-play); }
  .cosmic-page .camera-trigger { --control-icon: var(--control-camera); }
  .cosmic-page #motion-toggle { --control-icon: var(--control-pause); }
  .cosmic-page #motion-toggle[aria-pressed="true"] { --control-icon: var(--control-play); }
  .cosmic-page #sound-toggle { --control-icon: var(--control-muted); }
  .cosmic-page #sound-toggle[aria-pressed="true"] { --control-icon: var(--control-sound); }
  .cosmic-page #fullscreen-toggle { --control-icon: var(--control-expand); }
  .cosmic-page #fullscreen-toggle[aria-pressed="true"] { --control-icon: var(--control-collapse); }
  .cosmic-page #close-film { --control-icon: var(--control-close); }
  .cosmic-page button[data-lighting="day"] { --control-icon: var(--control-day); }
  .cosmic-page button[data-lighting="night"] { --control-icon: var(--control-night); }
  .cosmic-page :is(.film-trigger, .camera-trigger, #play-intro, button[data-lighting])::before { margin-inline-end: 8px; }
  .cosmic-page :is(.film-trigger, .camera-trigger) > [aria-hidden="true"] { display: none; }
  .cosmic-page :is(#motion-toggle, #sound-toggle, #fullscreen-toggle, #close-film).control-icon-ready {
    box-sizing: border-box; min-width: 44px; min-height: 44px; width: 44px; height: 44px;
    flex: 0 0 44px; padding: 11px; font-size: 0; line-height: 0; text-align: center;
    border: 1px solid #a879dc80; border-radius: 50%; background: #160f20e8; color: #eadbff;
  }
  .cosmic-page #close-film.control-icon-ready > span { display: none; }
  .cosmic-page :is(#motion-toggle, #sound-toggle, #fullscreen-toggle, #close-film).control-icon-ready:not(:disabled):hover {
    background: #342044; border-color: #c4a0f3; color: #fff;
  }
  .cosmic-page :is(#motion-toggle, #sound-toggle, #fullscreen-toggle, #close-film).control-icon-ready:disabled { opacity: .4; cursor: default; }
  .cosmic-page .language-picker { position: relative; --control-icon: var(--control-globe); }
  .cosmic-page .language-picker::before { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #d9b9ff; }
  .cosmic-page .site-nav .language-picker .language-select { width: 78px; min-width: 78px; padding-inline-start: 32px; }
}
.cosmic-page :is(.film-trigger, .camera-trigger, #play-intro, button[data-lighting]) { min-height: 44px; }
.cosmic-page :is(.control-icon-ready, .film-trigger, .camera-trigger, #play-intro, button[data-lighting], .language-select, .gallery-button):focus-visible {
  outline: 2px solid #d6b4ff; outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .cosmic-page :is(.control-icon-ready, button[data-lighting], .language-select) { transition: none; }
}
@media (forced-colors: active) {
  .cosmic-page :is(#motion-toggle, #sound-toggle, #fullscreen-toggle, #close-film).control-icon-ready { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
  .cosmic-page :is(.control-icon-ready, .film-trigger, .camera-trigger, #play-intro, button[data-lighting])::before,
  .cosmic-page .language-picker::before { background: ButtonText; forced-color-adjust: none; }
}