/* Decorative two-second entrance. With reduced motion it is never displayed. */
.page-intro { display: none; }

@media (prefers-reduced-motion: no-preference) {
  :root {
    --entry-duration: 850ms;
    --entry-distance: 30px;
    --entry-easing: cubic-bezier(0.16, 1, 0.3, 1);
  }
  .page-intro {
    position: fixed; inset: 0; z-index: 100;
    display: grid; place-items: center; overflow: hidden; pointer-events: none;
    background-color: #0b3440;
    background-image:
      linear-gradient(rgba(230,245,240,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(230,245,240,.035) 1px, transparent 1px);
    background-size: 72px 72px;
    color: #f4f7f1;
    animation: afm-intro-curtain 1800ms cubic-bezier(.76,0,.24,1) forwards;
  }
  .page-intro-brand {
    width: min(70vw, 360px); text-align: center;
    animation: afm-intro-brand 1550ms both;
  }
  .page-intro-wordmark {
    position: relative; display: inline-block; padding-left: .07em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(84px, 18vw, 144px); font-weight: 400;
    line-height: 1; letter-spacing: .07em;
  }
  .page-intro-dot {
    position: absolute; top: 10%; right: -.07em;
    width: 7px; height: 7px; border-radius: 50%; background: #e6a375;
  }
  .page-intro-rule {
    position: relative; height: 1px; margin: 26px 0 23px;
    overflow: hidden; background: rgba(244,247,241,.2);
  }
  .page-intro-rule::after {
    content: ""; position: absolute; inset: 0;
    background: #e6a375; transform-origin: left;
    animation: afm-intro-scan 1000ms cubic-bezier(.22,.7,.25,1) 100ms both;
  }
  .page-intro-caption { margin: 0; font-family: var(--font-ui); }
  .page-intro-caption > span { display: block; }
  .page-intro-caption > [lang="zh-CN"] { font-size: 17px; letter-spacing: .18em; }
  .page-intro-caption > [lang="en"] { margin-top: 10px; font-size: 12px; letter-spacing: .08em; color: #b9d1d0; }

  @keyframes afm-intro-curtain {
    0%, 48% { transform: translate3d(0,0,0); visibility: visible; }
    100% { transform: translate3d(0,-100%,0); visibility: hidden; }
  }
  @keyframes afm-intro-brand {
    0% { opacity: 0; transform: translate3d(0,22px,0); }
    25%, 67% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translate3d(0,-24px,0); }
  }
  @keyframes afm-intro-scan {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  @keyframes afm-page-enter {
    from { opacity: 0; transform: translate3d(0,var(--entry-distance),0); }
    to { opacity: 1; transform: none; }
  }
  .topbar > div, .topbar > .mode-tabs, .topbar > .icon-button,
  .simulation-split > .view-panel, .side-panel, .charts > .chart-panel,
  .scan-imaging, .mode-guide {
    animation: afm-page-enter var(--entry-duration) var(--entry-easing) backwards;
  }
  .topbar > div { animation-delay: 850ms; }
  .topbar > .mode-tabs { animation-delay: 910ms; }
  .topbar > .icon-button { animation-delay: 940ms; }
  .simulation-split > .view-panel:first-child { animation-delay: 980ms; }
  .simulation-split > .view-panel:nth-child(2) { animation-delay: 1040ms; }
  .side-panel { animation-delay: 1070ms; }
  .charts > .chart-panel { animation-delay: 1100ms; }
  .scan-imaging { animation-delay: 1130ms; }
  .mode-guide { animation-delay: 1150ms; }

  /* Keyboard focus skips the decorative introduction without hiding controls. */
  body:has(.app :focus-visible) .page-intro { display: none; }
  .app :is(.topbar > div, .mode-tabs, .icon-button, .view-panel,
    .side-panel, .chart-panel, .scan-imaging, .mode-guide):focus-within { animation: none; }
  @media (max-width: 720px), (pointer: coarse) {
    :root { --entry-distance: 22px; }
    .page-intro-brand { width: min(70vw, 280px); }
    .page-intro-caption > [lang="zh-CN"] { font-size: 15px; }
    .page-intro-caption > [lang="en"] { font-size: 11px; }
  }
}