/* Small, decorative movement for B. Reading content keeps its position. */
.theme-b .collage-stage,
.theme-b .collage-float { position: relative; width: 100%; height: 100%; }
.theme-b .collage-stage {
  transform: translate3d(var(--play-x, 0px), var(--play-y, 0px), 0) rotate(var(--play-tilt, 0deg));
  transition: transform .65s cubic-bezier(.22, .75, .25, 1);
}
.theme-b .collage-float { animation: balance-float 7s ease-in-out infinite; }
.theme-b .hero-b .sticker { animation: balance-sticker 6.5s ease-in-out infinite; }
.theme-b .hero-b .tag-one { animation: balance-tag-one 7.5s ease-in-out infinite; }
.theme-b .hero-b .tag-two { animation: balance-tag-two 8s ease-in-out infinite; }
.theme-b .collage-float,
.theme-b .hero-b .sticker,
.theme-b .hero-b .tag { animation-play-state: paused; }
.theme-b .hero-b.play-in-view .collage-float,
.theme-b .hero-b.play-in-view .sticker,
.theme-b .hero-b.play-in-view .tag { animation-play-state: running; }
@keyframes balance-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes balance-sticker {
  0%, 100% { transform: translateY(0) rotate(9deg); }
  50% { transform: translateY(-3px) rotate(12deg); }
}
@keyframes balance-tag-one {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(-3deg); }
}
@keyframes balance-tag-two {
  0%, 100% { transform: rotate(5deg); }
  50% { transform: rotate(3deg); }
}
.theme-b .post-image { transition: transform .45s cubic-bezier(.22, .75, .25, 1), box-shadow .45s ease; }
.theme-b .post-link { transition: transform .3s ease; }
.theme-b .header nav a { position: relative; }
.theme-b .header nav a::after {
  content: ''; position: absolute; left: 3px; right: 3px; bottom: 4px;
  height: 2px; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .25s ease;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .theme-b .post:focus-visible .post-image { transform: translateY(-3px) rotate(-1deg); }
  html:not(.motion-off) .theme-b .header nav a:focus-visible::after { transform: scaleX(1); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .theme-b .post:hover .post-image {
    transform: translateY(-3px) rotate(-1deg); box-shadow: 0 9px 24px #34416f20;
  }
  html:not(.motion-off) .theme-b .post:nth-child(2):hover .post-image { transform: translateY(-3px) rotate(1deg); }
  html:not(.motion-off) .theme-b .post:hover .post-link { transform: translateX(3px); }
  html:not(.motion-off) .theme-b .button:hover { transform: translateY(-3px) scale(1.02); }
  html:not(.motion-off) .theme-b .header nav a:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .theme-b .button:active { transform: translateY(0) scale(.98); }
}
@media (hover: none), (pointer: coarse) {
  .theme-b .post:hover img, .theme-b .button:hover { transform: none; }
}
.theme-b .footer button:disabled { cursor: default; opacity: .7; }
@media (max-width: 800px) {
  .theme-b .collage-float { animation-name: balance-float-mobile; }
}
@keyframes balance-float-mobile {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
/* A stopped animation retains the original, deliberately tilted collage. */
.motion-off .theme-b .collage-stage,
.motion-off .theme-b .collage-float,
.motion-off .theme-b .post-image,
.motion-off .theme-b .post:hover img,
.motion-off .theme-b .post-link,
.motion-off .theme-b .button { transform: none !important; }
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .theme-b .collage-stage, .theme-b .collage-float, .theme-b .post-image,
  .theme-b .post:hover img, .theme-b .post-link, .theme-b .button { transform: none !important; }
  .theme-b *, .theme-b *::before, .theme-b *::after { animation: none !important; transition: none !important; }
}