/* Julie motion language: a restrained idle loop plus a scroll-directed run cycle. */
.julie-app-visual img {
  transform-origin: 42% 92%;
  will-change: transform;
}

html[data-motion="playing"] .julie-app-card.is-julie-visible .julie-app-visual img {
  animation: julie-idle-alive 2.7s ease-in-out infinite;
  animation-delay: var(--julie-idle-delay, 0s);
}

.julie-app-card:nth-child(2) { --julie-idle-delay: -.9s; }
.julie-app-card:nth-child(3) { --julie-idle-delay: -1.8s; }
.julie-app-card:nth-child(4) { --julie-idle-delay: -2.7s; }

@keyframes julie-idle-alive {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.35deg) scale(1); }
  24% { transform: translate3d(2px, -3px, 0) rotate(.45deg) scale(1.008, 1.003); }
  52% { transform: translate3d(-2px, -7px, 0) rotate(1deg) scale(1.014, .996); }
  76% { transform: translate3d(1px, -2px, 0) rotate(-.15deg) scale(1.006); }
}

.julie-runner-track {
  --julie-runner-x: -130px;
  position: fixed;
  z-index: 24;
  left: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
  width: 112px;
  height: 149px;
  pointer-events: none;
  transform: translate3d(var(--julie-runner-x), 0, 0);
  transition: opacity .25s ease;
  opacity: 0;
  filter: drop-shadow(0 10px 9px #0009) drop-shadow(0 0 8px var(--julie-accent, #ff9bad55));
  contain: layout paint style;
}

.julie-runner-track.is-ready { opacity: .96; }
.julie-runner-track[data-role="studio"] { --julie-accent:#55d9d077; }
.julie-runner-track[data-role="weather"] { --julie-accent:#61bfff77; }
.julie-runner-track[data-role="news"] { --julie-accent:#ff668b77; }
.julie-runner-track[data-role="learn"] { --julie-accent:#ffd06a77; }
.julie-runner-track[data-direction="left"] .julie-runner-sprite { transform: scaleX(-1); }
.julie-runner-sprite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("assets/julie-run-cycle-v1.webp");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  background-position: var(--julie-frame-x, 0%) var(--julie-frame-y, 0%);
  transform-origin: center bottom;
}

.julie-runner-track.is-running .julie-runner-sprite { animation: julie-run-lean .32s ease-in-out infinite alternate; }
.julie-runner-track.is-resting { width: 126px; height: 189px; }
.julie-runner-track.is-resting .julie-runner-sprite { opacity: 0; }
.julie-greeting { position:absolute; inset:0; opacity:0; transition:opacity .2s ease; }
.julie-runner-track.is-resting .julie-greeting { opacity:1; }
.julie-greeting img { display:none; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 9px 8px #0009); animation:julie-hello 1.25s ease-in-out infinite; transform-origin:50% 100%; }
.julie-context-portrait { display:block!important; }
.julie-hi { position:absolute; right:calc(100% - 12px); top:18px; width:max-content; max-width:min(230px,calc(100vw - 175px)); padding:8px 11px; border:1px solid var(--julie-accent,#ff8da0); border-radius:14px 14px 3px 14px; background:#0b101af2; color:#fff1f4; font:700 .7rem/1.35 var(--font-tech); letter-spacing:.025em; text-align:left; text-transform:none; box-shadow:0 5px 14px #0008; animation:julie-hi-pop 1.25s ease-in-out infinite; }

@keyframes julie-run-lean {
  from { translate: 0 1px; rotate: -.6deg; }
  to { translate: 0 -1px; rotate: .6deg; }
}

@keyframes julie-hello {
  0%,100% { transform:translateY(0) rotate(-.6deg); }
  45% { transform:translateY(-5px) rotate(1deg); }
  70% { transform:translateY(-2px) rotate(-.2deg); }
}

@keyframes julie-hi-pop {
  0%,100% { transform:scale(.94); opacity:.82; }
  45% { transform:scale(1.06); opacity:1; }
}

@media (max-width: 620px) {
  .julie-runner-track { width: 80px; height: 107px; bottom: 7px; }
  .julie-runner-track.is-resting { width: 92px; height: 138px; }
  .julie-hi { right:calc(100% - 8px); top:10px; max-width:calc(100vw - 118px); padding:7px 9px; font-size:.58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .julie-app-visual img,
  .julie-runner-track,
  .julie-runner-sprite,
  .julie-greeting img,
  .julie-hi { animation: none !important; transition: none !important; }
  .julie-runner-track { display: none; }
}

html[data-motion="paused"] .julie-app-visual img,
html[data-motion="paused"] .julie-runner-track,
html[data-motion="paused"] .julie-runner-sprite { animation-play-state: paused !important; }
html[data-motion="paused"] .julie-runner-track { display: none; }

@media print { .julie-runner-track { display: none !important; } }