/* Home / Multilingual: a collage of greetings floating around Performy. One at a time, a language comes into focus
   and Performy detects it. Only message: "Any language. Automatically detected." Driven by assets/js/home-multilingual.js. Prefix: ml- */
.ml-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 1024px) { .ml-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; } }
.ml-visual { position: relative; width: 100%; height: 520px; }
@media (max-width: 767px) { .ml-visual { height: 440px; } }
.ml-visual::before { content: ""; position: absolute; left: 50%; top: 46%; width: 70%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(20,184,166,0.06), rgba(232,108,93,0.025) 45%, transparent 70%); pointer-events: none; }
.ml-link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.ml-link line { stroke: var(--color-p-teal); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .35s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease; }
.ml-link line.on { stroke-dashoffset: 0; opacity: .7; }

.ml-w { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); white-space: nowrap; z-index: 2; transition: left 1.8s ease-in-out, top 1.8s ease-in-out; }
.ml-wi { display: inline-block; font-family: var(--font-geist, inherit); font-size: var(--fs, 18px); font-weight: 700; letter-spacing: -0.01em; color: var(--color-p-text-secondary); opacity: .6; animation: ml-drift var(--d, 9s) ease-in-out infinite alternate; transition: color .35s ease, opacity .35s ease, transform .45s cubic-bezier(0.22, 1, 0.36, 1), text-shadow .45s ease; }
@keyframes ml-drift { from { translate: 0 0; } to { translate: var(--dx, 6px) var(--dy, -5px); } }
.ml-visual.has-focus .ml-w:not(.focus) .ml-wi { opacity: .25; }
.ml-w.focus { z-index: 4; }
.ml-w.focus .ml-wi { color: var(--color-p-text); opacity: 1; transform: scale(1.5); text-shadow: 0 0 26px rgba(20,184,166,0.6); }

.ml-center { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); z-index: 5; }
.ml-core { display: flex; align-items: center; justify-content: center; padding: 22px 26px; border-radius: 22px; background: var(--color-p-bg-secondary); border: 1px solid rgba(232,108,93,0.25); transition: border-color .4s ease, box-shadow .5s ease; }
.ml-core img { height: 36px; width: auto; }
.ml-core.on { border-color: rgba(20,184,166,0.55); box-shadow: 0 0 46px -6px rgba(20,184,166,0.5); }
.ml-detect { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--color-p-text); background: var(--color-p-bg-secondary); border: 1px solid rgba(20,184,166,0.5); opacity: 0; transition: opacity .3s ease, transform .3s ease; }
.ml-detect i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-p-success); box-shadow: 0 0 10px var(--color-p-success); }
.ml-detect b { color: var(--color-p-teal); font-weight: 800; }
.ml-detect.on { opacity: 1; transform: translate(-50%, 0); }
.ml-tag { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); margin: 0; z-index: 3; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--color-p-text); white-space: nowrap; }
.ml-tag em { font-style: normal; color: var(--color-p-teal); }
@media (max-width: 767px) {
    .ml-x { display: none; }
    .ml-wi { font-size: var(--fsm, 14px); }
    .ml-core { padding: 16px 20px; border-radius: 18px; } .ml-core img { height: 28px; }
    .ml-detect { font-size: 12px; padding: 7px 12px; }
    .ml-tag { font-size: 14px; white-space: normal; text-align: center; width: 92%; }
}
@media (prefers-reduced-motion: reduce) { .ml-wi { animation: none; } .ml-w { transition: none; } }