/* Homepage physical-interaction layer.
   This file changes response and focus states only. It does not alter the
   approved assets, wording, dimensions, spacing, or section composition. */
:root {
  --home-motion-fast: 150ms;
  --home-motion-medium: 240ms;
  --home-motion-ease: cubic-bezier(.2, .72, .2, 1);
  --home-focus-green: rgba(156, 240, 178, .94);
  --home-focus-copper: rgba(213, 146, 93, .94);
}

/* Header controls stay fixed to the timber rail; only their marks respond. */
.site-nav .nav-link,
.site-nav .signal-toggle,
.site-nav .menu-toggle {
  transition: color var(--home-motion-fast) ease, text-shadow var(--home-motion-fast) ease;
}
.site-nav .signal-toggle .toggle-dot {
  transform-origin: center;
  transition: transform var(--home-motion-fast) var(--home-motion-ease),
    background-color var(--home-motion-fast) ease,
    box-shadow var(--home-motion-fast) ease;
}
.site-nav .signal-toggle.is-pressed .toggle-dot,
.site-nav .signal-toggle:active .toggle-dot,
.site-nav .menu-toggle.is-pressed,
.site-nav .menu-toggle:active {
  transform: scale(.82);
}

/* Forged hero controls: firm iron travel with a restrained edge highlight. */
.hero-actions .rune-button {
  transform-origin: center;
  transition: transform var(--home-motion-fast) var(--home-motion-ease),
    filter var(--home-motion-fast) ease,
    border-color var(--home-motion-fast) ease,
    box-shadow var(--home-motion-fast) ease;
}
.hero-actions .rune-button:hover,
.hero-actions .rune-button:focus-visible {
  transform: translateY(-1px);
}
.hero-actions .rune-button:active,
.hero-actions .rune-button.is-pressed {
  transform: translateY(2px) scale(.99);
  filter: brightness(.94);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
}
.hero-actions .rune-button--primary:focus-visible {
  outline-color: var(--home-focus-green);
}
.hero-actions .rune-button--secondary:focus-visible {
  outline-color: var(--home-focus-copper);
}

/* Latest Run: mounted iron viewer plus a weighty wood call-to-action. */
#latest-transmission .media-window--feature,
#latest-transmission .latest-transmission-copy .rune-button {
  transform-origin: center;
  transition: transform var(--home-motion-fast) var(--home-motion-ease),
    filter var(--home-motion-medium) ease,
    box-shadow var(--home-motion-medium) ease;
}
#latest-transmission .media-window--feature:active,
#latest-transmission .media-window--feature.is-pressed {
  transform: translateY(1px);
  filter: saturate(.98) brightness(.96);
  box-shadow: 0 11px 22px rgba(0, 0, 0, .5);
}
#latest-transmission .latest-transmission-copy .rune-button:hover,
#latest-transmission .latest-transmission-copy .rune-button:focus-visible {
  transform: translateY(-1px);
}
#latest-transmission .latest-transmission-copy .rune-button:active,
#latest-transmission .latest-transmission-copy .rune-button.is-pressed {
  transform: translateY(2px) scale(.992);
  filter: brightness(.94) drop-shadow(0 4px 6px rgba(0, 0, 0, .56));
}

/* The Cut: the clips remain locked to their iron rails; the hardware presses. */
#transmissions .media-window,
#transmissions .icon-button {
  transform-origin: center;
  transition: transform var(--home-motion-fast) var(--home-motion-ease),
    filter var(--home-motion-fast) ease,
    box-shadow var(--home-motion-fast) ease,
    border-color var(--home-motion-fast) ease;
}
#transmissions .media-window:active,
#transmissions .media-window.is-pressed {
  transform: translateY(1px);
  filter: saturate(.94) contrast(1.06) brightness(.96);
}
#transmissions .icon-button:hover,
#transmissions .icon-button:focus-visible {
  transform: translateY(-1px);
}
#transmissions .icon-button:active,
#transmissions .icon-button.is-pressed {
  transform: translateY(1px) scale(.98);
  filter: brightness(.9);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .72), 0 2px 5px rgba(0, 0, 0, .3);
}

/* Campaign pins react as mounted hardware. The table and map never move. */
#campaign .map-marker {
  transition: transform var(--home-motion-fast) var(--home-motion-ease),
    filter var(--home-motion-fast) ease,
    border-color var(--home-motion-fast) ease,
    box-shadow var(--home-motion-fast) ease;
}
#campaign .map-marker:hover,
#campaign .map-marker:focus-visible {
  transform: translateY(-1px) scale(1.035);
}
#campaign .map-marker:active,
#campaign .map-marker.is-pressed {
  transform: translateY(1px) scale(1.015);
  filter: saturate(1.02) brightness(.96);
}

/* Wax keeps its baked lettering crisp: pressure is shown through depth and
   shadow instead of a continuous scale animation. */
#campaign .campaign-copy .rune-button--wax-asset {
  transform-origin: center;
  transition: transform var(--home-motion-fast) var(--home-motion-ease),
    filter var(--home-motion-fast) ease;
}
#campaign .campaign-copy .rune-button--wax-asset:hover,
#campaign .campaign-copy .rune-button--wax-asset:focus-visible {
  transform: translateY(-1px);
}
#campaign .campaign-copy .rune-button--wax-asset:active,
#campaign .campaign-copy .rune-button--wax-asset.is-pressed {
  transform: translateY(1px);
  filter: brightness(.93) drop-shadow(0 5px 7px rgba(19, 9, 23, .48));
}

/* Parchment calendar: ink and paper react without shifting the ledger grid. */
#signal .next-signal-month-button {
  transform-origin: center;
  transition: transform var(--home-motion-fast) var(--home-motion-ease),
    background-color var(--home-motion-fast) ease,
    box-shadow var(--home-motion-fast) ease,
    color var(--home-motion-fast) ease;
}
#signal .next-signal-month-button:hover,
#signal .next-signal-month-button:focus-visible {
  transform: translateY(-1px) rotate(-.35deg);
  box-shadow: inset 0 0 0 1px rgba(255, 247, 224, .34), 0 4px 4px rgba(39, 23, 12, .2);
}
#signal .next-signal-month-button:last-child:hover,
#signal .next-signal-month-button:last-child:focus-visible {
  transform: translateY(-1px) rotate(.35deg);
}
#signal .next-signal-month-button:active,
#signal .next-signal-month-button.is-pressed {
  transform: translateY(1px);
  background: rgba(208, 183, 140, .58);
  box-shadow: inset 0 2px 3px rgba(39, 23, 12, .28);
}
#signal .next-signal-calendar-day {
  transition: background-color var(--home-motion-fast) ease,
    box-shadow var(--home-motion-fast) ease;
}
#signal .next-signal-calendar-day:hover,
#signal .next-signal-calendar-day:focus-visible {
  background: rgba(43, 24, 12, .075);
  box-shadow: inset 0 0 0 1px rgba(36, 20, 11, .18);
}
#signal .next-signal-calendar-day:active,
#signal .next-signal-calendar-day.is-pressed {
  background: rgba(43, 24, 12, .13);
  box-shadow: inset 0 2px 4px rgba(36, 20, 11, .2);
}

/* Field Notes: lift the loose page, then let its summary press into the sheet. */
#field-notes .note-card summary {
  transform-origin: center;
  transition: transform var(--home-motion-fast) var(--home-motion-ease),
    filter var(--home-motion-fast) ease;
}
#field-notes .note-card summary:active,
#field-notes .note-card summary.is-pressed {
  transform: translateY(1px);
  filter: brightness(.96);
}
#field-notes .note-open-link:focus-visible,
#field-notes .section-heading .text-button:focus-visible {
  outline-color: var(--home-focus-green);
}

/* Oathsworn: approved onyx wiggle remains the hover language. The stone does
   not lift when pressed; only its light settles. */
#oathsworn .community-tile.is-pressed,
#oathsworn .community-tile:active {
  transform: none;
  animation: none;
  filter: brightness(.9);
}
#oathsworn .dispatch-card {
  transform-origin: center;
  transition: transform var(--home-motion-medium) var(--home-motion-ease),
    filter var(--home-motion-medium) ease;
}
#oathsworn .dispatch-card:hover,
#oathsworn .dispatch-card:focus-visible {
  transform: translateY(-2px) rotate(-.15deg);
}
#oathsworn .dispatch-card:active,
#oathsworn .dispatch-card.is-pressed {
  transform: translateY(1px) rotate(-.08deg);
  filter: brightness(.95) drop-shadow(0 12px 13px rgba(0, 0, 0, .52));
}
#oathsworn .physical-signal-band .rune-button {
  transform-origin: center;
  transition: transform var(--home-motion-fast) var(--home-motion-ease),
    filter var(--home-motion-fast) ease,
    box-shadow var(--home-motion-fast) ease;
}
#oathsworn .physical-signal-band .rune-button:hover,
#oathsworn .physical-signal-band .rune-button:focus-visible {
  transform: translateY(-1px);
}
#oathsworn .physical-signal-band .rune-button:active,
#oathsworn .physical-signal-band .rune-button.is-pressed {
  transform: translateY(1px);
  filter: brightness(.92);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .66), 0 4px 9px rgba(0, 0, 0, .36);
}

/* Dialog controls use the same forged response as their page counterparts. */
.site-modal .rune-button,
.next-signal-note-dialog .rune-button,
.site-modal .modal-close,
.next-signal-note-dialog .next-signal-note-close {
  transition: transform var(--home-motion-fast) var(--home-motion-ease),
    filter var(--home-motion-fast) ease,
    background-color var(--home-motion-fast) ease;
}
.site-modal .rune-button:active,
.site-modal .rune-button.is-pressed,
.next-signal-note-dialog .rune-button:active,
.next-signal-note-dialog .rune-button.is-pressed,
.site-modal .modal-close:active,
.site-modal .modal-close.is-pressed,
.next-signal-note-dialog .next-signal-note-close:active,
.next-signal-note-dialog .next-signal-note-close.is-pressed {
  transform: translateY(1px) scale(.985);
  filter: brightness(.92);
}

/* Motion accessibility: keep every control state clear without travel. */
@media (prefers-reduced-motion: reduce) {
  .site-nav .signal-toggle.is-pressed .toggle-dot,
  .site-nav .signal-toggle:active .toggle-dot,
  .site-nav .menu-toggle.is-pressed,
  .site-nav .menu-toggle:active,
  .hero-actions .rune-button:hover,
  .hero-actions .rune-button:focus-visible,
  .hero-actions .rune-button:active,
  .hero-actions .rune-button.is-pressed,
  #latest-transmission .media-window--feature:active,
  #latest-transmission .media-window--feature.is-pressed,
  #latest-transmission .latest-transmission-copy .rune-button:hover,
  #latest-transmission .latest-transmission-copy .rune-button:focus-visible,
  #latest-transmission .latest-transmission-copy .rune-button:active,
  #latest-transmission .latest-transmission-copy .rune-button.is-pressed,
  #transmissions .media-window:active,
  #transmissions .media-window.is-pressed,
  #transmissions .icon-button:hover,
  #transmissions .icon-button:focus-visible,
  #transmissions .icon-button:active,
  #transmissions .icon-button.is-pressed,
  #campaign .map-marker:hover,
  #campaign .map-marker:focus-visible,
  #campaign .map-marker:active,
  #campaign .map-marker.is-pressed,
  #campaign .campaign-copy .rune-button--wax-asset:hover,
  #campaign .campaign-copy .rune-button--wax-asset:focus-visible,
  #campaign .campaign-copy .rune-button--wax-asset:active,
  #campaign .campaign-copy .rune-button--wax-asset.is-pressed,
  #signal .next-signal-month-button:hover,
  #signal .next-signal-month-button:focus-visible,
  #signal .next-signal-month-button:active,
  #signal .next-signal-month-button.is-pressed,
  #field-notes .note-card summary:active,
  #field-notes .note-card summary.is-pressed,
  #oathsworn .community-tile,
  #oathsworn .community-tile:hover,
  #oathsworn .community-tile:focus-visible,
  #oathsworn .community-tile:active,
  #oathsworn .community-tile.is-pressed,
  #oathsworn .dispatch-card:hover,
  #oathsworn .dispatch-card:focus-visible,
  #oathsworn .dispatch-card:active,
  #oathsworn .dispatch-card.is-pressed,
  #oathsworn .physical-signal-band .rune-button:hover,
  #oathsworn .physical-signal-band .rune-button:focus-visible,
  #oathsworn .physical-signal-band .rune-button:active,
  #oathsworn .physical-signal-band .rune-button.is-pressed,
  .site-modal .rune-button:active,
  .site-modal .rune-button.is-pressed,
  .next-signal-note-dialog .rune-button:active,
  .next-signal-note-dialog .rune-button.is-pressed {
    animation: none !important;
    transform: none !important;
  }
  #field-notes .note-card:nth-child(1):hover,
  #field-notes .note-card:nth-child(1):focus-within { transform: rotate(-.7deg); }
  #field-notes .note-card:nth-child(2):hover,
  #field-notes .note-card:nth-child(2):focus-within { transform: rotate(.55deg); }
  #field-notes .note-card:nth-child(3):hover,
  #field-notes .note-card:nth-child(3):focus-within { transform: rotate(-.35deg); }
}