/* Trawa Romero — motion polish v1.
   Progressive enhancement layered on top of the existing reveal system. */

body.tr-home-v3 [data-reveal] {
  transition-timing-function: cubic-bezier(.16, .84, .28, 1);
  transition-duration: .7s;
}

@keyframes mpRise {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes mpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

body.tr-home-v3 .tr-hero-in > .tr-kick,
body.tr-home-v3 .tr-hero-in > #heroTitle,
body.tr-home-v3 .tr-hero-in > .tr-lede,
body.tr-home-v3 .tr-hero-in > .tr-hero-cta,
body.tr-home-v3 .tr-hero-in > .tr-search {
  animation: mpRise .85s cubic-bezier(.16, .84, .28, 1) both;
}
body.tr-home-v3 .tr-hero-in > .tr-kick { animation-delay: .05s; }
body.tr-home-v3 .tr-hero-in > #heroTitle { animation-delay: .14s; animation-duration: 1s; }
body.tr-home-v3 .tr-hero-in > .tr-lede { animation-delay: .30s; }
body.tr-home-v3 .tr-hero-in > .tr-hero-cta { animation-delay: .42s; }
body.tr-home-v3 .tr-hero-in > .tr-search { animation-delay: .52s; }
body.tr-home-v3 .tr-hero-person { animation: mpFade 1.4s ease .25s both; }
body.tr-home-v3 .tr-hero-plate { animation: mpFade 1s ease .9s both; }
body.tr-home-v3 .tr-kick s {
  transform-origin: 0 50%;
  animation: mpGrowX .7s cubic-bezier(.16, .84, .28, 1) .2s both;
}

body.tr-home-v3 .tr-quick[data-reveal] a,
body.tr-home-v3 .tr-picks[data-reveal] .tr-pick {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.16, .84, .28, 1), transform .6s cubic-bezier(.16, .84, .28, 1);
}
body.tr-home-v3 .tr-quick[data-reveal].is-in a,
body.tr-home-v3 .tr-picks[data-reveal].is-in .tr-pick { opacity: 1; transform: none; }
body.tr-home-v3 .tr-quick.is-in a:nth-child(1) { transition-delay: .05s; }
body.tr-home-v3 .tr-quick.is-in a:nth-child(2) { transition-delay: .15s; }
body.tr-home-v3 .tr-quick.is-in a:nth-child(3) { transition-delay: .25s; }
body.tr-home-v3 .tr-picks.is-in .tr-pick:nth-child(1) { transition-delay: .08s; }
body.tr-home-v3 .tr-picks.is-in .tr-pick:nth-child(2) { transition-delay: .18s; }
body.tr-home-v3 .tr-picks.is-in .tr-pick:nth-child(3) { transition-delay: .28s; }

body.tr-home-v3 .tr-spec[data-reveal] .tr-obs-list li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16, .84, .28, 1);
}
body.tr-home-v3 .tr-spec[data-reveal].is-in .tr-obs-list li { opacity: 1; transform: none; }
body.tr-home-v3 .tr-spec.is-in .tr-obs-list li:nth-child(1) { transition-delay: .15s; }
body.tr-home-v3 .tr-spec.is-in .tr-obs-list li:nth-child(2) { transition-delay: .27s; }
body.tr-home-v3 .tr-spec.is-in .tr-obs-list li:nth-child(3) { transition-delay: .39s; }

body.tr-home-v3 .tr-btn {
  transition: background .3s ease, color .3s ease, box-shadow .35s ease, transform .25s cubic-bezier(.2, .7, .3, 1);
}
body.tr-home-v3 .tr-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(223, 126, 158, .22);
}
body.tr-home-v3 .tr-btn:active { transform: translateY(0) scale(.985); transition-duration: .12s; }
body.tr-home-v3 .tr-pick {
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), filter .45s ease;
}
body.tr-home-v3 .tr-pick:hover { transform: translateY(-3px); }
body.tr-home-v3 .tr-search input {
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
body.tr-home-v3 .tr-search input:focus { box-shadow: 0 0 0 3px rgba(223, 126, 158, .14); }
body.tr-home-v3 .tr-spec-img img {
  transition: transform 1.6s cubic-bezier(.16, .84, .28, 1), filter .7s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.tr-home-v3 .tr-hero-in > *,
  body.tr-home-v3 .tr-hero-person,
  body.tr-home-v3 .tr-hero-plate,
  body.tr-home-v3 .tr-kick s { animation: none !important; }
  body.tr-home-v3 .tr-quick[data-reveal] a,
  body.tr-home-v3 .tr-picks[data-reveal] .tr-pick,
  body.tr-home-v3 .tr-spec[data-reveal] .tr-obs-list li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.tr-home-v3 .tr-btn,
  body.tr-home-v3 .tr-pick { transition: none !important; }
}
