/* Liquid highlights stay inside live text: selectable, responsive and accessible. */
.fluid-heading { position: relative; isolation: isolate; }
.fluid-heading::before {
  content: ''; position: absolute; top: -19px; left: 2px; width: 42px; height: 2px;
  background: linear-gradient(90deg,#bbf6a3 0 70%,transparent 70% 81%,#bbf6a350 81%);
  pointer-events: none;
}
.fluid-heading::after {
  content: ''; position: absolute; right: 2px; top: -19px; width: 12px; height: 12px;
  border-top: 1px solid #bdedbd40; border-right: 1px solid #bdedbd40; pointer-events: none;
}
.chrome-ink {
  color: #e1e7e0;
  background-image:
    linear-gradient(108deg,transparent 34%,#f6ffe37a 42%,#fff 47%,#ddffe8 50%,#fff 53%,transparent 64%),
    linear-gradient(172deg,#f4fff0 5%,#a4b7ab 35%,#7e978a 48%,#e8fff0 52%,#c7decf 78%,#f4fff0);
  background-size: 240% 100%,100% 100%; background-position: 120% 50%,0 0;
  -webkit-background-clip: text; background-clip: text;
  animation: silver-current 4.6s ease-in-out infinite;
}
.fluid-heading .njfu-wordmark {
  position: relative; display: inline-block; background: none; color: #9be4aa;
  vertical-align: baseline; white-space: nowrap;
}
.liquid-ink {
  display: inline-block; position: relative;
  filter: drop-shadow(0 0 7px #68f3a14a) drop-shadow(0 0 22px #61ed941f);
}
.liquid-letter {
  display: inline-block; color: #9aefae; transform-origin: 50% 70%;
  background-color: #9bdcad;
  background-image: url('/assets/liquid-metal.svg?v=2');
  background-size: 260% 230%; background-position: 10% 10%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-stroke: .45px #d9ffca50;
  animation: emerald-current 3.6s ease-in-out infinite alternate,liquid-wave 3.6s ease-in-out infinite;
  animation-delay: calc(var(--letter-index) * -.34s),calc(var(--letter-index) * -.22s);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .chrome-ink, .liquid-letter { color: transparent; }
}
.wordmark-slice {
  position: absolute; inset: 0; color: #d9ffc5; opacity: 0; pointer-events: none;
  clip-path: polygon(0 40%,100% 40%,100% 54%,0 54%);
  text-shadow: -3px 0 #67ffdb,3px 0 #caff99;
  animation: signal-burst 6.4s steps(1,end) infinite;
}
.fluid-heading .njfu-wordmark::before {
  content: ''; position: absolute; inset: 18% -6% 4%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center,#73ffac30,transparent 67%);
  filter: blur(12px); transform-origin: center;
  animation: emerald-halo 3.6s ease-in-out infinite alternate;
}
/* Fine scan lines add a printed-screen finish without washing out the letters. */
.fluid-heading .njfu-wordmark::after {
  content: ''; position: absolute; inset: 12% 0 5%; opacity: .1; pointer-events: none;
  background: repeating-linear-gradient(0deg,transparent 0 3px,#0a110d 3px 4px);
  mix-blend-mode: multiply;
  animation: scan-drift 2s linear infinite;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .fluid-heading:hover .wordmark-slice { animation: signal-slice 620ms steps(1,end) 1; }
}
@keyframes silver-current {
  0%,8% { background-position: 120% 50%,0 0; }
  90%,100% { background-position: -100% 50%,0 0; }
}
@keyframes emerald-current {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 60%; }
  100% { background-position: 20% 100%; }
}
@keyframes liquid-wave {
  0%,100% { transform: translateY(.018em) skewX(-1deg); }
  45% { transform: translateY(-.065em) skewX(3deg); }
  75% { transform: translateY(.025em) skewX(-2deg); }
}
@keyframes emerald-halo {
  from { opacity: .45; transform: scaleX(.85); }
  to { opacity: 1; transform: scaleX(1.1); }
}
@keyframes scan-drift {
  from { background-position: 0 0; }
  to { background-position: 0 16px; }
}
@keyframes signal-burst {
  0%,86%,97%,100% { opacity: 0; transform: translateX(0); }
  88% { opacity: .72; transform: translateX(7px); }
  92% { opacity: .38; transform: translateX(-4px); }
  95% { opacity: .6; transform: translateX(2px); }
}
@keyframes signal-slice {
  0%,100% { opacity: 0; transform: translateX(0); }
  15% { opacity: .85; transform: translateX(8px); }
  32% { opacity: .45; transform: translateX(-5px); }
  58% { opacity: .65; transform: translateX(3px); }
  78% { opacity: 0; transform: translateX(0); }
}
/* The shared input picks up the same sharp, restrained hardware details. */
.composer { border-radius: 18px; background: linear-gradient(130deg,#1c1f21,#181a1d 70%); }
.composer::before {
  content: ''; position: absolute; top: -1px; left: 24px; width: 62px; height: 1px;
  background: #b8e9b29c; pointer-events: none;
}
.send-button { border-radius: 12px; }
.welcome .suggestion-card { border-radius: 9px; }
.intro-dialog.is-static .chrome-ink, .intro-dialog.is-static .liquid-letter,
.intro-dialog.is-static .wordmark-slice, .intro-dialog.is-static .njfu-wordmark::before,
.intro-dialog.is-static .njfu-wordmark::after { animation: none; }
.welcome-ghost .chrome-ink, .welcome-ghost .liquid-letter,
.welcome-ghost .wordmark-slice, .welcome-ghost .njfu-wordmark::before,
.welcome-ghost .njfu-wordmark::after { animation-play-state: paused; }
@media (max-width:760px) {
  .fluid-heading::before { top: -16px; width: 32px; }
  .fluid-heading::after { top: -16px; width: 9px; height: 9px; }
  .liquid-ink { filter: drop-shadow(0 0 8px #68f3a13d); }
  .liquid-letter { -webkit-text-stroke: 0; }
  .fluid-heading .njfu-wordmark::after { opacity: .07; }
}
@media (prefers-reduced-motion:reduce) {
  .chrome-ink, .liquid-letter, .wordmark-slice,
  .fluid-heading .njfu-wordmark::before, .fluid-heading .njfu-wordmark::after { animation: none !important; }
  .liquid-ink { filter: none; }
  .wordmark-slice { display: none; }
}