/* Short, opt-in effects. Media, feed geometry and scroll snapping keep their own transforms. */
.ot-motion-pressable {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease,
    box-shadow 180ms ease, scale 140ms cubic-bezier(.16, 1, .3, 1);
}

.ot-motion-pressable.ot-motion-pressed {
  scale: .982;
}

.team,
.tier,
.creator-nav button,
.bottom-nav button,
.bottom-nav a,
.header nav button,
.wallet-strip,
.primary,
.secondary,
.review-edit,
.clock-button {
  transition: background-color 160ms ease, border-color 180ms ease,
    color 160ms ease, box-shadow 180ms ease, scale 140ms cubic-bezier(.16, 1, .3, 1);
}

.team.blue[aria-pressed="true"] {
  box-shadow: inset 3px 0 currentColor, 0 0 18px rgba(48, 133, 255, .12);
}

.team.orange[aria-pressed="true"] {
  box-shadow: inset 3px 0 currentColor, 0 0 18px rgba(255, 139, 58, .11);
}

.bottom-nav button[aria-current="page"],
.bottom-nav button[aria-current="true"],
.bottom-nav a[aria-current="page"],
.bottom-nav .active {
  box-shadow: inset 0 2px 0 var(--orange, #ff8b3a), inset 0 13px 24px -20px rgba(255, 139, 58, .7);
}

.transfer-card.ot-motion-result-win {
  border-color: rgba(95, 162, 250, .65);
}

.transfer-card.ot-motion-result-loss {
  border-color: rgba(218, 136, 104, .55);
}

[data-motion-number] {
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .team.blue:hover:not(:disabled) {
    border-color: rgba(72, 150, 255, .72);
  }

  .team.orange:hover:not(:disabled) {
    border-color: rgba(255, 150, 75, .72);
  }

  .wallet-strip:hover:not(:disabled) {
    border-color: rgba(98, 161, 245, .72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ot-motion-pressable,
  .team,
  .tier,
  .creator-nav button,
  .bottom-nav button,
  .bottom-nav a,
  .header nav button,
  .wallet-strip,
  .primary,
  .secondary,
  .review-edit,
  .clock-button {
    transition: none !important;
  }

  .ot-motion-pressable.ot-motion-pressed {
    scale: 1;
  }
}

/* A single held-frame impact; the video itself keeps its bounded frame. */
.freeze-impact { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none; opacity: 0; overflow: hidden; border: 2px solid transparent; }
.freeze-impact::before { content: ''; position: absolute; width: 68%; aspect-ratio: 1; border: 2px solid #70b8ff; border-right-color: #ff9c5f; border-bottom-color: #ff9c5f; border-radius: 50%; box-shadow: 0 0 35px #3184e940, inset 0 0 25px #3184e925; }
.freeze-impact span { position: relative; color: #f5f9ff; font-family: var(--display, sans-serif); font-size: clamp(30px, 7vw, 56px); font-weight: 900; font-style: italic; letter-spacing: .08em; text-shadow: 0 3px 20px #031126; }
.is-freeze-impact > .freeze-impact { animation: freeze-impact-envelope 720ms ease-out both; }
.is-freeze-impact > .freeze-impact::before { animation: freeze-impact-ring 680ms cubic-bezier(.16,1,.3,1) both; }
.is-freeze-impact > .freeze-impact span { animation: freeze-impact-title 620ms cubic-bezier(.16,1,.3,1) both; }
@keyframes freeze-impact-envelope { 0% { opacity: 0; background: #123e6830; border-color: #73baff; } 15%, 48% { opacity: 1; background: #07172f62; border-color: #73baff; } 100% { opacity: 0; background: transparent; border-color: #ff9c5f; } }
@keyframes freeze-impact-ring { from { transform: scale(.5); opacity: .95; } to { transform: scale(1.7); opacity: 0; } }
@keyframes freeze-impact-title { from { transform: scale(1.16); letter-spacing: .16em; } to { transform: scale(1); letter-spacing: .08em; } }
@media (prefers-reduced-motion: reduce) {
  .is-freeze-impact > .freeze-impact { animation: freeze-impact-fade 720ms ease-out both; background: #07172f35; border-color: #548abb; }
  .is-freeze-impact > .freeze-impact::before { animation: none; display: none; }
  .is-freeze-impact > .freeze-impact span { animation: none; transform: none; }
  @keyframes freeze-impact-fade { 0%, 65% { opacity: .85; } 100% { opacity: 0; } }
}