/* SANKYIOTA / quiet metal actions.
 * Adapted interaction idea: Magic UI Interactive Hover Button (MIT).
 * See vendor/magic-ui-buttons/NOTICE.txt. No continuous button animation.
 */
:root {
  --action-ink: #0c1622;
  --action-top: #202c39;
  --action-line: #847967;
  --action-gold: #ead4ab;
  --action-text: #f2f3f5;
  --action-radius: 8px;
  --action-ease: cubic-bezier(.2,.65,.25,1);
}
.action-icon { width: 18px; height: 18px; flex: 0 0 18px; pointer-events: none; }
.action-label { position: relative; z-index: 1; min-width: 0; overflow-wrap: anywhere; }
.action-link { gap: 22px; }
.action-link>.action-icon { position: relative; z-index: 1; color: var(--action-gold); transition: transform .3s var(--action-ease),color .2s; }
.hero-brand-links a.s-button,
.scene-copy .text-link.s-button {
  display: inline-flex; align-items: center; justify-content: space-between;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 48px; max-width: 100%; padding: 13px 19px 13px 23px;
  gap: 24px; border: 1px solid var(--action-line); border-radius: var(--action-radius);
  background: linear-gradient(145deg,var(--action-top),var(--action-ink) 60%);
  box-shadow: inset 0 1px 0 #ffffff12,0 4px 12px #00000018;
  font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .025em;
  color: var(--action-text); text-decoration: none;
  transition: border-color .25s,box-shadow .3s,color .2s,transform .18s var(--action-ease);
}
.hero-brand-links a.s-button { min-width: 134px; }
/* A subdued expanding fill, inspired by the MIT component; the label stays
 * visible throughout and no clone is announced by assistive technology. */
.s-button::before {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
  left: -46px; top: calc(50% - 110px); width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle,#e7cf9b20 0%,#cfaf7820 60%,#cfaf7800 72%);
  opacity: 0; transform: scale(.04); transition: transform .6s var(--action-ease),opacity .25s;
}
.s-button::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg,transparent 35%,#f4ddb526 49%,transparent 63%);
  transform: translateX(-120%); opacity: 0;
}
.hero-brand-links { gap: 12px; }
.gallery-controls,.scene-actions { gap: 10px; }
.gallery-controls button,.scene-actions button,
.hero-foot .light-pause,.ambient-control {
  display: inline-grid; place-items: center; position: relative;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
  border: 1px solid #758292; border-radius: 50%;
  background: linear-gradient(145deg,#202d3de8,#0a1420f5 68%);
  box-shadow: inset 0 1px 0 #ffffff14,0 3px 10px #00000016;
  color: #e5eaf0;
  transition: border-color .22s,color .22s,box-shadow .25s,transform .16s var(--action-ease);
}
.gallery-controls button[hidden] { display: none; }
.ambient-control { position: fixed; }
.footer-bottom .action-link { display: inline-flex; align-items: center; gap: 12px; }
.gallery-controls .action-icon,.scene-actions .action-icon { width: 18px; height: 18px; }
.gallery-controls button[aria-pressed="true"],.scene-actions button[aria-pressed="true"] { border-color: #c0a570; color: #ead4ab; }
.gallery-controls button:disabled,.scene-actions button:disabled,
.gallery-controls button[aria-disabled="true"],.scene-actions button[aria-disabled="true"],
.light-pause[aria-disabled="true"],.ambient-control[aria-disabled="true"] { opacity: .5; cursor: default; box-shadow: none; }
.life-word .text-link { border-bottom-color: #7f8a96; padding: 0 0 4px; font-size: 13px; }
.main-nav a { position: relative; }
.main-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--action-gold); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--action-ease); }
.portal-link .action-icon,.channel-group .action-icon { color: #c8bc9f; }
.channel-group a .action-icon { width: 16px; height: 16px; }
.language-options { border-color: #647183; box-shadow: inset 0 1px 0 #ffffff0d; }
.language-toggle { border-color: #758292; }
:is(.s-button,.text-link,.main-nav a,.channel-group a,.brand-portal,.gallery-controls button,.scene-actions button,.light-pause,.ambient-control,.language-switcher button):focus-visible {
  outline: 2px solid #f2d29a; outline-offset: 5px;
}
.s-button:focus-visible::before { opacity: 1; transform: scale(1.6); }
@media (hover:hover) and (pointer:fine) {
  .hero-brand-links a.s-button:hover,.scene-copy .text-link.s-button:hover {
    color: #fff; border-color: #dfc28f; box-shadow: inset 0 1px 0 #ffffff20,0 4px 20px #d1ae7012;
  }
  .s-button:hover::before { opacity: 1; transform: scale(1.6); }
  .s-button:hover::after { animation: action-glint .75s var(--action-ease) 1; }
  .action-link:hover>.action-icon { transform: translate(2px,-2px); color: #fff1d5; }
  .life-word .text-link:hover { border-bottom-color: #ead4ab; color: #fff; }
  .main-nav a:hover::after,.main-nav a:focus-visible::after { transform: scaleX(1); }
  .portal-link .action-icon,.channel-group .action-icon { transition: transform .3s var(--action-ease),color .2s; }
  .brand-portal:hover .action-icon,.channel-group a:hover .action-icon { transform: translate(2px,-2px); color: #f4dfb9; }
  .gallery-controls button:not(:disabled):not([aria-disabled="true"]):hover,
  .scene-actions button:not(:disabled):not([aria-disabled="true"]):hover,
  .light-pause:not([aria-disabled="true"]):hover,.ambient-control:not([aria-disabled="true"]):hover {
    background: linear-gradient(145deg,#2c3947,#101c29 68%); border-color: #d6bc8c; color: #f3dfb9;
    box-shadow: inset 0 1px 0 #ffffff20,0 3px 15px #d1ae7014;
  }
}
.hero-brand-links a.s-button:active,.scene-copy .text-link.s-button:active,
.gallery-controls button:not(:disabled):not([aria-disabled="true"]):active,
.scene-actions button:not(:disabled):not([aria-disabled="true"]):active,
.light-pause:not([aria-disabled="true"]):active,.ambient-control:not([aria-disabled="true"]):active {
  transform: translateY(1px); border-color: #e4c797; box-shadow: inset 0 2px 7px #00000050;
}
.life-word .text-link:active,.channel-group a:active { color: #f3d3a0; }
@keyframes action-glint { 0%{transform:translateX(-120%);opacity:0} 30%{opacity:1} 100%{transform:translateX(120%);opacity:0} }
@media(max-width:700px) {
  .hero-brand-links a.s-button { min-width: 114px; padding: 12px 14px; gap: 18px; font-size: 12px; }
  .hero-brand-links { gap: 10px; }
  .scene-copy .text-link.s-button { font-size: 13px; padding: 12px 17px; }
}
@media(max-width:380px) {
  .hero-foot { flex-wrap: wrap; }
  .hero-brand-links a.s-button { min-width: 103px; padding: 12px; gap: 12px; }
  .gallery-controls,.scene-actions { gap: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .s-button,.s-button::before,.s-button::after,.action-icon,.main-nav a::after,
  .gallery-controls button,.scene-actions button,.light-pause,.ambient-control { animation:none!important;transition:none!important; }
  .s-button::before,.s-button::after { display:none; }
  .action-link:hover>.action-icon,.brand-portal:hover .action-icon,.channel-group a:hover .action-icon,
  .hero-brand-links a.s-button:active,.scene-copy .text-link.s-button:active,
  .gallery-controls button:active,.scene-actions button:active,.light-pause:active,.ambient-control:active {transform:none;}
}