/* Portrait-mobile behavior for the continuous financial memory loop. */

@media (max-width: 720px) and (orientation: portrait) {
  .analysisLoopNode {
    animation: analysisLoopNodeFocus 12s ease-in-out infinite;
    animation-delay: var(--loop-delay, 0s);
    animation-play-state: paused;
  }

  .analysisLoopNode::before {
    opacity: 0.48;
    animation: analysisMobileAccentPulse 12s ease-in-out infinite;
    animation-delay: var(--loop-delay, 0s);
    animation-play-state: paused;
  }

  .analysisLoopPanel.is-visible .analysisLoopNode,
  .analysisLoopPanel.is-visible .analysisLoopNode::before {
    animation-play-state: running;
  }

  .analysisLoopCore::before {
    transform-origin: center;
  }

  .analysisLoopPanel.is-visible .analysisLoopCore::before {
    animation: analysisMobileCorePulse 3.8s ease-in-out infinite;
  }

  html[lang="fi"] .analysisLoopCore {
    place-content: center;
    justify-items: center;
    padding: 18px 15px;
  }

  html[lang="fi"] .analysisLoopLogoFrame {
    justify-self: center;
    margin-inline: auto;
  }

  html[lang="fi"] .analysisLoopCore strong {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    justify-self: center;
    transform: translateX(3px);
  }
}

@keyframes analysisMobileAccentPulse {
  0%,
  5%,
  33%,
  100% {
    opacity: 0.42;
  }

  10%,
  25% {
    opacity: 1;
  }
}

@keyframes analysisMobileCorePulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.055);
  }
}

@media (prefers-reduced-motion: reduce) {
  .analysisLoopNode,
  .analysisLoopNode::before,
  .analysisLoopCore::before {
    animation: none !important;
  }
}