/* Decorative canvas light sits behind content and never takes pointer input. */
.ambient-particles{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  user-select:none;
  mix-blend-mode:screen;
}
.hero>.ambient-particles{z-index:0}
.hero-caption{z-index:1}
.story-art>.ambient-particles,.music-art>.ambient-particles{z-index:2}
.story-art>.story-overlay,.music-art>.music-art-title{z-index:3}
.community>.ambient-particles{z-index:-1}

.hero-motion-controls{display:flex;align-items:center;justify-content:flex-end;gap:20px;flex-shrink:0}
.hero-motion-controls>button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:36px;
  min-width:44px;
  padding:8px 2px;
  border:0;
  background:none;
  color:#b8b6b6;
  font-size:9px;
  line-height:1.5;
  letter-spacing:.8px;
  white-space:nowrap;
  transition:color .25s ease;
}
.hero-motion-controls>button:hover{color:var(--paper,#f0ede7)}
.hero-motion-controls>button:focus-visible{outline-offset:4px}
#ambient-toggle>span:first-child{color:var(--scene-accent,var(--coral,#f3a58e));font-size:13px;line-height:1;transition:color .25s,opacity .25s}
#ambient-toggle[aria-pressed=false]>span:first-child{color:#a6a4a6;opacity:.55}
#ambient-toggle[aria-pressed=false]{color:#989499}
.hero-motion-controls>button:disabled{cursor:default;opacity:.55}

/* One soft sweep on intent, with no looping button animation. */
.button-primary{isolation:isolate;overflow:hidden}
.button-primary::after{
  content:'';
  position:absolute;
  top:-50%;
  bottom:-50%;
  left:0;
  width:42%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,246,230,.28),transparent);
  opacity:0;
  transform:translateX(-180%) rotate(18deg);
}
@keyframes ambient-button-sheen{
  0%{opacity:0;transform:translateX(-180%) rotate(18deg)}
  18%{opacity:1}
  82%{opacity:1}
  100%{opacity:0;transform:translateX(380%) rotate(18deg)}
}
@media(hover:hover) and (pointer:fine){
  html:not([data-effects=off]) .button-primary:hover::after{animation:ambient-button-sheen 1.05s cubic-bezier(.22,.65,.35,1) both}
}
html:not([data-effects=off]) .button-primary:focus-visible::after{animation:ambient-button-sheen 1.05s cubic-bezier(.22,.65,.35,1) both}
html[data-effects=off] .ambient-particles,html[data-effects=off] .button-primary::after{display:none}

@media(max-width:760px){
  .hero-motion-controls{gap:16px}
  .hero-motion-controls>button{min-height:44px;gap:6px;font-size:9px;letter-spacing:.4px;padding:8px 0}
  .control-topline{gap:12px}
}
@media(max-width:375px){
  .hero-motion-controls{gap:10px}
  .hero-motion-controls>button{font-size:8px;letter-spacing:.2px;gap:5px}
  #ambient-toggle>span:first-child{font-size:11px}
  .control-topline{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  .button-primary::after{display:none!important}
  .hero-motion-controls>button,#ambient-toggle>span:first-child{transition:none}
}