/* 30% transparency = 70% background alpha. Never fade the whole control. */
:root { --homepage-control-fill: rgba(0, 0, 0, .7); }

/* The collapsed rail has no shared backing or outer contour. */
.download-center-portal,
.download-center-portal.is-open,
.download-center-frame {
  background: transparent;
  box-shadow: none;
}
.download-center-closed-flow { display: none; }

html body[data-next-style] .next-status-header .next-action-zone .ac-action-surface {
  background: var(--homepage-control-fill) !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}
html body[data-next-style] .next-action-zone .next-download,
html body[data-next-style] .next-action-zone .ac-language-orbit {
  background: transparent !important;
  box-shadow: none !important;
}

/* Quality uses the same canvas flow as the other homepage controls. */
body[data-next-style] .website-quality {
  border-color: transparent;
  background: var(--homepage-control-fill);
  background-clip: padding-box;
  box-shadow: none;
  isolation: isolate;
  overflow: hidden;
}
body[data-next-style] .website-quality select {
  background: transparent;
  border-color: transparent;
}
body[data-next-style] .website-quality option { background: #0a1728; }

/* The iframe must also be transparent all the way down to the cards. */
html[data-homepage-download],
html[data-homepage-download] body,
html[data-homepage-download] body .viewport-fit,
html[data-homepage-download] body .download-center,
html[data-homepage-download] body .matrix,
html[data-homepage-download] body .systems,
html[data-homepage-download] body .system-list,
html[data-homepage-download] body .left-access,
html[data-homepage-download] body .left-brand-zone {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-homepage-download] body:not(.host-expanded) .matrix {
  border-color: transparent !important;
}
html[data-homepage-download] body:not(.host-expanded) .matrix > .matrix-four-flow,
html[data-homepage-download] body:not(.host-expanded) .matrix > .flow-frame {
  display: none !important;
}
html[data-homepage-download] body.hierarchy-v3 .systems :is(.system, .emulator-button, .product-entry-button, .official-site-button) {
  background: var(--homepage-control-fill) !important;
  background-clip: padding-box !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Keep the quality border running even when the selected profile disables canvas effects. */
@property --homepage-control-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
body[data-next-style] .website-quality::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--homepage-control-angle),
    transparent 0deg 24deg, rgba(255, 92, 142, .2) 56deg,
    rgba(255, 216, 77, .58) 76deg, #fff3c2 88deg, #ff355e 92deg,
    transparent 103deg 204deg, rgba(168, 85, 247, .2) 236deg,
    rgba(97, 220, 255, .58) 256deg, #efffff 268deg, #a855f7 272deg,
    transparent 283deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: homepageControlFlow 6.4s linear infinite;
}
@keyframes homepageControlFlow { to { --homepage-control-angle: -360deg; } }
@media (prefers-reduced-motion: reduce) {
  body[data-next-style] .website-quality::before { animation: none; }
}