.fr-chai { position: fixed; left: 0; right: 0; bottom: 28px; z-index: 70; display: flex; align-items: center; gap: 16px; width: max-content; max-width: min(560px, calc(100vw - 32px)); margin: 0 auto; padding: 14px 22px 14px 18px; border-radius: 22px; background: #16151b; color: #f6f4f0; font-size: 15px; line-height: 1.45; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28); opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.5s var(--ease, cubic-bezier(0.22, 0.61, 0.2, 1)), transform 0.6s var(--ease, cubic-bezier(0.22, 0.61, 0.2, 1)); } .fr-chai.is-in { opacity: 1; transform: none; } .fr-chai .fr-chai-line a { white-space: nowrap; color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; } .fr-chai .fr-chai-line a::after { content: " \2192"; } .fr-chai-glass { position: relative; flex: none; width: 28px; height: 32px; margin-top: 8px; color: #f6f4f0; } .fr-chai-glass svg { display: block; } .fr-chai-tea { fill: #c9884f; transform-origin: 50% 100%; animation: fr-pour 1.1s var(--ease, cubic-bezier(0.22, 0.61, 0.2, 1)) both; } .fr-chai-glass i { position: absolute; bottom: 30px; left: calc(7px + var(--n) * 6px); width: 2px; height: 12px; border-radius: 2px; background: rgba(246, 244, 240, 0.7); opacity: 0; animation: fr-steam 2.2s calc(0.9s + var(--n) * 0.35s) ease-out infinite; } .fr-chai-glass i:nth-child(1) { --n: 0; } .fr-chai-glass i:nth-child(2) { --n: 1; } .fr-chai-glass i:nth-child(3) { --n: 2; } @keyframes fr-pour { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes fr-steam { 0% { opacity: 0; transform: translateY(4px) scaleY(0.6); } 30% { opacity: 0.8; } 100% { opacity: 0; transform: translate(3px, -14px) scaleY(1.2) rotate(8deg); } } @media (prefers-reduced-motion: reduce) { .fr-chai, .fr-chai.is-in { transition: none; transform: none; } .fr-chai-tea, .fr-chai-glass i { animation: none; } }