.character-interactive {
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  transform-origin: 50% 80%;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  filter: drop-shadow(var(--shadow-x, 0px) 13px 12px #24371919);
  transition: transform .28s ease-out, filter .3s;
  -webkit-user-drag: none;
}
.character-interactive.character-in-view {
  animation: character-breathe 5s ease-in-out var(--idle-delay, 0s) infinite;
}
.character-interactive:focus-visible { outline: 2px dashed #467d36; outline-offset: 8px; border-radius: 24px; }
.about-picture:after { pointer-events: none; }
.meditate > img.character-interactive { animation-name: character-levitate; }
.hero-title { translate: var(--title-shift, 0px) 0; transition: translate .4s ease-out; }
.character-hint { position: absolute; left: 70%; top: 52%; width: 120px; font-size: 13px; letter-spacing: .04em; color: #727b6d; transform: rotate(-8deg); pointer-events: none; }
.character-reaction { position: fixed; z-index: 20; max-width: calc(100vw - 24px); padding: 12px 20px; border: 1px solid #cfe6c5; border-radius: 20px 20px 20px 5px; background: #f3ffeef5; backdrop-filter: blur(12px); color: #35502c; box-shadow: 0 8px 24px #36522414; font-size: 15px; line-height: 1.5; opacity: 0; translate: 0 8px; transition: opacity .2s, translate .25s; pointer-events: none; }
.character-reaction.is-visible { opacity: 1; translate: 0 0; }
.motion-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 9; padding: 10px 15px; min-height: 42px; border: 1px solid #e2e8df; border-radius: 30px; background: #fffffff0; backdrop-filter: blur(12px); color: #586451; font-size: 12px; box-shadow: 0 3px 16px #23321b0a; }
.motion-toggle:hover { background: #efffe7; }
.motion-toggle[hidden] { display: none; }
.project-card { transform: perspective(850px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .25s, box-shadow .25s; }
.project-card:hover { transform: perspective(850px) translateY(-5px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); box-shadow: 0 15px 24px #20351b20; }
.motion-paused .character-interactive { animation: none !important; transform: none; }
.motion-paused .project-card { transform: none; }
.motion-paused .hero-title { translate: 0 0; }
@keyframes character-breathe { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes character-levitate { 0%,100% { translate: 0 0; } 50% { translate: 0 -15px; } }
@media(max-width:760px) { .character-hint { left: 71%; top: 53%; width: 90px; font-size: 12px; } .motion-toggle { right: 12px; bottom: 12px; } }
@media(prefers-reduced-motion:reduce) { .character-interactive { animation:none!important; transform:none!important; } .project-card,.project-card:hover { transform:none; } .hero-title { translate:0 0; } .character-reaction { transition:none; } }

/* Identical halves ensure the end of each lap matches the next frame. */
.marquee-track{display:flex;width:max-content;animation:marquee-scroll 48s linear infinite;will-change:transform}
.marquee .marquee-group{display:block;flex:none;width:max-content;transform:none}
.motion-paused .marquee-track{animation-play-state:paused}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;will-change:auto}}