/* One lower hero control group. Camera geometry and controller states are unchanged. */
.cosmic-page #intro .hero-bottom { justify-content: flex-end; }
.cosmic-page #intro .hero-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: clamp(3px, 1vw, 8px); max-width: 100%; }
.cosmic-page #intro:is(.is-static, .is-manual) .hero-actions .hero-primary { display: none; }

/* Text remains the accessible name. Unsupported masks or observers keep visible labels. */
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .cosmic-page #intro .hero-actions {
    --hero-controls-ready: 1;
    --hero-control-film: 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='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 4v16M17 4v16M3 9h4M3 15h4M17 9h4M17 15h4m-10-3 3-2-3-2Z'/%3E%3C/svg%3E");
    --hero-control-down: 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='M12 3v16m-6-6 6 6 6-6M5 22h14'/%3E%3C/svg%3E");
    --hero-control-return: 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-5 5 5 5M3 9h11a7 7 0 0 1 0 14'/%3E%3C/svg%3E");
    --hero-control-setups: 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-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  }
  .cosmic-page #intro .hero-actions .hero-control-ready {
    box-sizing: border-box; position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px;
    padding: 11px; margin: 0; gap: 0; font-size: 0; line-height: 0; letter-spacing: 0;
    border: 1px solid #a879dc80; border-radius: 50%; background: #160f20e8; color: #eadbff;
  }
  .cosmic-page #intro .hero-actions .hero-control-ready::before {
    content: ""; display: block; width: 20px; height: 20px; flex: 0 0 20px; margin: 0;
    background: currentColor; pointer-events: none;
    -webkit-mask: var(--control-icon) center / contain no-repeat;
    mask: var(--control-icon) center / contain no-repeat;
  }
  .cosmic-page #intro .hero-actions .hero-primary.camera-trigger,
  .cosmic-page #intro .hero-actions #play-intro { --control-icon: var(--control-camera); }
  .cosmic-page #intro.is-manual .hero-actions #play-intro { --control-icon: var(--hero-control-return); }
  .cosmic-page #intro .hero-actions .tour-film { --control-icon: var(--hero-control-film); }
  .cosmic-page #intro .hero-actions > a { --control-icon: var(--hero-control-down); }
  .cosmic-page #intro .hero-actions > a[data-tour-go] { --control-icon: var(--hero-control-setups); }
  .cosmic-page #intro .hero-actions .hero-control-ready > [aria-hidden="true"] { display: none; }
  .cosmic-page #intro .hero-actions .hero-control-ready:not(:disabled):hover { background: #342044; border-color: #c4a0f3; color: #fff; }
  .cosmic-page #intro .hero-actions .hero-control-ready:disabled { opacity: .4; cursor: default; }
  .cosmic-page #intro .hero-actions .hero-control-ready:focus-visible { outline: 2px solid #e2c7ff; outline-offset: 4px; }
  .cosmic-page #intro .hero-actions .hero-control-ready::after {
    content: attr(data-hero-tooltip); position: absolute; top: auto; bottom: calc(100% + 12px); left: 50%; right: auto;
    width: max-content; max-width: min(260px, 70vw); height: auto; padding: 8px 11px;
    border: 1px solid #b68dde80; border-radius: 4px; background: #110b1af5; color: #f5effb;
    font: 12px/1.45 Arial, Helvetica, sans-serif; letter-spacing: 0; text-align: center; text-transform: none; white-space: normal;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%); transition: none; z-index: 20;
  }
  .cosmic-page #intro .hero-actions .hero-control-ready:is(:hover, :focus-visible)::after { opacity: 1; visibility: visible; transform: translateX(-50%); }
  .cosmic-page #intro .hero-actions .hero-control-ready:first-child::after { left: 0; transform: none; }
  .cosmic-page #intro .hero-actions .hero-control-ready:last-child::after { left: auto; right: 0; transform: none; }
  .cosmic-page #intro:is(.is-static, .is-manual) .hero-actions #play-intro.hero-control-ready::after { left: 0; right: auto; transform: none; }
  .cosmic-page #intro.is-manual .hero-actions #fullscreen-toggle.hero-control-ready::after { left: auto; right: 0; transform: none; }
  .cosmic-page #intro.is-manual .hero-stage:fullscreen .hero-control-ready::after { top: calc(100% + 12px); bottom: auto; }
}
@media (max-width: 750px) {
  .cosmic-page #intro .hero-bottom, .cosmic-page #intro .hero-actions { justify-content: center; }
}
@media (forced-colors: active) {
  .cosmic-page #intro .hero-actions .hero-control-ready,
  .cosmic-page #intro .hero-actions .hero-control-ready::after { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .cosmic-page #intro .hero-actions .hero-control-ready::before { background: ButtonText; forced-color-adjust: none; }
  .cosmic-page #intro .hero-actions .hero-control-ready:focus-visible { outline-color: Highlight; }
}