/* ToonsTranslate — tt-lively.css
   Adds motion to the landing page. Pair with tt-lively.js.
   Load it after app.css:  <link rel="stylesheet" href="/assets/css/tt-lively.css">
   Every color comes from the site's own variables, so dark and light themes just work. */

/* ---------- 1. Background: drifting speech balloons + screentone under the cursor ---------- */
.tt-sky {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  contain: strict;
}
/* halftone dots that only show around the cursor (desktop) */
.tt-tone {
  position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--brand) 55%, transparent) 1.3px, transparent 1.6px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(circle 240px at var(--tt-mx, -999px) var(--tt-my, -999px), #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
          mask-image: radial-gradient(circle 240px at var(--tt-mx, -999px) var(--tt-my, -999px), #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
  opacity: .55; transition: opacity .4s;
}
.tt-sky.is-idle .tt-tone { opacity: 0; }
/* balloons stay faint in the middle where the text is, and show more toward the edges */
.tt-flock {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .4) 28%, rgba(0, 0, 0, .4) 72%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .4) 28%, rgba(0, 0, 0, .4) 72%, #000 100%);
}

.tt-balloon {
  position: absolute; left: var(--x); top: 0;
  width: var(--w); aspect-ratio: 1.6;
  will-change: transform;
  animation: tt-rise var(--dur) linear var(--delay) infinite;
}
.tt-balloon-inner {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: color-mix(in srgb, var(--text) 12%, transparent);
  animation: tt-sway var(--sway) ease-in-out var(--delay) infinite alternate;
  transition: color .5s;
}
.tt-balloon.is-brand .tt-balloon-inner { color: color-mix(in srgb, var(--brand) 28%, transparent); }
.tt-balloon svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tt-balloon path { fill: color-mix(in srgb, var(--bg) 60%, transparent); stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.tt-balloon span {
  position: relative; top: -9%;
  font-family: var(--letter); font-weight: 700; font-size: calc(var(--w) * .13);
  letter-spacing: .02em; white-space: nowrap;
  transition: opacity .35s, filter .35s;
}
.tt-balloon span:lang(ja) { font-family: var(--jp); font-weight: 900; }
.tt-balloon span:lang(zh), .tt-balloon span:lang(ko), .tt-balloon span:lang(ar) { font-family: var(--body); font-weight: 700; }
/* the moment a balloon "gets translated" */
.tt-balloon.is-swapping span { opacity: 0; filter: blur(4px); }
.tt-balloon.is-lit .tt-balloon-inner { color: color-mix(in srgb, var(--brand) 70%, transparent); }
.tt-balloon.is-lit svg { animation: tt-pop .6s var(--ease); }

@keyframes tt-rise {
  from { transform: translate3d(0, 110vh, 0); }
  to   { transform: translate3d(0, calc(-1 * var(--w) - 40px), 0); }
}
@keyframes tt-sway {
  from { transform: translateX(calc(var(--drift) * -1)) rotate(calc(var(--tilt) * -1)); }
  to   { transform: translateX(var(--drift)) rotate(var(--tilt)); }
}
@keyframes tt-pop { 40% { transform: scale(1.12); } }
.tt-sky.is-paused .tt-balloon, .tt-sky.is-paused .tt-balloon-inner { animation-play-state: paused; }

/* ---------- 2. Hero demo plays by itself until the visitor touches it ---------- */
.demo.tt-autoplay .compare-handle { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 22%, transparent), 0 0 28px var(--glow); transition: box-shadow .4s; }

/* ---------- 3. Sections enter as you scroll ---------- */
html.tt-motion .tt-r { opacity: 0; translate: 0 28px; transition: opacity .7s var(--ease), translate .7s var(--ease); transition-delay: var(--d, 0s); }
html.tt-motion .tt-r.tt-in { opacity: 1; translate: 0 0; }
/* feature cards open like a comic panel, left to right */
html.tt-motion .feature384.tt-r { translate: 0 0; clip-path: inset(0 100% 0 0 round 18px); transition: clip-path .9s var(--ease), opacity .3s; transition-delay: var(--d, 0s); }
html.tt-motion .feature384.tt-r.tt-in { clip-path: inset(0 0 0 0 round 18px); }

/* the little illustrations play once when their card arrives, and again on hover */
.feature384.tt-in .lettering-preview span:first-child { animation: tt-wobble .7s var(--ease) calc(var(--d, 0s) + .5s) both; }
.feature384.tt-in .lettering-preview i { animation: tt-nudge 1.2s ease-in-out calc(var(--d, 0s) + .9s) 2; }
.feature384.tt-in .lettering-preview span:last-child { animation: tt-pop-in .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0s) + 1.1s) both; }
.feature384.tt-in .language-glyphs span { animation: tt-hop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.feature384.tt-in .language-glyphs span:nth-child(1) { animation-delay: calc(var(--d, 0s) + .5s); }
.feature384.tt-in .language-glyphs span:nth-child(2) { animation-delay: calc(var(--d, 0s) + .62s); }
.feature384.tt-in .language-glyphs span:nth-child(3) { animation-delay: calc(var(--d, 0s) + .74s); }
.feature384.tt-in .chapter-preview span, .feature384.tt-in .chapter-preview b { animation: tt-deal .55s var(--ease) both; }
.feature384.tt-in .chapter-preview :nth-child(1) { animation-delay: calc(var(--d, 0s) + .5s); }
.feature384.tt-in .chapter-preview :nth-child(2) { animation-delay: calc(var(--d, 0s) + .6s); }
.feature384.tt-in .chapter-preview :nth-child(3) { animation-delay: calc(var(--d, 0s) + .7s); }
.feature384.tt-in .chapter-preview :nth-child(4) { animation-delay: calc(var(--d, 0s) + .9s); }
.feature384.tt-reset * { animation: none !important; }
.feature384.tt-replay .lettering-preview span:last-child { animation: tt-pop-in .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.feature384.tt-replay .language-glyphs span { animation: tt-hop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.feature384.tt-replay .language-glyphs span:nth-child(2) { animation-delay: .08s; }
.feature384.tt-replay .language-glyphs span:nth-child(3) { animation-delay: .16s; }
.feature384.tt-replay .chapter-preview span, .feature384.tt-replay .chapter-preview b { animation: tt-deal .45s var(--ease) both; }
.feature384.tt-replay .chapter-preview :nth-child(2) { animation-delay: .07s; }
.feature384.tt-replay .chapter-preview :nth-child(3) { animation-delay: .14s; }
.feature384.tt-replay .chapter-preview :nth-child(4) { animation-delay: .24s; }

/* step numbers land with a small bounce */
.steps li.tt-in .step-n { animation: tt-pop-in .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0s) + .25s) both; }

/* "independent" transform properties keep the site's own rotate/translate on these elements */
@keyframes tt-wobble { 0%, 100% { rotate: 0deg; } 30% { rotate: -5deg; } 60% { rotate: 4deg; } }
@keyframes tt-nudge { 50% { translate: 6px 0; } }
@keyframes tt-pop-in { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes tt-hop { from { translate: 0 18px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes tt-deal { from { translate: -26px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }

/* ---------- 4. Small touches on hover ---------- */
.plan { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.plan:hover { transform: translateY(-6px); box-shadow: 0 26px 60px -24px var(--glow); }
.feature384 { transition: border-color .3s; }
.feature384:hover { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }

/* ---------- respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .tt-sky { display: none; }
  html.tt-motion .tt-r { opacity: 1; translate: none; clip-path: none; }
}