/* Interaction states.
   The site had none — every button, card and link was dead to the cursor.

   The rule here is the same as the motion language: one direction, one
   distance, one curve. Nothing lifts more than 2px, nothing scales, nothing
   changes colour dramatically. The response should be felt, not watched. */

.btn,
.topnav__link,
.panel__item,
.panel__new,
.panel__viewall,
.card,
.thumb,
.studio__go,
.chip,
.fcard,
.fcard__go,
.bonus__cta,
.step {
  transition:
    transform var(--hover) var(--ease),
    opacity var(--hover) var(--ease),
    border-color var(--hover) var(--ease),
    background-color var(--hover) var(--ease),
    box-shadow var(--hover) var(--ease),
    color var(--hover) var(--ease);
}

/* ---- Buttons -------------------------------------------------------- */

.btn--gold:hover,
.panel__new:hover,
.bonus__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.7vw 2.4vw rgba(201, 160, 99, 0.3);
}

.btn--gold:active,
.panel__new:active,
.bonus__cta:active {
  transform: translateY(0);
  box-shadow: 0 0.2vw 0.9vw rgba(201, 160, 99, 0.24);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--gold-live);
  background: var(--gold-wash);
}

/* The arrow leans forward on hover — the one place a small extra motion
   earns its keep, because it points at what the button does. */
.btn--gold .icon-arrow,
.bonus__cta .icon {
  transition: transform var(--hover) var(--ease);
}

.btn--gold:hover .icon-arrow,
.bonus__cta:hover .icon {
  transform: translateX(3px);
}

/* ---- Navigation ------------------------------------------------------ */

.topnav__link:hover {
  color: var(--white);
}

.topnav__link.is-active:hover {
  color: var(--gold-bright);
}

/* Inactive links grow the same underline the active one has, from the
   centre out — so the nav explains its own active state. */
.topnav__link:not(.is-active)::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -0.85vw;
  height: 2px;
  background: var(--gold);
  opacity: 0;
  transition:
    left var(--hover) var(--ease),
    right var(--hover) var(--ease),
    opacity var(--hover) var(--ease);
}

.topnav__link:not(.is-active):hover::after {
  left: 0;
  right: 0;
  opacity: 0.75;
}

/* ---- Dashboard ------------------------------------------------------- */

.panel__item:hover {
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.95);
}

.panel__item.is-active:hover {
  background: rgba(201, 160, 99, 0.17);
  color: var(--gold-bright);
}

/* Only cards that actually go somewhere lift. A static card that rises under
   the cursor promises a click it will not honour — the Client Projects tiles
   are display-only. Cards with their own interaction (.tmpl) define it
   themselves. */
a.card:hover,
.thumb:hover {
  transform: translateY(-2px);
}

.card__play,
.thumb__play {
  transition:
    transform var(--hover) var(--ease),
    background-color var(--hover) var(--ease),
    border-color var(--hover) var(--ease);
}

.card:hover .card__play,
.thumb:hover .thumb__play {
  background: rgba(255, 255, 255, 0.34);
  border-color: rgba(255, 255, 255, 0.55);
}

.panel__viewall:hover {
  color: var(--gold-bright);
}

/* ---- Second page ------------------------------------------------------ */

.studio__go:hover {
  border-color: var(--gold-live);
  background: var(--gold-wash);
  transform: translateY(-2px);
}

.studio__go .icon {
  transition: transform var(--hover) var(--ease);
}

.studio__go:hover .icon {
  transform: translateX(2px);
}

.chip:hover {
  transform: translateY(-2px);
  border-color: var(--gold-live);
  background: rgba(255, 255, 255, 0.05);
}

/* ---- Third page -------------------------------------------------------- */

.fcard:hover {
  transform: translateY(-3px);
  border-color: var(--gold-rule);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 1.2vw 3vw rgba(0, 0, 0, 0.45);
}

.fcard:hover .fcard__go {
  border-color: var(--gold-live);
  background: var(--gold-wash);
}

.fcard__go .icon {
  transition: transform var(--hover) var(--ease);
}

.fcard:hover .fcard__go .icon {
  transform: translateX(2px);
}

/* ---- Fourth page -------------------------------------------------------- */

.step:hover {
  border-color: var(--gold-rule);
  box-shadow: inset 0 1px 0 rgba(246, 226, 184, 0.26);
}

/* ---- Focus -------------------------------------------------------------- */
/* Keyboard users get the same affordance, and a visible ring. Pointer users
   never see it. */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .card,
  .thumb,
  .chip,
  .fcard,
  .studio__go,
  .bonus__cta,
  .panel__new {
    transition: none;
  }

  .btn--gold:hover,
  .btn--ghost:hover,
  .card:hover,
  .thumb:hover,
  .chip:hover,
  .fcard:hover,
  .studio__go:hover,
  .bonus__cta:hover,
  .panel__new:hover {
    transform: none;
  }
}