@layer base {
  @view-transition {
    navigation: auto;
  }

  /* Default page transition: crossfade */
  ::view-transition-old(root) {
    animation: vt-fade-out 0.3s ease;
  }
  ::view-transition-new(root) {
    animation: vt-fade-in 0.3s ease;
  }

  /* Recipient image: quick cut — old out, new in, no overlap */
  ::view-transition-old(recipient-image) {
    animation: vt-fade-out 0.2s ease both;
  }
  ::view-transition-new(recipient-image) {
    animation: vt-fade-in 0.3s ease 0.2s both;
  }
  /* Prevent the browser from resizing/morphing the image container */
  ::view-transition-group(recipient-image) {
    animation: none;
    overflow: hidden;
  }

  /* Recipient details: directional slide + fade */
  /* Default direction (next / forward) */
  ::view-transition-old(recipient-details) {
    animation: vt-slide-out-left 0.35s ease both;
  }
  ::view-transition-new(recipient-details) {
    animation: vt-slide-in-right 0.4s ease 0.1s both;
  }

  /* Reverse direction (prev / back) */
  .vt-back::view-transition-old(recipient-details) {
    animation: vt-slide-out-right 0.35s ease both;
  }
  .vt-back::view-transition-new(recipient-details) {
    animation: vt-slide-in-left 0.4s ease 0.1s both;
  }

  @keyframes vt-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes vt-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes vt-slide-out-left {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-60px); }
  }
  @keyframes vt-slide-in-right {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes vt-slide-out-right {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(60px); }
  }
  @keyframes vt-slide-in-left {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
  }
}