/* Keep the viewport colored while the first document frame is painted. */
html {
  background: var(--cloud, #f8f7fd);
}

/* Native same-origin document transitions preserve the outgoing frame until the
   destination is ready. The incoming frame stays fully opaque throughout. */
@view-transition {
  navigation: auto;
}

::view-transition {
  background: #251e3f;
}

/* The home hero already has its own long entrance sequence. During an
   internal navigation, show its artwork and supporting copy at full strength
   behind the curtain. The heading's character animation still restarts. */
html.pt-internal-entry .hero-copy > *,
html.pt-internal-entry .hero-visual {
  animation: none !important;
}

/* Direct returns start moving at the click. The same pastel field is held
   across documents until the home hero is ready to be revealed. */
@media (prefers-reduced-motion: no-preference) {
  html.pt-fallback-leave::after,
  html.pt-fallback-entry::after {
    content: 'ARCHERORA';
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    display: grid;
    place-items: center;
    color: #282041;
    font: 700 clamp(15px, 1.45vw, 21px)/1 DM, Arial, sans-serif;
    letter-spacing: .28em;
    background: radial-gradient(circle at 68% 38%, rgba(255,255,255,.55), transparent 28%),
      linear-gradient(115deg, #bad0f5 0%, #b5b4f6 38%, #d9b4ed 67%, #f5bfd5 100%);
  }
  html.pt-fallback-leave::after {
    animation: pt-home-cover 240ms cubic-bezier(.74, 0, .28, 1) both;
  }
  html.pt-fallback-entry::after {
    clip-path: inset(0);
  }
  html.pt-fallback-entry.pt-fallback-ready::after {
    animation: pt-home-reveal 380ms cubic-bezier(.18, .68, .16, 1) both;
  }
  @keyframes pt-home-cover {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
  }
  @keyframes pt-home-reveal {
    from { clip-path: inset(0); }
    to { clip-path: inset(0 0 0 100%); }
  }
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    z-index: 2;
    animation: pt-curtain-out 480ms cubic-bezier(.74, 0, .28, 1) both;
  }

  ::view-transition-new(root) {
    z-index: 1;
    animation: pt-settle-in 550ms cubic-bezier(.18, .68, .16, 1) both;
  }

  /* A clean reveal avoids the pale blended frame that opacity fades create
     when a dark inner page transitions back to the pastel home hero. */
  @keyframes pt-curtain-out {
    from { clip-path: inset(0 0 0 0); transform: translateX(0); }
    to { clip-path: inset(0 100% 0 0); transform: translateX(-1.8%); }
  }

  @keyframes pt-settle-in {
    from { transform: scale(1.018); }
    to { transform: scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .001ms !important;
  }
}