/* Brief discovery cue for the console's AIStudio entry. */
.cw-header a.console-aistudio-link {
  position: relative;
  isolation: isolate;
  overflow: visible;
  animation: aistudio-entry-glow 3.5s ease-in-out 4;
}

.cw-header a.console-aistudio-link::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border: 1px solid #818cf8;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0;
  animation: aistudio-entry-ring 3.5s ease-out 4;
}

.cw-header a.console-aistudio-link::after {
  content: "↑ Click to create images & videos";
  position: absolute;
  inset-block-start: calc(100% + 12px);
  left: 50%;
  z-index: 50;
  width: max-content;
  max-width: min(260px, calc(100vw - 32px));
  padding: 9px 13px;
  border: 1px solid #a5b4fc;
  border-radius: 12px;
  background: #eef2ff;
  color: #312e81;
  box-shadow: 0 6px 20px #312e811f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  translate: -50% 0;
  animation: aistudio-guide-lifetime 14s ease both, aistudio-guide-nudge 2.5s ease-in-out 5;
}

html:lang(zh) .cw-header a.console-aistudio-link::after { content: "↑ 点击创作图片与视频"; }
html:lang(de) .cw-header a.console-aistudio-link::after { content: "↑ Klicken: Bilder & Videos erstellen"; }
html:lang(ru) .cw-header a.console-aistudio-link::after { content: "↑ Нажмите: создавайте изображения и видео"; }
html:lang(fr) .cw-header a.console-aistudio-link::after { content: "↑ Cliquez : créez des images et vidéos"; }
html:lang(es) .cw-header a.console-aistudio-link::after { content: "↑ Haz clic y crea imágenes y vídeos"; }
html:lang(pt) .cw-header a.console-aistudio-link::after { content: "↑ Clique e crie imagens e vídeos"; }
html:lang(ja) .cw-header a.console-aistudio-link::after { content: "↑ クリックして画像・動画を作成"; }
html:lang(ar) .cw-header a.console-aistudio-link::after { content: "↑ انقر لإنشاء الصور والفيديو"; }

.dark .cw-header a.console-aistudio-link::after {
  background: #1e1b4b;
  color: #e0e7ff;
  border-color: #6366f1;
}

.cw-header a.console-aistudio-link:focus,
.cw-header a.console-aistudio-link:active {
  animation: none;
}

.cw-header a.console-aistudio-link:focus::before,
.cw-header a.console-aistudio-link:focus::after,
.cw-header a.console-aistudio-link:active::before,
.cw-header a.console-aistudio-link:active::after {
  animation: none;
  opacity: 0;
}

@keyframes aistudio-entry-glow {
  0%, 100% { box-shadow: 0 3px 12px #4f46e530; }
  45% { box-shadow: 0 3px 18px #4f46e566, 0 0 0 4px #818cf81a; }
}

@keyframes aistudio-entry-ring {
  0%, 15% { opacity: 0; scale: 1; }
  30% { opacity: .5; }
  75%, 100% { opacity: 0; scale: 1.14 1.3; }
}

@keyframes aistudio-guide-lifetime {
  0%, 4%, 100% { opacity: 0; visibility: hidden; }
  9%, 91% { opacity: 1; visibility: visible; }
}

@keyframes aistudio-guide-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@media (max-width: 639px) {
  .cw-header a.console-aistudio-link::after {
    left: 0;
    translate: none;
    max-width: min(225px, calc(100vw - 48px));
  }
  html[dir="rtl"] .cw-header a.console-aistudio-link::after {
    left: auto;
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cw-header a.console-aistudio-link,
  .cw-header a.console-aistudio-link::before {
    animation: none;
  }
  .cw-header a.console-aistudio-link::after {
    transform: none;
    animation: aistudio-guide-lifetime 14s steps(1, end) both;
  }
}