/* Terp Burst motion: wobbling stickers, spinning burst, tumbling sugar cubes, bouncy reveals.
   Everything that moves is gated by html.tb-motion (added in <head> unless the visitor prefers reduced motion). */

.tb-cubes { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.tb-progress { position: absolute; left: 0; right: 0; bottom: -2.5px; height: 4px; background: var(--tb-red); transform-origin: left center; transform: scaleX(var(--tb-progress, 0)); pointer-events: none; }

.tb-band { overflow: hidden; padding: 22px 0; background: var(--tb-green); border-top: var(--tb-bw) solid var(--tb-ink); border-bottom: var(--tb-bw) solid var(--tb-ink); }
.tb-band__track { display: flex; width: max-content; }
.tb-band__group { display: flex; align-items: center; gap: 30px; padding-right: 30px; }
.tb-band__group span { font: 400 clamp(34px, 4.6vw, 64px)/1.1 var(--tb-display); text-transform: uppercase; white-space: nowrap; color: var(--tb-paper); -webkit-text-stroke: 2px var(--tb-ink); paint-order: stroke fill; }
.tb-band__group span.tb-band__outline { color: var(--tb-yellow); }
.tb-band .tb-star { width: 28px; height: 28px; color: var(--tb-paper); }

@keyframes tb-burst-spin { to { transform: rotate(360deg); } }
@keyframes tb-wobble { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-12px); } }
@keyframes tb-tag-bob-a { 0%, 100% { transform: rotate(12deg) translateY(0); } 50% { transform: rotate(18deg) translateY(-8px); } }
@keyframes tb-tag-bob-b { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-16deg) translateY(-10px); } }
@keyframes tb-band-move { to { transform: translateX(-50%); } }
@keyframes tb-jelly { 0% { transform: scale(1, 1); } 30% { transform: scale(1.18, .84); } 50% { transform: scale(.9, 1.1); } 70% { transform: scale(1.05, .96); } 100% { transform: scale(1, 1); } }
@keyframes tb-pop-in { from { opacity: 0; transform: scale(.4) rotate(-30deg); } to { opacity: 1; } }
@keyframes tb-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes tb-mark-swipe { from { transform: scaleX(0) rotate(-1.2deg); } to { transform: scaleX(1) rotate(-1.2deg); } }

/* Hero */
html.tb-motion .tb-hero__burst { animation: tb-burst-spin 40s linear infinite; }
html.tb-motion .tb-hero__bag { animation: tb-wobble 6s ease-in-out infinite; }
html.tb-motion .tb-tag--a { animation: tb-tag-bob-a 5s ease-in-out infinite; }
html.tb-motion .tb-tag--b { animation: tb-tag-bob-b 5.5s ease-in-out -2s infinite; }
html.tb-motion .tb-hero__copy > * { animation: tb-rise .9s cubic-bezier(.3, 1.3, .5, 1) both; }
html.tb-motion .tb-hero__copy > :nth-child(2) { animation-delay: .1s; }
html.tb-motion .tb-hero__copy > :nth-child(3) { animation-delay: .22s; }
html.tb-motion .tb-hero__copy > :nth-child(4) { animation-delay: .34s; }
html.tb-motion .tb-cube.is-jelly { animation: tb-jelly .55s ease; }

/* Band runs the other way to the marquee */
html.tb-motion .tb-band__track { animation: tb-band-move 34s linear infinite reverse; }
.tb-band:hover .tb-band__track { animation-play-state: paused; }

/* Highlighter swipes in when the heading reveals */
html.tb-motion .tb-reveal .tb-mark::after { transform: scaleX(0) rotate(-1.2deg); transform-origin: left; }
html.tb-motion .tb-reveal.is-in .tb-mark::after { animation: tb-mark-swipe .7s cubic-bezier(.3, 1.2, .5, 1) .35s both; }

/* Icons pop in */
html.tb-motion .tb-reveal .tb-feature__ico,
html.tb-motion .tb-reveal .tb-guide__marker,
html.tb-motion .tb-reveal .tb-steps__n,
html.tb-motion .tb-reveal .tb-points__ico { opacity: 0; }
html.tb-motion .tb-reveal.is-in .tb-feature__ico,
html.tb-motion .tb-reveal.is-in .tb-guide__marker,
html.tb-motion .tb-reveal.is-in .tb-steps__n,
html.tb-motion .tb-reveal.is-in .tb-points__ico { animation: tb-pop-in .6s cubic-bezier(.3, 1.6, .5, 1) calc(.15s + var(--tb-i, 0) * 70ms) both; }
html.tb-motion .tb-feature:hover .tb-feature__ico,
html.tb-motion .tb-points li:hover .tb-points__ico { animation: tb-jelly .55s ease; }

/* Collage stickers drift */
html.tb-motion .tb-collage__a { animation: tb-drift-a 9s ease-in-out infinite; }
html.tb-motion .tb-collage__b { animation: tb-drift-b 10s ease-in-out -3s infinite; }
html.tb-motion .tb-collage__c { animation: tb-drift-c 8s ease-in-out -5s infinite; }
@keyframes tb-drift-a { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(-3deg) translateY(-8px); } }
@keyframes tb-drift-b { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(8deg) translateY(-10px); } }
@keyframes tb-drift-c { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(0deg) translateY(-7px); } }

/* Logo jiggles on hover */
html.tb-motion .tb-logo:hover img { animation: tb-jelly .6s ease; }

@media (prefers-reduced-motion: reduce) {
	.tb-band__track { width: auto; justify-content: center; }
	.tb-band__group:nth-child(2) { display: none; }
	.tb-band__group { flex-wrap: wrap; justify-content: center; row-gap: 12px; padding: 0 16px; }
}