/* Botões: o rótulo entra em foco no hover (0,42 s); o secundário tem um
   brilho laranja girando na borda (5 s), só quando está na tela. */

@property --btn-orbit { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.btn__label { display: inline-flex; align-items: center; gap: inherit; }
.has-motion .btn:hover .btn__label { animation: btn-focus 0.42s var(--ease-out) both; }
@keyframes btn-focus {
  0% { filter: blur(2.2px); opacity: 0.7; transform: scale(1.02); }
  55% { filter: blur(0.6px); opacity: 0.95; }
  100% { filter: none; opacity: 1; transform: none; }
}

.btn.btn--secondary {
  position: relative;
  isolation: isolate;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 50%, transparent);
}
.btn.btn--secondary:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.btn--secondary::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--btn-orbit), transparent 0 72%, color-mix(in srgb, var(--sun) 90%, transparent) 86%, transparent 100%);
  -webkit-mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--ink) 0 0) content-box exclude, linear-gradient(var(--ink) 0 0);
}
.has-motion .btn--secondary::before { animation: btn-orbit 5s linear infinite paused; }
.has-motion .btn--secondary.is-inview::before { animation-play-state: running; }
@keyframes btn-orbit { to { --btn-orbit: 360deg; } }

/* Botão de som, no canto; no celular se recolhe ao rolar para baixo. */
.sound-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 450;
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.4s var(--ease-out);
}
html.js .sound-toggle { display: inline-flex; }
html[data-fabs="tucked"] .sound-toggle { transform: translateY(160%); }
.sound-toggle__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sound-toggle__bars i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: bottom; transform: scaleY(0.3); }
.has-motion .sound-toggle:not([data-on="true"]) .sound-toggle__bars i { animation: sound-idle 2.4s ease-in-out infinite; }
.has-motion .sound-toggle[data-on="true"] .sound-toggle__bars i { animation: sound-bar 1.1s ease-in-out infinite alternate; background: var(--rust); }
.sound-toggle__bars i:nth-child(2) { animation-delay: -0.4s !important; }
.sound-toggle__bars i:nth-child(3) { animation-delay: -0.8s !important; }
@keyframes sound-idle { 0%, 100% { transform: scaleY(0.2); } 50% { transform: scaleY(0.5); } }
@keyframes sound-bar { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }