/* Outcome-like silk: list↔detail morph, portfolio sheet, tab crossfade.
   Frozen auth modal chrome is intentionally out of scope. */

:root {
  --hg-motion-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --hg-motion-sheet: 500ms;
  --hg-motion-fade: 220ms;
  --hg-motion-lift: 220ms;
}

::view-transition-group(*) {
  animation-duration: 480ms;
  animation-timing-function: var(--hg-motion-ease);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--hg-motion-fade);
  animation-timing-function: var(--hg-motion-ease);
}

::view-transition-old(root) {
  animation-name: hg-motion-fade-out;
}

::view-transition-new(root) {
  animation-name: hg-motion-fade-in;
}

html[data-hg-motion="open-detail"]::view-transition-old(root),
html[data-hg-motion="close-detail"]::view-transition-old(root),
html[data-hg-motion="open-detail"]::view-transition-new(root),
html[data-hg-motion="close-detail"]::view-transition-new(root) {
  animation-duration: 480ms;
}

html[data-hg-motion="portfolio-tab"]::view-transition-old(root),
html[data-hg-motion="portfolio-tab"]::view-transition-new(root),
html[data-hg-motion="filter"]::view-transition-old(root),
html[data-hg-motion="filter"]::view-transition-new(root) {
  animation-duration: 280ms;
}

::view-transition-group(hg-portfolio-body) {
  animation-duration: 280ms;
  animation-timing-function: var(--hg-motion-ease);
}

@keyframes hg-motion-fade-out {
  to { opacity: 0; }
}

@keyframes hg-motion-fade-in {
  from { opacity: 0; }
}

@keyframes hg-motion-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

body.hg-markets.hg-predict-market-page .pm-market-card {
  transition:
    transform var(--hg-motion-lift) var(--hg-motion-ease),
    box-shadow var(--hg-motion-lift) var(--hg-motion-ease),
    border-color var(--hg-motion-fade) ease;
}

html[data-hg-motion="portfolio-tab"] .pm-position-overview,
html[data-hg-motion="portfolio-tab"] .pm-position-card,
html[data-hg-motion="portfolio-tab"] .pm-portfolio-table-wrap,
html[data-hg-motion="portfolio-tab"] .pm-account-empty {
  animation: hg-motion-rise var(--hg-motion-lift) var(--hg-motion-ease) both;
}

body.hg-markets.hg-predict-market-page .pm-position-overview__hero strong,
body.hg-markets.hg-predict-market-page .pm-position-card__hero strong,
body.hg-markets.hg-predict-market-page .pm-positions-dock__count,
body.hg-markets.hg-predict-market-page .pm-positions-dock__meta {
  font-variant-numeric: tabular-nums;
  transition: color var(--hg-motion-fade) var(--hg-motion-ease);
}

body.hg-markets.hg-predict-market-page .pm-panel-tabs button {
  transition:
    color var(--hg-motion-fade) var(--hg-motion-ease),
    background var(--hg-motion-fade) var(--hg-motion-ease),
    box-shadow var(--hg-motion-fade) var(--hg-motion-ease);
}

body.hg-markets.hg-predict-market-page .pm-portfolio-drawer-scrim {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hg-motion-fade) var(--hg-motion-ease);
}

body.hg-markets.hg-predict-market-page .pm-portfolio-drawer-scrim[hidden] {
  display: block !important;
}

body.hg-markets.hg-predict-market-page .pm-portfolio-drawer-scrim.is-visible {
  opacity: 1;
  pointer-events: auto;
}

body.hg-markets.hg-predict-market-page .pm-positions-dock {
  transition:
    transform var(--hg-motion-lift) var(--hg-motion-ease),
    opacity var(--hg-motion-fade) var(--hg-motion-ease),
    box-shadow var(--hg-motion-lift) var(--hg-motion-ease);
}

@media (max-width: 1023px) {
  body.hg-markets.hg-predict-market-page .pm-detail-view .pm-detail-shell[data-experience="v2"] .pm-personal-dock:not(.is-expanded),
  body.hg-markets.hg-predict-market-page .pm-detail-view .pm-detail-shell[data-experience="v2"] .pm-personal-dock.is-expanded {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    inset: auto 0 0;
    z-index: 125;
    width: 100%;
    min-height: min(42dvh, 360px);
    max-height: min(72dvh, 640px) !important;
    overflow: hidden !important;
    border-radius: 18px 18px 0 0;
    transition:
      transform 500ms var(--hg-motion-ease),
      box-shadow 500ms var(--hg-motion-ease);
    will-change: transform;
  }

  body.hg-markets.hg-predict-market-page .pm-detail-view .pm-detail-shell[data-experience="v2"] .pm-personal-dock:not(.is-expanded) {
    transform: translate3d(0, 108%, 0);
    pointer-events: none;
    box-shadow: none;
  }

  body.hg-markets.hg-predict-market-page .pm-detail-view .pm-detail-shell[data-experience="v2"] .pm-personal-dock.is-expanded {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  body.hg-markets.hg-predict-market-page .pm-detail-view .pm-detail-shell[data-experience="v2"] .pm-personal-dock .pm-detail-bottom-body {
    display: block !important;
    min-height: 0;
    overflow-y: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  body.hg-markets.hg-predict-market-page .pm-market-card,
  body.hg-markets.hg-predict-market-page .pm-position-overview,
  body.hg-markets.hg-predict-market-page .pm-position-card,
  body.hg-markets.hg-predict-market-page .pm-portfolio-table-wrap,
  body.hg-markets.hg-predict-market-page .pm-account-empty,
  body.hg-markets.hg-predict-market-page .pm-portfolio-drawer-scrim,
  body.hg-markets.hg-predict-market-page .pm-positions-dock,
  body.hg-markets.hg-predict-market-page .pm-panel-tabs button {
    animation: none !important;
    transition: none !important;
  }

  body.hg-markets.hg-predict-market-page .pm-detail-view .pm-detail-shell[data-experience="v2"] .pm-personal-dock:not(.is-expanded),
  body.hg-markets.hg-predict-market-page .pm-detail-view .pm-detail-shell[data-experience="v2"] .pm-personal-dock.is-expanded {
    transition: none !important;
  }
}