sliding modals, view transitions, accessibility, etc, etc

src/assets/css/main.scss

@@ -35,6 +35,31 @@ html {
   scroll-behavior: smooth;
 }
 
+/* --------------------------------------------------
+   View Transitions
+-------------------------------------------------- */
+@view-transition {
+  navigation: auto;
+}
+
+::view-transition-group(card-image) {
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+::view-transition-old(card-image),
+::view-transition-new(card-image) {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Optional: fade everything else */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 150ms;
+}
+
 /* --------------------------------------------------
    Layout
 -------------------------------------------------- */
@@ -159,6 +184,33 @@ html {
   }
 }
 
+.modal-nav-btn {
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1060; /* above modal backdrop (1050) */
+  background: rgba(255,255,255,0.1);
+  border: 1px solid rgba(255,255,255,0.2);
+  color: white;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s;
+  backdrop-filter: blur(4px);
+}
+.modal-nav-btn:hover { background: rgba(255,255,255,0.25); }
+.modal-nav-btn.d-none { display: none !important; }
+.modal-nav-prev { left: 12px; }
+.modal-nav-next { right: 12px; }
+
+@media (max-width: 768px) {
+  .modal-nav-btn { display: none !important; } /* use swipe on mobile */
+}
+
 /* --------------------------------------------------
    Navigation Tabs & Tier Colors
 -------------------------------------------------- */
@@ -218,7 +270,7 @@ $tiers: (
   }
 
   /* price-row alert left borders */
-  .nav-#{$name} div.alert-secondary {
+  .nav-#{$name} div.alert {
     border-left: 3px solid $color;
   }
 }
@@ -521,15 +573,75 @@ $tiers: (
 /* --------------------------------------------------
    Swipe Animation
 -------------------------------------------------- */
-@keyframes swipe-feedback {
-  0%   { transform: scale(1); }
-  50%  { transform: scale(0.95); }
-  100% { transform: scale(1); }
+
+/* Smooth the hero image morph */
+::view-transition-group(card-hero) {
+  animation-duration: 350ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Fade the old image out quickly so it doesn't ghost */
+::view-transition-old(card-hero) {
+  display: none;
+}
+
+/* Fade the new image in after it's in position */
+::view-transition-new(card-hero) {
+  animation-duration: 350ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Suppress the default full-page crossfade so only the card morphs */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+}
+
+/* Sliding out (old content) */
+::view-transition-old(.modal-content) {
+  animation: slide-out 200ms ease-in forwards;
+}
+
+/* Sliding in (new content) */
+::view-transition-new(.modal-content) {
+  animation: slide-in 200ms ease-out forwards;
+}
+
+/* Direction-aware — set via dataset.navDirection */
+#cardModal[data-nav-direction="next"]::view-transition-old(.modal-content) {
+  animation: slide-out-left 200ms ease-in forwards;
+}
+#cardModal[data-nav-direction="next"]::view-transition-new(.modal-content) {
+  animation: slide-in-right 200ms ease-out forwards;
+}
+#cardModal[data-nav-direction="prev"]::view-transition-old(.modal-content) {
+  animation: slide-out-right 200ms ease-in forwards;
+}
+#cardModal[data-nav-direction="prev"]::view-transition-new(.modal-content) {
+  animation: slide-in-left 200ms ease-out forwards;
+}
+
+/* The silhouette fades out while the colour image blooms in */
+
+::view-transition-old(pokemon-reveal) {
+  animation: 300ms ease-in both fade-to-white;
+}
+::view-transition-new(pokemon-reveal) {
+  animation: 500ms ease-out both bloom-in;
+}
+
+@keyframes fade-to-white {
+  to { opacity: 0; filter: brightness(3); }
+}
+
+@keyframes bloom-in {
+  from { opacity: 0; filter: brightness(2) saturate(0); transform: scale(0.95); }
+  to   { opacity: 1; filter: brightness(1) saturate(1); transform: scale(1); }
 }
 
 /* --------------------------------------------------
    Input Fix (Safari)
--------------------------------------------------- */
+
 input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   height: 1rem;
@@ -538,4 +650,5 @@ input[type="search"]::-webkit-search-cancel-button {
   background-repeat: no-repeat;
   background-size: 1rem;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
-}
+}
+-------------------------------------------------- */