/* Shared motion system for every SEO landing page. */
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s cubic-bezier(.22, 1, .36, 1), transform .62s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.motion-ready .prompt-card.reveal { transform: translateY(20px) scale(.985); }
.motion-ready .prompt-card.reveal.is-visible { transform: translateY(0) scale(1); }
.feature-card, .use-grid > div, .button, .site-header nav a {
  transition-property: transform, border-color, background-color, color, box-shadow;
  transition-duration: .3s;
  transition-timing-function: ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #28282b1a; }
.button:active { transform: translateY(0) scale(.98); }
.prompt-send { transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.prompt-card:hover .prompt-send { transform: translateY(-3px); background: var(--blue); color: #fff; }
.use-grid > div:hover { transform: translateY(-2px); border-color: #d7d7dc; }
.faq-list { width: 100%; }
.faq-item { border-top: 1px solid var(--line); transition: background-color .3s ease; }
.faq-question {
  width: 100%;
  padding: 20px 2px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
  transition: color .25s ease;
}
.faq-question:hover { color: var(--blue); }
.faq-question i { position: relative; width: 20px; height: 20px; flex: 0 0 20px; border: 0; transform: none; }
.faq-question i::before, .faq-question i::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 12px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--blue);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}
.faq-question i::after { transform: rotate(90deg); }
.faq-item.active .faq-question i::after { transform: rotate(0); }
.faq-item.active .faq-question i { transform: none; }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .42s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
}
.faq-answer > div { min-height: 0; overflow: hidden; }
.faq-answer p { max-width: 680px; margin: 0; padding: 0 2px 20px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.faq-item.active { background: #fff; }
.faq-item.active .faq-answer { grid-template-rows: 1fr; opacity: 1; }
.faq-question:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-ready .reveal, .motion-ready .prompt-card.reveal { opacity: 1; transform: none; transition: none; }
  .feature-card, .use-grid > div, .button, .prompt-send, .faq-question i::after, .faq-answer { animation: none; transition: none; }
}
@media (max-width: 576px) {
  .motion-ready .storyboard article.reveal,
  .motion-ready .storyboard article:nth-child(even).reveal { transform: translateY(20px); }
  .motion-ready .storyboard article.reveal.is-visible { transform: translateY(0); }
}
@media (max-width: 576px) { .faq-question { font-size: 16px; } }
@media (max-width: 576px) {
  .motion-ready .storyboard article.reveal,
  .motion-ready .storyboard article:nth-child(even).reveal { transform: translateY(20px); }
  .motion-ready .storyboard article.reveal.is-visible { transform: translateY(0); }
}

/* Level 5: each intent has its own motion language. */
.motion-ready .slide-deck article.reveal { transform: translateY(28px) rotate(.8deg); }
.motion-ready .slide-deck article:nth-child(2).reveal { transform: translateY(28px) rotate(-.8deg); }
.motion-ready .slide-deck article.reveal.is-visible { transform: translateY(0) rotate(0); }
.slide-deck article:hover { transform: translateY(-5px); box-shadow: 0 14px 30px #28282b12; }
.slide-deck article span { transform-origin: left; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.slide-deck article:hover span { transform: scaleX(1.55); }

.motion-ready .visual-card.reveal { opacity: 0; transform: translateY(16px) scale(.975); clip-path: inset(12% 0 0 round 12px); }
.motion-ready .visual-card.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 round 12px); }
.visual-card { transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, filter .4s ease; }
.visual-card:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 18px 38px #1c1d2226; filter: saturate(1.08); }
.visual-card::after { content:''; position:absolute; inset:-40%; z-index:0; background:linear-gradient(105deg,transparent 42%,#ffffff26 50%,transparent 58%); transform:translateX(-65%); transition:transform .8s cubic-bezier(.22,1,.36,1); }
.visual-card:hover::after { transform:translateX(65%); }

.text-workspace { transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; }
.text-workspace:hover { transform: translateY(-3px); box-shadow: 0 18px 42px #00000012; }
.editor-body article { position: relative; }
.editor-body article::after { content:''; display:inline-block; width:1.5px; height:20px; margin-left:4px; vertical-align:-4px; background:var(--blue); animation:editor-caret 1s steps(1) infinite; }
.editor-suggestions span { transition: color .25s ease, border-color .25s ease, transform .25s ease; }
.editor-suggestions span:hover { color:var(--blue); border-color:#b9c9ff; transform:translateY(-2px); }
@keyframes editor-caret { 50% { opacity:0; } }

.music-studio.reveal.is-visible .waveform i { animation-play-state: running; }
.music-studio.reveal:not(.is-visible) .waveform i { animation-play-state: paused; }
.track-tags span { transition: transform .3s ease, border-color .3s ease, background-color .3s ease; }
.track-tags span:hover { transform:translateX(6px); border-color:#5076f2; background:#ffffff08; }
.waveform i { transition: background-color .3s ease, opacity .3s ease; }
.waveform:hover i { background:linear-gradient(180deg,#91a9ff,#5076f2); }

.motion-ready .storyboard article.reveal { transform: translateX(-24px); }
.motion-ready .storyboard article:nth-child(even).reveal { transform: translateX(24px); }
.motion-ready .storyboard article.reveal.is-visible { transform: translateX(0); }
.storyboard article { transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.storyboard article:hover { transform:translateY(-5px); box-shadow:0 16px 34px #28282b14; }
.storyboard article div i { transition: transform .4s cubic-bezier(.22,1,.36,1), background-color .3s ease; }
.storyboard article:hover div i { transform:scale(1.12); background:#ffffff33; }

.guide-grid article { position:relative; overflow:hidden; transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .3s ease; }
.guide-grid article::after { content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--blue); transition:width .55s cubic-bezier(.22,1,.36,1); }
.guide-grid article:hover { transform:translateY(-4px); border-color:#d8ddea; box-shadow:0 12px 28px #28282b0d; }
.guide-grid article:hover::after { width:100%; }

@media (prefers-reduced-motion: reduce) {
  .slide-deck article, .visual-card, .text-workspace, .editor-body article::after,
  .track-tags span, .waveform i, .storyboard article, .guide-grid article { animation:none!important; transition:none!important; transform:none!important; }
  .motion-ready .visual-card.reveal, .motion-ready .slide-deck article.reveal,
  .motion-ready .storyboard article.reveal { opacity:1; transform:none; clip-path:none; }
}
@media (max-width: 576px) {
  .motion-ready .storyboard article.reveal,
  .motion-ready .storyboard article:nth-child(even).reveal { transform: translateY(20px); }
  .motion-ready .storyboard article.reveal.is-visible { transform: translateY(0); }
}