/* V57 French Laundry journal: optional one-time interactions.
   Every word is visible without this file or tfl-fx.js. Motion runs once,
   settles in under a second, and stays inside its own block. */
:root{--tfl-fx-maroon:var(--tfl-wine,#68151d)}

/* Shared hover/focus state for pills and cards */
.tfl-chaos-list li,.tfl-example-grid>div,.tfl-judgment-compare>div,.tfl-mission-stats>div{
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease
}
.tfl-chaos-list li:focus-visible,.tfl-example-grid>div:focus-visible{outline:2px solid var(--tfl-fx-maroon);outline-offset:3px}

/* Chaos list: pills go maroon and wobble once on hover / tap / focus */
.tfl-chaos-list li{cursor:default;-webkit-tap-highlight-color:transparent}
.tfl-chaos-list li:hover,.tfl-chaos-list li:focus{background:var(--tfl-fx-maroon);color:#fff;animation:tfl-fx-wobble .5s cubic-bezier(.3,1.5,.5,1) 1}
/* Scroll-in: a staggered burst of chaos, then everything settles back to calm */
.tfl-fx-ready .tfl-chaos-list.tfl-fx-in:not(.tfl-fx-done) li{animation:tfl-fx-chaos .9s cubic-bezier(.3,1.4,.5,1) 1 both;animation-delay:calc(var(--fx-i,0) * 70ms)}

/* Mission control: each stat card flashes maroon as it lands. The card itself
   is pinned in place by tfl-journal-v2.css, so only colors and the number move. */
.tfl-fx-ready .tfl-mission-stats.tfl-fx-in>div{animation:tfl-fx-card-flash .85s ease 1 both;animation-delay:calc(var(--fx-i,0) * 110ms)}
.tfl-fx-ready .tfl-mission-stats.tfl-fx-in strong{display:inline-block;animation:tfl-fx-pop .55s cubic-bezier(.3,1.6,.5,1) 1 both;animation-delay:calc(var(--fx-i,0) * 110ms)}
.tfl-mission-stats>div:hover{border-color:var(--tfl-fx-maroon);box-shadow:0 10px 22px -16px rgba(104,21,29,.6)}

/* Move now / Call the client + task examples: drift in once, lift on hover */
.tfl-fx-ready .tfl-judgment-compare.tfl-fx-in>div,
.tfl-fx-ready .tfl-example-grid.tfl-fx-in>div{animation:tfl-fx-drift .6s cubic-bezier(.2,.9,.3,1) 1 both;animation-delay:calc(var(--fx-i,0) * 90ms)}
.tfl-judgment-compare>div:hover{box-shadow:0 16px 30px -22px rgba(33,25,24,.6)}
.tfl-example-grid>div{border:1px solid transparent}
.tfl-example-grid>div:hover,.tfl-example-grid>div:focus{background:var(--tfl-fx-maroon);border-color:var(--tfl-fx-maroon)}
.tfl-example-grid>div:hover strong,.tfl-example-grid>div:focus strong,
.tfl-example-grid>div:hover span,.tfl-example-grid>div:focus span{color:#fff}

@keyframes tfl-fx-wobble{0%{transform:none}30%{transform:scale(1.05) rotate(-2deg)}60%{transform:scale(1.04) rotate(1.5deg)}100%{transform:none}}
@keyframes tfl-fx-chaos{
  0%{transform:none}
  25%{transform:translate(var(--fx-x,3px),-3px) rotate(var(--fx-r,-2deg)) scale(1.04);background:var(--tfl-fx-maroon);color:#fff}
  55%{transform:translate(calc(var(--fx-x,3px) * -.5),1px) rotate(calc(var(--fx-r,-2deg) * -.6));background:var(--tfl-fx-maroon);color:#fff}
  100%{transform:none}
}
@keyframes tfl-fx-card-flash{0%,100%{}35%{background:var(--tfl-fx-maroon);border-color:var(--tfl-fx-maroon)}}
@keyframes tfl-fx-pop{0%{transform:scale(.9)}55%{transform:scale(1.12)}100%{transform:none}}
@keyframes tfl-fx-drift{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .tfl-chaos-list li,.tfl-chaos-list li:hover,.tfl-chaos-list li:focus,
  .tfl-fx-ready .tfl-fx-in>div,.tfl-fx-ready .tfl-fx-in li,.tfl-fx-ready .tfl-fx-in strong{animation:none!important;transform:none!important}
}